diff --git a/cms/static/sass/_developer.scss b/cms/static/sass/_developer.scss
index 30859b4094b3..f5c69e8e6b77 100644
--- a/cms/static/sass/_developer.scss
+++ b/cms/static/sass/_developer.scss
@@ -8,78 +8,3 @@
 // }
 
 // --------------------
-
-//.wrapper-xblock-header {
-
-.view-outline {
-
-  .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..84cd91407b9b 100644
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -160,6 +160,17 @@ $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-live: $blue;
+$color-ready: $green;
+$color-warning: $orange-l2;
+$color-error: $red-l2;
+$color-staff-only: $black;
+
+$color-heading-base: $gray-d2;
+$color-copy-base: $gray-l1;
+
 // ====================
 
 // timing - used for animation/transition mixin syncing
diff --git a/cms/static/sass/assets/_anims.scss b/cms/static/sass/assets/_anims.scss
index 4726776d3998..cf3f49e59bd2 100644
--- a/cms/static/sass/assets/_anims.scss
+++ b/cms/static/sass/assets/_anims.scss
@@ -247,3 +247,27 @@
 %anim-flashDouble {
   @include animation(flashDouble $tmg-f1 ease-in-out 1);
 }
+
+
+// ====================
+
+
+// pulse
+@include keyframes(pulse) {
+  0% {
+    opacity: 0.0;
+  }
+
+  50% {
+    opacity: 1.0;
+  }
+
+  100% {
+    opacity: 0.0;
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-pulse {
+  @include animation(pulse $tmg-f1 ease-in-out 1);
+}
diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss
index 163c128dfff2..f0f7179cb7e5 100644
--- a/cms/static/sass/elements/_controls.scss
+++ b/cms/static/sass/elements/_controls.scss
@@ -279,7 +279,7 @@
   }
 }
 
-// UI: elem is collapsible
+// UI: elem is collapsible - TODO: this should be transitioned away from in favor of %ui-expand-collapse
 %expand-collapse {
   @include transition(all $tmg-f2 linear 0s);
   display: inline-block;
@@ -305,6 +305,41 @@
   }
 }
 
+// UI: expand collapse
+%ui-expand-collapse {
+  @include transition(all $tmg-f2 linear 0s);
+
+
+  // CASE: default (is expanded)
+  .ui-toggle-expansion {
+    @include transition(all $tmg-f2 ease-in-out 0s);
+    display: inline-block;
+    vertical-align: middle;
+
+    .icon {
+      @include transition(all $tmg-f2 ease-in-out 0s);
+    }
+
+    // STATE: hover/active
+    &:hover, &:active {
+      cursor: pointer;
+      color: $ui-link-color-focus;
+    }
+  }
+
+  // CASE: is collapsed
+  &.is-collapsed {
+
+    .ui-toggle-expansion {
+
+      .icon {
+        @include transform(rotate(-90deg));
+        @include transform-origin(50% 50%);
+      }
+    }
+  }
+}
+
 // UI: drag handles
 .drag-handle {
 
diff --git a/cms/static/sass/elements/_layout.scss b/cms/static/sass/elements/_layout.scss
index cbf615836bc4..764af355521d 100644
--- a/cms/static/sass/elements/_layout.scss
+++ b/cms/static/sass/elements/_layout.scss
@@ -77,10 +77,18 @@
             vertical-align: baseline;
           }
 
-          &.new-button {
+          // CASE: new/create button
+          &.new-button,
+          &.button-new {
             @extend %btn-primary-green;
             @extend %sizing;
           }
+
+          // CASE: toggle button
+          &.button-toggle {
+            @extend %btn-secondary-gray;
+            @extend %sizing;
+          }
         }
       }
     }
diff --git a/cms/static/sass/elements/_modules.scss b/cms/static/sass/elements/_modules.scss
index 725caf5e47dd..4e97a5f665a2 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;
@@ -37,6 +38,7 @@
 }
 
 // blue bar and title bg version
+// --------------------
 %bar-module-blue {
   @extend %bar-module;
   border-top: 5px solid $blue;
@@ -47,6 +49,7 @@
 }
 
 // green bar and title bg version
