diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss
index e62dd12541..6f43a02df7 100644
--- a/lms/static/sass/base/_base.scss
+++ b/lms/static/sass/base/_base.scss
@@ -2,8 +2,8 @@
 //   overflow-y: scroll;
 // }
 
-body {
-  background: rgb(250,250,250);
+html, body {
+  background: $body-bg;
   font-family: $sans-serif;
   font-size: 1em;
   font-style: normal;
@@ -61,20 +61,20 @@ p + p, ul + p, ol + p {
 
 p {
   a:link, a:visited {
-    color: $blue;
+    color: $link-color;
     font: normal 1em/1em $serif;
     text-decoration: none;
     @include transition(all, 0.1s, linear);
 
     &:hover {
-      color: $blue;
+      color: $link-color;
       text-decoration: underline;
     }
   }
 }
 
 a:link, a:visited {
-  color: $blue;
+  color: $link-color;
   font: normal 1em/1em $sans-serif;
   text-decoration: none;
   @include transition(all, 0.1s, linear);
@@ -87,8 +87,8 @@ a:link, a:visited {
 .content-wrapper {
   width: flex-grid(12);
   margin: 0 auto;
+  background: $content-wrapper-bg;
   padding-bottom: ($baseline*2);
-  background: rgb(255,255,255);
 }
 
 .container {
@@ -164,7 +164,7 @@ mark {
   display: none;
   padding: 10px;
   @include linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .0));
-  background-color: $pink;
+  background-color: $site-status-color;
   box-shadow: 0 -1px 0 rgba(0, 0, 0, .3) inset;
   font-size: 14px;
 
diff --git a/lms/static/sass/base/_extends.scss b/lms/static/sass/base/_extends.scss
index 2998e25dca..d244eff55f 100644
--- a/lms/static/sass/base/_extends.scss
+++ b/lms/static/sass/base/_extends.scss
@@ -1,39 +1,30 @@
 .faded-hr-divider {
-  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
-                                                    rgba(200,200,200, 1) 50%,
-                                                    rgba(200,200,200, 0)));
+  @include background-image($faded-hr-image-1);
   height: 1px;
   width: 100%;
 }
 
 .faded-hr-divider-medium {
-  @include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
-                                                    rgba(240,240,240, 1) 50%,
-                                                    rgba(240,240,240, 0)));
+  @include background-image($faded-hr-image-4);
   height: 1px;
   width: 100%;
 }
 
 .faded-hr-divider-light {
-  @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
-                                                    rgba(255,255,255, 0.8) 50%,
-                                                    rgba(255,255,255, 0)));
+  @include background-image($faded-hr-image-5);
   height: 1px;
   width: 100%;
 }
 
 .faded-vertical-divider {
-  @include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
-                                                    rgba(200,200,200, 1) 50%,
-                                                    rgba(200,200,200, 0)));
+  @include background-image($faded-hr-image-1);
   height: 100%;
   width: 1px;
 }
 
 .faded-vertical-divider-light {
-  @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
-                                                    rgba(255,255,255, 0.6) 50%,
-                                                    rgba(255,255,255, 0)));
+  @include background-image($faded-hr-image-6);
+  background: transparent;
   height: 100%;
   width: 1px;
 }
@@ -66,14 +57,12 @@
 }
 
 .fade-right-hr-divider {
-  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
-                                                    rgba(200,200,200, 1)));
+  @include background-image($faded-hr-image-2);
   border: none;
 }
 
 .fade-left-hr-divider {
-  @include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
-                                                    rgba(200,200,200, 0)));
+  @include background-image($faded-hr-image-3);
   border: none;
 }
 
diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss
index ddbd930323..2517045602 100644
--- a/lms/static/sass/base/_variables.scss
+++ b/lms/static/sass/base/_variables.scss
@@ -14,6 +14,14 @@ $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
 $body-font-family: $sans-serif;
 $serif: $georgia;
 
+$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: #fff;
+
 $white: rgb(255,255,255);
 $black: rgb(0,0,0);
 $blue: rgb(29,157,217);
@@ -52,6 +60,66 @@ $baseFontColor: rgb(60,60,60);
 $lighter-base-font-color: rgb(100,100,100);
 $text-color: $dark-gray;
 
