diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index 5eb5edc34c..8bd8b551db 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -111,7 +111,7 @@ iframe[seamless]{
 }
 
 .inline-error {
-  color: darken($error-red, 11%);
+  color: darken($error-color, 11%);
 }
 
 div.problem-progress {
@@ -967,8 +967,8 @@ div.problem {
 
   div.capa_reset {
     padding: 25px;
-    border: 1px solid $error-red;
-    background-color: lighten($error-red, 25%);
+    border: 1px solid $error-color;
+    background-color: lighten($error-color, 25%);
     border-radius: 3px;
     font-size: 1em;
     margin-top: $baseline/2;
diff --git a/common/lib/xmodule/xmodule/css/combinedopenended/display.scss b/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
index 2db28eba40..71908f9e5e 100644
--- a/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
+++ b/common/lib/xmodule/xmodule/css/combinedopenended/display.scss
@@ -35,7 +35,7 @@ div.name{
 }
 
 .inline-error {
-  color: darken($error-red, 10%);
+  color: darken($error-color, 10%);
 }
 
 section.combined-open-ended {
@@ -863,9 +863,9 @@ section.open-ended-child {
     margin-top: ($baseline/2);
     margin-bottom: ($baseline/2);
     padding: 25px;
-    border: 1px solid $error-red;
+    border: 1px solid $error-color;
     border-radius: 3px;
-    background-color: lighten($error-red, 25%);
+    background-color: lighten($error-color, 25%);
     font-size: 1em;
   }
 
diff --git a/lms/static/sass/base/_extends.scss b/lms/static/sass/base/_extends.scss
index 5d48734d8e..5c0f70b645 100644
--- a/lms/static/sass/base/_extends.scss
+++ b/lms/static/sass/base/_extends.scss
@@ -68,7 +68,7 @@
 
 //Styles for Error messages
 %error-message-colors {
-  background: $error-red;
+  background: $error-color;
   border: 1px solid rgb(202, 17, 17);
   color: rgb(143, 14, 14);
 }
diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss
index 396699a197..113096ec9b 100644
--- a/lms/static/sass/base/_variables.scss
+++ b/lms/static/sass/base/_variables.scss
@@ -1,17 +1,33 @@
 // lms - utilities - variables
 // ====================
 
-// BASE
-$baseline: 20px;
+// #CONFIG:         paths and configuration
+// #UNITS:          Basic units of measurement
+// #GRID:           Grid and layout variables
+// #COLORS:         Base, palette and theme color definitions + application
+// #TYPOGRAPHY:     Font definitions and scales
+// #DEPTH:          UI depth-based scale
+// #SPACING:        General UI spacing variables and scale
+// #FORMS:          form field/interaction variables
+// #TIMING:         Event timing variables
+// #APPLICATIONS:   Applying configuration
+// #DEPRECATED:     sunsetted and not to be used variables
 
-// ====================
-
-// PATH
+// ----------------------------
+// #CONFIG
+// ----------------------------
 $static-path: '..' !default;
 
-// ====================
 
-// LAYOUT: grid
+// ----------------------------
+// #UNITS
+// ----------------------------
+$baseline: 20px;
+
+
+// ----------------------------
+// #GRID
+// ----------------------------
 $gw-column: 80px;
 $gw-gutter: 20px;
 $fg-column: $gw-column;
@@ -20,48 +36,12 @@ $fg-max-columns: 12;
 $fg-max-width: 1400px;
 $fg-min-width: 810px;
 
-// ====================
 
-// FONTS
-$sans-serif: 'Open Sans', $verdana, sans-serif !default;
-$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace !default;
-$body-font-family: $sans-serif;
-$serif: $georgia !default;
-
-// FONT-WEIGHTS
-$font-light: 300;
-$font-regular: 400;
-$font-semibold: 600;
-$font-bold: 700;
-
-// ====================
-
-// MISC: base fonts/colors
-$body-font-size: em(14);
-$body-line-height: golden-ratio(.875em, 1);
-$base-font-color: rgb(60,60,60);
-$baseFontColor: rgb(60,60,60);
-$base-font-color: rgb(60,60,60);
-$lighter-base-font-color: rgb(100,100,100);
-$very-light-text: rgb(255,255,255); // #ffffff
-
-// ====================
-
-// TIMING - used for animation/transition mixin syncing
-$tmg-s3: 3.0s;
-$tmg-s2: 2.0s;
-$tmg-s1: 1.0s;
-$tmg-avg: 0.75s;
-$tmg-f1: 0.50s;
-$tmg-f2: 0.25s;
-$tmg-f3: 0.125s;
-
-// ====================
-
-// COLORS - utility
+// ----------------------------
+// #COLORS
+// ----------------------------
 $transparent: rgba(0,0,0,0); // used when color value is needed for UI width/transitions but element is transparent
 
-// COLORS
 $black: rgb(0,0,0);  // #000000;
 $black-t0: rgba($black, 0.125);
 $black-t1: rgba($black, 0.25);
@@ -88,6 +68,9 @@ $gray-d3: shade($gray,60%); // #323232
 $gray-d4: shade($gray,80%); // #191919
 
 
+$blue: rgb(0, 120, 176);
+$yellow: rgb(255, 252, 221);
+
 $pink: rgb(182,37,103); // #b72567;
 $pink-l1: tint($pink,20%);
 $pink-l2: tint($pink,40%);
@@ -203,43 +186,40 @@ $ui-notification-height: ($baseline*10);
 
 // ====================
 
-// COLORS: social platforms
+// social platforms
 $twitter-blue: #55ACEE;
 $facebook-blue: #3B5998;
 $linkedin-blue: #0077B5;
 
-// ====================
+// shadows
+$shadow: rgba(0,0,0,0.2);
+$shadow-l1: rgba(0,0,0,0.1);
+$shadow-l2: rgba(0,0,0,0.05);
+$shadow-d1: rgba(0,0,0,0.4);
+$shadow-d2: rgba($black, 0.6);
 
-// TODO: both blue and yellow variables differ from CMS rgb value, need to confirm change to CMS variable is ok in current platform uses before switching.
-//$yellow: rgb(255, 252, 221);
+// system feedback-based colors
+$error-color: rgb(253, 87, 87);
+$warning-color: rgb(181,42,103);
+$confirm-color: rgb(0, 136, 1);
+$active-color: $blue;
+$highlight-color: rgb(255,255,0);
+$alert-color: rgb(212, 64, 64); //rich red
+$warning-color: rgb(237, 189, 60); //rich yellow
+$success-color: rgb(37, 184, 90); //rich green
 
-// ====================
+// newer color variables
+$dark-gray1: rgb(74,74,74);
+$light-gray1: rgb(242,242,242); // #f2f2f2
+$light-gray2: rgb(171,171,171); // #ababab
+$light-gray3: rgb(249,249,249); // #f9f9f9
+$dark-gray2: rgb(151,151,151); // #979797
+$blue1: rgb(74,144,226); // #4A90E2
+$blue2: rgb(0,161,229); // #00A1E5
+$green1: rgb(97,161,46); // #61A12E
+$red1: rgb(208,2,27); // #D0021B
 
-// COLORS: old variables
-// DEPRECATED: use colors in lists above
-$error-red: rgb(253, 87, 87);
-$danger-red: rgb(212, 64, 64);
-$light-gray: rgb(221, 221, 221);
-$dark-gray: rgb(51, 51, 51);
-$border-color: rgb(200, 200, 200);
-$sidebar-color: rgb(246, 246, 246);
-$outer-border-color: rgb(170, 170, 170);
-$light-gray: rgb(221,221,221); // #dddddd
-
-// ====================
-
-// used by descriptor css
-// DEPRECATED: use colors in lists above
-$lightGrey: rgb(237,241,245); // #edf1f5
-$darkGrey: rgb(136,145,161); // #8891a1
-$lightGrey1: $gray-l3;
-$blue-d1: shade($blue,20%);
-$blue-d2: shade($blue,40%);
-$blue-d4: shade($blue,80%);
-
-// ====================
-
-// edx.org marketing site variables
+// edx-specific: marketing site variables
 $m-gray: rgb(138,140,143); // #8A8C8F
 $m-gray-l1: rgb(151,153,155); // #97999B
 $m-gray-l2: rgb(164,166,168); // #A4A6A8
@@ -298,164 +278,90 @@ $m-green-t1: rgba($m-green,0.25);
 $m-green-t2: rgba($m-green,0.50);
 $m-green-t3: rgba($m-green,0.75);
 
-// ====================
-
-// SHADOWS
-$shadow: rgba(0,0,0,0.2);
-$shadow-l1: rgba(0,0,0,0.1);
-$shadow-l2: rgba(0,0,0,0.05);
-$shadow-d1: rgba(0,0,0,0.4);
-$shadow-d2: rgba($black, 0.6);
-
-// ====================
-
-$m-base-font-size: em(15);
-
-$base-font-color: rgb(60,60,60);
-$baseFontColor: rgb(60,60,60);
-$lighter-base-font-color: rgb(100,100,100);
-$text-color: $dark-gray;
-
-$dark-trans-bg: rgba(0, 0, 0, .75);
-
-$body-bg: rgb(250,250,250) !default;
-$container-bg: $white !default;
-$header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9));
-$header-bg: $white !default;
-$courseware-header-image: linear-gradient(top, rgb(255,255,255), rgb(238,238,238));
-$courseware-header-bg: transparent;
-$footer-bg: $white !default;
-$courseware-footer-border: none;
-$courseware-footer-shadow: none;
-$courseware-footer-margin: 0px;
-$courseware-border-bottom-color: rgb(68,162,222); // #44a2de
-$courseware-button-border-color: rgb(230,230,230); // #e6e6e6
-$courseware-hover-color: rgb(51,52,53); // #333435
-$courseware-navigation-color: $blue;
-
-// ====================
-
-// STATE: verified
+// edx-specific: verified
 $verified-color-lvl1: $m-green;
 $verified-color-lvl2: $m-green-l1;
 $verified-color-lvl3: $m-green-l2;
 $verified-color-lvl4: $m-green-l3;
 $verified-color-lvl5: $m-green-l4;
 
-// STATE: professional ed
+// edx-specific: professional ed
 $professional-color-lvl1: $m-pink;
 $professional-color-lvl2: $m-pink-l1;
 $professional-color-lvl3: $m-pink-l2;
 $professional-color-lvl4: $m-pink-l3;
 $professional-color-lvl5: $m-pink-l4;
 
-// STATE: honor code
+// edx-specific: honor code
 $honorcode-color-lvl1: rgb(50, 165, 217);
 $honorcode-color-lvl2: tint($honorcode-color-lvl1, 33%);
 
-// STATE: audit
-$audit-color-lvl1: $light-gray;
+// edx-specific: audit
+$audit-color-lvl1: rgb(221, 221, 221);
 $audit-color-lvl2: tint($audit-color-lvl1, 33%);
 
-// STATE: credit
+// edx-specific: credit
 $credit-color-base: rgb(244,195,0); // accessible with black text
 
-// ====================
 
-// ACTIONS: general
-$button-bg-image: linear-gradient(rgb(255,255,255) 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%);
-$button-bg-color: transparent;
-$button-bg-hover-color: $white;
+// ----------------------------
+// #TYPOGRAPHY
+// ----------------------------
+$sans-serif: 'Open Sans', $verdana, sans-serif !default;
+$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace !default;
+$body-font-family: $sans-serif;
+$serif: $georgia !default;
 
-// ACTIONS: primary
-$action-primary-bg: $m-blue-d3;
-$action-primary-fg: $white;
-$action-primary-shadow: $m-blue-d4;
+// newer variables/standards
+$f-serif: 'Bree Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
+$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
+$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
 
-// ACTIONS: primary - focused - hover/active pseudo states
-$action-primary-focused-bg: $m-blue-d1;
-$action-primary-focused-fg: $white;
+$font-light: 300;
+$font-regular: 400;
+$font-semibold: 600;
+$font-bold: 700;
 
-// ACTIONS: primary - current or active navigation item
-$action-primary-active-bg: $m-blue;
-$action-primary-active-fg: $m-blue-d3;
-$action-primary-active-shadow: $m-blue-d2;
-$action-primary-active-focused-fg: $m-blue-d4;
-$action-primary-active-focused-shadow: $m-blue-d3;
+$m-base-font-size: em(15);
 
-// ACTIONS: disabled
-$action-primary-disabled-bg: $m-gray-d3;
-$action-prmary-disabled-fg: $white;
 
-// ACTIONS: secondary
-$action-secondary-bg: $m-pink;
-$action-secondary-fg: $white;
-$action-secondary-shadow: $m-pink-d2;
+// ----------------------------
+// #DEPTH
+// ----------------------------
 
-// ACTIONS: secondary - focused - hover/active pseudo states
-$action-secondary-focused-bg: $m-pink-l3;
-$action-secondary-focused-fg: $white;
 
-// ACTIONS: secondary - current or active navigation item
-$action-secondary-active-bg: $m-pink-l2;
-$action-secondary-active-fg: $m-pink-d1;
-$action-secondary-active-shadow: $m-pink-d1;
-$action-secondary-active-focused-fg: $m-pink-d3;
-$action-secondary-active-focused-shadow: $m-pink-d2;
+// ----------------------------
+// #TIMING
+// ----------------------------
+$tmg-s3: 3.0s;
+$tmg-s2: 2.0s;
+$tmg-s1: 1.0s;
+$tmg-avg: 0.75s;
+$tmg-f1: 0.50s;
+$tmg-f2: 0.25s;
+$tmg-f3: 0.125s;
 
-// ACTIONS: secondary - disabled
-$action-secondary-disabled-bg: $m-gray-d3;
-$action-secondary-disabled-fg: $white;
 
-// HEADER: graphic-based page titles
-$header-graphic-super-color: $m-blue-d1;
-$header-graphic-sub-color: $m-gray-d2;
+// ----------------------------
+// #FORMS
+// ----------------------------
+$form-bg-color: $white;
 
-// State-based colors
-$error-color: $error-red;
-$warning-color: $m-pink;
-$confirm-color: $m-green;
-$active-color: $blue;
-$highlight-color: rgb(255,255,0);
+// ----------------------------
+// #APPLICATIONS
+// ----------------------------
+// font sizes
+$body-font-size: em(14);
+$body-line-height: golden-ratio(.875em, 1);
 
-// Notifications
-$notify-banner-bg-1: rgb(56,56,56);
-$notify-banner-bg-2: rgb(136,136,136);
-$notify-banner-bg-3: $shadow-l2;
+$base-font-color: rgb(60,60,60);
+$baseFontColor: rgb(60,60,60);
 
-$alert-color: rgb(212, 64, 64); //rich red
-$warning-color: rgb(237, 189, 60); //rich yellow
-$success-color: rgb(37, 184, 90); //rich green
+$lighter-base-font-color: rgb(100,100,100);
+$very-light-text: rgb(255,255,255); // #ffffff
+$text-color: rgb(51, 51, 51);
 
-// ====================
-
-// MISC: visual horizontal rules
-$faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0));
-$faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1));
-$faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0));
-$faded-hr-image-4: linear-gradient(180deg, rgba(240,240,240, 0) 0%, rgba(240,240,240, 1) 50%, rgba(240,240,240, 0));
-$faded-hr-image-5: linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.8) 50%, rgba(255,255,255, 0));
-$faded-hr-image-6: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.6) 50%, rgba(255,255,255, 0));
-
-// MISC: dashboard
-$dashboard-profile-header-image: linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245));
-$dashboard-profile-header-color: transparent;
-$dashboard-profile-color: rgb(252,252,252);
-$dot-color: $light-gray;
-$dashboard-course-cover-border: $light-gray;
-
-// MISC: course assets
-$content-wrapper-bg: $white !default;
-$course-bg-color: #f2f2f2;
-$course-bg-image: url('#{$static-path}/images/bg-texture.png');
-$account-content-wrapper-bg: shade($body-bg, 2%);
-$course-profile-bg: rgb(245,245,245);
-$course-header-bg: rgba(255,255,255, 0.93);
-
-// MISC: course background texture
-//$course-bg-image: url('#{$static-path}/images/bg-texture.png');
-
-// MISC: borders
+// borders
 $border-color-1: rgb(190,190,190);
 $border-color-2: rgb(200,200,200);
 $border-color-3: rgb(100,100,100);