+// --------------------
 %bar-module-green {
   @extend %bar-module;
   border-top: 5px solid $green;
@@ -57,6 +60,7 @@
 }
 
 // yellow bar and title bg version
+// --------------------
 %bar-module-yellow {
   @extend %bar-module;
   border-top: 5px solid $orange-l2;
@@ -67,6 +71,7 @@
 }
 
 // red bar and title bg version
+// --------------------
 %bar-module-red {
   @extend %bar-module;
   border-top: 5px solid $red-l2;
@@ -88,6 +93,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;
@@ -146,6 +152,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;
@@ -175,6 +182,7 @@
   }
 
   // individual menus
+  // --------------------
   .new-component-template {
     @include clearfix;
 
@@ -207,6 +215,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;
@@ -252,4 +261,281 @@
   }
 }
 
+// outline UI
+// --------------------
+
+// outline: utilities
+$outline-indent-width: $baseline;
+
+// UI: section
+%outline-section {
+  @include transition(border-left-width $tmg-f2 linear 0s, border-left-color $tmg-f2 linear 0s);
+  border-left: 1px solid $color-draft;
+
+  // STATE: is-collapsed
+  &.is-collapsed {
+    border-left-width: ($baseline/4);
+
+    // CASE: is ready to be live
+    &.is-ready {
+      border-left-color: $color-ready;
+    }
+
+    // CASE: is live
+    &.is-live {
+      border-left-color: $color-live;
+    }
+
+    // CASE: has staff-only content
+    &.is-staff-only {
+      border-left-color: $color-staff-only;
+    }
+
+    // CASE: has unpublished content
+    &.has-warnings {
+      border-left-color: $color-warning;
+    }
+
+    // CASE: has errors
+    &.has-errors {
+      border-left-color: $color-error;
+    }
+  }
+}
+
+// UI: subsection
+%outline-subsection {
+  @include transition(border-left-color $tmg-f2 linear 0s);
+  border-left: ($baseline/4) solid $color-draft;
+
+  // CASE: is ready to be live
+  &.is-ready {
+    border-left-color: $color-ready;
+  }
+
+  // CASE: is live
+  &.is-live {
+    border-left-color: $color-live;
+  }
+
+  // CASE: has staff-only content
+  &.is-staff-only {
+    border-left-color: $color-staff-only;
+  }
+
+  // CASE: has unpublished content
+  &.has-warnings {
+    border-left-color: $color-warning;
+  }
+
+  // CASE: has errors
+  &.has-errors {
+    border-left-color: $color-error;
+  }
+}
+
+%outline-item {
+
+  // UI: item title
+  .item-title {
+    @include transition(color $tmg-f2 ease-in-out 0s);
+  }
+
+  // CASE: last-child in UI
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  // CASE: has staff-only content
+  &.is-staff-only {
+
+    // needed to make sure direct children only
+    > .section-status,
+    > .subsection-status,
+    > .unit-status {
+
+      .icon {
+        color: $color-staff-only;
+      }
+    }
+  }
+
+  // CASE: has unpublished content
+  &.has-warnings {
+
+    // needed to make sure direct children only
+    > .section-status .status-message,
+    > .subsection-status .status-message,
+    > .unit-status .status-message {
+
+      .icon {
+        color: $color-warning;
+      }
+    }
+  }
+
+  // CASE: has errors
+  &.has-errors {
+
+    // needed to make sure direct children only
+    > .section-status .status-message,
+    > .subsection-status .status-message,
+    > .unit-status .status-message,
+    > .section-status .status-message-copy,
+    > .subsection-status .status-message-copy,
+    > .unit-status .status-message-copy {
+      color: $color-error;
+    }
+  }
+}
+
+%outline-item-status {
+  @extend %t-copy-sub2;
+  @extend %t-strong;
+  color: $color-copy-base;
+
+  .icon {
+    @extend %t-icon5;
+    margin-right: ($baseline/4);
+  }
+}
+
+// outline: sections
+.outline-section {
+  @extend %ui-window;
+  @extend %outline-item;
+  @extend %outline-section;
+  margin-bottom: $baseline;
+  padding: ($baseline*0.75) $baseline;
+
+  // header - title
+  .section-title {
+    @extend %t-title5;
+    @extend %t-strong;
+    color: $color-heading-base;
+  }
+
+  // status
+  .section-status {
+    @extend %outline-item-status;
+  }
+
+  // status - release
+  .status-release {
+    @include transition(opacity $tmg-f2 ease-in-out 0s);
+    opacity: 0.65;
+  }
+
+  // status - grading
+  .status-grading {
+    @include transition(opacity $tmg-f2 ease-in-out 0s);
+    opacity: 0.65;
+  }
+
+  .status-grading-value {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .status-grading-date {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: ($baseline/4);
+  }
+
+  // status - message
+  .status-message {
+    margin-top: ($baseline/2);
+    border-top: 1px solid $gray-l4;
+    padding-top: ($baseline/4);
+
+    .icon {
+      margin-right: ($baseline/4);
+    }
+  }
+
+  .status-message-copy {
+    display: inline-block;
+    color: $color-heading-base;
+  }
+
+  // STATE: hover/active
+  &:hover, &:active {
+
+    // status - release
+    > .section-status .status-release {
+      opacity: 1.0;
+    }
+  }
+}
+
+// outline: subsections
+.outline-subsection {
+  @extend %outline-item;
+  @extend %outline-subsection;
+  margin-bottom: ($baseline/2);
+  border: 1px solid $gray-l4;
+  border-left: ($baseline/4) solid $color-draft;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding: ($baseline*0.75);
+
+  // STATE: hover/active
+  &:hover, &:active {
+    box-shadow: 0 1px 1px $shadow-l2;
+  }
+
+  // STATE: is-collapsed
+  &.is-collapsed {
+
+  }
+
+  // header - title
+  .subsection-title {
+    @extend %t-title6;
+    color: $color-heading-base;
+  }
+
+  // status
+  .subsection-status {
+    @extend %outline-item-status;
+  }
+
+  // STATE: hover/active
+  &:hover, &:active {
+
+    // status - release
+    > .subsection-status .status-release {
+      opacity: 1.0;
+    }
+
+    // status - grading
+    > .subsection-status .status-grading {
+      opacity: 1.0;
+    }
+  }
+}
+
+// outline: units
+.outline-unit {
+  @extend %outline-item;
+  margin-bottom: ($baseline/2);
+  border: 1px solid $gray-l4;
+  padding: ($baseline/4) ($baseline/2);
+
+  // STATE: hover/active
+  &:hover, &:active {
+    box-shadow: 0 1px 1px $shadow-l2;
+  }
+
+  // header - title
+  .unit-title {
+    @extend %t-title7;
+    color: $color-heading-base;
+  }
+
+  .unit-status {
+    @extend %outline-item-status;
+  }
+}
 
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..e3f5ba202dc7 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -1,9 +1,25 @@
 // studio - views - course outline
 // ====================
 
+// view-specific utilities
+// --------------------
+%outline-item-header {
+  @include clearfix();
+  line-height: 0;
+}
+
+%outline-item-content-hidden {
+  display: none;
+}
+
+%outline-item-content-shown {
+  display: block;
+}
+
 .view-outline {
 
   // page structure
+  // --------------------
   .content-primary,
   .content-supplementary {
     @include box-sizing(border-box);
@@ -37,26 +53,39 @@
   }
 
 
-  // page header bits
-  .toggle-button-sections {
-    @extend %t-copy-sub2;
-    position: relative;
-    display: none;
-    float: right;
-    margin-top: ($baseline/4);
-    color: $gray-l1;
+  // page header
+  // --------------------
+  .button-toggle-expand-collapse {
+
+    // STATE: action will collapse all
+    &.collapse-all {
 
-    &.is-shown {
-      display: block;
+      .expand-all {
+        display: none;
+      }
+
+      .collapse-all {
+        display: block;
+      }
     }
 
-    .label {
-      display: inline-block;
+    // STATE: action will expand all
+    &.expand-all {
+
+      .collapse-all {
+        display: none;
+      }
+
+      .expand-all {
+        display: block;
+      }
     }
   }
 
+  // adding outline elements
+  // --------------------
 
-  // new section, subsection, unit
+  // forms
   .new-section-name,
   .new-subsection-name-input {
     @include font-size(16);
@@ -84,6 +113,7 @@
     color: $gray-l1;
   }
 
+  // buttons
   .new-subsection-item,
   .new-unit-item {
     @extend %ui-btn-flat-outline;
@@ -106,491 +136,260 @@
 
 
   // 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;
+  // outline
+  // --------------------
+  .outline {
 
-    .action {
-      min-width: ($baseline*.75);
-      color: $gray-l2;
+    // add/new items
+    .add-item {
+      margin-top: ($baseline*0.75);
 
-      &:hover,
-      &.is-set {
-        color: $blue;
-        visibility: visible;
-      }
+      .button-new {
+        @extend %ui-btn-flat-outline;
+        padding: ($baseline/2) $baseline;
+        display: block;
 
-      //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;
+        .icon {
+          display: inline-block;
+          vertical-align: middle;
+          margin-right: ($baseline/2);
+        }
       }
-
     }
-  }
 
+    .add-section {
+      margin-bottom: $baseline;
+    }
 
-  // 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;
+    .add-subsection {
 
-    &.collapsed {
-      padding-bottom: 0;
     }
 
-    &.collapsed .subsection-list,
-    .collapsed .subsection-list,
-    .collapsed > ol {
-        display: none !important;
+    .add-unit {
+      margin-left: $outline-indent-width;
     }
+  }
 
-    &.new-section {
-      padding: ($baseline*1.5) $baseline 0 $baseline;
-
-      header {
-        @include clearfix();
-        height: auto;
-        border-bottom: 0;
+  // outline: items
+  .outline-item {
 
-        .expand-collapse {
-          display: none;
-        }
+    // CASE: expand/collapse-able
+    &.is-collapsible {
 
-        .item-details {
-          width: auto;
+      // only select the current item's toggle expansion controls
+      &:nth-child(1) .ui-toggle-expansion, &:nth-child(1) .item-title {
 
-          .section-name {
-            float: none;
-            width: 100%;
-          }
+        // STATE: hover/active
+        &:hover, &:active {
+          color: $blue;
         }
       }
     }
 
-    .section {
-      @include clearfix();
-      min-height: 65px; // needed to align with edit input
-      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;
-          }
-        }
-
-        .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;
-          }
-        }
-      }
-
-
-      // section specific action styles
-      .item-actions {
-        position: relative;
-        display: inline-block;
-        float: right;
-        margin-bottom: ($baseline/2);
-        top: 0;
-      }
-
-      .actions-item {
-        padding: 0 0 0 8px;
-
-        &:last-child {
-          padding-right: 4px;
-        }
-
-        &.pubdate {
-          padding-right: 0;
-        }
-
-        .action {
-
-          &.pubdate {
-            visibility: hidden;
-          }
-
-          &:hover,
-          &.is-set {
-            color: $blue;
-            visibility: visible;
-          }
-        }
-
-        .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;
+    // item: title
+    .item-title {
 
-            strong {
-              font-weight: bold;
-            }
-          }
+      // STATE: is-editable
+      &.is-editable {
 
-          &.released .section-published-date {
-            background-color: transparent;
-            color: $gray-l1;
-
-            a {
-              color: $gray-l2;
+        // editor
+        + .editor {
+          display: block;
 
-              &:hover {
-                color: $blue;
-              }
-            }
+          .item-edit-title {
+            width: 100%;
           }
         }
       }
     }
   }
 
+  // outline: sections
+  // --------------------
+  .outline-section {
 
-  // subsection styles
-  .courseware-subsection {
-    @include clearfix();
-    padding: 3px 0;
-
-    &.visible {
-      border-left: 5px solid $green;
-    }
-
-    &.mixed {
-      border-left: 5px solid $yellow-s1;
-    }
-
-    .status {
-      @extend %cont-text-sr;
+    // header
+    .section-header {
+      @extend %outline-item-header;
     }
 
-    .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;
+    .section-header-details {
+      float: left;
+      width: flex-grid(6, 9);
 
-        .item-actions {
-          display: block;
-        }
+      .icon, .wrapper-section-title {
+        display: inline-block;
+        vertical-align: top;
       }
 
-      &.editing {
-        background: $orange-l4;
+      .icon {
+        margin-right: ($baseline/4);
       }
-    }
 
-    .details {
-      display: block;
-      margin-bottom: 0;
-      width: 600px;
-
-      a {
-        color: $baseFontColor;
+      .wrapper-section-title {
+        width: flex-grid(5, 6);
+        line-height: 0;
       }
     }
-  }
 
-  // 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;
+    .section-header-actions {
+      float: right;
+      width: flex-grid(3, 9);
+      margin-top: -($baseline/4);
       text-align: right;
-      font-weight: bold;
-      line-height: 16px;
-    }
 
-    .menu-toggle {
-      @extend %ui-depth1;
-      position: absolute;
-      top: 0;
-      right: 5px;
-      padding: 2px 5px;
-      color: $gray-l2;
-
-      &:hover,
-      &.is-active {
-        color: $blue;
-      }
-
-      &:focus {
-        outline: 0;
+      .actions-list {
+        @extend %actions-list;
+        @extend %t-action2;
       }
     }
 
+    // status
+    .section-status {
+      margin: 0 0 0 ($outline-indent-width*1.25);
+    }
 
-    // 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;
-        }
-      }
+    // content
+    .section-content {
+      @extend %outline-item-content-shown;
     }
 
-    // gradable dropdown state
-    &.is-active {
+    // CASE: is-collapsible
+    &.is-collapsible {
+      @extend %ui-expand-collapse;
 
-      .menu {
-        @extend %ui-depth3;
-        display: block;
-        opacity: 1.0;
-      }
-
-      .menu-toggle {
-        @extend %ui-depth4;
+      .ui-toggle-expansion {
+        @extend %t-icon3;
+        color: $gray-l3;
       }
     }
 
-    // set state
-    &.is-set {
+    // STATE: is-collapsed
+    &.is-collapsed {
 
-      .menu-toggle {
-        color: $blue;
-      }
-
-      .status-label {
-        display: block;
-        color: $blue;
+      .section-content {
+        @extend %outline-item-content-hidden;
       }
     }
   }
 
-  .courseware-subsection .sortable-unit-list {
-    margin: ($baseline/4) 0 0 0;
+  // outline: subsections
+  // --------------------
+  .list-subsections {
+    margin: $baseline 0 0 0;
   }
 
-  // unit styles
-  .courseware-unit {
-    margin: -1px 0 0 ($baseline*1.75);
+  .outline-subsection {
 
-    &.add-new-unit {
-      margin: 5px ($baseline*1.75) 0 ($baseline*1.75);
+    // header
+    .subsection-header {
+      @extend %outline-item-header;
     }
 
-    .section-item {
-      border: 0;
-      background-color: $white;
-    }
+    .subsection-header-details {
+      float: left;
+      width: flex-grid(6, 9);
 
-    .public-item {
-      color: $black;
-    }
+      .icon, .wrapper-subsection-title {
+        display: inline-block;
+        vertical-align: top;
+      }
 
-    .private-item {
-      color: $gray-l1;
-    }
+      .icon {
+        margin-right: ($baseline/4);
+      }
 
-    .draft-item {
-      color: $yellow-d1;
+      .wrapper-subsection-title {
+        width: flex-grid(5, 6);
+        margin-top: -($baseline/10);
+        line-height: 0;
+      }
     }
 
-    .draft-item:after,
-    .public-item:after,
-    .private-item:after {
-      @include font-size(9);
-      margin-left: 3px;
-      font-weight: 600;
-      text-transform: uppercase;
-    }
+    .subsection-header-actions {
+      float: right;
+      width: flex-grid(3, 9);
+      margin-top: -($baseline/4);
+      text-align: right;
 
-    .draft-item:after {
-      content: "- draft";
+      .actions-list {
+        @extend %actions-list;
+        @extend %t-action2;
+        margin-right: ($baseline/2);
+      }
     }
 
-    .private-item:after {
-      content: "- private";
+    // status
+    .subsection-status {
+      margin: 0 0 0 $outline-indent-width;
     }
-  }
-
 
-
-  // 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 */
+    // content
+    .subsection-content {
+      @extend %outline-item-content-shown;
     }
 
-    .modal-window {
-      -webkit-transform: translate(-50%, -50%);
-      transform: translate(-50%, -50%);
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      opacity: 0;
-    }
-  }
+    // CASE: is-collapsible
+    &.is-collapsible {
+      @extend %ui-expand-collapse;
 
-  // modal-window showing/hiding
-  &.modal-window-is-shown {
-    overflow: hidden;
+      .ui-toggle-expansion {
+        @extend %t-icon4;
+        color: $gray-l3;
+      }
+    }
 
-    .wrapper-modal-window.is-shown {
-      visibility: visible;
-      pointer-events: auto;
-      display: block;
+    // STATE: is-collapsed
+    &.is-collapsed {
 
-      .modal-window {
-        opacity: 1.0;
+      .subsection-content {
+        @extend %outline-item-content-hidden;
       }
     }
   }
 
-  .edit-section-publish-settings {
-
-    .picker {
-      @include clearfix();
+  // outline: units
+  // --------------------
+  .list-units {
+    margin: $baseline 0 0 0;
+  }
 
+  .outline-unit {
+    margin-left: $outline-indent-width;
 
-      .field {
-        float: left;
-        margin: 0 ($baseline/2) ($baseline/2);
+    // header
+    .unit-header {
+      @extend %outline-item-header;
+    }
 
-        label,
-        input {
-          display: block;
-          text-align: left;
-        }
+    .unit-header-details {
+      float: left;
+      width: flex-grid(6, 9);
+      margin-top: ($baseline/4);
+    }
 
-        label {
-          @extend %t-copy-sub1;
-          margin-bottom: ($baseline/4);
-          font-weight: 600;
-        }
+    .unit-header-actions {
+      float: right;
+      width: flex-grid(3, 9);
+      margin-top: -($baseline/10);
+      text-align: right;
 
-        input[type="text"] {
-          @extend %t-copy-sub1;
-        }
+      .actions-list {
+        @extend %actions-list;
+        @extend %t-action2;
       }
     }
   }
 
 
-
-  // UI: DnD - specific elems/cases - section
-  .courseware-section {
+  // UI: drag and drop: section
+  // --------------------
+  .outline-section {
 
     .draggable-drop-indicator-before {
       top: -($baseline/2);
@@ -613,8 +412,8 @@
     }
   }
 
-  // UI: DnD - specific elems/cases - subsection
-  .courseware-subsection {
+  // UI: drag and drop: subsection
+  .outline-subsection {
 
     .draggable-drop-indicator-before {
       top: 0;
@@ -638,8 +437,8 @@
     }
   }
 
-  // UI: DnD - specific elems/cases - unit
-  .courseware-unit {
+  // // UI: drag and drop: unit
+  .outline-unit {
 
     .draggable-drop-indicator-before {
       top: 0;
@@ -658,7 +457,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..41857bda0f53
--- /dev/null
+++ b/cms/templates/ux/reference/outline.html
@@ -0,0 +1,768 @@
+<%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="button button-toggle button-toggle-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 button-new" 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 button-view 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>
+
+                      <%include file="outline_add-unit.html" />
+
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection -->
+
+                    <!-- 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>
+
+                          <!-- unit -->
+                          <li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
+                            <%include file="outline_unit_header.html" />
+                          </li>
+
+                          <!-- unit -->
+                          <li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
+                            <%include file="outline_unit_header.html" />
+                          </li>
+
+                          <!-- unit -->
+                          <li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
+                            <%include file="outline_unit_header.html" />
+                          </li>
+                        </ol>
+                        <!-- /list: units -->
+
+                        <%include file="outline_add-unit.html" />
+
+                      </div>
+                      <!-- /subsection-content -->
+                    </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: published + scheduled -->
+              <li class="outline-item outline-section is-collapsible is-draggable is-ready 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-live 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-ready 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-live 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 is-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 unpublished content -->
+              <li class="outline-item outline-section is-collapsible is-draggable has-warnings 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 unpublished content -->
+
+              <!-- section: published + scheduled + has unpublished content -->
+              <li class="outline-item outline-section is-collapsible is-draggable has-warnings 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 unpublished content -->
+
+              <!-- section: published + released + has error -->
+              <li class="outline-item outline-section is-collapsible is-draggable 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 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-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-ready 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-ready 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-ready 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-ready 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-live 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-live 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 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-live 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-live 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-staff-only is-collapsed" data-parent="" data-locator="">
+
+                      <%include file="outline_subsection_header-collapsed.html" />
+
+                      <div class="subsection-status">
+                        <%include file="outline_status_release-lock.html" />
+                      </div>
+                      <!-- /subsection-status -->
+
+                      <div class="subsection-content">
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: locked content -->
+
+                    <!-- subsection: published + scheduled + has unpublished content -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable has-warnings 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 unpublished content -->
+
+                    <!-- subsection: published + released + has unpublished content -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable has-warnings 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 unpublished content -->
+
+                    <!-- subsection: published + released + has error -->
+                    <li class="outline-item outline-subsection is-collapsible is-draggable 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 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>
+                            <!-- /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">
+                              <%include file="outline_status_release-draft.html" />
+                            </div>
+                            <!-- /unit-status -->
+                          </li>
+                          <!-- /unit: not published -->
+
+                          <!-- unit: published -->
+                          <li class="outline-item outline-unit is-draggable" 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 unpublished content -->
+                          <li class="outline-item outline-unit is-draggable has-warnings" 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 unpublished content -->
+
+                          <!-- unit: not published + has unpublished content -->
+                          <li class="outline-item outline-unit is-draggable has-warnings" 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 unpublished content -->
+
+                          <!-- 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 -->
+
+                        <%include file="outline_add-unit.html" />
+
+                      </div>
+                      <!-- /subsection-content -->
+                    </li>
+                    <!-- /subsection: placeholder -->
+                  </ol>
+
+                  <%include file="outline_add-subsection.html" />
+
+                </div>
+              </li>
+              <!-- /section: placeholder -->
+            </ol>
+
+            <%include file="outline_add-section.html" />
+          </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..d45181db58f2
--- /dev/null
+++ b/cms/templates/ux/reference/outline_add-section.html
@@ -0,0 +1,6 @@
+<div class="add-section add-item">
+  <a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Section">
+    <i class="icon 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..551cf5ff3108
--- /dev/null
+++ b/cms/templates/ux/reference/outline_add-subsection.html
@@ -0,0 +1,6 @@
+<div class="add-subsection add-item">
+  <a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Subsection">
+    <i class="icon 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..0541071e0d05
--- /dev/null
+++ b/cms/templates/ux/reference/outline_add-unit.html
@@ -0,0 +1,6 @@
+<div class="add-unit add-item">
+  <a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Unit">
+    <i class="icon 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..83956f5b029d
--- /dev/null
+++ b/cms/templates/ux/reference/outline_section_header-collapsed.html
@@ -0,0 +1,36 @@
+<div class="section-header">
+  <h3 class="section-header-details ui-toggle-expansion" title="Collapse/Expand this Section">
+    <i class="icon-caret-down icon"></i>
+    <span class="wrapper-section-title is-editable wrapper-xblock-field">
+      <span class="section-title item-title xblock-field-value">Section Title</span>
+    </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 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 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 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..83956f5b029d
--- /dev/null
+++ b/cms/templates/ux/reference/outline_section_header-expanded.html
@@ -0,0 +1,36 @@
+<div class="section-header">
+  <h3 class="section-header-details ui-toggle-expansion" title="Collapse/Expand this Section">
+    <i class="icon-caret-down icon"></i>
+    <span class="wrapper-section-title is-editable wrapper-xblock-field">
+      <span class="section-title item-title xblock-field-value">Section Title</span>
+    </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 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 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 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..57794030e9bb
--- /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 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..365799f429b8
--- /dev/null
+++ b/cms/templates/ux/reference/outline_status_message-error.html
@@ -0,0 +1,4 @@
+<div class="status-message">
+  <i class="icon 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..8a06c0d346c1
--- /dev/null
+++ b/cms/templates/ux/reference/outline_status_message-lock.html
@@ -0,0 +1,4 @@
+<div class="status-message">
+  <i class="icon 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..ac6a752bc0f0
--- /dev/null
+++ b/cms/templates/ux/reference/outline_status_message-unpublished_changes.html
@@ -0,0 +1,4 @@
+<div class="status-message">
+  <i class="icon icon-file-alt"></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..cab479da3e3b
--- /dev/null
+++ b/cms/templates/ux/reference/outline_status_message-unpublished_units.html
@@ -0,0 +1,4 @@
+<div class="status-message">
+  <i class="icon icon-file-alt"></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..02304355abae
--- /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 icon-file-alt"></i>
+      <span class="sr">This item 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..0f6d08268fd4
--- /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 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..d6eb3dc91bf1
--- /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 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..c06f01819192
--- /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 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..e6b62df57be8
--- /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 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..e5ae050b3d8c
--- /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 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..c51e69520d2c
--- /dev/null
+++ b/cms/templates/ux/reference/outline_subsection_header-collapsed.html
@@ -0,0 +1,42 @@
+<div class="subsection-header">
+  <h3 class="subsection-header-details ui-toggle-expansion" title="Collapse/Expand this Subsection">
+    <i class="icon-caret-down icon"></i>
+    <span class="wrapper-subsection-title is-editable wrapper-xblock-field">
+      <span class="subsection-title item-title xblock-field-value">Subsection Title</span>
+
+      <!-- editor-title -->
+      <span class="editor">
+        <label class="sr" for="subsection-title_ID">Rename Subsection Name</label>
+        <input class="item-edit-title is-hidden" id="section-title_ID" type="text" value="" data-metadata-name="" />
+      </span>
+      <!-- /editor-title -->
+    </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 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 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 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..c51e69520d2c
--- /dev/null
+++ b/cms/templates/ux/reference/outline_subsection_header-expanded.html
@@ -0,0 +1,42 @@
+<div class="subsection-header">
+  <h3 class="subsection-header-details ui-toggle-expansion" title="Collapse/Expand this Subsection">
+    <i class="icon-caret-down icon"></i>
+    <span class="wrapper-subsection-title is-editable wrapper-xblock-field">
+      <span class="subsection-title item-title xblock-field-value">Subsection Title</span>
+
+      <!-- editor-title -->
+      <span class="editor">
+        <label class="sr" for="subsection-title_ID">Rename Subsection Name</label>
+        <input class="item-edit-title is-hidden" id="section-title_ID" type="text" value="" data-metadata-name="" />
+      </span>
+      <!-- /editor-title -->
+    </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 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 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 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..7487c56a4695
--- /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 item-title"><a class="unit-url" href="">Unit Name</a></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 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 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 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 2f24de41a3c2..d0366485f81c 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -90,11 +90,16 @@
 // extends - UI - window
 %ui-window {
   @include clearfix();
-  border-radius: 3px;
-  box-shadow: 0 1px 1px $shadow-l1;
+  border-radius: ($baseline/10);
+  box-shadow: 0 1px 1px $shadow-l2;
   margin-bottom: $baseline;
   border: 1px solid $gray-l2;
   background: $white;
+
+  // STATE: hover/active
+  &:hover, &:active {
+    box-shadow: 0 1px 1px $shadow;
+  }
 }
 
 // extends - UI - visual link
@@ -226,7 +231,6 @@
   border-radius: ($baseline/4);
   border: 1px solid $blue-l2;
   padding: 1px ($baseline/2) 2px ($baseline/2);
-  background-color: $white;
   color: $blue-l2;
 
   &:hover, &:focus {