-$body-font-family: $sans-serif;
-$body-font-size: em(14);
-$body-line-height: golden-ratio(.875em, 1);
+$body-bg: rgb(250,250,250);
+$header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9));
+$header-bg: transparent;
+$courseware-header-image: linear-gradient(top, #fff, #eee);
+$courseware-header-bg: transparent;
+$footer-bg: transparent;
+$courseware-footer-border: none;
+$courseware-footer-shadow: none;
+$courseware-footer-margin: 0px;
+
+$button-bg-image: linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%);
+$button-bg-color: transparent;
+$button-bg-hover-color: #fff;
+
+$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));
+
+$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;
+
+$content-wrapper-bg: rgb(255,255,255);
+$course-bg-color: #d6d6d6;
+$course-bg-image: url(../images/bg-texture.png);
+
+$course-profile-bg: rgb(245,245,245);
+$course-header-bg: rgba(255,255,255, 0.93);
+
+$border-color-1: rgb(190,190,190);
+$border-color-2: rgb(200,200,200);
+$border-color-3: rgb(100,100,100);
+$border-color-4: rgb(252,252,252);
+
+$link-color: $blue;
+$link-hover: $pink;
+$selection-color-1: $pink;
+$selection-color-2: #444;
+$site-status-color: $pink;
+
+$button-color: $blue;
+$button-archive-color: #eee;
+
+$shadow-color: $blue;
+
+$sidebar-chapter-bg-top: rgba(255, 255, 255, .6);
+$sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0);
+$sidebar-chapter-bg: #eee;
+$sidebar-active-image: linear-gradient(top, #e6e6e6, #d6d6d6);
+
+$form-bg-color: #fff;
+$modal-bg-color: rgb(245,245,245);
+
+//-----------------
+//  CSS BG Images
+//-----------------
+$homepage-bg-image: '/static/images/homepage-bg.jpg';
+
+$video-thumb-url: '/static/images/courses/video-thumb.jpg';
\ No newline at end of file
diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss
index bfd90505cf..741a7f9a22 100644
--- a/lms/static/sass/course/_info.scss
+++ b/lms/static/sass/course/_info.scss
@@ -117,7 +117,7 @@ div.info-wrapper {
           @include transition(all .2s);
 
           h4 {
-            color: $blue;
+            color: $link-color;
             font-size: 1em;
             font-weight: normal;
             padding-left: 30px;
diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss
index 6183c8a675..584412ca22 100644
--- a/lms/static/sass/course/base/_base.scss
+++ b/lms/static/sass/course/base/_base.scss
@@ -1,7 +1,8 @@
 body {
   min-width: 980px;
   min-height: 100%;
-  background: url(../images/bg-texture.png) #d6d6d6;
+  background-image: $course-bg-image;
+  background-color: $course-bg-color;
 }
 
 body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label {
@@ -34,7 +35,7 @@ a {
     width: 100%;
     border-radius: 3px;
     border: 1px solid $outer-border-color;
-    background: #fff;
+    background: $body-bg;
     @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
   }
 }
@@ -49,8 +50,8 @@ textarea,
 input[type="text"],
 input[type="email"],
 input[type="password"] {
-  background: rgb(250,250,250);
-  border: 1px solid rgb(200,200,200);
+  background: $body-bg;
+  border: 1px solid $border-color-2;
   @include border-radius(0);
   @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
   @include box-sizing(border-box);
@@ -65,7 +66,7 @@ input[type="password"] {
   }
 
   &:focus {
-    border-color: lighten($blue, 20%);
+    border-color: lighten($link-color, 20%);
     @include box-shadow(0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15));
     outline: none;
   }
@@ -94,7 +95,7 @@ img {
 }
 
 ::selection, ::-moz-selection, ::-webkit-selection {
-  background: #444;
+  background: $selection-color-2;
   color: #fff;
 }
 
@@ -143,7 +144,7 @@ img {
   max-width: 350px;
   padding: 15px 20px 17px;
   border-radius: 3px;
-  border: 1px solid #333;
+  border: 1px solid $border-color-3;
   background: -webkit-linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)) rgba(30, 30, 30, .92);
   box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
   font-size: 13px;
diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss
index bcb93a3645..a94a9511fe 100644
--- a/lms/static/sass/course/base/_extends.scss
+++ b/lms/static/sass/course/base/_extends.scss
@@ -1,5 +1,5 @@
 h1.top-header {
-  border-bottom: 1px solid #e3e3e3;
+  border-bottom: 1px solid $border-color-2;
   text-align: left;
   font-size: em(24);
   font-weight: 100;
diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss
index 81b497d4f9..6cf6f6a602 100644
--- a/lms/static/sass/course/courseware/_sidebar.scss
+++ b/lms/static/sass/course/courseware/_sidebar.scss
@@ -2,7 +2,7 @@ section.course-index {
   @extend .sidebar;
   @extend .tran;
   @include border-radius(3px 0 0 3px);
-  border-right: 1px solid #ddd;
+  border-right: 1px solid $border-color-2;
 
   #open_close_accordion {
     display: none;
@@ -70,8 +70,8 @@ section.course-index {
       width: 100% !important;
       @include box-sizing(border-box);
       padding: 11px 14px;
-      @include linear-gradient(top, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
-      background-color: #eee;
+      @include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom);
+      background-color: $sidebar-chapter-bg;
       @include box-shadow(0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset);
       @include transition(background-color .1s);
 
@@ -169,9 +169,9 @@ section.course-index {
           }
 
           > a {
-            border: 1px solid #bbb;
+            border: 1px solid $border-color-1;
             @include box-shadow(0 1px 0 rgba(255, 255, 255, .35) inset);
-            @include linear-gradient(top, #e6e6e6, #d6d6d6);
+            background: $sidebar-active-image;
 
             &:after {
               opacity: 1;
diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss
index e27a6e99d8..4d8f000668 100644
--- a/lms/static/sass/course/layout/_courseware_header.scss
+++ b/lms/static/sass/course/layout/_courseware_header.scss
@@ -75,9 +75,9 @@ header.global.slim {
 
     &#login {
       display: block;
-      @include background-image(linear-gradient(-90deg, lighten($blue, 8%), lighten($blue, 5%) 50%, $blue 50%, darken($blue, 10%) 100%));
+      @include background-image(linear-gradient(-90deg, lighten($link-color, 8%), lighten($link-color, 5%) 50%, $link-color 50%, darken($link-color, 10%) 100%));
       border: 1px solid transparent;
-      border-color: darken($blue, 10%);
+      border-color: darken($link-color, 10%);
       @include border-radius(3px);
       @include box-sizing(border-box);
       @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
@@ -97,7 +97,7 @@ header.global.slim {
       vertical-align: middle;
 
       &:hover, &.active {
-        @include background-image(linear-gradient(-90deg, $blue, $blue 50%, $blue 50%, $blue 100%));
+        @include background-image(linear-gradient(-90deg, $link-color, $link-color 50%, $link-color 50%, $link-color 100%));
       }
     }
   }
diff --git a/lms/static/sass/course/layout/_footer.scss b/lms/static/sass/course/layout/_footer.scss
index 7abf35a819..699846e781 100644
--- a/lms/static/sass/course/layout/_footer.scss
+++ b/lms/static/sass/course/layout/_footer.scss
@@ -1,4 +1,5 @@
 footer {
-	border: none;
-	box-shadow: none;
+	border: $courseware-footer-border;
+	box-shadow: $courseware-footer-shadow;
+	margin-top: $courseware-footer-margin;
 }
\ No newline at end of file
diff --git a/lms/static/sass/course/wiki/_wiki.scss b/lms/static/sass/course/wiki/_wiki.scss
index 1bc38abd9a..d064b6d345 100644
--- a/lms/static/sass/course/wiki/_wiki.scss
+++ b/lms/static/sass/course/wiki/_wiki.scss
@@ -113,7 +113,7 @@ section.wiki {
       }
 
       &:focus {
-        border-color: $blue;
+        border-color: $link-color;
       }
     }
   }
@@ -276,7 +276,7 @@ section.wiki {
     li {
       &.active {
         a {
-          color: $blue;
+          color: $link-color;
 
           .icon-view,
           .icon-home {
diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss
index 195760721e..9eab7c0a4f 100644
--- a/lms/static/sass/multicourse/_course_about.scss
+++ b/lms/static/sass/multicourse/_course_about.scss
@@ -4,11 +4,11 @@
   }
 
   header.course-profile {
-    background: rgb(245,245,245);
-    @include background-image(url('/static/images/homepage-bg.jpg'));
+    background: $course-profile-bg;
+    @include background-image(url($homepage-bg-image));
     background-size: cover;
     @include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5));
-    border-bottom: 1px solid rgb(100,100,100);
+    border-bottom: 1px solid $border-color-3;
     @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
     height: 280px;
     margin-top: -69px;
@@ -18,8 +18,8 @@
     width: 100%;
 
     .intro-inner-wrapper {
-      background: rgba(255,255,255, 0.93);
-      border: 1px solid rgb(100,100,100);
+      background: $course-header-bg;
+      border: 1px solid $border-color-3;
       @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
       @include box-sizing(border-box);
       @include clearfix;
@@ -44,7 +44,7 @@
         z-index: 2;
 
         > hgroup {
-          border-bottom: 1px solid rgb(210,210,210);
+          border-bottom: 1px solid $border-color-2;
           @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
           margin-bottom: 20px;
           padding-bottom: 20px;
@@ -68,7 +68,7 @@
               text-transform: none;
 
               &:hover {
-                color: $blue;
+                color: $link-color;
               }
             }
           }
@@ -85,7 +85,7 @@
               text-transform: none;
 
               &:hover {
-                color: $blue;
+                color: $link-color;
               }
             }
           }
@@ -99,7 +99,7 @@
           width: flex-grid(12);
 
           > a.find-courses, a.register {
-            @include button(shiny, $blue);
+            @include button(shiny, $button-color);
             @include box-sizing(border-box);
             @include border-radius(3px);
             display: block;
@@ -122,7 +122,7 @@
           }
 
           strong {
-            @include button(shiny, $blue);
+            @include button(shiny, $button-color);
             @include box-sizing(border-box);
             @include border-radius(3px);
             display: block;
@@ -140,10 +140,10 @@
           }
 
           span.register {
-            background: lighten($blue, 20%);
-            border: 1px solid $blue;
+            background: $button-archive-color;
+            border: 1px solid darken($button-archive-color, 50%);
             @include box-sizing(border-box);
-            color: darken($blue, 20%);
+            color: darken($button-archive-color, 50%);
             display: block;
             letter-spacing: 1px;
             padding: 10px 0px 8px;
@@ -176,7 +176,7 @@
         z-index: 2;
 
         .hero {
-          border: 1px solid rgb(100,100,100);
+          border: 1px solid $border-color-3;
           height: 100%;
           overflow: hidden;
           position: relative;
@@ -235,7 +235,7 @@
     @include clearfix;
 
     nav {
-      border-bottom: 1px solid rgb(220,220,220);
+      border-bottom: 1px solid $border-color-2;
       @include box-sizing(border-box);
       @include clearfix;
       margin: 40px 0;
@@ -262,7 +262,7 @@
         }
 
         &:hover, &.active {
-          border-color: rgb(200,200,200);
+          border-color: $border-color-2;
           color: $base-font-color;
           text-decoration: none;
         }
@@ -296,7 +296,7 @@
 
           .teacher-image {
             background: rgb(255,255,255);
-            border: 1px solid rgb(200,200,200);
+            border: 1px solid $border-color-2;
             height: 115px;
             float: left;
             margin: 0 15px 0px 0;
@@ -351,7 +351,7 @@
 
     > section {
       @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
-      border: 1px solid rgb(200,200,200);
+      border: 1px solid $border-color-2;
 
       &.course-summary {
         padding: 16px 20px 30px;
@@ -401,7 +401,7 @@
       }
 
       a.university-name {
-        border-right: 1px solid rgb(200,200,200);
+        border-right: 1px solid $border-color-2;
         color: $base-font-color;
         font-family: $sans-serif;
         font-style: italic;
@@ -498,12 +498,12 @@
 
       li {
         @include clearfix;
-        border-bottom: 1px dotted rgb(220,220,220);
+        border-bottom: 1px dotted $border-color-2;
         margin-bottom: 20px;
         padding-bottom: 10px;
 
         &.prerequisites {
-          border: 1px solid rgb(220,220,220);
+          border: 1px solid $border-color-2;
           margin: 0 -10px 0;
           padding: 10px;
 
diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss
index 45ecfcd23f..2bea31bb99 100644
--- a/lms/static/sass/multicourse/_courses.scss
+++ b/lms/static/sass/multicourse/_courses.scss
@@ -1,12 +1,13 @@
 .find-courses, .university-profile {
-  background: rgb(252,252,252);
+  background: $course-profile-bg;
   padding-bottom: 60px;
 
   header.search {
-    background: rgb(240,240,240);
+    background: $course-profile-bg;
     background-size: cover;
+    @include background-image(url($homepage-bg-image));
     background-position: center top !important;
-    border-bottom: 1px solid rgb(100,100,100);
+    border-bottom: 1px solid $border-color-3;
     @include box-shadow(inset 0 -1px 8px 0 rgba(0,0,0, 0.2), inset 0 1px 12px 0 rgba(0,0,0, 0.3));
     height: 430px;
     margin-top: -69px;
@@ -24,8 +25,8 @@
 
       > hgroup {
         background: #FFF;
-        background: rgba(255,255,255, 0.93);
-        border: 1px solid rgb(100,100,100);
+        background: $course-header-bg;
+        border: 1px solid $border-color-3;
         @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
         padding: 20px 30px;
         position: relative;
@@ -41,7 +42,7 @@
 
         .logo {
           @include inline-block;
-          height: 80px;
+          height: 100px;
           margin-right: 30px;
           padding-right: 30px;
           position: relative;
@@ -51,7 +52,7 @@
             @extend .faded-vertical-divider;
             content: "";
             display: block;
-            height: 80px;
+            height: 100px;
             position: absolute;
             right: 0px;
             top: 0px;
@@ -83,7 +84,7 @@
   }
 
   section.message {
-    border-top: 1px solid rgb(220,220,220);
+    border-top: 1px solid $border-color-2;
     @include clearfix;
     margin-top: 20px;
     padding-top: 60px;
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index cc54b9b242..b173647550 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -30,8 +30,9 @@
     width: flex-grid(3);
 
     header.profile {
-      @include background-image(linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245)));
-      border: 1px solid rgb(200,200,200);
+      @include background-image($dashboard-profile-header-image);
+      background-color: $dashboard-profile-header-color;
+      border: 1px solid $border-color-2;
       @include border-radius(4px);
       @include box-sizing(border-box);
       width: flex-grid(12);
@@ -53,8 +54,8 @@
       padding: 0px 10px;
 
       > ul {
-        background: rgb(252,252,252);
-        border: 1px solid rgb(200,200,200);
+        background: $dashboard-profile-color;
+        border: 1px solid $border-color-2;
         border-top: none;
         //@include border-bottom-radius(4px);
         @include box-sizing(border-box);
@@ -66,7 +67,7 @@
 
         li {
           @include clearfix;
-          border-bottom: 1px dotted rgb(220,220,220);
+          border-bottom: 1px dotted $border-color-2;
           list-style: none;
           margin-bottom: 15px;
           padding-bottom: 17px;
@@ -128,8 +129,8 @@
     .news-carousel {
       @include clearfix;
       margin: 30px 10px 0;
-      border: 1px solid rgb(200,200,200);
-      background: rgb(252,252,252);
+      border: 1px solid $border-color-2;
+      background: $dashboard-profile-color;
       @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
 
       * {
@@ -156,14 +157,14 @@
         width: 11px;
         height: 11px;
         border-radius: 11px;
-        background: $light-gray;
+        background: $dot-color;
 
         &:hover {
-          background: #ccc;
+          background: $lighter-base-font-color;
         }
 
         &.current {
-          background: $blue;
+          background: $link-color;
         }
       }
 
@@ -201,7 +202,7 @@
 
         img {
           width: 100%;
-          border: 1px solid $light-gray;
+          border: 1px solid $border-color-1;
         }
       }
 
@@ -229,7 +230,7 @@
     width: flex-grid(9);
 
     > header {
-      border-bottom: 1px solid rgb(210,210,210);
+      border-bottom: 1px solid $border-color-2;
       margin-bottom: 30px;
     }
 
@@ -246,8 +247,9 @@
 
       a {
         background: rgb(240,240,240);
-        @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
-        border: 1px solid rgb(220,220,220);
+        @include background-image($button-bg-image);
+        background-color: $button-bg-color;
+        border: 1px solid $border-color-2;
         @include border-radius(4px);
         @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
         @include box-sizing(border-box);
@@ -260,7 +262,7 @@
         text-shadow: 0 1px rgba(255,255,255, 0.6);
 
         &:hover {
-          color: $blue;
+          color: $link-color;
           text-decoration: none;
         }
       }
@@ -272,7 +274,7 @@
       margin-right: flex-gutter();
       margin-bottom: 50px;
       padding-bottom: 50px;
-      border-bottom: 1px solid $light-gray;
+      border-bottom: 1px solid $border-color-1;
       position: relative;
       width: flex-grid(12);
       z-index: 20;
@@ -343,7 +345,7 @@
 
         .course-status {
           background: $yellow;
-          border: 1px solid rgb(200,200,200);
+          border: 1px solid $border-color-2;
           @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
           margin-top: 17px;
           margin-right: flex-gutter();
@@ -362,7 +364,7 @@
 
         .course-status-completed {
           background: #ccc;
-          color: #fff;
+          color: $very-light-text;
 
           p {
             color: #222;
@@ -374,7 +376,7 @@
         }
 
         .enter-course {
-          @include button(simple, $blue);
+          @include button(simple, $button-color);
           @include box-sizing(border-box);
           @include border-radius(3px);
           display: block;
@@ -386,7 +388,7 @@
           margin-top: 16px;
 
           &.archived {
-            @include button(simple, #eee);
+            @include button(simple, $button-archive-color);
             font: normal 15px/1.6rem $sans-serif;
             padding: 6px 32px 7px;
 
diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss
index b5546aa470..816adf575b 100644
--- a/lms/static/sass/multicourse/_home.scss
+++ b/lms/static/sass/multicourse/_home.scss
@@ -7,15 +7,16 @@
   }
 
   > header {
-    background: rgb(255,255,255);
-    @include background-image(url('/static/images/homepage-bg.jpg'));
+    background: $dashboard-profile-color;
+    @include background-image(url($homepage-bg-image));
     background-size: cover;
-    border-bottom: 1px solid rgb(80,80,80);
-    @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.9), inset 0 -1px 5px 0 rgba(0,0,0, 0.1));
+    border-bottom: 1px solid $border-color-3;
+    @include box-shadow(0 1px 0 0 $course-header-bg, inset 0 -1px 5px 0 rgba(0,0,0, 0.1));
     @include clearfix;
     height: 460px;
-    margin-top: -69px;
+    float: left;
     overflow: hidden;
+    margin-top: -69px;
     padding: 0px;
     width: flex-grid(12);
 
@@ -31,8 +32,8 @@
 
     .title {
       background: #FFF;
-      background: rgba(255,255,255, 0.93);
-      border: 1px solid rgb(100,100,100);
+      background: $course-header-bg;
+      border: 1px solid $border-color-3;
       @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
       @include box-sizing(border-box);
       min-height: 120px;
@@ -80,8 +81,8 @@
 
     .media {
       background: #FFF;
-      background: rgba(255,255,255, 0.93);
-      border: 1px solid rgb(100,100,100);
+      background: $course-header-bg;
+      border: 1px solid $border-color-3;
       border-left: 0;
       @include box-sizing(border-box);
       // @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
@@ -101,7 +102,7 @@
         height: 100%;
         overflow: hidden;
         position: relative;
-        background: url('../images/courses/video-thumb.jpg') center no-repeat;
+        background: url($video-thumb-url) center no-repeat;
         @include background-size(cover);
 
         .play-intro {
@@ -164,15 +165,15 @@
 
     > h2 {
       @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
-      border: 1px solid rgb(200,200,200);
+      border: 1px solid $border-color-2;
       @include border-radius(4px);
-      border-top-color: rgb(190,190,190);
+      border-top-color: $border-color-1;
       @include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0px 12px 0 rgba(0,0,0, 0.2));
       color: $lighter-base-font-color;
       letter-spacing: 1px;
       margin-bottom: 0px;
       margin-top: -15px;
-      padding: 10px 10px 8px;
+      padding: 10px 10px 12px;
       text-align: center;
       text-transform: uppercase;
       text-shadow: 0 1px rgba(255,255,255, 0.6);
@@ -180,7 +181,7 @@
   }
 
   .university-partners {
-    border-bottom: 1px solid rgb(210,210,210);
+    border-bottom: 1px solid $border-color-2;
     margin-bottom: 0px;
     overflow: hidden;
     position: relative;
@@ -366,13 +367,13 @@
   }
 
   .more-info {
-    border: 1px solid rgb(200,200,200);
+    border: 1px solid $border-color-2;
     margin-bottom: 80px;
     width: flex-grid(12);
 
     header {
       @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
-      border-bottom: 1px solid rgb(200,200,200);
+      border-bottom: 1px solid $border-color-2;
       @include clearfix;
       padding: 10px 20px 8px;
       position: relative;
@@ -415,14 +416,14 @@
       width: flex-grid(12);
 
       .blog-posts {
-        border-bottom: 1px solid rgb(220,220,220);
+        border-bottom: 1px solid $border-color-2;
         margin-bottom: 20px;
         padding-bottom: 20px;
         @include clearfix;
 
         > article {
           border: 1px dotted transparent;
-          border-color: rgb(220,220,220);
+          border-color: $border-color-2;
           @include box-sizing(border-box);
           @include clearfix;
           float: left;
@@ -432,8 +433,8 @@
           width: flex-grid(4);
 
           &:hover {
-            background: rgb(248,248,248);
-            border: 1px solid rgb(220,220,220);
+            background: $body-bg;
+            border: 1px solid $border-color-2;
             @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.1));
           }
 
@@ -442,7 +443,7 @@
           }
 
           .post-graphics {
-            border: 1px solid rgb(190,190,190);
+            border: 1px solid $border-color-1;
             @include box-sizing(border-box);
             display: block;
             float: left;
diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss
index e99559a49f..f78c483925 100644
--- a/lms/static/sass/shared/_course_object.scss
+++ b/lms/static/sass/shared/_course_object.scss
@@ -31,8 +31,8 @@
     }
 
     .course {
-      background: rgb(250,250,250);
-      border: 1px solid rgb(180,180,180);
+      background: $body-bg;
+      border: 1px solid $border-color-1;
       @include border-radius(2px);
       @include box-sizing(border-box);
       @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9));
@@ -42,7 +42,7 @@
       @include transition(all, 0.15s, linear);
 
       .status {
-        background: $blue;
+        background: $link-color;
         color: white;
         font-size: 10px;
         left: 10px;
@@ -55,7 +55,7 @@
       }
 
       .status:after {
-        border-bottom: 6px solid shade($blue, 50%);
+        border-bottom: 6px solid shade($link-color, 50%);
         border-right: 6px solid transparent;
         content: "";
         display: block;
@@ -90,7 +90,7 @@
       }
 
       .inner-wrapper {
-        border: 1px solid rgba(255,255,255, 1);
+        border: 1px solid $border-color-4;
         height: 100%;
         height: 200px;
         overflow: hidden;
@@ -116,12 +116,12 @@
             text-decoration: none;
 
             .info-link {
-              color: $blue;
+              color: $link-color;
               opacity: 1;
             }
 
             h2 {
-              color: $blue;
+              color: $link-color;
             }
           }
 
@@ -176,7 +176,7 @@
       // }
 
       .info {
-        background: rgb(255,255,255);
+        background: $content-wrapper-bg;
         height: 220px + 130px;
         left: 0px;
         position: absolute;
@@ -221,14 +221,14 @@
           width: 100%;
 
           .university {
-            border-right: 1px solid rgb(200,200,200);
+            border-right: 1px solid $border-color-2;
             color: $lighter-base-font-color;
             letter-spacing: 1px;
             margin-right: 10px;
             padding-right: 10px;
 
             &:hover {
-              color: $blue;
+              color: $link-color;
             }
           }
 
@@ -240,9 +240,9 @@
       }
 
       &:hover {
-        background: rgb(245,245,245);
-        border-color: rgb(170,170,170);
-        @include box-shadow(0 1px 16px 0 rgba($blue, 0.4));
+        background: $course-profile-bg;
+        border-color: $border-color-1;
+        @include box-shadow(0 1px 16px 0 rgba($shadow-color, 0.4));
 
         .info {
           top: -150px;
diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss
index d891ff408b..e3e99ae301 100644
--- a/lms/static/sass/shared/_footer.scss
+++ b/lms/static/sass/shared/_footer.scss
@@ -159,4 +159,4 @@
       width: 360px;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/lms/static/sass/shared/_forms.scss b/lms/static/sass/shared/_forms.scss
index 79d476f420..3350081850 100644
--- a/lms/static/sass/shared/_forms.scss
+++ b/lms/static/sass/shared/_forms.scss
@@ -15,8 +15,8 @@ input[type="text"],
 input[type="email"],
 input[type="password"],
 input[type="tel"] {
-  background: rgb(250,250,250);
-  border: 1px solid rgb(200,200,200);
+  background: $form-bg-color;
+  border: 1px solid $border-color-2;
   @include border-radius(3px);
   @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
   @include box-sizing(border-box);
@@ -31,8 +31,8 @@ input[type="tel"] {
   }
 
   &:focus {
-    border-color: lighten($blue, 20%);
-    @include box-shadow(0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15));
+    border-color: darken($button-archive-color, 50%);
+    @include box-shadow(0 0 6px 0 darken($button-archive-color, 50%), inset 0 0 4px 0 rgba(0,0,0, 0.15));
     outline: none;
   }
 }
@@ -46,7 +46,7 @@ input[type="button"],
 button,
 .button {
   @include border-radius(3px);
-  @include button(shiny, $blue);
+  @include button(shiny, $button-color);
   font: normal 1.2rem/1.6rem $sans-serif;
   letter-spacing: 1px;
   padding: 4px 20px;
diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index 5eb453448c..878fdae70a 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -22,6 +22,28 @@ header.global {
     margin: -2px 39px 0px 0px;
     position: relative;
 
+    &::before {
+      @extend .faded-vertical-divider;
+      content: "";
+      display: block;
+      height: 50px;
+      position: absolute;
+      right: 1px;
+      top: -5px;
+      width: 1px;
+    }
+
+    &::after {
+      @extend .faded-vertical-divider-light;
+      content: "";
+      display: block;
+      height: 50px;
+      position: absolute;
+      right: 0px;
+      top: -10px;
+      width: 1px;
+    }
+
     a {
       display: block;
     }
@@ -55,7 +77,6 @@ header.global {
     li.secondary {
       > a {
         color: $lighter-base-font-color;
-        color: $blue;
         display: block;
         font-family: $sans-serif;
         @include inline-block;
@@ -78,9 +99,9 @@ header.global {
       margin-right: 5px;
 
       > a {
-        @include background-image(linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%));
-        border: 1px solid transparent;
-        border-color: rgb(200,200,200);
+        @include background-image($button-bg-image);
+        background-color: $button-bg-color;
+        border: 1px solid $border-color-2;
         @include border-radius(3px);
         @include box-sizing(border-box);
         @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
@@ -101,7 +122,7 @@ header.global {
         }
 
         &:hover, &.active {
-          background: #FFF;
+          background: $button-bg-hover-color;
         }
       }
     }
@@ -159,10 +180,10 @@ header.global {
       }
 
       ul.dropdown-menu {
-        background: rgb(252,252,252);
+        background: $border-color-4;
         @include border-radius(4px);
         @include box-shadow(0 2px 24px 0 rgba(0,0,0, 0.3));
-        border: 1px solid rgb(100,100,100);
+        border: 1px solid $border-color-3;
         display: none;
         padding: 5px 10px;
         position: absolute;
@@ -178,12 +199,12 @@ header.global {
         &::before {
           background: transparent;
           border: {
-            top: 6px solid rgba(252,252,252, 1);
-            right: 6px solid rgba(252,252,252, 1);
+            top: 6px solid $border-color-4;
+            right: 6px solid $border-color-4;
             bottom: 6px solid transparent;
             left: 6px solid transparent;
           }
-          @include box-shadow(1px 0 0 0 rgb(0,0,0), 0 -1px 0 0 rgb(0,0,0));
+          @include box-shadow(1px 0 0 0 $border-color-3, 0 -1px 0 0 $border-color-3);
           content: "";
           display: block;
           height: 0px;
@@ -196,7 +217,7 @@ header.global {
 
         li {
           display: block;
-          border-top: 1px dotted rgba(200,200,200, 1);
+          border-top: 1px dotted $border-color-2;
           @include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.05));
 
           &:first-child {
@@ -208,7 +229,7 @@ header.global {
             border: 1px solid transparent;
             @include border-radius(3px);
             @include box-sizing(border-box);
-            color: $blue;
+            color: $link-color;
             cursor: pointer;
             display: block;
             margin: 5px 0px;
@@ -328,4 +349,4 @@ header.global {
     text-decoration: none;
     color: $m-blue-s1 !important;
   } 
-}
\ No newline at end of file
+}
diff --git a/lms/static/sass/shared/_modal.scss b/lms/static/sass/shared/_modal.scss
index 8ff58c1c14..7a51213dee 100644
--- a/lms/static/sass/shared/_modal.scss
+++ b/lms/static/sass/shared/_modal.scss
@@ -52,7 +52,7 @@
   }
 
   .inner-wrapper {
-    background: rgb(245,245,245);
+    background: $modal-bg-color;
     @include border-radius(0px);
     border: 1px solid rgba(0, 0, 0, 0.9);
     @include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
@@ -149,7 +149,7 @@
       }
 
       label {
-        color: #646464;
+        color: $text-color;
 
         &.field-error {
           display: block;