@@ -465,7 +371,54 @@ $border-color-l2: $m-gray-l2;
 $border-color-l3: $m-gray-l3;
 $border-color-l4: $m-gray-l4;
 
-// MISC: links and buttons
+// visual horizontal rules
+$faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0));
+$faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1));
+$faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0));
+$faded-hr-image-4: linear-gradient(180deg, rgba(240,240,240, 0) 0%, rgba(240,240,240, 1) 50%, rgba(240,240,240, 0));
+$faded-hr-image-5: linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.8) 50%, rgba(255,255,255, 0));
+$faded-hr-image-6: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.6) 50%, rgba(255,255,255, 0));
+
+// notifications
+$notify-banner-bg-1: rgb(56,56,56);
+$notify-banner-bg-2: rgb(136,136,136);
+$notify-banner-bg-3: $shadow-l2;
+$msg-bg: $m-blue-d3;
+
+// actions
+$button-bg-image: linear-gradient(rgb(255,255,255) 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%);
+$button-bg-color: transparent;
+$button-bg-hover-color: $white;
+
+// action - primary
+$action-primary-bg: $m-blue-d3;
+$action-primary-fg: $white;
+$action-primary-shadow: $m-blue-d4;
+$action-primary-focused-bg: $m-blue-d1;
+$action-primary-focused-fg: $white;
+$action-primary-active-bg: $m-blue;
+$action-primary-active-fg: $m-blue-d3;
+$action-primary-active-shadow: $m-blue-d2;
+$action-primary-active-focused-fg: $m-blue-d4;
+$action-primary-active-focused-shadow: $m-blue-d3;
+$action-primary-disabled-bg: $m-gray-d3;
+$action-prmary-disabled-fg: $white;
+
+// action - secondary
+$action-secondary-bg: $m-pink;
+$action-secondary-fg: $white;
+$action-secondary-shadow: $m-pink-d2;
+$action-secondary-focused-bg: $m-pink-l3;
+$action-secondary-focused-fg: $white;
+$action-secondary-active-bg: $m-pink-l2;
+$action-secondary-active-fg: $m-pink-d1;
+$action-secondary-active-shadow: $m-pink-d1;
+$action-secondary-active-focused-fg: $m-pink-d3;
+$action-secondary-active-focused-shadow: $m-pink-d2;
+$action-secondary-disabled-bg: $m-gray-d3;
+$action-secondary-disabled-fg: $white;
+
+// actions - misc
 $link-color: $blue;
 $link-color-d1: $blue;
 $link-hover: $blue-l1; // from our Pattern Library http://ux.edx.org/elements/colors/
