diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 4a20a98eb3..054a401e4b 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -576,7 +576,7 @@ p, ul, ol, dl {
 
 // misc
 hr.divide {
-  @extend .text-sr;
+  @extend .cont-text-sr;
 }
 
 .item-details {
@@ -824,7 +824,7 @@ hr.divide {
 
 // basic utility
 .sr {
-  @extend .text-sr;
+  @extend .cont-text-sr;
 }
 
 .fake-link {
@@ -877,7 +877,7 @@ body.js {
       text-align: center;
 
       .label {
-        @extend .text-sr;
+        @extend .cont-text-sr;
       }
 
       [class^="icon-"] {
diff --git a/cms/static/sass/_mixins-inherited.scss b/cms/static/sass/_mixins-inherited.scss
deleted file mode 120000
index f64a720561..0000000000
--- a/cms/static/sass/_mixins-inherited.scss
+++ /dev/null
@@ -1 +0,0 @@
-../../../common/static/sass/_mixins-inherited.scss
\ No newline at end of file
diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss
index 6859560361..226603b81d 100644
--- a/cms/static/sass/elements/_controls.scss
+++ b/cms/static/sass/elements/_controls.scss
@@ -3,7 +3,7 @@
 
 // gray primary button
 .btn-primary-gray {
-  @extend .btn-primary;
+  @extend .ui-btn-primary;
   background: $gray-l1;
   border-color: $gray-l2;
   color: $white;
@@ -25,7 +25,7 @@
 
 // blue primary button
 .btn-primary-blue {
-  @extend .btn-primary;
+  @extend .ui-btn-primary;
   background: $blue;
   border-color: $blue-s1;
   color: $white;
@@ -48,7 +48,7 @@
 
 // green primary button
 .btn-primary-green {
-  @extend .btn-primary;
+  @extend .ui-btn-primary;
   background: $green;
   border-color: $green;
   color: $white;
@@ -71,7 +71,7 @@
 
 // gray secondary button
 .btn-secondary-gray {
-  @extend .btn-secondary;
+  @extend .ui-btn-secondary;
   border-color: $gray-l3;
   color: $gray-l1;
 
@@ -92,7 +92,7 @@
 
 // blue secondary button
 .btn-secondary-blue {
-  @extend .btn-secondary;
+  @extend .ui-btn-secondary;
   border-color: $blue-l3;
   color: $blue;
 
@@ -114,7 +114,7 @@
 
 // green secondary button
 .btn-secondary-green {
-  @extend .btn-secondary;
+  @extend .ui-btn-secondary;
   border-color: $green-l4;
   color: $green-l2;
 
@@ -148,9 +148,9 @@
 // ====================
 
 // simple dropdown button styling - should we move this elsewhere?
-.btn-dd {
-  @extend .btn;
-  @extend .btn-pill;
+.ui-btn-dd {
+  @extend .ui-btn;
+  @extend .ui-btn-pill;
   padding:($baseline/4) ($baseline/2);
   border-width: 1px;
   border-style: solid;
@@ -158,7 +158,7 @@
   text-align: center;
 
   &:hover, &:active {
-    @extend .fake-link;
+    @extend .ui-fake-link;
     border-color: $gray-l3;
   }
 
@@ -169,8 +169,8 @@
 }
 
 // layout-based buttons - nav dd
-.btn-dd-nav-primary {
-  @extend .btn-dd;
+.ui-btn-dd-nav-primary {
+  @extend .ui-btn-dd;
   background: $white;
   border-color: $white;
   color: $gray-d1;
diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss
index fc430ed6a1..56b2a0f061 100644
--- a/cms/static/sass/elements/_header.scss
+++ b/cms/static/sass/elements/_header.scss
@@ -2,10 +2,10 @@
 // ====================
 
 .wrapper-header {
-  @extend .depth3;
-  box-shadow: 0 1px 2px 0 $shadow-l1;
+  @extend .ui-depth3;
   position: relative;
   width: 100%;
+  box-shadow: 0 1px 2px 0 $shadow-l1;
   margin: 0;
   padding: 0 $baseline;
   background: $white;
@@ -22,7 +22,6 @@
   // ====================
 
   // basic layout
-
   .wrapper-l, .wrapper-r {
     background: $white;
   }
@@ -76,7 +75,7 @@
 
     .title {
       @extend .t-action2;
-      @extend .btn-dd-nav-primary;
+      @extend .ui-btn-dd-nav-primary;
       @include transition(all $tmg-f2 ease-in-out 0s);
 
       .label, .icon-caret-down {
diff --git a/cms/static/sass/elements/_modal.scss b/cms/static/sass/elements/_modal.scss
index fd60e690e7..72c2d93734 100644
--- a/cms/static/sass/elements/_modal.scss
+++ b/cms/static/sass/elements/_modal.scss
@@ -2,7 +2,7 @@
 // ====================
 
 .modal-cover {
-	@extend .depth3;
+	@extend .ui-depth3;
 	display: none;
 	position: fixed;
 	top: 0;
@@ -13,7 +13,7 @@
 }
 
 .modal {
-	@extend .depth4;
+	@extend .ui-depth4;
 	display: none;
 	position: fixed;
 	top: 60px;
@@ -61,7 +61,7 @@
 
 // lean modal alternative
 #lean_overlay {
-	@extend .depth4;
+	@extend .ui-depth4;
 	position: fixed;
 	top: 0px;
 	left: 0px;
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
index e118d231ef..d05965d83c 100644
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -5,7 +5,7 @@
 nav {
 
   ol, ul {
-    @extend .no-list;
+    @extend .cont-no-list;
   }
 
   .nav-item {
diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss
index 99829f7106..ff79cb10ef 100644
--- a/cms/static/sass/elements/_sock.scss
+++ b/cms/static/sass/elements/_sock.scss
@@ -10,7 +10,7 @@
 
   .wrapper-inner {
     @include linear-gradient($gray-d3 0%, $gray-d3 98%, $black 100%);
-    @extend .depth0;
+    @extend .ui-depth0;
     display: none;
     width: 100% !important;
     border-bottom: 1px solid $white;
@@ -19,7 +19,7 @@
 
   // sock - actions
   .list-cta {
-    @extend .depth1;
+    @extend .ui-depth1;
     position: absolute;
     top: -($baseline*0.75);
     width: 100%;
@@ -27,7 +27,7 @@
     text-align: center;
 
     .cta-show-sock {
-      @extend .btn-pill;
+      @extend .ui-btn-pill;
       @extend .t-action4;
       background: $gray-l5;
       padding: ($baseline/2) $baseline;
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index 5022a9f677..be1b41bf29 100644
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -144,8 +144,8 @@
 
 // prompts
 .wrapper-prompt {
-  @extend .depth5;
-  @include transition(all $tmg-f3 ease-in-out 0s);
+  @extend .ui-depth5;
+  @include transition(all $tmg-f3 ease-in-out  0s);
   position: fixed;
   top: 0;
   background: $black-t0;
@@ -242,7 +242,7 @@
 
 // notifications
 .wrapper-notification {
-  @extend .depth5;
+  @extend .ui-depth5;
   @include clearfix();
   box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $blue;
   position: fixed;
@@ -444,7 +444,7 @@
     }
 
     .copy p {
-      @extend .text-sr;
+      @extend .cont-text-sr;
     }
   }
 }
@@ -453,7 +453,7 @@
 
 // alerts
 .wrapper-alert {
-  @extend .depth2;
+  @extend .ui-depth2;
   @include box-sizing(border-box);
   box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
   position: relative;
@@ -599,7 +599,7 @@
     text-align: center;
 
     .label {
-      @extend .text-sr;
+      @extend .cont-text-sr;
     }
 
     [class^="icon"] {
@@ -696,7 +696,7 @@ body.uxdesign.alerts {
   }
 
   .content-primary {
-    @extend .window;
+    @extend .ui-window;
     width: flex-grid(12, 12);
     margin-right: flex-gutter();
     padding: $baseline ($baseline*1.5);
diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss
index 3f98765216..f2e134c32e 100644
--- a/cms/static/sass/views/_checklists.scss
+++ b/cms/static/sass/views/_checklists.scss
@@ -14,7 +14,7 @@ body.course.checklists {
 
   // checklists - general
   .course-checklist {
-    @extend .window;
+    @extend .ui-window;
     margin: 0 0 ($baseline*2) 0;
 
     &:last-child {
@@ -23,7 +23,7 @@ body.course.checklists {
 
     // visual status
     .viz-checklist-status {
-      @extend .text-hide;
+      @extend .cont-text-hide;
       @include size(100%,($baseline/4));
       position: relative;
       display: block;
@@ -40,7 +40,7 @@ body.course.checklists {
         background: $green;
 
         .int {
-          @extend .text-sr;
+          @extend .cont-text-sr;
         }
       }
     }
diff --git a/cms/static/sass/views/_export.scss b/cms/static/sass/views/_export.scss
index 933bb50252..954fe7fc81 100644
--- a/cms/static/sass/views/_export.scss
+++ b/cms/static/sass/views/_export.scss
@@ -2,9 +2,9 @@
 // ====================
 
 body.course.export {
-  
+
   .export-overview {
-    @extend .window;
+    @extend .ui-window;
     @include clearfix;
     padding: 30px 40px;
   }
@@ -40,7 +40,7 @@ body.course.export {
   }
 
   .export-form-wrapper {
-  
+
     .export-form {
       float: left;
       width: 35%;
@@ -122,4 +122,4 @@ body.course.export {
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/cms/static/sass/views/_import.scss b/cms/static/sass/views/_import.scss
index e5fb955348..1f9c62d917 100644
--- a/cms/static/sass/views/_import.scss
+++ b/cms/static/sass/views/_import.scss
@@ -2,9 +2,9 @@
 // ====================
 
 body.course.import {
-  
+
   .import-overview {
-    @extend .window;
+    @extend .ui-window;
     @include clearfix;
     padding: 30px 40px;
   }
@@ -103,4 +103,4 @@ body.course.import {
     color: #fff;
     line-height: 48px;
   }
-}
\ No newline at end of file
+}
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index 2fc06f9df9..1430c41368 100644
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -9,7 +9,7 @@ body.course.settings {
   }
 
   .content-primary {
-    @extend .window;
+    @extend .ui-window;
     width: flex-grid(9, 12);
     margin-right: flex-gutter();
     padding: $baseline ($baseline*1.5);
diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
index c62979ebc8..2bcf13441e 100644
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -171,7 +171,7 @@ body.course.static-pages {
   }
 
   .static-page-details {
-    @extend .window;
+    @extend .ui-window;
     padding: 32px 40px;
 
     .row {
diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss
index ab2599581f..8d2b2d9489 100644
--- a/cms/static/sass/views/_textbooks.scss
+++ b/cms/static/sass/views/_textbooks.scss
@@ -115,7 +115,7 @@ body.course.textbooks {
             }
 
             .delete {
-              @extend .btn-non;
+              @extend .ui-btn-non;
             }
           }
 
@@ -188,7 +188,7 @@ body.course.textbooks {
 
       .chapters-fields,
       .textbook-fields {
-        @extend .no-list;
+        @extend .cont-no-list;
 
         .field {
           margin: 0 0 ($baseline*0.75) 0;
@@ -320,7 +320,7 @@ body.course.textbooks {
             }
 
             .action-upload {
-                @extend .btn-flat-outline;
+                @extend .ui-btn-flat-outline;
                 position: absolute;
                 top: 3px;
                 right: 0;
@@ -348,7 +348,7 @@ body.course.textbooks {
 
 
       .action-add-chapter {
-        @extend .btn-flat-outline;
+        @extend .ui-btn-flat-outline;
         @include font-size(16);
         display: block;
         width: 100%;
@@ -365,7 +365,7 @@ body.course.textbooks {
 
  // dialog
 .wrapper-dialog {
-  @extend .depth5;
+  @extend .ui-depth5;
   @include transition(all 0.05s ease-in-out);
   position: fixed;
   top: 0;
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 64248734c3..d3ead53b25 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -26,7 +26,6 @@
   @include size($size);
 }
 
-
 // ====================
 
 // mixins - placeholder styling
@@ -44,78 +43,45 @@
 
 // ====================
 
-// extends - layout
-
-// used for page/view-level wrappers (for centering/grids)
-.wrapper {
+// extends - UI - used for page/view-level wrappers (for centering/grids)
+.ui-wrapper {
   @include clearfix();
   @include box-sizing(border-box);
   width: 100%;
 }
 
-// removes list styling/spacing when using uls, ols for navigation and less content-centric cases
-.no-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  text-indent: 0;
-
-  li {
-    margin: 0;
-    padding: 0;
-  }
+// extends - UI - window
+.ui-window {
+  @include clearfix();
+  border-radius: 3px;
+  box-shadow: 0 1px 1px $shadow-l1;
+  margin-bottom: $baseline;
+  border: 1px solid $gray-l2;
+  background: $white;
 }
 
-// extends - image-replacement hidden text
-.text-hide {
-  text-indent: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-// extends - hidden elems - screenreaders
-.text-sr {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-// extends - wrapping
-.text-wrap {
-  text-wrap: wrap;
-  white-space: pre-wrap;
-  white-space: -moz-pre-wrap;
-  word-wrap: break-word;
-}
-
-// extends - visual link
-.fake-link {
+// extends - UI - visual link
+.ui-fake-link {
   cursor: pointer;
 }
 
-// extends - functional disable
-.disabled {
+// extends - UI - functional disable
+.ui-disabled {
   pointer-events: none;
   outline: none;
 }
 
-// extends - depth levels
-.depth0 { z-index: 0; }
-.depth1 { z-index: 10; }
-.depth2 { z-index: 100; }
-.depth3 { z-index: 1000; }
-.depth4 { z-index: 10000; }
-.depth5 { z-index: 100000; }
+// extends - UI - depth levels
+.ui-depth0 { z-index: 0; }
+.ui-depth1 { z-index: 10; }
+.ui-depth2 { z-index: 100; }
+.ui-depth3 { z-index: 1000; }
+.ui-depth4 { z-index: 10000; }
+.ui-depth5 { z-index: 100000; }
 
-// ====================
 
-// extends - buttons
-.btn {
+// extends - UI - buttons
+.ui-btn {
   @include box-sizing(border-box);
   @include transition(color 0.25s ease-in-out 0s, border-color 0.25s ease-in-out 0s, background 0.25s ease-in-out 0s, box-shadow 0.25s ease-in-out 0s);
   display: inline-block;
@@ -139,18 +105,18 @@
 }
 
 // pill button
-.btn-pill {
+.ui-btn-pill {
   border-radius: ($baseline/5);
 }
 
-.btn-rounded {
+.ui-btn-rounded {
   border-radius: ($baseline/2);
 }
 
 // primary button
-.btn-primary {
-  @extend .btn;
-  @extend .btn-pill;
+.ui-btn-primary {
+  @extend .ui-btn;
+  @extend .ui-btn-pill;
   padding:($baseline/2) $baseline;
   border-width: 1px;
   border-style: solid;
@@ -171,9 +137,9 @@
 }
 
 // secondary button
-.btn-secondary {
-  @extend .btn;
-  @extend .btn-pill;
+.ui-btn-secondary {
+  @extend .ui-btn;
+  @extend .ui-btn-pill;
   border-width: 1px;
   border-style: solid;
   padding:($baseline/2) $baseline;
@@ -190,7 +156,7 @@
   }
 }
 
-.btn-flat-outline {
+.ui-btn-flat-outline {
   @extend .t-action4;
   @include transition(all .15s);
   font-weight: 600;
@@ -217,7 +183,7 @@
 }
 
 // button with no button shell until hover for understated actions
-.btn-non {
+.ui-btn-non {
   @include transition(all .15s);
   border: none;
   border-radius: ($baseline/4);
@@ -232,12 +198,62 @@
   }
 
   span {
-    @extend .text-sr;
+    @extend .cont-text-sr;
   }
 }
 
-// UI archetypes - well
+// extends - UI archetypes - well
 .ui-well {
   box-shadow: inset 0 1px 2px 1px $shadow;
   padding: ($baseline*0.75);
 }
+
+// ====================
+
+// extends - content - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
+.cont-no-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-indent: 0;
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+// extends - content - image-replacement hidden text
+.cont-text-hide {
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+// extends - content - hidden elems - screenreaders
+.cont-text-sr {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+// extends - content - wrapping
+.cont-text-wrap {
+  text-wrap: wrap;
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  word-wrap: break-word;
+}
+
+// extends - content - text overflow by ellipsis
+.cont-truncated {
+  @include box-sizing(border-box);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}