@@ -473,39 +426,48 @@ $site-status-color: $pink;
 $button-color: $blue;
 $button-archive-color: rgb(238,238,238); // #eeeeee
 
-// MISC: shadow, form, modal
-$shadow-color: $blue;
-$form-bg-color: $white;
-$modal-bg-color: rgb(245,245,245);
+// larger, random elements
+$dark-trans-bg: rgba(0, 0, 0, .75);
 
-// MISC: sidebar
-$sidebar-chapter-bg-top: rgba(255, 255, 255, .5);
-$sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0);
-$sidebar-chapter-bg: rgb(246,246,246); // #f6f6f6
-$sidebar-active-image: linear-gradient(top, rgb(230,230,230), rgb(214,214,214));
+$body-bg: rgb(250,250,250) !default;
 
-// TOP HEADER IMAGE MARGIN
+$container-bg: $white !default;
+
+// header
+$header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9));
+$header-bg: $white !default;
+$header-graphic-super-color: $m-blue-d1;
+$header-graphic-sub-color: $m-gray-d2;
+$header-sans-serif: 'Open Sans', Arial, Helvetica, sans-serif;
 $header_image_margin: -69px;
 
-//FOOTER MARGIN
+// footer
+$footer-bg: $white !default;
 $footer_margin: ($baseline/4) 0 ($baseline*1.5) 0;
 
-// ====================
+// modal
+$shadow-color: $blue;
+$modal-bg-color: rgb(245,245,245);
 
-// VIEWS: homepage
+// courseware elements
+$courseware-header-image: linear-gradient(top, rgb(255,255,255), rgb(238,238,238));
+$courseware-header-bg: transparent;
+$courseware-footer-border: none;
+$courseware-footer-shadow: none;
+$courseware-footer-margin: 0px;
+$courseware-border-bottom-color: rgb(68,162,222); // #44a2de
+$courseware-button-border-color: rgb(230,230,230); // #e6e6e6
+$courseware-hover-color: rgb(51,52,53); // #333435
+$courseware-navigation-color: $blue;
+
+// homepage, onboarding, and course discovery
 $homepage__header--gradient__color--alpha: lighten($gray, 15%);
 $homepage__header--gradient__color--bravo: saturate($gray, 30%);
 $homepage__header--background: lighten($gray, 15%);
-
-// VIEWS: homepage and courses
 $course-card-height: ($baseline*18);
 $course-image-height: ($baseline*8);
 $course-info-height: ($baseline*10);
 $course-title-height: ($baseline*3.6);
-
-// ====================
-
-// IMAGES: backgrounds
 $homepage-bg-image: none;
 
 $login-banner-image: url('#{$static-path}/images/edx-theme/edx-background-banner-account.png');
@@ -514,39 +476,51 @@ $passwordreset-banner-image: url('#{$static-path}/images/edx-theme/edx-backgroun
 
 $video-thumb-url: '#{$static-path}/images/homepage-hero-video-thumb.jpg';
 
-// ====================
+// dashboard elements
+$dashboard-profile-header-image: linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245));
+$dashboard-profile-header-color: transparent;
+$dashboard-profile-color: rgb(252,252,252);
+$dot-color: rgb(221, 221, 221);
+$dashboard-course-cover-border: rgb(221, 221, 221);
 
-// SPLINT: new standards
+// course elements
+$content-wrapper-bg: $white !default;
+$course-bg-color: #f2f2f2;
+$course-bg-image: url('#{$static-path}/images/bg-texture.png');
+$account-content-wrapper-bg: shade($body-bg, 2%);
+$course-profile-bg: rgb(245,245,245);
+$course-header-bg: rgba(255,255,255, 0.93);
 
-// SPLINT: fonts
-$f-serif: 'Bree Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
-$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
-$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
-
-// Header specific sans-serif
-$header-sans-serif: 'Open Sans', Arial, Helvetica, sans-serif;
-
-// SPLINT: colors
-
-$msg-bg: $action-primary-bg;
-
-
-$dark-gray1: rgb(74,74,74); // #
-$light-gray1: rgb(242,242,242); // #f2f2f2
-$light-gray2: rgb(171,171,171); // #ababab
-$light-gray3: rgb(249,249,249); // #f9f9f9
-$dark-gray2: rgb(151,151,151); // #979797
-$blue1: rgb(74,144,226); // #4A90E2
-$blue2: rgb(0,161,229); // #00A1E5
-$green1: rgb(97,161,46); // #61A12E
-$red1: rgb(208,2,27); // #D0021B
-
-// +case: search/result highlight
-// --------------------
+// search/listing results
 $result-highlight-color-base: rgba($highlight-color, 0.25);
 
-// +feature: student notes
-// --------------------
+// sidebar
+$sidebar-chapter-bg-top: rgba(255, 255, 255, .5);
+$sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0);
+$sidebar-chapter-bg: rgb(246,246,246); // #f6f6f6
+$sidebar-active-image: linear-gradient(top, rgb(230,230,230), rgb(214,214,214));
+
+
+// student notes
 $student-notes-highlight-color-base: saturate($yellow, 65%);
 $student-notes-highlight-color: tint($student-notes-highlight-color-base, 50%);
 $student-notes-highlight-color-focus: $student-notes-highlight-color-base;
+
+// ----------------------------
+// #DEPRECATED
+// ----------------------------
+$danger-red: rgb(212, 64, 64);
+$light-gray: rgb(221, 221, 221);
+$dark-gray: rgb(51, 51, 51);
+$border-color: rgb(200, 200, 200);
+$sidebar-color: rgb(246, 246, 246);
+$outer-border-color: rgb(170, 170, 170);
+$light-gray: rgb(221,221,221); // #dddddd
+
+// used by descriptor css
+$lightGrey: rgb(237,241,245); // #edf1f5
+$darkGrey: rgb(136,145,161); // #8891a1
+$lightGrey1: $gray-l3;
+$blue-d1: shade($blue,20%);
+$blue-d2: shade($blue,40%);
+$blue-d4: shade($blue,80%);
diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss
index 472fecde8d..cb2509b0b4 100644
--- a/lms/static/sass/course/courseware/_courseware.scss
+++ b/lms/static/sass/course/courseware/_courseware.scss
@@ -614,7 +614,7 @@ div.course-wrapper {
 
     div.staff_actions {
       p.error {
-        color: $error-red
+        color: $error-color
       }
       p.success {
         color: $success-color;
diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss
index bef79f2556..0a29b01f2f 100644
--- a/lms/static/sass/course/instructor/_instructor_2.scss
+++ b/lms/static/sass/course/instructor/_instructor_2.scss
@@ -137,12 +137,12 @@
   .request-response-error {
     margin: 0;
     padding-bottom: ($baseline);
-    color: $error-red;
+    color: $error-color;
   }
 
   .display-errors {
     line-height: 3em;
-    color: $error-red;
+    color: $error-color;
   }
 
   .slickgrid {
diff --git a/lms/static/sass/discussion/views/_create-edit-post.scss b/lms/static/sass/discussion/views/_create-edit-post.scss
index 75ce6a2719..5260f4d79f 100644
--- a/lms/static/sass/discussion/views/_create-edit-post.scss
+++ b/lms/static/sass/discussion/views/_create-edit-post.scss
@@ -180,7 +180,7 @@
     margin-bottom: $baseline;
     border-radius: 3px;
     padding: 0;
-    background: $error-red;
+    background: $error-color;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2);
     color: $white;
     list-style: none;
diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss
index 3bf80109c8..5027ccdc67 100644
--- a/lms/static/sass/multicourse/_course_about.scss
+++ b/lms/static/sass/multicourse/_course_about.scss
@@ -159,7 +159,7 @@
           }
 
           #register_error {
-            background: $error-red;
+            background: $error-color;
             border: 1px solid rgb(202, 17, 17);
             color: rgb(143, 14, 14);
             display: none;
diff --git a/lms/static/sass/views/_teams.scss b/lms/static/sass/views/_teams.scss
index 688535cf0f..66959895fa 100644
--- a/lms/static/sass/views/_teams.scss
+++ b/lms/static/sass/views/_teams.scss
@@ -723,11 +723,11 @@
 
     .u-field.error {
       input, textarea {
-        border-color: $danger-red;
+        border-color: $error-color;
       }
 
       .u-field-message-help, .u-field-description-message {
-        color: $danger-red !important;
+        color: $error-color !important;
       }
     }