diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 5f516da2a48..e4909eed8dc 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -8,10 +8,11 @@
   width: 100%;
   tr {text-align: left;}
   td, th {padding: 8px;}
-  th {border-top: 1px solid $primary_lighter;}
-  td {border-bottom: 1px solid $primary_lighter; border-top: 1px solid $primary_lighter;}
-  tr:hover { background-color: darken($secondary, 2.5%); }
-  tr.selected { background-color: lighten($tertiary, 58%); }
+  th {border-top: 1px solid $primary_border_color;}
+  td {border-bottom: 1px solid $primary_border_color; border-top: 1px solid $primary_border_color;}
+  td:last-of-type {border-bottom: none;}
+  tr:hover { background-color: darken($primary_background_color, 2.5%); }
+  tr.selected { background-color: lighten($tertiary_background_color, 58%); }
   .filters input { margin-bottom: 0px; }
 }
 
@@ -19,10 +20,10 @@
   font-size: 12px;
   float: right;
   margin-right: 10px;
-  background-color: $primary_lightest;
+  background-color: lighten($secondary_background_color, 76%);
   padding: 2px 5px;
   border-radius: 5px;
-  color: $primary_medium;
+  color: $secondary_text_color;
 }
 
 .admin-content {
@@ -31,7 +32,6 @@
     padding: 8px;
 
     p {
-      margin-left: 6px;
     }
 
     .ace-wrapper {
@@ -55,11 +55,11 @@
 
       .bar {
         margin-top: 5px;
-        background-color: $tertiary;
+        background-color: $emphasis_background_color;
         display: inline-block;
         text-align: right;
         padding-right: 8px;
-        color: $secondary;
+        color: $tertiary_text_color;
       }
     }
   }
@@ -68,13 +68,13 @@
 .admin-loading {
   width: 100px;
   margin: 0 auto 30px auto;
-  background-color: $primary;
+  background-color: $secondary_background_color;
   @include border-radius-all(10px);
   padding: 10px 10px 10px 30px;
   font-size: 15px;
   line-height: 23px;
   text-align: center;
-  color: $secondary;
+  color: $tertiary_text_color;
   background: {
     image: image-url("spinner_96_w.gif");
     repeat: no-repeat;
@@ -88,18 +88,16 @@
 }
 
 .admin-controls {
-  @include border-radius-all(5px);
-  background-color: darken($secondary, 5%);
-  border: 1px solid darken($secondary, 10%);
+  background-color: darken($primary_background_color, 5%);
   padding: 10px 10px 3px 0px;
   height: 35px;
   .nav.nav-pills {
     li.active {
       a {
-        border-color: darken($primary_medium, 10%);
-        background-color: $primary_medium;
+        border-color: darken($primary_border_color, 10%);
+        background-color: $tertiary_background_color;
         &:hover {
-          background-color: $primary_medium;
+          background-color: $tertiary_background_color;
         }
       }
     }
@@ -107,14 +105,14 @@
   h1 {
     font-size: 20px;
     line-height: 25px;
-    color: $primary_medium;
+    color: $secondary_text_color;
   }
   .controls {
     margin-left: 10px;
   }
   button {
     margin-right: 5px;
-    margin-left: 5px;
+    
   }
   input[type=text] {
     display: inline-block;
@@ -153,12 +151,12 @@
 
 .site-settings-nav {
   width: 200px;
-  margin-top: 40px;
+  margin-top: 30px;
   .nav-stacked {
     border-right: none;
   }
   li a.active {
-    color: $secondary;
+    color: $tertiary_text_color;
     background-color: $nav-stacked-background-color-active;
   }
 }
@@ -202,7 +200,7 @@
 
     .desc {
       padding-top: 3px;
-      color: darken($secondary, 40%);
+      color: darken($secondary_text_color, 40%);
     }
 
     h3 {
@@ -213,11 +211,11 @@
 
   .setting.overridden {
     input[type=text] {
-      background-color: lighten($highlight, 40%);
+      background-color: lighten($highlight_background_color, 40%);
     }
 
     h3 {
-      color: darken($highlight, 30%);
+      color: darken($highlight_text_color, 30%);
     }
   }
 }
@@ -225,21 +223,21 @@
 section.details {
   h1 {
     font-size: 15px;
-    background-color: $primary_light;
-    color: $secondary;
+    background-color: lighten($secondary_background_color, 50%);
+    color: $tertiary_text_color;
     padding: 0 10px;
     margin: 0px 0 5px 0;
   }
 }
 
 #selected-controls {
-  background-color: lighten($tertiary, 50%);
+  background-color: lighten($emphasis_background_color, 50%);
   padding: 8px;
   min-height: 27px;
   position: fixed;
   bottom: 0;
   width: 1075px;
-  border: 1px solid lighten($tertiary, 45%);
+  border: 1px solid lighten($emphasis_border_color, 45%);
 }
 
 .display-row {
@@ -249,9 +247,9 @@ section.details {
     border-top: 0;
   }
   &.highlight-danger {
-    background-color: $highlight_danger_light;
+    background-color: $warning_background_color;
   }
-  border-top: 1px solid $primary_lighter;
+  border-top: 1px solid $primary_border_color;
   &:before, &:after {
     display: table;
     content: "";
@@ -308,7 +306,7 @@ section.details {
       margin-top: 5px;
     }
     .preview-link {
-      margin-left: 30px;
+      margin-left: 15px;
     }
     padding-left: 10px;
     width: 65%;
@@ -333,7 +331,7 @@ section.details {
       float: right;
       margin-top: 7px;
       span {
-        margin-right: 20px;
+        margin-right: 10px;
       }
     }
     .buttons {
@@ -343,7 +341,7 @@ section.details {
         padding: 5px 0 0 0;
         margin-left: 10px;
         width: 80px;
-        color: $primary_medium;
+        color: $secondary_text_color;
       }
     }
   }
@@ -353,10 +351,10 @@ section.details {
 .admin-flags {
 
   tr.hidden-post td.excerpt { opacity: 0.4;  }
-  tr.deleted td.excerpt { opacity: 0.8; background-color: $highlight_danger_light; }
+  tr.deleted td.excerpt { opacity: 0.8; background-color: $warning_background_color; }
   td.message {
     padding: 4px 8px;
-    background-color: $highlight_light;
+    background-color: $highlight_background_color;
   }
   td { vertical-align: top; }
   th { text-align: left; }
@@ -436,13 +434,13 @@ section.details {
   }
 
   .up-to-date {
-    color: $success;
+    color: $success_text_color;
   }
   .updates-available {
-    color: $highlight_danger;
+    color: $warning_text_color;
   }
   .critical-updates-available {
-    color: $highlight_danger;
+    color: $warning_text_color;
   }
 }
 
@@ -485,24 +483,24 @@ table.api-keys {
 
     .title {
       i.fa {
-        color: $primary;
+        color: $primary_text_color;
       }
     }
 
     th {
       font-weight: normal;
       text-align: center;
-      background-color: $primary_lightest;
+      background-color: lighten($secondary_background_color, 76%);
     }
     th.title {
       text-align: left;
     }
     thead {
       tr:hover > td {
-        background-color: $secondary;
+        background-color: $primary_background_color;
       }
       tr:hover > th {
-        background-color: $primary_lighter;
+        background-color: lighten($secondary_background_color, 60%);
       }
     }
 
@@ -515,13 +513,13 @@ table.api-keys {
       }
 
       &.trending-up {
-        color: $success;
+        color: $success_text_color;
         i.up {
           display: inline;
         }
       }
       &.trending-down {
-        color: $highlight_danger;
+        color: $warning_text_color;
         i.down {
           display: inline;
         }
@@ -537,11 +535,11 @@ table.api-keys {
 
   &.detected-problems {
     @include border-radius-all(5px);
-    background-color: $primary_lightest;
-    border: 1px solid $primary_lighter;
+    background-color: lighten($secondary_background_color, 76%);
+    border: 1px solid $primary_border_color;
     margin-bottom: 20px;
     margin-top: 10px;
-    box-shadow: inset 0 0 10px $primary_lighter;
+    box-shadow: inset 0 0 10px rgba($primary_border_color, .4);
 
     .look-here {
       float: left;
@@ -550,7 +548,7 @@ table.api-keys {
       .fa {
         font-size: 32px;
         vertical-align: middle;
-        color: $primary_medium;
+        color: $secondary_text_color
       }
     }
 
@@ -564,10 +562,10 @@ table.api-keys {
         text-align: right;
       }
       .btn {
-        background-color: $primary_lighter;
-      }
+        background-color: lighten($secondary_background_color, 60%);
     }
   }
+}
 
   &.totals {
     table {
@@ -602,7 +600,7 @@ table.api-keys {
 
 
 .commits-widget {
-  border: solid 1px $primary_lighter;
+  border: solid 1px $primary_border_color;
   width: 500px;
   height: 180px;
   margin-bottom: 36px;
@@ -622,7 +620,7 @@ table.api-keys {
     list-style: none;
   }
   a {
-    color: $primary;
+    color: $primary_text_color;
     text-decoration: none;
   }
   a:hover {
@@ -630,11 +628,11 @@ table.api-keys {
   }
 
   .header {
-    color: $primary;
+    color: $primary_text_color;
     font-weight: bold;
     height: 30px;
-    border-bottom: solid 1px $primary_lighter;
-    background: $primary_lightest;
+    border-bottom: solid 1px $primary_border_color;
+    background-color: lighten($secondary_background_color, 60%);
     cursor: pointer;
 
     h1 {
@@ -657,8 +655,8 @@ table.api-keys {
       @extend .clearfix;
       line-height: 1.0em;
       padding: 6px 8px;
-      border-bottom: solid 1px $primary_lighter;
-      background: $primary_lightest;
+      border-bottom: solid 1px $primary_border_color;
+    background-color: lighten($secondary_background_color, 76%);
       .left {
         float: left;
       }
@@ -668,25 +666,25 @@ table.api-keys {
 
       img {
         margin-top: 2px;
-        border: solid 1px $primary_lighter;
+        border: solid 1px $primary_border_color;
         padding: 2px;
-        background-color: $secondary;
+        background-color: $primary_background_color;
       }
 
       .commit-message {
-        color: $primary;
+        color: $primary_text_color;
         font-size: 12px;
         font-weight: bold;
       }
 
       .commit-meta {
-        color: $primary_medium;
+        color: $secondary_text_color;
         font-size: 12px;
       }
 
       .committer-name {
         font-weight: bold;
-        color: $primary;
+        color: $primary_text_color;
       }
     }
     li:last-child {
@@ -699,18 +697,18 @@ table.api-keys {
     width: 6px;
   }
   ::-webkit-scrollbar-thumb {
-    background-color: $primary_lighter;
+    background-color: lighten($secondary_background_color, 60%);
     -webkit-border-radius: 3px;
   }
   ::-webkit-scrollbar-track {
-    border-left: solid 1px $primary_lighter;
+    border-left: solid 1px $primary_border_color;
   }
 }
 
 .content-list {
 
   h3 {
-    color: $primary_medium;
+    color: $primary_text_color;
     font-size: 15px;
     padding-left: 5px;
   }
@@ -720,22 +718,22 @@ table.api-keys {
     margin: 0;
 
     li {
-      border-bottom: 1px solid $primary_lighter;
+      border-bottom: 1px solid $primary_border_color;
     }
 
     li a {
       display: block;
       padding: 10px;
-      color: $primary_medium;
+      color: $primary_text_color;
 
       &:hover {
         background-color: #eee;
-        color: $primary_medium;
+        color: $primary_text_color;
       }
 
       &.active {
         font-weight: bold;
-        color: $primary;
+        color: $primary_text_color;
       }
     }
   }
@@ -751,7 +749,7 @@ table.api-keys {
   margin-left: 20px;
 
   p.description {
-    color: $primary_medium;
+    color: $secondary_text_color;
   }
 
   .controls {
@@ -886,13 +884,16 @@ table.api-keys {
   margin: 0 0 20px 6px;
   a.filter {
     display: inline-block;
-    background-color: $primary_lighter;
+    background-color: lighten($secondary_background_color, 60%);
     padding: 3px 10px;
     border-radius: 3px;
-    margin-left: 5px;
-    color: $primary;
+    
+    color: $primary_text_color;
     &:hover {
-      color: $link-color-hover;
+      color: $primary_text_color;
+      background-color: lighten($secondary_background_color, 76%);
+
+
     }
     .label {
       font-weight: bold;
@@ -919,12 +920,12 @@ table.api-keys {
 }
 
 .staff-actions, .screened-emails, .screened-urls, .screened-ip-addresses {
-  margin-left: 5px;
-  border-bottom: dotted 1px $primary_lighter;
+  
+  border-bottom: dotted 1px $primary_border_color;
 
   .heading-container {
     width: 100%;
-    background-color: $primary_lightest;
+    background-color: lighten($secondary_background_color, 76%);
   }
   .col.heading {
     font-weight: bold;
@@ -938,12 +939,12 @@ table.api-keys {
     overflow-x: hidden;
   }
   .col.first {
-    margin-left: 5px;
+    
   }
 
   .ember-list-item-view {
     width: 100%;
-    border-top: solid 1px $primary_lighter;
+    border-top: solid 1px $primary_border_color;
   }
 }
 
@@ -955,10 +956,10 @@ table.api-keys {
 
 .leader-requirements {
   .fa-check {
-    color: $success;
+    color: $success_text_color;
   }
   .fa-times {
-    color: $highlight_danger;
+    color: $warning_text_color;
   }
 }
 
@@ -970,7 +971,7 @@ $rollback-dark: darken($rollback, 10%) !default;
 $rollback-darker: darken($rollback, 20%) !default;
 
 .btn-rollback {
-  color: $secondary;
+  color: $tertiary_text_color;
   background: $rollback;
   &:hover {
     background: $rollback-dark;
diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss
index e18bacdd989..e686599e0dd 100644
--- a/app/assets/stylesheets/common/components/badges.css.scss
+++ b/app/assets/stylesheets/common/components/badges.css.scss
@@ -21,12 +21,12 @@
 
 .badge-category {
   padding: 4px 6px;
-  color: $secondary;
+  color: $tertiary_text_color;
   font-size: 12px;
   font-weight: bold;
   white-space: nowrap;
   &[href] {
-  color: $secondary;
+  color: $tertiary_text_color;
   }
   &.restricted {
     div {
@@ -55,19 +55,19 @@ h1 a.badge-category div {vertical-align: top;}
   @extend %badge;
   padding: 4px;
   padding-top: 3px;
-  color: $secondary;
+  color: $tertiary_text_color;
   font-size: 11px;
   min-width: 10px;
   text-align: center;
   background-color: $badge-notification-background-color;
   &[href] {
-  color: $secondary;
+  color: $tertiary_text_color;
   }
 
   // New posts
 
   &.new-posts, &.unread-posts {
-    background-color: $tertiary;
+    background-color: $emphasis_text_color;
   }
 
   // Click count
@@ -101,10 +101,10 @@ h1 a.badge-category div {vertical-align: top;}
 .badge-group {
   @extend %badge;
   padding: 3px 5px;
-  color: $primary;
-  text-shadow: 0 1px 0 rgba($secondary, 0.2);
+  color: $primary_text_color;
+  text-shadow: 0 1px 0 rgba($secondary_shadow_color, 0.2);
   background-color: #ddd;
   border-color: #aaa;
   font-size: 12px;
-  @include box-shadow(inset 0 1px 0 rgba($secondary, 0.52));
+  @include box-shadow(inset 0 1px 0 rgba($secondary_shadow_color, 0.52));
 }
diff --git a/app/assets/stylesheets/common/components/buttons.css.scss b/app/assets/stylesheets/common/components/buttons.css.scss
index ae805629a39..11f9df6f7f0 100644
--- a/app/assets/stylesheets/common/components/buttons.css.scss
+++ b/app/assets/stylesheets/common/components/buttons.css.scss
@@ -40,9 +40,9 @@
 
 .btn {
   border: none;
-  color: $primary;
+  color: $primary_text_color;
   font-weight: normal;
-  background: lighten($primary_lighter, 10%);
+  background: lighten($secondary_background_color, 73%);
 
   &[href] {
     color: $btn-default-color;
@@ -56,7 +56,7 @@
   }
   &[disabled] {
     background: $btn-default-background-color;
-    &:hover { color: $primary; }
+    &:hover { color: $primary_text_color; }
     cursor: not-allowed;
   }
 }
@@ -72,13 +72,13 @@
 
 .btn-primary {
   border: none;
-  color: $secondary;
+  color: $tertiary_text_color;
   font-weight: normal;
   color: #fff;
   background: $btn-primary-background-color;
 
   &[href] {
-    color: $secondary;
+    color: $tertiary_text_color;
   }
   &:hover {
     color: #fff;
@@ -97,11 +97,11 @@
 // --------------------------------------------------
 
 .btn-danger {
-  color: $secondary;
+  color: $tertiary_text_color;
   font-weight: normal;
   background: $btn-danger-background-color;
   &[href] {
-    color: $secondary;
+    color: $tertiary_text_color;
   }
   &:hover{
     background: $btn-danger-background-color-dark;
@@ -118,11 +118,11 @@
 // --------------------------------------------------
 
 .btn-social {
-  color: $secondary;
-  text-shadow: 0 1px 0 rgba($primary, 0.2);
-  @include box-shadow(inset 0 1px 0 rgba($secondary, 0.1));
+  color: $tertiary_text_color;
+  text-shadow: 0 1px 0 rgba($primary_shadow_color, 0.2);
+  @include box-shadow(inset 0 1px 0 rgba($secondary_shadow_color, 0.1));
   &[href] {
-    color: $secondary;
+    color: $tertiary_text_color;
   }
   &:before {
     margin-right: 7px;
diff --git a/app/assets/stylesheets/common/components/navs.css.scss b/app/assets/stylesheets/common/components/navs.css.scss
index 1b73536b11d..0a351392dc7 100644
--- a/app/assets/stylesheets/common/components/navs.css.scss
+++ b/app/assets/stylesheets/common/components/navs.css.scss
@@ -40,7 +40,7 @@
     }
     &.active > a, > a.active {
       border-color: darken($nav-pills-background-color-active, 10%);
-      color: #fff;
+      color: $tertiary_text_color;
       background-color: $nav-pills-background-color-active;
     }
   }
@@ -56,7 +56,7 @@
   padding: 0;
   overflow: hidden;
   background-color: $nav-stacked-background-color;
-  @include box-shadow(0 1px 0 $secondary);
+  @include box-shadow(0 1px 0 $secondary_shadow_color);
   > li {
     border-bottom: 1px solid $nav-stacked-divider-color;
     &:last-of-type {
@@ -73,7 +73,7 @@
   }
   .active > a,
   .active .fa-chevron-right {
-    color: $secondary;
+    color: $tertiary_text_color;
     background-color: $nav-stacked-background-color-active;
   }
   .count {
diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index c3fe7d5b71d..6a02707718e 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -6,9 +6,9 @@
 // --------------------------------------------------
 
 html {
-  color: $primary;
+  color: $primary_text_color;
   font: #{$base-font-size}/#{$base-line-height} $base-font-family;
-  background-color: $secondary;
+  background-color: $primary_background_color;
   overflow-y: scroll;
   -webkit-font-smoothing: subpixel-antialiased;
 }
@@ -39,7 +39,7 @@ hr {
   height: 1px;
   margin: 1em 0;
   border: 0;
-  border-top: 1px solid $primary_lightest;
+  border-top: 1px solid $primary_border_color;
   padding: 0;
 }
 
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 66dd1f4bc94..113717c26f3 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -13,9 +13,19 @@ $large-width: 1110px !default;
 // Primary color variables
 // --------------------------------------------------
 
-$yellow: lighten(#FFFF00, 20%);
+$black: #333 !default;
+$white: #fff !default;
+
+$blue: #0099e6 !default;
+
+$yellow: lighten(#FFFF00, 15%) !default;
 $light_yellow: lighten($yellow, 20%) !default;
 $lightest_yellow: lighten($yellow, 30%) !default;
+
+$red: #e45735 !default;
+$pink: #fa6c8d !default;
+$green: #009900 !default;
+
 $google: #5b76f7 !default;
 $facebook: #3b5998 !default;
 $cas: #70BA61 !default;
@@ -23,173 +33,180 @@ $twitter: #00bced !default;
 $yahoo: #810293 !default;
 $github: #6d6d6d !default;
 
-
-$primary: #333 !default;
-$secondary: #fff !default;
-$tertiary: #0088cc !default;
-$highlight: lighten(#FFFF00, 12%) !default;
-$highlight_danger: #e45735 !default;
-$heart: #fa6c8d !default;
-$success: green !default;
-
-
-//--------------------------------------------------- Main Variable Controllers
-
-
-$primary_medium: lighten($primary, 35%) !default; //dark grey
-$primary_light: lighten($primary, 50%) !default; // grey
-$primary_lighter: lighten($primary, 60%) !default; //light grey
-$primary_lightest: lighten($primary, 76%) !default; //lighter grey
-
-$tertiary_lightest: lighten($tertiary, 50%) !default; //lighte blue
-$tertiary_light: lighten($tertiary, 30%) !default; // light blue
-$tertiary_dark: darken($tertiary, 10%) !default; // dark blue
-
-$highlight_danger_light: lighten($highlight_danger, 35%) !default; //lightest red
-$highlight_danger_dark: darken($highlight_danger, 10%) !default; //dark red
-$highlight_danger_darker: darken($highlight_danger, 60%) !default; //dark red
-
-$heart_light: lighten($heart, 22%) !default; //light pink
-$heart_dark: darken($heart, 10%) !default; // dark pink
-
-$highlight_light: lighten($highlight, 30%) !default;
-
-$success_light: lighten($success, 60%);
-$success_dark: darken($success, 30%);
-$success_darker: darken($success, 60%);
-
 // Base
 // --------------------------------------------------
 
 $base-font-size: 14px !default;
 $base-line-height: 19px !default;
 $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
-$base-background-color: $primary_lighter !default;
+$base-background-color: lighten($black, 60%) !default;
 
 // Links
 // --------------------------------------------------
 
-$link-color: $tertiary !default;
-$link-color-visited: $tertiary_dark !default;
-$link-color-hover: $tertiary_dark !default;
-$link-color-active: $tertiary_dark !default;
+$link-color: $blue !default;
+$link-color-visited: darken($blue, 10%) !default;
+$link-color-hover: darken($blue, 10%) !default;
+$link-color-active: darken($blue, 10%) !default;
 
 // Badges
 // --------------------------------------------------
 
 // Notification badge
 
-$badge-notification-background-color: $primary_medium !default;
+$badge-notification-background-color: lighten($black, 35%) !default;
 
 // Posts badge
 
-$badge-posts-color: $primary_medium !default;
+$badge-posts-color: lighten($black, 35%) !default;
 
 // Buttons
 // --------------------------------------------------
 
 // Default button
 
-$btn-default-color: $primary !default;
-$btn-default-background-color: $primary_light !default;
-$btn-default-background-color-hover: $primary_lightest !default;
+$btn-default-color: $black !default;
+$btn-default-background-color:  lighten($black, 50%) !default;
+$btn-default-background-color-hover: lighten($black, 76%) !default;
 
 // Primary button
 
-$btn-primary-border-color: $tertiary_dark !default;
-$btn-primary-background-color: $tertiary !default;
-$btn-primary-background-color-dark: $tertiary !default;
-$btn-primary-background-color-light: $tertiary_light !default;
+$btn-primary-border-color: darken($blue, 10%) !default;
+$btn-primary-background-color: $blue !default;
+$btn-primary-background-color-dark: $blue !default;
+$btn-primary-background-color-light: lighten($blue, 30%) !default;
 
 // Danger button (delete, etc)
 
-$btn-danger-border-color: $highlight_danger_dark !default;
-$btn-danger-background-color: $highlight_danger !default;
-$btn-danger-background-color-dark: $highlight_danger_dark !default;
-$btn-danger-background-color-light: $highlight_danger !default;
+$btn-danger-border-color: darken($red, 10%) !default;
+$btn-danger-background-color: $red !default;
+$btn-danger-background-color-dark: darken($red, 10%) !default;
+$btn-danger-background-color-light: $red !default;
+
+$btn-success-background: lighten($green, 5%);
 
 // Navigation menus
 // --------------------------------------------------
 
 // Pill nav
 
-$nav-pills-color: $primary !default;
-$nav-pills-color-hover: $highlight_danger !default;
-$nav-pills-border-color-hover: $highlight_danger_light !default;
-$nav-pills-background-color-hover: $highlight_danger_light  !default;
-$nav-pills-color-active: $highlight_danger !default;
-$nav-pills-border-color-active: $highlight_danger_dark !default;
-$nav-pills-background-color-active: $highlight_danger !default;
+$nav-pills-color: $black !default;
+$nav-pills-color-hover: $red !default;
+$nav-pills-border-color-hover: lighten($red, 35%) !default;
+$nav-pills-background-color-hover: lighten($red, 35%)  !default;
+$nav-pills-color-active: $red !default;
+$nav-pills-border-color-active: darken($red, 10%) !default;
+$nav-pills-background-color-active: $red !default;
 
 // Stacked nav
 
-$nav-stacked-color: $primary !default;
-$nav-stacked-border-color: $primary_lighter !default;
-$nav-stacked-background-color: $primary_lightest !default;
-$nav-stacked-divider-color: $primary_lighter !default;
-$nav-stacked-chevron-color: $primary_light !default;
-$nav-stacked-border-color-active: $highlight_danger !default;
-$nav-stacked-background-color-active: $highlight_danger !default;
+$nav-stacked-color: $black !default;
+$nav-stacked-border-color: lighten($black, 60%) !default;
+$nav-stacked-background-color: lighten($black, 76%)  !default;
+$nav-stacked-divider-color: lighten($black, 60%) !default;
+$nav-stacked-chevron-color: lighten($black, 50%) !default;
+$nav-stacked-border-color-active: $red !default;
+$nav-stacked-background-color-active: $red !default;
 
 // Button nav
 
-$nav-button-color: $primary_medium !default;
-$nav-button-color-hover: $primary !default;
-$nav-button-background-color-hover: $primary_lighter !default;
-$nav-button-color-active: $primary !default;
-$nav-button-background-color-active: $primary_lighter !default;
+$nav-button-color: lighten($black, 35%) !default;
+$nav-button-color-hover: $black !default;
+$nav-button-background-color-hover: lighten($black, 60%) !default;
+$nav-button-color-active: $black !default;
+$nav-button-background-color-active: lighten($black, 60%) !default;
 
 // Header
 
-$modal-header-color: $highlight_danger !default;
-$modal-header-border-color: $primary_light !default;
-$modal-close-button-color: $primary_light;
+$modal-header-color: $red !default;
+$modal-header-border-color: lighten($black, 50%) !default;
+$modal-close-button-color: lighten($black, 50%);
 
-$nav-like-button-color-hover: $heart !default;
-$nav-like-button-background-color-hover: $heart_light !default;
-$nav-like-button-color-active: $heart_dark !default;
-$nav-like-button-background-color-active: $heart_light !default;
+$nav-like-button-color-hover: $pink !default;
+$nav-like-button-background-color-hover: lighten($pink, 22%) !default;
+$nav-like-button-color-active: darken($pink, 10%) !default;
+$nav-like-button-background-color-active: lighten($pink, 22%) !default;
 
 // Topic list
 // --------------------------------------------------
 
-$topic-list-border-color: $primary_light !default;
-$topic-list-th-color: $primary !default;
-$topic-list-th-border-color: $primary_light !default;
-$topic-list-th-background-color: $primary_lightest !default;
-$topic-list-td-color: $primary_medium !default;
-$topic-list-td-border-color: $primary_lighter !default;
-$topic-list-star-color: $primary_lighter !default;
-$topic-list-starred-color: $highlight_danger !default;
+$topic-list-border-color: lighten($black, 50%) !default;
+$topic-list-th-color: $black !default;
+$topic-list-th-border-color: lighten($black, 50%) !default;
+$topic-list-th-background-color: lighten($black, 76%) !default;
+$topic-list-td-color: lighten($black, 35%) !default;
+$topic-list-td-border-color: lighten($black, 60%) !default;
+$topic-list-star-color: lighten($black, 60%) !default;
+$topic-list-starred-color: $red !default;
+
+$quote-background: lighten($black, 76%);
+
+$topicMenuColor: darken($white, 80%);
+$bookmarkColor: $blue;
+
+$tag_color: lighten($blue, 50%);
+$post_footer: lighten($black, 76%);
+
+$controls: lighten($black, 35%);
+$controls_hover: $blue;
+$controls_active: darken($blue, 10%);
 
 
+// Basics
+// --------------------------------------------------
 
-// -- ??
+$primary_border_color: lighten($black, 60%);
+$secondary_border_color: lighten($black, 76%);
+$tertiary_border_color: $white; 
+$highlight_border_color: $yellow;
+$emphasis_border_color: $blue;
+$warning_border_color: lighten($red, 20%);
+$success_border_color: $green;
 
-$link_color: $tertiary_dark;
-$muted-link-color: $primary_medium;
-$muted-important-link-color: $primary_medium;
+$primary_text_color: $black;
+$secondary_text_color: lighten($black, 50%);
+$tertiary_text_color: $white;
+$warning_text_color: $red;
+$success_text_color: $green;
+$emphasis_text_color: $blue;
+$highlight_text_color: $yellow;
+$like_color: $pink;
 
-$quote-background: $primary_lightest;
+$primary_shadow_color: $black;
+$secondary_shadow_color: $white;
+$warning_shadow_color: lighten($red, 20%);
+$success_shadow_color: $green;
 
-// Colors based on basics
+$highlight: $yellow;
 
-$topicMenuColor: darken($secondary, 80%);
-$bookmarkColor: $tertiary;
+$link_color:  darken($blue, 10%);
+$secondary_link_color: $white;
+$muted-link-color: lighten($black, 35%);
+$muted-important-link-color: lighten($black, 35%);
 
-$tag_color: $tertiary_lightest;
+$attention_bg: lighten($blue, 50%);
+$attention_fg: $blue;
 
-$composer_background: lighten($primary_lighter, 10%);
+$header-item-highlight: lighten($blue, 45%);
 
-$post_footer: $primary_lightest;
-$inner_border: $primary_lighter;
-$inner_line: $primary_light;
+$primary_background_color: $white;
+$secondary_background_color: $black;
+$tertiary_background_color: lighten($black, 10%);
+$moderator_background_color: lighten($yellow, 30%) !default;
+$emphasis_background_color: lighten($blue, 45%);
+$success_background_color: lighten($green, 50%);
+$warning_background_color: lighten($red, 30%);
+$highlight_background_color: lighten($yellow, 25%);
+$like_background_color: lighten($pink, 25%);
 
-$controls: $primary_medium;
-$controls_hover: $tertiary;
-$controls_active: $tertiary_dark;
+$heatmap-high: lighten($red, 10%);
+$heatmap-med: $red;
+$heatmap-low: darken($red, 10%);
 
-$attention_bg: $tertiary_lightest;
-$attention_fg: $tertiary;
+$coldmap-high: lighten($blue, 10%);
+$coldmap-med: $blue;
+$coldmap-low: darken($blue, 10%);
 
-$header-item-highlight: $tertiary_lightest;
+//Composer
+
+$composer_background: lighten($black, 70%);
diff --git a/app/assets/stylesheets/common/input_tip.scss b/app/assets/stylesheets/common/input_tip.scss
index d7925e760b0..92b9cac8dc8 100644
--- a/app/assets/stylesheets/common/input_tip.scss
+++ b/app/assets/stylesheets/common/input_tip.scss
@@ -18,7 +18,7 @@
   }
   .close {
     float: right;
-    color: $primary;
+    color: $primary_text_color;
     opacity: 0.5;
     font-size: 15px;
     margin-left: 4px;
diff --git a/app/assets/stylesheets/desktop/activation.scss b/app/assets/stylesheets/desktop/activation.scss
index 2269a883e5c..9974f5bc03d 100644
--- a/app/assets/stylesheets/desktop/activation.scss
+++ b/app/assets/stylesheets/desktop/activation.scss
@@ -6,7 +6,7 @@
 
 #simple-container {
   @include border-radius-all(10px);
-  background-color: $secondary;
+  background-color: $primary_background_color;
   padding: 20px;
   width: 550px;
   margin: 0 auto;
diff --git a/app/assets/stylesheets/desktop/colorpicker.scss b/app/assets/stylesheets/desktop/colorpicker.scss
index 81cf53aa086..4efad99d133 100644
--- a/app/assets/stylesheets/desktop/colorpicker.scss
+++ b/app/assets/stylesheets/desktop/colorpicker.scss
@@ -21,7 +21,7 @@
     max-width: 300px;
 
     .colorpicker {
-      border: 1px solid $primary_medium;
+      border: 1px solid $primary_border_color;
       margin-right: 2px;
       width: 16px;
       height: 16px;
diff --git a/app/assets/stylesheets/desktop/combobox.scss b/app/assets/stylesheets/desktop/combobox.scss
index 07e37619e5b..d176acc353e 100644
--- a/app/assets/stylesheets/desktop/combobox.scss
+++ b/app/assets/stylesheets/desktop/combobox.scss
@@ -7,11 +7,11 @@
   }
   .topic-count {
     font-size: 11px;
-    color: $primary_light;
+    color: $secondary_text_color;
     display: inline-block;
   }
   .highlighted .topic-count {
-    color: $secondary;
+    color: $tertiary_text_color;
   }
   .category-desc {
     margin: 6px 0px 0px 3px;
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 7cee343c4f9..29cd982cf84 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -16,8 +16,8 @@
 
 .composer-popup {
 
-  @include box-shadow(3px 3px 3px rgba($primary, 0.14));
-  background: lighten($highlight, 8%);
+  @include box-shadow(3px 3px 3px rgba($primary_shadow_color, 0.14));
+  background: lighten($highlight, 15%);
 
   h3 {
     margin-bottom: 10px;
@@ -29,7 +29,7 @@
 
   a.close {
     float: right;
-    color: $primary;
+    color: $primary_text_color;
     opacity: 0.5;
     font-size: 15px;
   }
@@ -38,7 +38,7 @@
     opacity: 1.0;
   }
 
-  border: 1px solid darken($highlight, 10%);
+  border: 1px solid $highlight_border_color;
   padding: 10px;
   width: 600px;
   position: absolute;
@@ -56,15 +56,15 @@
 }
 
 .similar-topics {
-  background-color: $tertiary_light;
-  border: 1px solid darken($tertiary, 10%);
+  background-color: $emphasis_background_color;
+  border: 1px solid $emphasis_background_color;
 
   a[href] {
     color: #000;
   }
 
   .posts-count {
-    color: darken($tertiary, 50%);
+    color: darken($link_color, 40%);
     font-size: 12px;
   }
 }
@@ -78,28 +78,28 @@
   z-index: 999999;
   position: absolute;
   width: 240px;
-  background-color: $secondary;
-  border: 1px solid $primary_light;
+  background-color: $primary_background_color;
+  border: 1px solid $primary_border_color;
   ul {
     list-style: none;
     padding: 0;
     margin: 0;
     li {
-      border-bottom: 1px solid $primary_lighter;
+      border-bottom: 1px solid $primary_border_color;
       a[href] {
         padding: 5px;
         display: block;
         span.username {
-          color: lighten($primary, 20);
+          color: $primary_text_color;
         }
         span.name {
           font-size: 11px;
         }
         &.selected {
-          background-color: $primary_lighter;
+          background-color: lighten($secondary_background_color, 60%);
         }
         @include hover {
-          background-color: $primary_lighter;
+          background-color: lighten($secondary_background_color, 60%);
           text-decoration: none;
         }
       }
@@ -120,13 +120,13 @@
   #file-uploading {
     left: 51%;
     font-size: 12px;
-    color: darken($primary_light, 40);
+    color: $secondary_text_color;
   }
   #draft-status {
     right: 51%;
-    color: $primary_medium;
+    color: $primary_text_color;
     &.flash {
-      color: lighten($highlight_danger, 20);
+      color: $warning_text_color;
     }
   }
   @include transition(height 0.4s ease);
@@ -144,7 +144,7 @@
     right: 13px;
     position: absolute;
     font-size: 15px;
-    color: $primary_medium;
+    color: $primary_text_color;
     text-decoration: none;
     &:before {
       font-family: "FontAwesome";
@@ -180,7 +180,7 @@
   &.draft {
     height: 40px !important;
     cursor: pointer;
-    border-top: 1px solid $primary_light;
+    border-top: 1px solid $primary_border_color;
     .draft-text {
       display: block;
     }
@@ -193,7 +193,7 @@
   }
   &.saving {
     height: 40px !important;
-    border-top: 1px solid $primary_light;
+    border-top: 1px solid $primary_border_color;
     .saving-text {
       display: block;
     }
@@ -215,7 +215,7 @@
     height: 70px;
     text-indent: -9999em;
     background: {
-      color: $primary;
+      color: $primary_text_color;
       image: image-url("spinner_96_w.gif");
       repeat: no-repeat;
       size: 35px;
@@ -245,12 +245,12 @@
       input#reply-title {
         padding: 7px 10px;
         margin: 6px 10px 3px 0;
-        color: $primary;
+        color: $primary_text_color;
 
       }
       input#reply-title { 
         width: 400px; 
-                color: $primary;
+                color: $primary_text_color;
 
       }
       .wmd-controls {
@@ -305,18 +305,18 @@
       }
     }
     #reply-title {
-      color: $primary;
+      color: $primary_text_color;
       margin-right: 10px;
       float: left;
       &:disabled {
-        background-color: $primary_lighter;
+        background-color: lighten($secondary_background_color, 60%);
       }
     }
     #wmd-input:disabled {
-      background-color: $primary_lighter;
+      background-color: lighten($primary_background_color, 60%);
     }
     #wmd-input, #wmd-preview {
-      color: $primary;
+      color: $primary_text_color;
 
       video {
         max-width: 100%;
@@ -328,7 +328,7 @@
       }
     }
     #wmd-preview {
-      border: 1px dashed $primary_light;
+      border: 1px dashed $primary_border_color;
       overflow: auto;
       visibility: visible;
 
@@ -357,6 +357,11 @@
   .show-admin-options {
     vertical-align: top; 
     margin-top: 8px;
+    background: lighten($secondary_background_color, 60%);
+  &:hover {    
+    color: $tertiary_text_color;
+    background: lighten($secondary_background_color, 35%);
+  }
   }
   .title-input .popup-tip {
     width: 300px;
@@ -384,8 +389,8 @@ div.ac-wrap.disabled {
 }
 
 div.ac-wrap {
-  background-color: $secondary;
-  border: 1px solid $primary_lighter;
+  background-color: $primary_background_color;
+  border: 1px solid $primary_border_color;
   padding: 5px 10px;
   div.item {
     float: left;
@@ -406,12 +411,12 @@ div.ac-wrap {
       border-radius: 10px;
       width: 10px;
       display: inline-block;
-      border: 1px solid $secondary;
+      border: 1px solid $primary_border_color;
       &:hover {
-        background-color: lighten($highlight_danger, 45);
-        border: 1px solid lighten($highlight_danger, 20);
+        background-color: $warning_background_color;
+        border: 1px solid $warning_border_color;
         text-decoration: none;
-        color: $highlight_danger;
+        color: $warning_text_color;
       }
     }
   }
@@ -467,7 +472,7 @@ div.ac-wrap {
       min-height: 100%;
       padding: 7px;
       margin: 0;
-      background-color: $secondary;
+      background-color: $primary_background_color;
       word-wrap: break-word;
 
       // set up proper header margins in post preview
@@ -483,7 +488,8 @@ div.ac-wrap {
       min-height: 100%;
       @include box-sizing(border-box);
       border: 0;
-      border-top: 36px solid transparent;
+      border-top: 30px solid transparent;
+      box-shadow: none;
       @include border-radius-all(0);
       transition: none;
     }
@@ -512,8 +518,8 @@ div.ac-wrap {
   #wmd-button-bar {
     top: 0;
     position: absolute;
-    border-bottom: 1px solid $inner_line;
-    background-color: $secondary;
+    border-bottom: 1px solid $primary_border_color;
+    background-color: $primary_background_color;
     z-index: 100;
   }
 }
@@ -535,6 +541,7 @@ div.ac-wrap {
 
 .admin-options-form {
   display: none;
+  margin-top: -15px;
 }
 
 .auto-close-fields {
@@ -542,8 +549,8 @@ div.ac-wrap {
     width: 150px;
   }
   .examples {
-    margin: 12px 0 0 17px;
-    color: $primary_medium;
+    margin: 10px 0 0 0;
+    color: $primary_text_color;
   }
 }
 
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 39808bb8388..8c965430930 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -61,38 +61,38 @@ header {
 body {
 
   button.ok {
-    @include linear-gradient(lighten($success, 5%), $success);
-    color: $secondary;
+    background: $btn-success-background;
+    color: $tertiary_text_color;
     @include hover {
-      @include linear-gradient(lighten($success, 10%), $success);
-      color: $secondary;
+      background: lighten($btn-success-background, 10%);
+      color: $tertiary_text_color;
     }
   }
   button.cancel {
-    @include linear-gradient(lighten($highlight_danger, 5%), $highlight_danger);
-    color: $secondary;
+    background: $btn-danger-background-color;
+    color: $tertiary_text_color;
     @include hover {
-      @include linear-gradient(lighten($highlight_danger, 10%), $highlight_danger);
-      color: $secondary;
+      background: lighten($btn-danger-background-color, 10%);
+      color: $tertiary_text_color;
     }
   }
   .coldmap-high {
-    color: lighten($tertiary, 20%) !important;
+    color: $coldmap-high !important;
   }
   .coldmap-med {
-    color: lighten($tertiary, 10%) !important;
+    color: $coldmap-med !important;
   }
   .coldmap-low {
-    color: $tertiary !important;
+    color: $coldmap-low !important;
   }
   .heatmap-high {
-    color: lighten($highlight_danger, 10%) !important;
+    color: $heatmap-high !important;
   }
   .heatmap-med {
-    color: $highlight_danger !important;
+    color: $heatmap-med !important;
   }
   .heatmap-low {
-    color: darken($highlight_danger, 10%) !important;
+    color: $heatmap-low !important;
   }
   #loading-message {
     position: absolute;
@@ -100,7 +100,7 @@ body {
     text-align: center;
     top: 120px;
     left: 500px;
-    color: $primary_medium;
+    color: lighten($primary_text_color, 35%);
   }
   .top-space {
     margin-top: 10px;
@@ -114,22 +114,21 @@ body {
     .contents {
     }
     &.white {
-      background-color: $secondary;
+      background-color: $primary_background_color;
     }
   }
   #main {
     .fa-star.starred {
-      color: $highlight_danger;
+      color: $warning_text_color;
     }
     a.star {
-      color: $primary_lighter;
+      color: lighten($primary_text_color, 60%);
       &:before {
         font-family: "FontAwesome";
         content: "\f005";
       }
       &.starred {
-        color: $highlight_danger;
-        text-shadow: 0px 0px 3px $primary_light;
+        color: $warning_text_color;
         @include hover {
           opacity: 1;
           &:before {
@@ -173,7 +172,7 @@ body {
   /**/
   .message {
     @include border-radius-all(8px);
-    background-color: $secondary;
+    background-color: $primary_background_color;
     padding: 14px;
     h2 {
       margin-bottom: 20px;
@@ -188,7 +187,7 @@ body {
       .contents {
         padding-top: 10px;
         a[href] {
-          color: $secondary;
+          color: $tertiary_text_color;
         }
       }
     }
@@ -198,14 +197,14 @@ body {
   }
   .grippie {
     width: 100%;
-    border: 1px solid $primary_lighter;
+    border: 1px solid $primary_border_color;
     border-width: 1px 0px;
     cursor: row-resize;
     height: 11px;
     overflow: hidden;
-    background-color: $primary_lightest;
-    display:block {}
-    background: image-url("grippie.png") $primary_lightest no-repeat center 3px;
+    background-color: lighten($secondary_background_color, 60%);
+    display:block;
+    background: image-url("grippie.png") lighten($secondary_background_color, 76%) no-repeat center 3px;
   }
 }
 
@@ -213,10 +212,10 @@ form {
   .tip {
     display: inline-block;
     &.good {
-      color: $success;
+      color: $success_text_color;
     }
     &.bad {
-      color: $highlight_danger;
+      color: $warning_text_color;
     }
   }
 }
@@ -225,7 +224,7 @@ blockquote {
   /* 13px left is intentional here to properly align with post quotes */
   padding: 10px 4px 4px 13px;
   background-color: $quote-background;
-  border-left: 5px solid $primary_lighter;
+  border-left: 5px solid $primary_border_color;
   p {
   }
 }
@@ -239,7 +238,7 @@ blockquote {
     margin: 0;
     i {
         font-size: 15px;
-      color: darken($secondary, 60%);
+      color: darken($tertiary_text_color, 60%);
     }
   }
 }
@@ -250,12 +249,12 @@ blockquote {
 
 #pagedown-editor {
   width: 540px;
-  background-color: $secondary;
+  background-color: $primary_background_color;
   padding: 0 10px 13px 10px;
-  border: 1px solid $primary_light;
+  border: 1px solid $primary_border_color;
   .preview {
     margin-top: 8px;
-    border: 1px dashed $primary_light;
+    border: 1px dashed $primary_border_color;
     padding: 8px 8px 0 8px;
     p {
       margin: 0 0 10px 0;
@@ -275,7 +274,7 @@ blockquote {
   font-size: 15px;
   line-height: 23px;
   text-align: center;
-  color: $secondary;
+  color: $primary_background_color;
   background: {
     image: image-url("spinner_96_w.gif");
     repeat: no-repeat;
@@ -289,9 +288,9 @@ blockquote {
 }
 
 .avatar-wrapper {
-  background-color: $secondary;
+  background-color: $primary_background_color;
   display: inline-block;
-  border: 1px solid $primary_light;
+  border: 1px solid $primary_border_color;
   @include border-radius-all(5px);
   img {
     @include border-radius-all(4px);
@@ -309,7 +308,7 @@ blockquote {
 body {
 
   input, textarea, select {
-    color: $primary;
+    color: $primary_text_color;
   }
 
   code, pre {
@@ -324,6 +323,16 @@ body {
     text-rendering: optimizelegibility;
   }
 
+  .page-not-found {
+    margin: 20px 0 40px 0;
+
+  }
+
+  .page-not-found-search {
+    margin-top: 20px;
+  }
+
+  .popular-topics-title, .recent-topics-title {margin-bottom: 10px;}
 
   // this removes the unwanted top margin on a paragraph under a heading
   h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
@@ -352,7 +361,7 @@ body {
     margin-bottom: 9px;
     font-size: 13px;
     line-height: 18px;
-    color: $primary;
+    color: $primary_text_color;
   }
   input {
     &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
@@ -362,7 +371,7 @@ body {
       margin-bottom: 9px;
       font-size: 13px;
       line-height: 18px;
-      color: $primary;
+      color: $primary_text_color;
     }
   }
   input {
@@ -371,33 +380,33 @@ body {
   textarea {
     width: 210px;
     height: auto;
-    background-color:$secondary;
-    border: 1px solid $primary_lighter;
+    background-color:$primary_background_color;
+    border: 1px solid $primary_border_color;
     border-radius: 3px;
-    box-shadow: inset 0 1px 1px $primary_lightest;
+    box-shadow: inset 0 1px 1px rgba($primary_shadow_color, .3);
     -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     transition: border linear 0.2s, box-shadow linear 0.2s;
   }
   input {
     &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
-      background-color: $secondary;
-      border: 1px solid $primary_lighter;
+      background-color: $primary_background_color;
+      border: 1px solid $primary_border_color;
       border-radius: 3px;
-      box-shadow: inset 0 1px 1px $primary_lightest;
+    box-shadow: inset 0 1px 1px rgba($primary_shadow_color, .3);
       -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
       transition: border linear 0.2s, box-shadow linear 0.2s;
     }
   }
   textarea:focus {
-    border-color: $tertiary;
+    border-color: $emphasis_border_color;
     outline: 0;
-    box-shadow: inset 0 1px 1px $primary_lightest, 0 0 8px $tertiary;
+    box-shadow: inset 0 1px 1px rgba($primary_shadow_color, .3), 0 0 8px $emphasis_border_color;
   }
   input {
     &[type="text"]:focus, &[type="password"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus {
-      border-color: $tertiary;
+      border-color: $emphasis_border_color;
       outline: 0;
-      box-shadow: inset 0 1px 1px $primary_lightest, 0 0 8px $tertiary;
+      box-shadow: inset 0 1px 1px rgba($primary_shadow_color, .3), 0 0 8px $emphasis_border_color;
     }
   }
 
@@ -418,7 +427,7 @@ body {
 
   select {
     width: 220px;
-    border: 1px solid $primary_lighter;
+    border: 1px solid $primary_border_color;
     &[multiple], &[size] {
       height: auto;
     }
@@ -470,8 +479,8 @@ body {
   }
   input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
     cursor: not-allowed;
-    background-color: $primary_lightest;
-    border-color: $primary_light;
+    background-color: lighten($secondary_background_color, 76%);
+    border-color: $primary_border_color;
   }
   input {
     &[type="radio"][disabled], &[type="checkbox"][disabled], &[type="radio"][readonly], &[type="checkbox"][readonly] {
@@ -481,66 +490,66 @@ body {
   .control-group {
     &.warning {
       > label {
-        color: $highlight_danger;
+        color: $warning_text_color;
       }
       .checkbox, .radio, input, select, textarea {
-        color: $highlight_danger;
-        border-color: $highlight_danger;
+        color: $warning_text_color;
+        border-color: $warning_border_color;
       }
       .checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
-        border-color: $highlight_danger_dark;
-        box-shadow: 0 0 6px $highlight_danger_light;
+        border-color: darken($warning_border_color, 25%);
+        box-shadow: 0 0 6px $warning_shadow_color;
       }
       .input-prepend .add-on, .input-append .add-on {
-        color: $highlight_danger;
-        background-color: $highlight_danger_light;
-        border-color: $highlight_danger;
+        color: $warning_text_color;
+        background-color: $warning_background_color;
+        border-color: $warning_border_color;
       }
     }
     &.error {
       > label {
-        color: $highlight_danger;
+        color: $warning_text_color;
       }
       .checkbox, .radio, input, select, textarea {
-        color: $highlight_danger;
-        border-color: $highlight_danger;
+        color: $warning_text_color;
+        border-color: $warning_border_color;
       }
       .checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
-        border-color: $highlight_danger_dark;
-        box-shadow: 0 0 6px $highlight_danger_light;
+        border-color: darken($warning_border_color, 20%);
+        box-shadow: 0 0 6px $warning_shadow_color;
       }
       .input-prepend .add-on, .input-append .add-on {
-        color: $highlight_danger;
-        background-color: $highlight_danger_light;
-        border-color: $highlight_danger_dark;
+        color: $warning_text_color;
+        background-color: $warning_background_color;
+        border-color: darken($warning_border_color, 10%);
       }
     }
     &.success {
       > label {
-        color: $success;
+        color: $success_text_color;
       }
       .checkbox, .radio, input, select, textarea {
-        color: $success;
-        border-color: $success;
+        color: $success_text_color;
+        border-color: $success_border_color;
       }
       .checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
-        border-color: $success_dark;
-        box-shadow: 0 0 6px $success_light;
+        border-color: $success_border_color;
+        box-shadow: 0 0 6px $success_shadow_color;
       }
       .input-prepend .add-on, .input-append .add-on {
-        color: $success;
-        background-color: $success_light;
-        border-color: $success;
+        color: $success_text_color;
+        background-color: $success_background_color;
+        border-color: $success_border_color;
       }
     }
   }
   input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
-    color: $highlight_danger;
-    border-color: $highlight_danger;
+    color: $warning_text_color;
+    border-color: $warning_border_color;
   }
   input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, select:focus:required:invalid:focus {
-    border-color: $highlight_danger;
-    box-shadow: 0 0 6px $highlight_danger_light;
+    border-color: $warning_border_color;
+    box-shadow: 0 0 6px $warning_shadow_color;
   }
 
   .input-prepend, .input-append {
@@ -565,18 +574,17 @@ body {
     font-weight: normal;
     line-height: 18px;
     text-align: center;
-    text-shadow: 0 1px 0 $secondary;
     vertical-align: middle;
-    background-color: $primary_lightest;
-    border: 1px solid $primary_light;
+    background-color: $primary_background_color;
+    border: 1px solid $primary_border_color;
   }
   .input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn {
     margin-left: -1px;
     border-radius: 0;
   }
   .input-prepend .active, .input-append .active {
-    background-color: $success_light;
-    border-color: $success;
+    background-color: $warning_background_color;
+    border-color: $warning_border_color;
   }
   .input-prepend {
     .add-on, .btn {
@@ -659,8 +667,8 @@ body {
   .alert {
     padding: 8px 35px 8px 14px;
     margin-bottom: 18px;
-    background-color: $highlight_danger_light;
-    border: 1px solid $highlight_danger_light;
+    background-color: $warning_background_color;
+    border: 1px solid $warning_border_color;
     color: #c09853;
   }
   .alert .close {
@@ -670,19 +678,19 @@ body {
     line-height: 18px;
   }
   .alert-success {
-    background-color: $success_light;
-    border-color: $success_light;
-    color: $success_dark;
+    background-color: $success_background_color;
+    border-color: $success_border_color;
+    color: $success_text_color;
   }
   .alert-error {
-    background-color: $highlight_danger_light;
-    border-color: $highlight_danger_light;
-    color: $highlight_danger_dark;
+    background-color: $warning_background_color;
+    border-color: $warning_border_color;
+    color: $warning_text_color;
   }
   .alert-info {
-    background-color: $tertiary_lightest;
-    border-color: $tertiary_lightest;
-    color: $tertiary_dark;
+    background-color: $emphasis_background_color;
+    border-color: $emphasis_background_color;
+    color: $primary_text_color;
   }
   .alert {
     .close {
@@ -690,12 +698,11 @@ body {
       font-size: 20px;
       font-weight: bold;
       line-height: 18px;
-      color: $primary;
-      text-shadow: 0 1px 0 $secondary;
+      color: $primary_text_color;
       opacity: 0.2;
       filter: alpha(opacity = 20);
       @include hover {
-        color: $primary;
+        color: $primary_text_color;
         text-decoration: none;
         cursor: pointer;
         opacity: 0.4;
@@ -713,7 +720,7 @@ body {
   .bootbox.modal {
     .modal-footer {
       a.btn-primary {
-        color: $secondary;
+        color: $tertiary_text_color;
       }
     }
   }
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index b0b241c4964..945b6ee7219 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -11,8 +11,8 @@
   top: 0;
   left: 0;
   z-index: 1000;
-  box-shadow: 0 1px 5px $primary_lighter;
-  background-color: $secondary;
+  box-shadow: 0 1px 3px rgba($primary_shadow_color, .2);
+  background-color: $primary_background_color;
   padding-right: 3px;
   padding-top: 3px;
   .docked & {
@@ -46,7 +46,7 @@
   .current-username {
     float: left;
     a {
-      color: $primary;
+      color: $primary_text_color;
       font-size: 14px;
       line-height: 40px;
     }
@@ -66,14 +66,14 @@
       &:first-child.active .icon {
       }
       &:last-child .icon {
-        border-right: 1px solid $primary_lighter;
+        border-right: 1px solid $primary_border_color;
       }
     }
     .icon {
       display: block;
-      border-top: 1px solid $primary_lighter;
-      border-bottom: 1px solid $primary_lighter;
-      border-left: 1px solid $primary_lighter;
+      border-top: 1px solid $primary_border_color;
+      border-bottom: 1px solid $primary_border_color;
+      border-left: 1px solid $primary_border_color;
       padding: 3px;
       color: $nav-button-color;
       text-decoration: none;
@@ -90,9 +90,9 @@
     .active .icon {
       position: relative;
       color: #7b7b7b;
-      background-color: $secondary;
+      background-color: $primary_background_color;
       cursor: default;
-      @include box-shadow((6px 0 6px -6px rgba($primary, 0.2), -6px 0 6px -6px rgba($primary, 0.2), inset 0 13px 13px -13px rgba($primary, 0.1)));
+      @include box-shadow((6px 0 6px -6px rgba($primary_shadow_color, 0.2), -6px 0 6px -6px rgba($primary_shadow_color, 0.2), inset 0 13px 13px -13px rgba($primary_shadow_color, 0.1)));
       &:after {
         display: block;
         position: absolute;
@@ -102,7 +102,7 @@
         width: 100%;
         height: 0;
         content: "";
-        border-top: 1px solid $secondary;
+        border-top: 1px solid $tertiary_border_color;
       }
     }
     [class^="fa fa-"] {
@@ -123,15 +123,15 @@
     }
     .unread-notifications {
       right: -4px;
-      background-color: $tertiary;
+      background-color: $emphasis_text_color;
     }
     .unread-private-messages {
       left: -4px;
-      background-color: $success;
+      background-color: $success_text_color;
     }
   }
   .flagged-posts {
-    background-color: $highlight_danger;
+    background-color: $warning_text_color;
   }
 }
 
@@ -155,9 +155,9 @@
   right: 0;
   z-index: 1100;
   margin-top: -1px;
-  border: 1px solid $primary_lighter;
-  background-color: $secondary;
-  @include box-shadow(0 3px 3px $primary_lightest);
+  border: 1px solid $primary_border_color;
+  background-color: $primary_background_color;
+  @include box-shadow(0 3px 3px rgba($primary_shadow_color, .4));
 
   // Common
 
@@ -174,14 +174,13 @@
     }
   }
   .heading {
-    border-bottom: 1px solid $primary_lighter;
-    color: $primary;
+    border-top: 1px solid $primary_border_color;
+
+    border-bottom: 1px solid $primary_border_color;
+    color: $primary_text_color;
     font-weight: bold;
     font-size: 12px;
     line-height: 15px;
-    text-shadow: 0 1px 0 $secondary;
-    background-color: $secondary;
-    @include box-shadow(inset 0 1px 0 $primary_lighter);
   }
   .selected {
     background-color: $header-item-highlight;
@@ -191,13 +190,13 @@
 
   &#notifications-dropdown {
     .fa {
-      color: $primary_light;
+      color: lighten($primary_text_color, 50%);
     }
     li {
       background-color: $header-item-highlight;
     }
     .read {
-      background-color: $secondary;
+      background-color: $primary_background_color;
     }
     .none {
       padding: 5px;
@@ -212,7 +211,6 @@
     margin: 5px;
     padding: 5px;
     &:focus {
-      @include box-shadow((inset 0 1px 1px $primary_lightest, 0 0 4px $primary_lighter));
     }
   }
   .searching {
@@ -220,7 +218,7 @@
     position: absolute;
     top: 13px;
     right: 13px;
-    color: $primary_light;
+    color: lighten($primary_text_color, 50%);
     font-size: 18px;
   }
   .no-results {
diff --git a/app/assets/stylesheets/desktop/history.scss b/app/assets/stylesheets/desktop/history.scss
index 5bc785b9fc4..102b5231041 100644
--- a/app/assets/stylesheets/desktop/history.scss
+++ b/app/assets/stylesheets/desktop/history.scss
@@ -11,14 +11,14 @@
   #revision-controls {
     float: left;
     .btn[disabled]:hover {
-      color: $primary_medium;
+      color: lighten($primary_text_color, 35%);
     }
   }
   #display-modes {
     text-align: right;
   }
   #revision-details {
-    background-color: $primary_lightest;
+    background-color: lighten($secondary_background_color, 76%);
     padding: 5px;
     margin-top: 10px;
   }
@@ -53,63 +53,63 @@
   }
   ins, .diff-ins {
     code, img {
-      border: 2px solid $success_dark;
+      border: 2px solid $success_border_color;
     }
     img {
       opacity: .75;
       filter: alpha(opacity=75);
     }
     a {
-      color: $success_darker;
+      color: $success_text_color;
       text-decoration: none;
     }
   }
   img.diff-ins, code.diff-ins {
-    border: 2px solid $success_darker;
+    border: 2px solid $success_border_color;
   }
   img.diff-ins {
     opacity: .75;
     filter: alpha(opacity=75);
   }
   .diff-ins {
-    background: $success_light;
+    background: $success_background_color;
   }
   ins {
-    color: $success_dark;
-    background: $success_light;
+    color: $success_text_color;
+    background: $success_background_color;
   }
   del, .diff-del {
     code, img {
-      border: 2px solid $highlight_danger_dark;
+      border: 2px solid $warning_border_color;
     }
     img {
       opacity: .5;
       filter: alpha(opacity=50);
     }
     a {
-      color: $highlight_danger_darker;
+      color: $warning_text_color;
       text-decoration: none;
     }
   }
   img.diff-del, code.diff-del {
-    border: 2px solid $highlight_danger_dark;
+    border: 2px solid $warning_border_color;
   }
   img.diff-del {
     opacity: .5;
     filter: alpha(opacity=50);
   }
   .diff-del {
-    background: $highlight_danger_light;
+    background: $warning_background_color;
   }
   del {
-    color: $highlight_danger_dark;
-    background: $highlight_danger_light;
+    color: $warning_text_color;
+    background: $warning_background_color;
   }
   span.date {
     font-weight: bold;
   }
   span.edit-reason {
-    background-color: $highlight_light;
+    background-color: $highlight_background_color;
     padding: 3px 5px 5px 5px;
   }
   .modal-header {
diff --git a/app/assets/stylesheets/desktop/lightbox.scss b/app/assets/stylesheets/desktop/lightbox.scss
index abc3f1a4405..ca852d9dac0 100644
--- a/app/assets/stylesheets/desktop/lightbox.scss
+++ b/app/assets/stylesheets/desktop/lightbox.scss
@@ -6,7 +6,7 @@
   display: inline-block;
 
   &:hover .meta {
-    background: $primary_light;
+    background: lighten($secondary_background_color, 60%);
     opacity: 1;
     @include transition(opacity .5s);
   }
@@ -20,8 +20,8 @@
   position: absolute;
   bottom: 0;
   width: 100%;
-  color: $secondary;
-  background: $primary;
+  color: $tertiary_text_color;
+  background: $secondary_background_color;
   opacity: 0;
   @include transition(opacity .2s);
 
@@ -41,7 +41,7 @@
   .informations {
     margin: 6px;
     padding-right: 20px;
-    color: $primary_medium;
+    color: lighten($primary_text_color, 35%);
     font-size: 14px;
   }
 
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index 678ba068cda..ef60aeabeae 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/app/assets/stylesheets/desktop/login.scss
@@ -14,7 +14,7 @@
 
 #login-form {
   a {
-    color: $primary_medium;
+    color: lighten($primary_text_color, 35%);
     cursor: pointer;
   }
 }
@@ -52,7 +52,7 @@
 
   tr.instructions {
     label {
-      color: $primary_light;
+      color: lighten($primary_text_color, 60%);
     }
   }
 
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index 497639700bc..c0e0397e2e8 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -26,7 +26,7 @@
   bottom: 0;
   left: 0;
   z-index: 1040;
-  background-color: $primary;
+  background-color: $secondary_background_color;
   &.fade {
     opacity: 0;
   }
@@ -50,13 +50,13 @@
 .modal-inner-container {
   max-width: 710px;
   margin: 0 auto;
-  background-color: $secondary;
-  border: 1px solid $primary_light;
-  border: 1px solid $primary_lightest;
-  *border: 1px solid $primary_light;
+  background-color: $primary_background_color;
+  border: 1px solid $primary_border_color;
+  border: 1px solid lighten($primary_border_color, 10%);
+  *border: 1px solid $primary_border_color;
   /* IE6-7 */
 
-  box-shadow: 0 3px 7px $primary;
+  box-shadow: 0 3px 7px rgba($primary_shadow_color, .8);
   background-clip: padding-box;
 }
 .modal {
@@ -78,13 +78,13 @@
   width: 610px;
   height: auto;
   margin: -250px 0 0 -305px;
-  background-color: $secondary;
-  border: 1px solid $primary_light;
-  border: 1px solid $primary_lightest;
-  *border: 1px solid $primary_light;
+  background-color: $primary_background_color;
+border: 1px solid $primary_border_color;
+  border: 1px solid lighten($primary_border_color, 10%);
+  *border: 1px solid $primary_border_color;
   /* IE6-7 */
 
-  box-shadow: 0 3px 7px $primary;
+  box-shadow: 0 3px 7px rgba($primary_shadow_color, .8);
   background-clip: padding-box;
 }
 
@@ -107,7 +107,7 @@
 .modal-footer {
   margin: 0 15px;
   padding: 14px 0 15px;
-  border-top: 1px solid $primary_lighter;
+  border-top: 1px solid $primary_border_color;
   *zoom: 1;
 }
 .modal-footer:before,
@@ -130,7 +130,7 @@
   margin-left: -1px;
 }
 .modal-header {
-  border-bottom: 1px solid $primary_lighter;
+  border-bottom: 1px solid $primary_border_color;
   h3 {
     color: $nav-pills-background-color-active;
     font-size: 20px;
@@ -152,11 +152,11 @@
 .modal {
   .nav {
     padding: 10px 30px;
-    background-color: $primary_lightest;
+    background-color: lighten($primary_background_color, 76%);
     li > a {
       font-size: 14px;
     }
-    border-bottom: 1px solid $primary_lighter;
+    border-bottom: 1px solid $primary_border_color;
 
   }
 
@@ -185,17 +185,17 @@
       height: 80px;
     }
     label {
-      color: $primary_medium;
+      color: lighten($primary_text_color, 35%);
     }
     p {
-      color: $primary;
+      color: $primary_text_color;
       font-size: 13px;
     }
     .archetype-option {
       margin-bottom: 20px;
     }
     .warning {
-      color: lighten($highlight_danger, 10%) !important;
+      color: $warning_text_color !important;
     }
   }
   .password-confirmation {
@@ -236,11 +236,11 @@
       li {
         margin: 0 4px 8px 0;
         a {
-          color: $primary_light;
+          color: lighten($primary_text_color, 50%);
           cursor: pointer;
         }
         a:hover {
-          color: $primary;
+          color: $primary_text_color;
         }
       }
     }
@@ -322,9 +322,9 @@
         font-weight: normal;
       }
       &.btn-reply-here {
-        @include linear-gradient($primary_lighter, $primary_lighter);
+        background: lighten($secondary_background_color, 60%);
         text-shadow: none;
-        color: $primary_medium;
+        color: lighten($primary_text_color, 35%);
       }
     }
     .cancel {
diff --git a/app/assets/stylesheets/desktop/onebox.scss b/app/assets/stylesheets/desktop/onebox.scss
index f4fc8ff6843..45b3605c355 100644
--- a/app/assets/stylesheets/desktop/onebox.scss
+++ b/app/assets/stylesheets/desktop/onebox.scss
@@ -16,14 +16,14 @@ a.loading-onebox {
 .onebox-result {
   margin-top: 15px;
   padding: 12px 25px 12px 12px;
-  border-left: 5px solid $primary_light;
-  background: $primary_lightest;
+  border-left: 5px solid $primary_border_color;
+  background: lighten($secondary_background_color, 76%);
   font-size: 14px;
   > .source {
     margin-bottom: 12px;
     margin-right: 10px;
     display: block;
-    color: $primary;
+    color: $primary_text_color;
     position: relative;
     height: 20px;
     .info {
@@ -92,13 +92,13 @@ a.loading-onebox {
 aside.onebox {
   margin-top: 15px;
   padding: 12px 25px 12px 12px;
-  border-left: 5px solid $primary_light;
-  background: $primary_lightest;
+  border-left: 5px solid $primary_border_color;
+  background: lighten($secondary_background_color, 76%);
   font-size: 14px;
 
   header {
     a[href] {
-      color: $primary;
+      color: $primary_text_color;
       text-decoration: none;
     }
   }
@@ -118,12 +118,12 @@ aside.onebox {
     }
 
     a[href] {
-      color: $tertiary_dark;
+      color: $link_color;
       text-decoration: none;
     }
 
     a[href]:visited {
-      color: $tertiary_dark;
+      color: $link_color;
     }
 
     img {
diff --git a/app/assets/stylesheets/desktop/pagedown.scss b/app/assets/stylesheets/desktop/pagedown.scss
index 6efb45ef502..8b516157e42 100644
--- a/app/assets/stylesheets/desktop/pagedown.scss
+++ b/app/assets/stylesheets/desktop/pagedown.scss
@@ -19,7 +19,7 @@
   margin-left: 5px;
   margin-right: 5px;
   margin-bottom: 5px;
-  margin-top: 10px;
+  margin-top: 5px;
   padding: 0px;
   height: 20px;
 }
@@ -29,7 +29,7 @@
   height: 20px;
   margin-right: 8px;
   margin-left: 5px;
-  background-color: $primary_light;
+  background-color: lighten($primary_background_color, 50%);
   display: inline-block;
   float: left;
 }
@@ -66,7 +66,7 @@
 }
 
 .wmd-button:hover {
-  background-color: $primary_lighter;
+  background-color: lighten($secondary_background_color, 60%);
 }
 
 
@@ -124,12 +124,12 @@
 }
 
 .wmd-prompt-background {
-  background-color: $primary;
+  background-color: $secondary_background_color;
 }
 
 .wmd-prompt-dialog {
-  border: 1px solid $primary_lighter;
-  background-color: $primary_lightest;
+  border: 1px solid $primary_border_color;
+  background-color: lighten($secondary_background_color, 60%);
 }
 
 .wmd-prompt-dialog > div {
@@ -138,12 +138,12 @@
 }
 
 .wmd-prompt-dialog > form > input[type="text"] {
-  border: 1px solid $primary_light;
-  color: $primary;
+  border: 1px solid $primary_border_color;
+  color: $primary_text_color;
 }
 
 .wmd-prompt-dialog > form > input[type="button"] {
-  border: 1px solid $primary_light;
+  border: 1px solid $primary_border_color;
   font-family: trebuchet MS, helvetica, sans-serif;
   font-size: 0.8em;
   font-weight: bold;
diff --git a/app/assets/stylesheets/desktop/poster_expansion.scss b/app/assets/stylesheets/desktop/poster_expansion.scss
index 63045256bca..5a794191b44 100644
--- a/app/assets/stylesheets/desktop/poster_expansion.scss
+++ b/app/assets/stylesheets/desktop/poster_expansion.scss
@@ -7,9 +7,9 @@
   position: absolute;
   left: 20px;
   z-index: 990;
-  box-shadow: 0 2px 6px $primary_light;
+  box-shadow: 0 2px 6px $primary_border_color;
   margin-top: -2px;
-  background-color: $secondary;
+  background-color: $primary_background_color;
   padding: 12px 12px 5px 12px;
   max-width: 350px;
 
@@ -19,7 +19,7 @@
     margin-bottom: 8px;
 
     a {
-      color: $primary;
+      color: $primary_text_color;
     }
   }
 
@@ -30,7 +30,7 @@
     margin-bottom: 5px;
 
     a {
-      color: $primary;
+      color: $primary_text_color;
     }
   }
 
@@ -38,16 +38,16 @@
     font-size: 13px;
     font-weight: normal;
     margin-top: 0px;
-    color: $primary_medium;
+    color: $secondary_text_color;
   }
   .groups {
     font-size: 13px;
     font-weight: normal;
     margin-top: 0px;
-    color: $primary_medium;
+    color: $secondary_text_color;
 
     .group-link {
-      color: $primary;
+      color: $primary_text_color;
     }
   }
 
@@ -67,7 +67,7 @@
 
   p.loading {
     margin-top: 30px;
-    color: $primary_medium;
+    color: $secondary_text_color;
   }
 
   .btn {
@@ -75,6 +75,6 @@
   }
 
   .new-user a {
-    color: $primary_medium;
+    color: $secondary_text_color;
   }
 }
diff --git a/app/assets/stylesheets/desktop/share_link.scss b/app/assets/stylesheets/desktop/share_link.scss
index 4694cdc744e..208002a5325 100644
--- a/app/assets/stylesheets/desktop/share_link.scss
+++ b/app/assets/stylesheets/desktop/share_link.scss
@@ -7,8 +7,8 @@
   position: absolute;
   left: 20px;
   z-index: 990;
-  box-shadow: 0 1px 5px $primary_light;
-  background-color: $primary_lighter;
+  box-shadow: 0 1px 5px rgba($primary_shadow_color, .4);
+  background-color: lighten($secondary_background_color, 60%);
   padding: 6px 10px 10px 10px;
   width: 300px;
   display: none;
@@ -32,7 +32,7 @@
     float: right;
     font-size: 20px;
     a {
-      color: $primary;
+      color: $primary_text_color;
     }
   }
 }
diff --git a/app/assets/stylesheets/desktop/topic-admin-menu.scss b/app/assets/stylesheets/desktop/topic-admin-menu.scss
index c0001b697b3..cf90b4a3fb4 100644
--- a/app/assets/stylesheets/desktop/topic-admin-menu.scss
+++ b/app/assets/stylesheets/desktop/topic-admin-menu.scss
@@ -11,10 +11,10 @@
 }
 
 .topic-admin-menu {
-  background-color: $secondary;
+  background-color: $primary_background_color;
   width: 205px;
   padding: 10px;
-  border: 1px solid $primary_light;
+  border: 1px solid $primary_border_color;
   position: fixed;
   top: 70px;
   right: 10px;
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 432c2a67785..4136c143bc1 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -58,16 +58,16 @@
 // --------------------------------------------------
 
 #topic-list {
-  border: 1px solid $primary_lighter;
+  border: 1px solid $primary_border_color;
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   margin: 0 0 10px;
-  a.title:visited:not(.badge-notification) {color: $primary_medium;}
+  a.title:visited:not(.badge-notification) {color: lighten($primary_text_color, 35%);}
 
   > tbody > tr {
     &:nth-child(even) {
-      background-color: lighten($primary_lightest, 1%);
+      background-color: lighten($secondary_background_color, 77%);
     }
     &.archived a {
       opacity: 0.6;
@@ -82,7 +82,7 @@
       }
     }
     &.highlighted {
-      background-color: $highlight_light;
+      background-color: $highlight_background_color;
     }
   }
   th,
@@ -102,7 +102,7 @@
     color: $topic-list-th-color;
     font-weight: bold;
     font-size: 13px;
-    background: lighten($primary_lighter, 12%);
+    background: lighten($secondary_background_color, 70%);
 
 
   }
@@ -116,7 +116,7 @@
     padding: 0;
     background: transparent;
     &:hover {
-      color: $primary_light;
+      color: lighten($primary_text_color, 35%);
     }
   }
 
@@ -135,7 +135,7 @@
     font-size: 16px;
 
     i.score {
-      color: $success;
+      color: $success_text_color;
       cursor: pointer;
     }
   }
@@ -143,8 +143,9 @@
   .topic-excerpt {
     font-size: 14px;
     margin-top: 8px;
-    color: $primary_medium;
+    color: lighten($primary_text_color, 35%);
     word-break: break-word;
+    padding-right: 20px;
   }
 
   @include medium-width {
@@ -202,7 +203,7 @@
   .sortable {
     cursor: pointer;
     &:hover {
-      background-color: lighten($primary_lighter, 7%);
+      background-color: lighten($secondary_background_color, 60%);
     }
     @include unselectable;
   }
@@ -313,7 +314,7 @@
   .featured-topic {
     margin: 6px 0;
     a.last-posted-at, a.last-posted-at:visited {
-      color: $primary_light;
+      color: lighten($primary_text_color, 50%);
     }
   }
 
@@ -355,7 +356,7 @@
 .category-list-item {
   margin-bottom: 10px;
   #topic-list tbody tr:nth-child(even) {
-    background-color: $secondary;
+    background-color: $primary_background_color;
   }
   th .badge-category {
     float: left;
@@ -365,7 +366,7 @@
     float: left;
   }
   > footer {
-    border: 1px solid $primary_lighter;
+    border: 1px solid $primary_border_color;
     border-top: 0;
     padding: 7px 10px;
     background-color: lighten($topic-list-th-background-color, 2%);
@@ -375,7 +376,6 @@
       color: lighten($topic-list-th-color, 5%);
       font-weight: bold;
       font-size: 12px;
-      text-shadow: 0 1px 0 $secondary;
     }
     figcaption {
       display: inline;
@@ -411,11 +411,11 @@
   width: 200px;
   margin: 0 auto;
   padding: 10px 0 10px 43px;
-  color: $secondary;
+  color: $primary_background_color;
   font-size: 18px;
   line-height: 25px;
   background: {
-    color: $primary;
+    color: $primary_text_color;
     image: image-url("spinner_96_w.gif");
     repeat: no-repeat;
     position: 10px 50%;
@@ -429,8 +429,8 @@
 
 .list-controls {
   .home {
-    background-color: $primary_lightest;
-    color: $primary;
+    background-color: lighten($secondary_background_color, 76%);
+    color: $primary_text_color;
   }
 
   .badge-category {
@@ -467,7 +467,7 @@
     background-color: transparent;
     padding: 0;
     border: 0;
-    color: lighten($highlight_danger, 10%);
+    color: lighten($warning_text_color, 10%);
     font-size: 13px;
     cursor: default;
   }
@@ -508,8 +508,8 @@ ol.category-breadcrumb {
   overflow-x: hidden;
   overflow-y: scroll;
   position: absolute;
-  border: 1px solid $primary_lighter;
-  background-color: $secondary;
+  border: 1px solid $primary_border_color;
+  background-color: $primary_background_color;
   max-height: 350px;
   padding: 8px 7px 0 7px;
   z-index: 100;
@@ -541,7 +541,7 @@ ol.category-breadcrumb {
   position: fixed;
   right: 20px;
   padding: 5px;
-  background-color: $secondary;
+  background-color: $primary_background_color;
   button {
     padding: 3px 0 3px 6px;
   }
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 1b19ac56206..f2a6ca35b38 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -3,16 +3,15 @@
 @import "common/foundation/helpers";
 
 .gap {
-  background-color: $primary_lightest;
+  background-color: lighten($secondary_background_color, 76%);
   padding: 5px 10px;
-  margin-bottom: 10px;
-  color: $primary_medium;
+  color: lighten($primary_text_color, 35%);
   cursor: pointer;
   text-align: center;
-  width: 820px;
+  width: 822px;
 
   &:hover {
-    background-color: $primary_lightest;
+    background-color: lighten($secondary_background_color, 76%);
   }
 
   @include medium-width {
@@ -49,10 +48,10 @@ h1 .topic-statuses .topic-status i {margin-right: 5px;}
   left: 120px;
   z-index: 400;
   padding: 5px 12px;
-  border: 1px solid lighten($primary_light, 20%);
+  border: 1px solid lighten($primary_border_color, 10%);
   font-size: 12px;
   margin-left: -8px;
-  background: $secondary;
+  background: $primary_background_color;
 }
 
 .avoid-tab {
@@ -95,13 +94,13 @@ section.post-menu-area, .post-actions {
 
 nav.post-controls {
     padding: 0;
-    button {color: $primary_light;
+    button {color: lighten($primary_text_color, 50%);
     margin-right: 2px;
   }
 
   span.badge-posts {
     margin-right: 5px;
-    color: $primary_light;
+    color: lighten($primary_text_color, 50%);
   }
 
   .show-replies {
@@ -118,18 +117,18 @@ nav.post-controls {
 
   button.create {
     margin-right: 0;
-    color: $tertiary;
-    background: $tertiary_lightest;
+    color: $link-color;
+    background: $emphasis_background_color;
     padding: 8px 20px;
     margin-left: 10px;
 
-    &:hover {  color: $secondary;
-      background: $tertiary;
+    &:hover {  color: $tertiary_text_color;
+      background: $emphasis_text_color;
     }
 
     &:active {
-      background: $tertiary_lightest;
-    @include box-shadow(inset 0 1px 3px $primary_light);
+      background: $emphasis_background_color;
+    @include box-shadow(inset 0 1px 3px rgba($primary_shadow_color, .3));
 
     }
 
@@ -148,12 +147,12 @@ nav.post-controls {
     margin-left: 3px;
     transition: all linear 0.15s;
          &:hover {
-          background: lighten($primary_light, 20%);
-          color: $primary_medium;
+          background: lighten($secondary_background_color, 76%);
+          color: $primary_text_color;
         }
 
         &:active {
-            @include box-shadow(inset 0 1px 3px $primary_lightest);
+            @include box-shadow(inset 0 1px 3px rgba($primary_shadow_color, .4));
         }
 
         &.hidden {
@@ -164,12 +163,12 @@ nav.post-controls {
         }
 
         &.delete:hover {
-          background: $highlight_danger;
-          color: $secondary;
+          background: $warning_text_color;
+          color: $tertiary_text_color;
         }
 
-        &.like:hover {color: $heart;
-          background: $heart_light;
+        &.like:hover {color: $like_color;
+          background: $like_background_color;
         }
 
         &.bookmark {padding: 8px 11px; }
@@ -185,11 +184,11 @@ nav.post-controls {
             }
           }
           &.last-read {
-            color: $highlight_danger;
+            color: $warning_text_color;
           }
           &.bookmarked {
             &:before {
-              color: $tertiary;
+              color: $link-color;
             }
           }
         }
@@ -197,14 +196,14 @@ nav.post-controls {
   }
 
   .embedded-posts {
-    background: $primary_lightest;
-    .quote .title {background: $primary_lighter;}
-    blockquote {background: $primary_lighter;}
+    background: lighten($secondary_background_color, 76%);
+    .quote .title {background: lighten($secondary_background_color, 60%);}
+    blockquote {background: lighten($secondary_background_color, 60%);}
     &.bottom { margin-top: -11px;}
     .topic-meta-data h5 {margin: 5px;}
     .topic-meta-data-inside {
     margin: -3px 0 0 0;
-    color: $primary_light;
+    color: $secondary_text_color;
     }
     .topic-meta-data {padding-top: 20px;}
   }
@@ -227,10 +226,10 @@ a.star {
 
 .topic-map {
   margin: 20px 0 0 0;
-  border: 1px solid lighten($primary_lighter, 10%);
+  border: 1px solid lighten($primary_border_color, 10%);
 
-  .buttons .btn {border: 1px solid $primary_lightest !important;
-    &:hover {border: 1px solid $primary_lighter !important;}
+  .buttons .btn {
+    &:hover {border: 1px solid $primary_border_color !important;}
   }
 
   .topic-links li {
@@ -239,13 +238,13 @@ a.star {
 
   h3 {
     margin-bottom: 4px;
-    color: $primary;
+    color: $primary_text_color;
     line-height: 23px;
   }
 
   h4 {
     margin: 0 0 3px 0;
-    color: $primary_medium;
+    color: $secondary_text_color;
     font-weight: normal;
     font-size: 12px;
     line-height: 15px;
@@ -296,7 +295,7 @@ a.star {
       line-height: 20px;
     }
     .number {
-      color: $tertiary_dark;
+      color: $link-color;
     }
     .avatar + a {
       float: left;
@@ -306,10 +305,10 @@ a.star {
   .links,
   .information {
     padding: 7px 14px;
-    color: $primary;
+    color: $primary_text_color;
   }
   .information {
-    border-top: 1px solid $primary_light;
+    border-top: 1px solid $primary_border_color;
   }
 
 
@@ -329,20 +328,19 @@ a.star {
     float: right;
     .btn {
       border: 0;
-      border-bottom: 1px solid $primary_lighter;
-      border-left: 1px solid $primary_lighter;
+      border-bottom: 1px solid lighten($secondary_background_color, 76%);
       padding: 0 23px;
-      color: $primary;
-      background: $primary_lightest;
+      color: $primary_text_color;
+      background: lighten($secondary_background_color, 76%);
       &:hover {
-        background: $primary_lighter;
-        color: #444;
-        border-bottom: 1px solid $primary_lighter;
+        background: lighten($secondary_background_color, 60%);
+        color: $primary_text_color;
+        border: none !important;
+        border-bottom: 1px solid lighten($secondary_background_color, 60%) !important;
 
       }
 
       &:active {
-    @include box-shadow(inset 0 1px 3px $primary_lightest);
       }
 
       &.collapsed {
@@ -362,7 +360,7 @@ a.star {
   padding: 10px 10px 0 10px;
   p {
     line-height: 32px;
-    color: $primary_light;
+    color: $secondary_text_color;
   }
 
 }
@@ -371,12 +369,12 @@ a.star {
   clear: left;
   padding: 20px 10px 15px 10px;
 
-  .topics table tbody tr {background: $secondary;}
+  .topics table tbody tr {background: $primary_background_color;}
 
   table {
     box-shadow: none;
     border-radius: 0;
-    border-color: $primary_lighter;
+    border-color: $primary_border_color;
     margin-top: 10px;
   }
 
@@ -386,8 +384,8 @@ a.star {
 }
 
 span.post-count {
-  background: $primary;
-  color: $secondary;
+  background: $secondary_background_color;
+  color: $tertiary_text_color;
   opacity: .8;
 }
 
@@ -403,13 +401,13 @@ span.post-count {
 .quote-button {
   display: none;
   position: absolute;
-  background-color: $primary_medium;
-  color: $secondary;
+  background-color: lighten($secondary_background_color, 50%);
+  color: $tertiary_text_color;
   padding: 10px;
   z-index: 401;
 
   &:hover {
-    background-color: $primary_light;
+    background-color: lighten($secondary_background_color, 50%);
     cursor: pointer;
   }
 }
@@ -452,7 +450,7 @@ iframe {
 .topic-meta-data {
   margin-bottom: 10px;
   width: 92px;
-  border-top: 1px solid lighten($primary_lighter, 10%);
+  border-top: 1px solid lighten($primary_border_color, 10%);
   padding-top: 30px;
 
   img {
@@ -469,10 +467,11 @@ iframe {
       display: block;
       margin: 0 auto;
       width: 45px;
+      display: inline;
     }
 
     a.user-group {
-      color: $primary_light;
+      color: lighten($primary_text_color, 50%);
       width: 100%;
     }
 
@@ -487,7 +486,7 @@ iframe {
       font-weight: normal;
       font-size: 12px;
       margin-top: 2px;
-      a {color: $primary;}
+      a {color: $primary_text_color;}
 
     }
   }
@@ -530,8 +529,8 @@ iframe {
 
   a.mention {
     padding: 2px 4px;
-    color: $primary;
-    background: $primary_lightest;
+    color: $primary_text_color;
+    background: lighten($secondary_background_color, 76%);
   }
 
 
@@ -543,7 +542,7 @@ iframe {
 
 .deleted {
   .topic-body {
-  background-color: $highlight_danger_light;
+  background-color: $warning_background_color;
   }
 }
 
@@ -553,7 +552,7 @@ iframe {
 
 .moderator {
   .topic-body {
-  background-color: $highlight_light;
+  background-color: $highlight_background_color;
   }
 }
 
@@ -604,13 +603,13 @@ iframe {
 }
 
 .new-user a {
-  color: $primary_medium;
+  color: $secondary_text_color;
 }
 
 .staff a {
   padding: 2px;
   margin: -2px 0 0 0;
-  background-color: $highlight_light;
+  background-color: $highlight_background_color;
 }
 
 .topic-meta-data {
@@ -628,7 +627,7 @@ position: relative;
 
 .user-title {
   margin-top: 8px;
-  color: $primary_light;
+  color: $secondary_text_color;
   overflow: hidden;
   font-size: 80%;
   line-height: 13px;
@@ -636,7 +635,7 @@ position: relative;
 
 .info-line {
   margin: 10px 0;
-  color: $primary_medium;
+  color: $secondary_text_color;
 }
 
 
@@ -644,7 +643,7 @@ blockquote { /* solo quotes */
   margin: 14px 0;
   padding: 12px;
 
-    a.mention {background: $primary_lighter;}
+    a.mention {background: $secondary_text_color;}
     p:first-of-type {margin-top: 0;}
     p:last-of-type {margin-bottom: 0;}
 }
@@ -652,14 +651,14 @@ blockquote { /* solo quotes */
 .quote { /* quotes with attribution */
   margin-top: 14px;
   blockquote {margin-top: 0; padding-top: 0;
-  .onebox-result {background-color: $primary_lighter;}
+  .onebox-result {background-color: $secondary_text_color;}
 
 
   }
 
   .title {
-  border-left: 5px solid $primary_lighter;
-  background-color: $primary_lightest;
+  border-left: 5px solid $primary_border_color;
+  background-color: lighten($secondary_background_color, 76%);
   padding: 12px;
   .avatar { margin-right: 7px; }
   img {margin-top: -4px;}
@@ -672,7 +671,7 @@ blockquote { /* solo quotes */
 
 .quote-controls {
   float: right;
-  color: $primary_light;
+  color: $secondary_text_color;
   a {
   margin: 0;
   }
@@ -680,7 +679,7 @@ blockquote { /* solo quotes */
     .quote-other-topic:before {
     display: inline-block;
     margin-left: 8px;
-    color: $primary_light;
+    color: $secondary_text_color;
     font-family: "FontAwesome";
     position: relative;
     z-index: 20;
@@ -718,19 +717,19 @@ blockquote { /* solo quotes */
       margin-bottom: 20px;
       margin-top: 2px;
     }
-    a {color: $primary_light;}
+    a {color: $secondary_text_color;}
     li {margin-bottom: 10px;}
   }
 }
 
 .topic-body {
-  border-top: 1px solid lighten($primary_lighter, 10%);
+  border-top: 1px solid lighten($primary_border_color, 10%);
   float: left;
   position: relative;
   width: 720px;
   padding: 10px 10px 15px 20px;
   .highlighted {
-    background-color: $highlight_light !important;
+    background-color: $highlight_background_color !important;
   }
   img, svg {
     max-width: 100%;
@@ -774,27 +773,27 @@ blockquote { /* solo quotes */
   &.bottom .arrow {float: right; margin: 0 0 0 0;}
   &.top {margin-left: 112px;}
   .topic-body, .topic-meta-data {border: none;}
-  .row {border-top: 1px solid $primary_lighter; padding-top: 7px;}
+  .row {border-top: 1px solid $primary_border_color; padding-top: 7px;}
   .reply:first-of-type .row {border-top: none;}
 }
 
 .contents.regular  {
 
 button.show-replies {
-  background: $primary_lightest;
+  background: lighten($secondary_background_color, 76%);
   padding-bottom: 20px;
-     &:hover {background: $primary_lighter;
-  .badge-posts {color: $primary_medium;}
+     &:hover {background: lighten($secondary_background_color, 76%);
+  .badge-posts {color: $secondary_text_color;}
 
   }
 }
 
   &.bottom-round button.show-replies {
-  background: $primary_lightest;
+  background: lighten($secondary_background_color, 76%);
   margin-bottom: 0;
   padding-bottom: 8px;
-    &:hover {background: $primary_lighter;
-       .badge-posts {color: $primary_medium;}
+    &:hover {background: lighten($secondary_background_color, 76%);
+       .badge-posts {color: $secondary_text_color;}
     }
   }
 
@@ -818,7 +817,7 @@ button.show-replies {
   width: 0;
   height: 0;
   vertical-align: middle;
-  border-top: 4px solid $primary;
+  border-top: 4px solid $primary_text_color;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
   content: "";
@@ -835,9 +834,9 @@ button.show-replies {
   padding: 4px 0;
   margin: 1px 0 0;
   list-style: none;
-  background-color: $secondary;
-  border: 1px solid $primary_light;
-  box-shadow: 0 1px 5px $primary_lightest;
+  background-color: $primary_background_color;
+  border: 1px solid $primary_border_color;
+  box-shadow: 0 1px 5px rgba($primary_shadow_color, .4);
   background-clip: padding-box;
   span {font-size: 12px;}
 .title {font-weight: bold; display: block; font-size: 14px;}
@@ -848,14 +847,14 @@ button.show-replies {
   clear: both;
   font-weight: normal;
   line-height: 18px;
-  color: $primary;
+  color: $primary_text_color;
 }
 .dropdown-menu li > a:hover,
 .dropdown-menu .active > a,
 .dropdown-menu .active > a:hover {
-  color: $secondary;
+  color: $tertiary_text_color;
   text-decoration: none;
-  background-color: $tertiary;
+  background-color: $emphasis_text_color;
 }
 .open {
   *z-index: 1000;
@@ -880,8 +879,8 @@ clear: both;
   position: fixed;
   z-index: 1000;
   left: 50%;
-  background-color: $tertiary_lightest;
-  border: 1px solid $tertiary_light;
+  background-color: $emphasis_background_color;
+  border: 1px solid $emphasis_border_color;
   padding: 5px;
   margin-bottom: 5px;
 
@@ -909,7 +908,7 @@ clear: both;
   }
   h3 {
     font-size: 25px;
-    color: $primary;
+    color: $primary_text_color;
     margin-bottom: 5px;
     i {
       margin-right: 7px;
@@ -917,29 +916,29 @@ clear: both;
   }
   .btn {
     border: none;
-    color: $secondary;
+    color: $tertiary_text_color;
     font-weight: normal;
 
-      color: $secondary;
+      color: $tertiary_text_color;
       background: $btn-primary-background-color;
 
     &[href] {
-      color: $secondary;
+      color: $tertiary_text_color;
     }
     &:hover
     {
-      color: $secondary;
+      color: $tertiary_text_color;
       background: darken($btn-primary-background-color, 12%);
     }
     &:active {
       @include linear-gradient(darken($btn-primary-background-color, 18%), darken($btn-primary-background-color, 12%));
-      @include box-shadow(inset 0 1px 3px rgba($primary, 0.2));
-      color: $secondary;
+      @include box-shadow(inset 0 1px 3px rgba($primary_shadow_color, 0.2));
+      color: $tertiary_text_color;
     }
     &[disabled] {
-      text-shadow: 0 1px 0 rgba($primary, 0.2);
+      text-shadow: 0 1px 0 rgba($primary_shadow_color, 0.2);
       @include linear-gradient($btn-primary-background-color, $btn-primary-background-color-dark);
-      @include box-shadow((inset 0 1px 0 rgba($secondary, 0.33), inset 0 -1px 2px rgba($primary, 0.2)));
+      @include box-shadow((inset 0 1px 0 rgba($primary_shadow_color, 0.33), inset 0 -1px 2px rgba($primary_shadow_color, 0.2)));
     }
   }
 }
@@ -948,8 +947,8 @@ clear: both;
     article.boxed {
       .select-posts {
         button.select-post {
-          background-color: $tertiary;
-          color: $secondary;
+          background-color: $emphasis_background_color;
+          color: $tertiary_text_color;
         }
       }
       .topic-body {
@@ -972,12 +971,12 @@ clear: both;
       top: 4px;
 
       button {
-        background-color: $primary_lighter;
-        border-top: 1px solid $secondary;
-        border-left: 1px solid $secondary;
-        border-bottom: 1px solid $primary_light;
-        border-right: 1px solid $primary_light;
-        color: $primary_light;
+        background-color: lighten($secondary_background_color, 60%);
+        border-top: 1px solid $tertiary_border_color;
+        border-left: 1px solid $tertiary_border_color;
+        border-bottom: 1px solid $primary_border_color;
+        border-right: 1px solid $primary_border_color;
+        color: $secondary_text_color;
 
       }
     }
@@ -1001,7 +1000,7 @@ a.attachment:before {
     position: absolute;
     top: 0;
     left: 10px;
-    color: $primary_lightest;
+    color: lighten($primary_text_color, 76%);
     font: 90px/1 FontAwesome;
     content: "\f05c";
     z-index: -5;
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index b96b51f7bf4..ea8bf8061d8 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -1,7 +1,7 @@
 @import "common/foundation/variables";
 @import "common/foundation/mixins";
 
-.post-info a {color: $primary_light;}
+.post-info a {color: lighten($primary_text_color, 50%);}
 
 .topic-meta-data-inside {
   float: right;
@@ -67,9 +67,8 @@
 }
 
 #topic-closing-info {
-  border-top: 1px solid $primary_lighter;
-  margin-left: 10px;
-  margin-top: 10px;
+  border-top: 1px solid lighten($primary_border_color, 10%) ;
+  padding-top: 10px;
   height: 20px;
 }
 
@@ -86,8 +85,8 @@
   i {
     font-size: 12px;
     margin-right: 5px;
-    background: $secondary;
-    border: 1px solid $primary_lighter;
+    background: $primary_background_color;
+    border: 1px solid $primary_border_color;
     padding: 2px 4px;
     border-radius: 20px;
     transition: linear 0.15s;
@@ -97,12 +96,12 @@
 
 a.reply-new {
   position: absolute;
-  color: $primary_medium; 
+  color: lighten($primary_text_color, 35%); 
   margin-top: -2px;}
 a:hover.reply-new {
-  color: $tertiary;
-  i {background: $tertiary_lightest;
-    border: 1px solid $tertiary;
+  color: $link-color;
+  i {background: $emphasis_background_color;
+    border: 1px solid $emphasis_border_color;
     padding: 2px 4px;
   }
 }
@@ -114,8 +113,8 @@ a:hover.reply-new {
     display: none;
   }
   border: none;
-  background-color: lighten($primary_lighter, 9%);
-  color: $primary_medium;
+  background-color: lighten($primary_text_color, 70%);
+  color: lighten($primary_text_color, 35%);
   width: 130px;
   height: 34px;
 
@@ -135,7 +134,7 @@ a:hover.reply-new {
     left: 4px;
     border: 0;
     background: none;
-    color: $primary_medium;
+    color: lighten($primary_text_color, 35%);
     width: 50%;
     text-align: left;
     height: 30px;
@@ -150,7 +149,7 @@ a:hover.reply-new {
     }
     &:disabled {
     cursor: default;
-    color: $primary_medium;
+    color: lighten($primary_text_color, 35%);
     }
   }
   h4 {
@@ -163,10 +162,10 @@ a:hover.reply-new {
     top: 0px;
     bottom: 0px;
     width: 0px;
-    border-right: 1px solid  lighten($primary_lighter, 7%);
+    border-right: 1px solid  $primary_border_color;
     // background-color: #d4eaf4;
     // background-color: #C5E8F7;
-    background-color: $success_light;
+    background-color: $success_background_color;
     transition: width .75s;
   }
 }
@@ -193,14 +192,14 @@ a:hover.reply-new {
   }
 }
 
-.heatmap-high {color: #f77 !important;}
-.heatmap-med {color: #a00 !important;}
-.heatmap-low {color: #700 !important;}
+.heatmap-high {color: $heatmap-high !important;}
+.heatmap-med {color: $heatmap-med !important;}
+.heatmap-low {color: $heatmap-low !important;}
 
 
 
 #topic-filter {
-  background-color: $highlight_light;
+  background-color: $highlight_background_color;
   padding: 8px;
   bottom: 0;
   position: fixed;
@@ -227,7 +226,7 @@ sup{top:-0.5em; }
 sub{bottom:-0.25em; }
 figure{margin:0; }
 fieldset{
-  border:1px solid $primary_light;
+  border:1px solid $primary_border_color;
   margin:0 2px;
   padding:0.35em 0.625em 0.75em;
 }
@@ -238,11 +237,11 @@ legend{
 
 kbd
 {
-    background-color: $secondary;
-    border:1px solid $primary_lighter;
+    background-color: $primary_background_color;
+    border:1px solid $primary_border_color;
     border-radius: 3px;
-    box-shadow: 0 1px 0 $primary_lightest;
-    color: $primary;
+    box-shadow: 0 1px 0 rgba($primary_shadow_color, .9);
+    color: $primary_text_color;
     display: inline-block;
     font-size: 12px;
     line-height: 1.4;
diff --git a/app/assets/stylesheets/desktop/upload.scss b/app/assets/stylesheets/desktop/upload.scss
index 471e8d04370..68b328e964f 100644
--- a/app/assets/stylesheets/desktop/upload.scss
+++ b/app/assets/stylesheets/desktop/upload.scss
@@ -32,7 +32,7 @@
         line-height: 18px;
       }
       .description, .hint {
-        color: #9a9ea0;
+        color: $secondary_text_color;
       }
       .hint {
         font-style: italic;
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 43832ee8cf2..4cee7f51cd9 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -4,7 +4,7 @@
 
 .groups {
   .group-link {
-    color: $tertiary_lightest;
+    color: $link_color;
   }
 }
 
@@ -42,13 +42,13 @@
   }
 
   .static {
-    color: $primary;
+    color: $primary_text_color;
     margin-top: 5px;
     margin-left: 5px;
     display: inline-block;
   }
   .instructions {
-    color: $primary_medium;
+    color: $primary_text_color;
     margin-left: 160px;
     margin-top: 5px;
     margin-bottom: 10px;
@@ -57,12 +57,12 @@
     margin-left: 3px;
   }
   .instructions a[href] {
-    color: $primary_medium;
+    color: $link_color;
   }
   .warning {
-    background-color: lighten($highlight_danger, 10%);
+    background-color: $warning_background_color;
     padding: 5px 8px;
-    color: $secondary;
+    color: $primary_background_color;
     width: 520px;
   }
 
@@ -72,10 +72,6 @@
       width: 280px;
     }
   }
-
-  #save-button-top {
-    float: right;
-  }
 }
 
 .user-navigation {
@@ -84,7 +80,7 @@
   float: left;
 
   h3 {
-    color: $primary_light;
+    color: $primary_text_color;
     margin: 20px 0 10px 0;
   }
 
@@ -107,7 +103,7 @@
   h2 {
     a {
       font-size: 14px;
-      color: $primary_light;
+      color: $link_color;
       cursor: pointer;
     }
   }
@@ -140,15 +136,15 @@
       }
       span.last-seen-at {
         float: right;
-        color: $primary_light;
+        color: $secondary_text_color;
       }
     }
   }
 
   .user-content {
     padding: 10px 8px;
-    background-color: $secondary;
-    border: 1px solid $primary_lighter;
+    background-color: $primary_background_color;
+    border: 1px solid $primary_border_color;
     margin-bottom: 10px;
 
     .btn.right {
@@ -165,22 +161,22 @@
 
       th {
         text-align: left;
-        border-bottom: 1px solid $primary_light;
+        border-bottom: 1px solid $primary_border_color;
         padding: 5px;
       }
 
       td {
         padding: 5px;
-        border-bottom: 1px solid $primary_lighter;
+        border-bottom: 1px solid $primary_border_color;
       }
     }
   }
 
   .about {
-    background-color: $primary;
+    background-color: $secondary_background_color;
     margin-bottom: 10px;
     overflow: hidden;
-    color: $secondary;
+    color: $secondary_text_color;
 
 
     .details {
@@ -197,20 +193,21 @@
         font-size: 20px;
         margin-bottom: 6px;
         font-weight: normal;
+        margin-top: 5px;
       }
 
       a[href] {
-        color: $secondary;
+        color: $secondary_link_color;
       }
 
       img.avatar {
-        border: 3px solid $primary_lightest;
-        margin-bottom: 4px;
-        background-color: $secondary;
+        border: 3px solid $primary_border_color;
+        margin-bottom: 10px;
+        background-color: $secondary_background_color;
       }
 
       .suspended {
-        color: $highlight_danger_light;
+        color: $warning_text_color;
       }
 
       .primary {
@@ -218,13 +215,13 @@
         float: left;
         width: 75%;
 
-        h1, h2 {margin-top: 10px;}
+        h1, h2 {}
 
         .bio {
-          color: $primary_lighter;
+          color: $secondary_text_color;
 
           a[href] {
-            color: $tertiary_light;
+            color: $link_color;
           }
         }
 
@@ -232,26 +229,26 @@
 
       .secondary {
         float: right;
-        background-color: lighten($primary, 10%);
+        background-color: $tertiary_background_color;
         text-align: right;
         padding: 0 10px;
         width: 20%;
 
         dd {
-          color: $secondary;
+          color: $secondary_text_color;
           margin: 0 0 7px 0;
           overflow: hidden;
           text-overflow: ellipsis;
         }
         dt {
-          color: $primary_lighter;
+          color: $secondary_text_color;
           margin: 0;
         }
       }
     }
 
     .controls {
-      background-color: $primary_lighter;
+      background-color: $tertiary_background_color;
       padding: 12px;
       height: 30px;
 
@@ -279,7 +276,7 @@
         .avatar {
           float: left;
           margin-right: 10px;
-          border: 2px solid $secondary;
+          border: 2px solid $secondary_border_color;
           width: 45px;
           height: 45px;
         }
@@ -303,35 +300,34 @@
       margin: 5px 0px;
       font-size: 13px;
       word-wrap: break-word;
-      color: lighten($primary, 30%);
+      color: $primary_text_color;
     }
     .item.moderator-action {
-      background-color: $tertiary_lightest;
+      background-color: $moderator_background_color;
     }
     .item.deleted {
       opacity: 0.8;
-      background-color: $highlight_danger_light;
+      background-color: $warning_background_color;
     }
     .item.hidden {
       display: block;
       opacity: 0.4;
     }
     .item {
-      padding: 10px 8px;
-      background-color: $secondary;
-      border-bottom: 1px solid lighten($primary_lighter, 10%);
-      margin-bottom: 10px;
+      padding: 20px 8px 15px 8px;
+      background-color: $primary_background_color;
+      border-bottom: 1px solid lighten($primary_border_color, 10%);
     }
     .type {
-      color: lighten($primary, 40%);
+      color: $primary_text_color;
     }
     span.name {
-      color: lighten($primary, 40%);
+      color: $secondary_text_color;
     }
     .time {
       display: block;
       float: right;
-      color: $primary_light;
+      color: $secondary_text_color;
       margin-right: 8px;
       font-size: 11px;
     }
@@ -345,7 +341,7 @@
       font-size: 14px;
     }
     .edit-reason {
-      background-color: $highlight_light;
+      background-color: $moderator_background_color;
       padding: 3px 5px 5px 5px;
     }
   }
@@ -360,7 +356,7 @@
   .fa {
     width: 15px;
     display: inline-block;
-    color: $primary_medium;
+    color: $secondary_text_color;
   }
   .avatar-wrapper {
     border: none;
diff --git a/app/assets/stylesheets/mobile/activation.scss b/app/assets/stylesheets/mobile/activation.scss
index cc033436bcd..a247dc5b39b 100644
--- a/app/assets/stylesheets/mobile/activation.scss
+++ b/app/assets/stylesheets/mobile/activation.scss
@@ -6,7 +6,7 @@
 
 #simple-container {
   @include border-radius-all(10px);
-  background-color: $secondary;
+  background-color: $primary_background_color;
   padding: 20px;
   width: 550px;
   margin: 0 auto;
diff --git a/app/assets/stylesheets/mobile/colorpicker.scss b/app/assets/stylesheets/mobile/colorpicker.scss
index 81cf53aa086..4efad99d133 100644
--- a/app/assets/stylesheets/mobile/colorpicker.scss
+++ b/app/assets/stylesheets/mobile/colorpicker.scss
@@ -21,7 +21,7 @@
     max-width: 300px;
 
     .colorpicker {
-      border: 1px solid $primary_medium;
+      border: 1px solid $primary_border_color;
       margin-right: 2px;
       width: 16px;
       height: 16px;
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 70f2f3ee136..02061a423dd 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -23,28 +23,28 @@ display: none;
   z-index: 999999;
   position: absolute;
   width: 240px;
-  background-color: $secondary;
-  border: 1px solid $primary_light;
+  background-color: $primary_background_color;
+  border: 1px solid $primary_border_color;
   ul {
     list-style: none;
     padding: 0;
     margin: 0;
     li {
-      border-bottom: 1px solid $primary_lighter;
+      border-bottom: 1px solid $primary_border_color;
       a[href] {
         padding: 5px;
         display: block;
         span.username {
-          color: lighten($primary, 20);
+          color: lighten($primary_text_color, 20%);
         }
         span.name {
           font-size: 11px;
         }
         &.selected {
-          background-color: $primary_lighter;
+          background-color: lighten($secondary_background_color, 60%);
         }
         @include hover {
-          background-color: $primary_lighter;
+          background-color: lighten($secondary_background_color, 60%);
           text-decoration: none;
         }
       }
@@ -65,13 +65,13 @@ display: none;
   #file-uploading {
     left: 51%;
     font-size: 12px;
-    color: darken($primary_light, 40);
+    color: darken($tertiary_text_color, 40%);
   }
   #draft-status {
     right: 0;
-    color: lighten($primary, 60);
+    color: lighten($primary_text_color, 60%);
     &.flash {
-      color: lighten($highlight_danger, 20);
+      color: $warning_text_color;
     }
   }
   @include transition(height 0.4s ease);
@@ -89,7 +89,7 @@ display: none;
     right: 13px;
     position: absolute;
     font-size: 15px;
-    color: $primary_medium;
+    color: lighten($primary_text_color, 35%);
     text-decoration: none;
     &:before {
       font-family: "FontAwesome";
@@ -127,7 +127,7 @@ display: none;
   &.draft {
     height: 60px !important;
     cursor: pointer;
-    border-top: 1px solid $primary_light;
+    border-top: 1px solid $primary_border_color;
     .draft-text {
       display: block;
           position: absolute;
@@ -142,7 +142,7 @@ display: none;
   }
   &.saving {
     height: 40px !important;
-    border-top: 1px solid $primary_light;
+    border-top: 1px solid $primary_border_color;
     .saving-text {
       display: block;
     }
@@ -164,7 +164,7 @@ display: none;
     height: 70px;
     text-indent: -9999em;
     background: {
-      color: $primary;
+      color: $primary_text_color;
       image: image-url("spinner_96_w.gif");
       repeat: no-repeat;
       size: 35px;
@@ -236,14 +236,14 @@ display: none;
     #reply-title {
       margin-right: 10px;
       &:disabled {
-        background-color: $primary_lighter;
+        background-color: lighten($secondary_background_color, 60%);
       }
     }
     #wmd-input:disabled {
-      background-color: $primary_lighter;
+      background-color: lighten($secondary_background_color, 60%);
     }
     #wmd-input, #wmd-preview {
-      color: $primary;
+      color: $primary_text_color;
 
       video {
         max-width: 100%;
@@ -255,7 +255,7 @@ display: none;
       }
     }
     #wmd-preview {
-      border: 1px dashed $primary_light;
+      border: 1px dashed $primary_border_color;
       overflow: auto;
       visibility: visible;
       p {
@@ -307,8 +307,8 @@ div.ac-wrap.disabled {
 }
 
 div.ac-wrap {
-  background-color: $secondary;
-  border: 1px solid $primary_lighter;
+  background-color: $primary_background_color;
+  border: 1px solid $primary_border_color;
   padding: 5px 10px;
   @include border-radius-all(3px);
   div.item {
@@ -332,10 +332,10 @@ div.ac-wrap {
       display: inline-block;
       border: 1px solid rgba(255, 255, 255, 0);
       &:hover {
-        background-color: lighten($highlight_danger, 45);
-        border: 1px solid lighten($highlight_danger, 20);
+        background-color: $warning_background_color;
+        border: 1px solid $warning_border_color;
         text-decoration: none;
-        color: $secondary;
+        color: $emphasis_text_color;
       }
     }
   }
@@ -395,7 +395,7 @@ div.ac-wrap {
       min-height: 100%;
       padding: 7px;
       margin: 0;
-      background-color: $secondary;
+      background-color: $primary_background_color;
       word-wrap: break-word;
 
       // set up proper header margins in post preview
@@ -440,8 +440,8 @@ div.ac-wrap {
   #wmd-button-bar {
     top: 0;
     position: absolute;
-    border-bottom: 1px solid $inner_line;
-    background-color: $secondary;
+    border-bottom: 1px solid $primary_border_color;
+    background-color: $primary_background_color;
     z-index: 100;
   }
 }
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index 7fff8cebc88..37531cbdde3 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -7,7 +7,7 @@
 @import "../common/foundation/helpers";
 
 body {
-  background-color: $secondary;
+  background-color: $primary_background_color;
 }
 
 .container {
@@ -32,38 +32,38 @@ header {
 body {
 
   button.ok {
-    @include linear-gradient(lighten($success, 5%), $success);
-    color: $secondary;
+   background: $success_background_color;
+    color: $emphasis_text_color;
     @include hover {
-      @include linear-gradient(lighten($success, 10%), $success);
-      color: $secondary;
+      background: darken($success_background_color, 10%);
+      color: $emphasis_text_color;
     }
   }
   button.cancel {
-    @include linear-gradient(lighten($highlight_danger, 5%), $highlight_danger);
-    color: $secondary;
+   background: $warning_background_color;
+    color: $emphasis_text_color;
     @include hover {
-      @include linear-gradient(lighten($highlight_danger, 10%), $highlight_danger);
-      color: $secondary;
+   background: $warning_background_color;
+      color: $emphasis_text_color;
     }
   }
   .coldmap-high {
-    color: lighten($tertiary, 20%) !important;
+    color: $coldmap-high !important;
   }
   .coldmap-med {
-    color: lighten($tertiary, 10%) !important;
+    color: $coldmap-med !important;
   }
   .coldmap-low {
-    color: $tertiary !important;
+    color: $coldmap-low !important;
   }
   .heatmap-high {
-    color: lighten($highlight_danger, 50%) !important;
+    color: $heatmap-high !important;
   }
   .heatmap-med {
-    color: lighten($highlight_danger, 10%) !important;
+    color: $heatmap-med !important;
   }
   .heatmap-low {
-    color: $highlight_danger !important;
+    color: $heatmap-low !important;
   }
   #loading-message {
     position: absolute;
@@ -71,7 +71,7 @@ body {
     text-align: center;
     top: 120px;
     left: 500px;
-    color: $primary_medium;
+    color: $secondary_text_color;
   }
   .top-space {
     margin-top: 10px;
@@ -86,25 +86,25 @@ body {
       padding: 10px 10px 10px 10px;
     }
     &.white {
-      background-color: $secondary;
+      background-color: $primary_background_color;
     }
   }
   #main {
     .fa-star.starred {
-      color: $highlight;
+      color: $highlight_text_color;
     }
     a.star {
       display: inline-block;
       font-size: 15px;
       line-height: 1;
-      color: $primary_light;
+      color: $secondary_text_color;
       &:before {
         font-family: "FontAwesome";
         content: "\f005";
       }
       &.starred {
         color: #fe1;
-        text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
+        text-shadow: 0px 0px 3px rgba($primary_shadow_color, 0.5);
         @include hover {
           opacity: 1;
           &:before {
@@ -146,7 +146,7 @@ body {
   }
   .message {
     @include border-radius-all(8px);
-    background-color: $secondary;
+    background-color: $primary_background_color;
     padding: 14px;
     h2 {
       margin-bottom: 20px;
@@ -161,7 +161,7 @@ body {
       .contents {
         padding-top: 10px;
         a[href] {
-          color: $secondary;
+          color: $primary_background_color;
         }
       }
     }
@@ -171,14 +171,14 @@ body {
   }
   .grippie {
     width: 100%;
-    border: 1px solid $primary_lighter;
+    border: 1px solid $primary_border_color;
     border-width: 1px 0px;
     cursor: row-resize;
     height: 11px;
     overflow: hidden;
-    background-color: $primary_lightest;
+    background-color: lighten($secondary_background_color, 76%);
     display:block {}
-    background: image-url("grippie.png") $primary_lightest no-repeat center 3px;
+    background: image-url("grippie.png") lighten($secondary_background_color, 76%) no-repeat center 3px;
   }
 }
 
@@ -186,10 +186,10 @@ form {
   .tip {
     display: inline-block;
     &.good {
-      color: $success;
+      color: $success_text_color;
     }
     &.bad {
-      color: $highlight_danger;
+      color: $warning_text_color;
     }
   }
 }
@@ -214,7 +214,7 @@ blockquote {
     display: inline-block;
     i {
       font-size: 15px;
-      color: darken($secondary, 60%);
+      color: darken($tertiary_text_color, 60%);
     }
   }
 }
@@ -225,12 +225,12 @@ blockquote {
 
 #pagedown-editor {
   width: 540px;
-  background-color: $secondary;
+  background-color: $primary_background_color;
   padding: 0 10px 13px 10px;
-  border: 1px solid $primary_light;
+  border: 1px solid $primary_border_color;
   .preview {
     margin-top: 8px;
-    border: 1px dashed $primary_light;
+    border: 1px dashed $primary_border_color;
     padding: 8px 8px 0 8px;
     p {
       margin: 0 0 10px 0;
@@ -244,13 +244,13 @@ blockquote {
 .spinner {
   width: 100px;
   margin: 0 auto 30px auto;
-  background-color: $primary;
+  background-color: $secondary_background_color;
   @include border-radius-all(10px);
   padding: 10px 10px 10px 30px;
   font-size: 15px;
   line-height: 23px;
   text-align: center;
-  color: $secondary;
+  color: $tertiary_text_color;
   background: {
     image: image-url("spinner_96_w.gif");
     repeat: no-repeat;
@@ -264,9 +264,9 @@ blockquote {
 }
 
 .avatar-wrapper {
-  background-color: $secondary;
+  background-color: $primary_background_color;
   display: inline-block;
-  border: 1px solid $primary_light;
+  border: 1px solid $primary_border_color;
   @include border-radius-all(5px);
   img {
     @include border-radius-all(4px);
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index b585efb3425..13cb507d75c 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -12,8 +12,8 @@
   position: absolute;
   top: 0;
   z-index: 1001;
-  background-color: $secondary;
-  box-shadow: 0 0 3px $primary_lighter;
+  background-color: $primary_background_color;
+  box-shadow: 0 0 3px rgba($primary_shadow_color, .6);
 
   .docked & {
     position: fixed;
@@ -49,7 +49,7 @@
     float: left;
     display: none;
     a {
-      color: $primary;
+      color: $primary_text_color;
       font-size: 14px;
       line-height: 40px;
     }
@@ -69,14 +69,14 @@
       &:first-child.active .icon {
       }
       &:last-child .icon {
-        border-right: 1px solid $primary_lighter;
+        border-right: 1px solid $primary_border_color;
       }
     }
     .icon {
       display: block;
-      border-top: 1px solid $primary_lighter;
-      border-bottom: 1px solid $primary_lighter;
-      border-left: 1px solid $primary_light;
+      border-top: 1px solid $primary_border_color;
+      border-bottom: 1px solid $primary_border_color;
+      border-left: 1px solid $primary_border_color;
       padding: 3px;
       color: $nav-button-color;
       text-decoration: none;
@@ -92,10 +92,10 @@
     }
     .active .icon {
       position: relative;
-      color: $primary_light;
-      background-color: $secondary;
+      color: lighten($primary_text_color, 60%);
+      background-color: $primary_background_color;
       cursor: default;
-      @include box-shadow((6px 0 6px -6px rgba($primary, 0.2), -6px 0 6px -6px rgba($primary, 0.2), inset 0 13px 13px -13px rgba($primary, 0.1)));
+      @include box-shadow((6px 0 6px -6px rgba($primary_shadow_color, 0.2), -6px 0 6px -6px rgba($primary_shadow_color, 0.2), inset 0 13px 13px -13px rgba($primary_shadow_color, 0.1)));
       &:after {
         display: block;
         position: absolute;
@@ -105,7 +105,7 @@
         width: 100%;
         height: 0;
         content: "";
-        border-top: 1px solid $secondary;
+        border-top: 1px solid $primary_border_color;
       }
     }
     [class^="fa fa-"] {
@@ -126,15 +126,15 @@
     }
     .unread-notifications {
       right: -4px;
-      background-color: $tertiary;
+      background-color: $tertiary_text_color;
     }
     .unread-private-messages {
       left: -4px;
-      background-color: $success_dark;
+      background-color: $success_text_color;
     }
   }
   .flagged-posts {
-    background-color: $highlight_danger;
+    background-color: $warning_text_color;
   }
 }
 
@@ -158,9 +158,9 @@
   right: 0;
   z-index: 1100;
   margin-top: -1px;
-  border: 1px solid $primary_lighter;
-  background-color: $secondary;
-  @include box-shadow(0 1px 1px rgba($primary, 0.2));
+  border: 1px solid $primary_border_color;
+  background-color: $primary_background_color;
+  @include box-shadow(0 1px 1px rgba($primary_shadow_color, 0.2));
 
   // Common
 
@@ -177,7 +177,7 @@
     }
   }
   .heading {
-    color: $tertiary_dark;
+    color: $primary_text_color;
     font-weight: bold;
     font-size: 12px;
     line-height: 15px;
@@ -198,7 +198,7 @@
       background-color: $header-item-highlight;
     }
     .read {
-      background-color: $secondary;
+      background-color: $primary_background_color;
     }
     .none {
       padding: 5px;
@@ -214,7 +214,7 @@
     padding: 5px;
     font-size: 16px;
     &:focus {
-      @include box-shadow((inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6)));
+      @include box-shadow((inset 0 1px 1px rgba($primary_shadow_color, 0.075), 0 0 4px rgba(82, 168, 236, 0.6)));
     }
   }
   .searching {
diff --git a/app/assets/stylesheets/mobile/history.scss b/app/assets/stylesheets/mobile/history.scss
index f0aa807f370..23d53f5dc86 100644
--- a/app/assets/stylesheets/mobile/history.scss
+++ b/app/assets/stylesheets/mobile/history.scss
@@ -11,7 +11,7 @@
   #revision-controls {
     float: left;
     .btn[disabled]:hover {
-      color: $primary;
+      color: $primary_text_color;
     }
   }
   #display-modes {
@@ -21,7 +21,7 @@
     }
   }
   #revision-details {
-    background-color: $primary_lightest;
+    background-color: lighten($secondary_background_color, 76%);
     padding: 5px;
     margin-top: 10px;
   }
@@ -56,63 +56,63 @@
   }
   ins, .diff-ins {
     code, img {
-      border: 2px solid $success_dark;
+      border: 2px solid $success_border_color;
     }
     img {
       opacity: .75;
       filter: alpha(opacity=75);
     }
     a {
-      color: $success_dark;
+      color: $success_text_color;
       text-decoration: none;
     }
   }
   img.diff-ins, code.diff-ins {
-    border: 2px solid $success_dark;
+    border: 2px solid $success_text_color;
   }
   img.diff-ins {
     opacity: .75;
     filter: alpha(opacity=75);
   }
   .diff-ins {
-    background: $success_light;
+    background: $success_background_color;
   }
   ins {
-    color: $success_dark;
-    background: $success_light;
+    color: $success_text_color;
+    background: $success_background_color;
   }
   del, .diff-del {
     code, img {
-      border: 2px solid $highlight_danger_dark;
+      border: 2px solid $warning_border_color;
     }
     img {
       opacity: .5;
       filter: alpha(opacity=50);
     }
     a {
-      color: $highlight_danger_dark;
+      color: $warning_text_color;
       text-decoration: none;
     }
   }
   img.diff-del, code.diff-del {
-    border: 2px solid $highlight_danger;
+    border: 2px solid $warning_border_color;
   }
   img.diff-del {
     opacity: .5;
     filter: alpha(opacity=50);
   }
   .diff-del {
-    background: $highlight_danger_light;
+    background: $warning_background_color;
   }
   del {
-    color: $highlight_danger_dark;
-    background: $highlight_danger_light;
+    color: $warning_text_color;
+    background: $warning_background_color;
   }
   span.date {
     font-weight: bold;
   }
   span.edit-reason {
-    background-color: $highlight;
+    background-color: $highlight_background_color;
     padding: 3px 5px 5px 5px;
   }
   .modal-header {
diff --git a/app/assets/stylesheets/mobile/lightbox.scss b/app/assets/stylesheets/mobile/lightbox.scss
index 8ceed23a5fe..800dab6d2d1 100644
--- a/app/assets/stylesheets/mobile/lightbox.scss
+++ b/app/assets/stylesheets/mobile/lightbox.scss
@@ -20,8 +20,8 @@
   position: absolute;
   bottom: 0;
   width: 100%;
-  color: $secondary;
-  background: $primary;
+  color: $tertiary_text_color;
+  background: $secondary_background_color;
   opacity: 0;
   @include transition(opacity .2s);
 
@@ -41,7 +41,7 @@
   .informations {
     margin: 6px;
     padding-right: 20px;
-    color: $primary_medium;
+    color: $secondary_text_color;
     font-size: 14px;
   }
 
diff --git a/app/assets/stylesheets/mobile/login.scss b/app/assets/stylesheets/mobile/login.scss
index aaa6b708ecc..6d452c0f74f 100644
--- a/app/assets/stylesheets/mobile/login.scss
+++ b/app/assets/stylesheets/mobile/login.scss
@@ -19,7 +19,7 @@
 
 #login-form {
   a {
-    color: $primary_medium;
+    color: $secondary_text_color;
     cursor: pointer;
   }
   label {float: left; display: block;}
diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss
index 80168c7a570..f37dcebf5c8 100644
--- a/app/assets/stylesheets/mobile/modal.scss
+++ b/app/assets/stylesheets/mobile/modal.scss
@@ -26,7 +26,7 @@
   bottom: 0;
   left: 0;
   z-index: 1040;
-  background-color: $primary;
+  background-color: $secondary_background_color;
   &.fade {
     opacity: 0;
   }
@@ -51,10 +51,10 @@
 .modal-inner-container {
   max-width: 100%;
   margin: 0 auto;
-  background-color: $secondary;
-  border: 1px solid $primary_light;
+  background-color: $primary_background_color;
+  border: 1px solid $primary_border_color;
   border: 1px solid rgba(0, 0, 0, 0.3);
-  *border: 1px solid $primary_light;
+  *border: 1px solid $primary_border_color;
   /* IE6-7 */
 
   @include border-radius-all (6px);
@@ -81,14 +81,14 @@
   overflow: auto;
   width: 100%;
   height: auto;
-  background-color: $secondary;
-  border: 1px solid $primary_light;
+  background-color: $primary_background_color;
+  border: 1px solid $primary_border_color;
   border: 1px solid rgba(0, 0, 0, 0.3);
-  *border: 1px solid $primary_light;
+  *border: 1px solid $primary_border_color;
   /* IE6-7 */
 
   @include border-radius-all (6px);
-  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 3px 7px rgba($primary_shadow_color, 0.3);
   background-clip: padding-box;
 }
 
@@ -113,7 +113,7 @@
   padding: 14px 0 15px;
   border-top: 1px solid #ddd;
   @include border-radius-all(0 0 6px 6px);
-  @include box-shadow (inset 0 1px 0 $secondary);
+  @include box-shadow (inset 0 1px 0 rgba($primary_shadow_color, .8));
   *zoom: 1;
 }
 .modal-footer:before,
@@ -153,11 +153,11 @@
 .modal {
   .nav {
     padding: 10px 30px;
-    background-color: $primary_lightest;
+    background-color: lighten($secondary_background_color, 76%);
     li > a {
       font-size: 14px;
     }
-    border-bottom: 1px solid $primary_light;
+    border-bottom: 1px solid $primary_border_color;
 
   }
   &.hidden {
@@ -169,17 +169,17 @@
       height: 80px;
     }
     label {
-      color: $primary_medium;
+      color: $secondary_text_color;
     }
     p {
-      color: $primary;
+      color: $primary_text_color;
       font-size: 13px;
     }
     .archetype-option {
       margin-bottom: 20px;
     }
     .warning {
-      color: lighten($highlight_danger, 10%) !important;
+      color: $warning_text_color !important;
     }
   }
   .password-confirmation {
@@ -287,9 +287,9 @@
         font-weight: normal;
       }
       &.btn-reply-here {
-        @include linear-gradient($primary_lighter, $primary_lighter);
+        background: lighten($secondary_background_color, 60%);
         text-shadow: none;
-        color: $primary_medium;
+        color: $secondary_text_color;
       }
     }
     .cancel {
diff --git a/app/assets/stylesheets/mobile/onebox.scss b/app/assets/stylesheets/mobile/onebox.scss
index e497a704656..9c3922ff181 100644
--- a/app/assets/stylesheets/mobile/onebox.scss
+++ b/app/assets/stylesheets/mobile/onebox.scss
@@ -19,15 +19,15 @@ a.loading-onebox {
     margin-right: 10px;
     padding: 10px 0;
     display: block;
-    color: $primary;
+    color: $primary_text_color;
     position: relative;
-    border-bottom: 1px solid $inner_border;
+    border-bottom: 1px solid $primary_border_color;
     .info {
       a {
-        color: $primary;
+        color: $primary_text_color;
         text-decoration: none;
       }
-      background-color: $secondary;
+      background-color: $primary_background_color;
       position: absolute;
       font-size: 14px;
       img.favicon {
diff --git a/app/assets/stylesheets/mobile/share_link.scss b/app/assets/stylesheets/mobile/share_link.scss
index d30d68c6790..9b5b9d9774c 100644
--- a/app/assets/stylesheets/mobile/share_link.scss
+++ b/app/assets/stylesheets/mobile/share_link.scss
@@ -8,8 +8,8 @@
   left: 20px;
   z-index: 990;
   @include border-radius-all(3px);
-  @include box-shadow(1px 1px 5px $primary_medium);
-  background-color: $primary_lighter;
+  @include box-shadow(1px 1px 5px rgba($primary_shadow_color, .6));
+  background-color: lighten($primary_background_color, 60%);
   padding: 3px 7px 6px 7px;
   width: 300px;
   display: none;
@@ -33,7 +33,7 @@
     float: right;
     font-size: 20px;
     a {
-      color: $primary;
+      color: $primary_text_color;
     }
   }
 }
diff --git a/app/assets/stylesheets/mobile/topic-admin-menu.scss b/app/assets/stylesheets/mobile/topic-admin-menu.scss
index 3e0cbba00f0..a5b1b833ee2 100644
--- a/app/assets/stylesheets/mobile/topic-admin-menu.scss
+++ b/app/assets/stylesheets/mobile/topic-admin-menu.scss
@@ -11,10 +11,10 @@
 }
 
 .topic-admin-menu {
-  background-color: $secondary;
+  background-color: $primary_background_color;
   width: 205px;
   padding: 10px;
-  border: 1px solid $primary_light;
+  border: 1px solid $primary_border_color;
   position: fixed;
   top: 70px;
   right: 10px;
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index eb715562ad8..e9d485e0875 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -47,13 +47,13 @@
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
-  border-top: 1px solid $primary_lighter;
-  border-bottom: 1px solid $primary_lighter;
+  border-top: 1px solid $primary_border_color;
+  border-bottom: 1px solid $primary_border_color;
 
   > tbody > tr {
-    background-color: $secondary;
+    background-color: $primary_background_color;
     &:nth-child(even) {
-      background-color: darken($secondary, 4%);
+      background-color: darken($primary_background_color, 4%);
     }
     &.archived a {
       opacity: 0.6;
@@ -64,7 +64,7 @@
       }
     }
     &.highlighted {
-      background-color: $highlight;
+      background-color: $highlight_background_color;
     }
   }
   th,
@@ -99,7 +99,7 @@
     font-size: 16px;
 
     i.score {
-      color: $success;
+      color: $success_text_color;
       cursor: pointer;
     }
   }
@@ -107,7 +107,7 @@
   .topic-excerpt {
     font-size: 14px;
     margin-top: 8px;
-    color: $primary_medium;
+    color: lighten($primary_text_color, 35%);
     word-break: break-word;
   }
 
@@ -188,7 +188,7 @@
     .featured-topic {
       margin: 8px 0;
       a.last-posted-at, a.last-posted-at:visited {
-        color: $primary_light;
+        color: lighten($primary_text_color, 50%);
       }
     }
   }
@@ -215,7 +215,7 @@
 .category-list-item {
   margin-bottom: 10px;
   #topic-list tbody tr:nth-child(even) {
-    background-color: $secondary;
+    background-color: $primary_background_color;
   }
   .badge-category {
     float: left;
@@ -230,14 +230,14 @@
     border-top: 0;
     padding: 7px 10px;
     background-color: lighten($topic-list-th-background-color, 2%);
-    @include box-shadow(0 1px 3px rgba($primary, 0.22));
+    @include box-shadow(0 1px 3px rgba($primary_shadow_color, 0.22));
     figure {
       float: left;
       margin: 3px 7px 0 0;
       color: lighten($topic-list-th-color, 5%);
       font-weight: bold;
       font-size: 12px;
-      text-shadow: 0 1px 0 $secondary;
+      text-shadow: 0 1px 0 $secondary_shadow_color;
     }
     figcaption {
       display: inline;
@@ -273,11 +273,11 @@
   width: 200px;
   margin: 0 auto;
   padding: 10px 0 10px 43px;
-  color: $secondary;
+  color: $tertiary_text_color;
   font-size: 18px;
   line-height: 25px;
   background: {
-    color: $primary;
+    color: $primary_text_color;
     image: image-url("spinner_96_w.gif");
     repeat: no-repeat;
     position: 10px 50%;
@@ -291,8 +291,8 @@
 
 .list-controls {
   .home {
-    color: $primary;
-    background-color: $primary_lightest;
+    color: $primary_text_color;
+    background-color: lighten($secondary_background_color, 76%);
   }
 
   .badge-category {
@@ -325,7 +325,7 @@
     background-color: transparent;
     padding: 0;
     border: 0;
-    color: lighten($highlight_danger, 10%);
+    color: lighten($warning_text_color, 10%);
     font-size: 13px;
     cursor: default;
   }
@@ -370,7 +370,7 @@ span.posted {
   width: 0;
   height: 0;
   vertical-align: middle;
-  border-top: 4px solid $primary;
+  border-top: 4px solid $primary_text_color;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
   content: "";
@@ -387,8 +387,8 @@ span.posted {
   padding: 4px 0;
   margin: 1px 0 0;
   list-style: none;
-  background-color: $secondary;
-  border: 1px solid $primary_medium;
+  background-color: $primary_background_color;
+  border: 1px solid $primary_border_color;
   border: 1px solid rgba(0, 0, 0, 0.2);
   *border-right-width: 2px;
   *border-bottom-width: 2px;
@@ -405,14 +405,14 @@ span.posted {
   clear: both;
   font-weight: normal;
   line-height: 18px;
-  color: $primary;
+  color: $primary_text_color;
 }
 .dropdown-menu li > a:hover,
 .dropdown-menu .active > a,
 .dropdown-menu .active > a:hover {
-  color: $secondary;
+  color: $tertiary_text_color;
   text-decoration: none;
-  background-color: $tertiary;
+  background-color: $emphasis_text_color;
 }
 .open {
   *z-index: 1000;
@@ -447,8 +447,8 @@ ol.category-breadcrumb {
   overflow-x: hidden;
   overflow-y: scroll;
   position: absolute;
-  border: 1px solid $primary_lighter;
-  background-color: $secondary;
+  border: 1px solid $primary_border_color;
+  background-color: $primary_background_color;
   width: 200px;
   height: 200px;
   padding: 8px 5px 0 7px;
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 70dec9c7ccd..727eaf51b24 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -1,15 +1,15 @@
 @import "common/foundation/variables";
 
 .gap {
-  background-color: $primary_lightest;
+  background-color: lighten($secondary_background_color, 76%);
   padding: 5px 15px;
-  color: $primary_lighter;
+  color: $secondary_text_color;
   text-align: center;
   margin: 0 10px;
 }
 
 .topic-post {
-  border-top: 1px solid $primary_lighter;
+  border-top: 1px solid $primary_border_color;
   padding: 6px 0 3px 0;
   &:first-of-type {
     border-top: none;
@@ -17,11 +17,11 @@
 }
 
 nav.post-controls {
-  background-color: $secondary;
+  background-color: $primary_background_color;
   padding: 0px;
-  border-right: 1px solid $primary_lighter;
+  border-right: 1px solid $primary_border_color;
   margin-top: 10px;
-  button {color: $primary_lighter;
+  button {color: lighten($primary_text_color, 35%);
   border-radius: 4px;
   margin-right: 2px;
 
@@ -43,13 +43,13 @@ span.badge-posts {
 
 button.create {
   float: right !important;
-  border: 1px solid $primary_light;
+  border: 1px solid $primary_border_color;
   margin-right: 0;
-  color: $primary_light;
+  color: lighten($primary_text_color, 35%);
   padding-right: 7px;
 }
  	.like {
-    border-right: 1px solid $primary_lighter;
+    border-right: 1px solid $primary_border_color;
 }
 
 .create i {
@@ -63,10 +63,10 @@ button {
   padding: 8px 10px;
   vertical-align: top;
   background: transparent;
- 	border: 1px solid $primary_lighter;
+ 	border: 1px solid $primary_border_color;
   float: left !important;
     &:last-of-type {
-      border-right: 1px solid $primary_lighter;
+      border-right: 1px solid $primary_border_color
     }
        &:hover {
         }
@@ -89,7 +89,7 @@ button {
             }
           }
           &.last-read {
-            color: $highlight_danger;
+            color: $warning_text_color;
           }
           &.bookmarked {
             &:before {
@@ -146,17 +146,17 @@ a.star {
 
   border-radius: 5px;
   margin: 15px 10px 20px 10px;
-  border: 1px solid $primary_lighter;
+  border: 1px solid $primary_border_color;
 
   h3 {
     margin-bottom: 4px;
-    color: $primary;
+    color: $primary_text_color;
     line-height: 23px;
   }
 
   h4 {
     margin: 0 0 3px 0;
-    color: $primary_medium;
+    color: $secondary_text_color;
     font-weight: normal;
     font-size: 12px;
     line-height: 15px;
@@ -213,7 +213,7 @@ a.star {
       line-height: 20px;
     }
     .number {
-      color: $tertiary_dark;
+      color: $emphasis_text_color;
     }
     .avatar + a {
       float: left;
@@ -223,11 +223,11 @@ a.star {
   .links,
   .information {
     padding: 7px 14px;
-    color: $primary;
+    color: $primary_text_color;
   }
 
   .information {
-    border-top: 1px solid $primary_lighter;
+    border-top: 1px solid $primary_border_color;
   }
   .topic-links {
     .badge-notification {
@@ -238,15 +238,15 @@ a.star {
     float: right;
     .btn {
       border: 0;
-      border-bottom: 1px solid $primary_lighter;
-      border-left: 1px solid $primary_lightest;
+      border-bottom: 1px solid $primary_border_color;
+      border-left: 1px solid $primary_border_color;
       padding: 0 23px;
-      color: $primary;
-      background: $primary_lighter;
+      color: $primary_text_color;
+      background: lighten($secondary_background_color, 60%);
       &:hover {
-        background: $primary_lighter;
-        color: $primary;
-        border-bottom: 1px solid $primary_lighter;
+        background: lighten($secondary_background_color, 60%);
+        color: $primary_text_color;
+        border-bottom: 1px solid $primary_border_color;
 
       }
       &.collapsed {
@@ -261,7 +261,7 @@ a.star {
 }
 
 #topic-footer-buttons {
-  border-top: 1px solid $primary_lighter;
+  border-top: 1px solid $primary_border_color;
   padding: 20px 10px 0 10px;
 }
 
@@ -285,8 +285,8 @@ a.star {
 
 
 span.post-count {
-  background: $primary;
-  color: $secondary;
+  background: $secondary_background_color;
+  color: $tertiary_text_color;
   opacity: .8;
 }
 
@@ -301,7 +301,7 @@ span.post-count {
 
 #topic-title {
   z-index: 1000;
-  background: $primary_lightest;
+  background: lighten($secondary_background_color, 76%);
   margin: 0 0 0 0 !important;
   padding: 15px 10px 15px 10px;
 }
@@ -312,20 +312,20 @@ span.post-count {
     height: auto;
   }
   &.moderator {
-    background-color: $tertiary_lightest;
+    background-color: $emphasis_background_color;
   }
 }
 
 .quote-button {
   display: none;
   position: absolute;
-  background-color: $primary_medium;
-  color: $secondary;
+  background-color: lighten($secondary_background_color, 35%);
+  color: $primary_text_color;
   padding: 10px;
   width: 90px;
 
   &:hover {
-    background-color: $primary_light;
+    background-color: lighten($secondary_background_color, 50%);
     cursor: pointer;
   }
 }
@@ -410,11 +410,11 @@ iframe {
 }
 
 .deleted {
-  background-color: $highlight_danger_light;
+  background-color: $warning_background_color;
 }
 
 #show-topic-admin {
-  color: $primary_medium;
+  color: lighten($primary_text_color, 35%);
   right: 0px;
   border-right: 0;
   padding-right: 4px;
@@ -434,7 +434,7 @@ iframe {
 }
 
 .new-user a {
-  color: $primary_medium;
+  color: lighten($primary_text_color, 35%);
 }
 
 .topic-meta-data {
@@ -460,7 +460,7 @@ blockquote {
 
 .quote-controls {
   float: right;
-  color: $primary;
+  color: $primary_text_color;
   a {
   margin: 0;
   }
@@ -468,7 +468,7 @@ blockquote {
     .quote-other-topic:before {
     display: inline-block;
     margin-left: 8px;
-    color: $primary;
+    color: $primary_text_color;
     font-family: "FontAwesome";
     position: relative;
     z-index: 20;
@@ -483,8 +483,8 @@ blockquote {
 
 
 .quote .title {
-  border-left: 5px solid $primary_light;
-  background-color: $primary_lightest;
+  border-left: 5px solid $primary_border_color;
+  background-color: lighten($secondary_background_color, 76%);
   padding: 10px 10px 0 12px;
   clear: both;
   .avatar { margin-right: 7px; }
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 70851d9042b..48c00043414 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -45,7 +45,7 @@ a.edit-topic {font-size: 15px;}
 }
 
 .docked #topic-progress {
-	  box-shadow: 0 0 3px $primary_light;
+	  box-shadow: 0 0 3px rbga($primary_shadow_color, .5);
 }
 
 #topic-progress-wrapper {
@@ -65,15 +65,15 @@ a.edit-topic {font-size: 15px;}
 
 #topic-progress {
 
-	  box-shadow: 0 0 3px $primary;
+	  box-shadow: 0 0 3px rbga($primary_shadow_color, .7);
 
   position: relative;
   &.hidden {
     display: none;
   }
   border: none;
-  background-color: $primary_lighter;
-  color: $primary_medium;
+  background-color: lighten($primary_background_color, 60%);
+  color: $primary_text_color;
   width: 130px;
   height: 34px;
   .nums {
@@ -92,7 +92,7 @@ a.edit-topic {font-size: 15px;}
     left: 4px;
     border: 0;
     background: none;
-    color: $primary_medium;
+    color: lighten($primary_text_color, 35%);
 
     width: 60px;
     text-align: left;
@@ -109,7 +109,7 @@ a.edit-topic {font-size: 15px;}
     &:disabled {
 
       cursor: default;
-  color: $primary_medium;
+    color: lighten($primary_text_color, 35%);
     }
   }
   h4 {
@@ -122,10 +122,10 @@ a.edit-topic {font-size: 15px;}
     top: 0px;
     bottom: 0px;
     width: 0px;
-    border-right: 1px solid $primary_lighter;
+    border-right: 1px solid $primary_border_color;
     // background-color: #d4eaf4;
     // background-color: #C5E8F7;
-    background-color: $success_light;
+    background-color: $success_background_color;
   }
 }
 
@@ -137,6 +137,6 @@ a.edit-topic {font-size: 15px;}
 
 .post-cloak:last-of-type {padding-bottom: 40px;}
 
-.heatmap-high {color: #f77 !important;}
-.heatmap-med {color: #a00 !important;}
-.heatmap-low {color: #700 !important;}
+.heatmap-high {color: $heatmap-high !important;}
+.heatmap-med {color: $heatmap-med !important;}
+.heatmap-low {color: $heatmap-low !important;}
diff --git a/app/assets/stylesheets/mobile/upload.scss b/app/assets/stylesheets/mobile/upload.scss
index b30386c053c..3d87939f921 100644
--- a/app/assets/stylesheets/mobile/upload.scss
+++ b/app/assets/stylesheets/mobile/upload.scss
@@ -21,6 +21,6 @@
     line-height: 18px;
   }
   .description {
-    color: $primary_medium;
+    color: lighten($primary_text_color, 35%);
   }
 }
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index cbd9c96ebf5..cf7fbc601a5 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -15,13 +15,13 @@
     height: 100px;
   }
   .static {
-    color: $primary;
+    color: $primary_text_color;
     margin-top: 5px;
     margin-left: 5px;
     display: inline-block;
   }
   .instructions {
-    color: $primary_medium;
+    color: $secondary_text_color;
     margin-top: 5px;
   }
   .category-controls {
@@ -31,13 +31,13 @@
     margin-left: 3px;
   }
   .instructions a[href] {
-    color: $primary_medium;
+    color: $secondary_text_color;
   }
   .warning {
     @include border-radius-all(6px);
-    background-color: lighten($highlight_danger, 10%);
+    background-color: $warning_background_color;
     padding: 5px 8px;
-    color: $secondary;
+    color: $primary_text_color;
     width: 520px;
   }
 
@@ -72,15 +72,15 @@
   display: block;
   width: 220px;
   min-height: 200px;
-  background-color: $primary_lightest;
-  color: $primary;
+  background-color: lighten($secondary_background_color, 76%);
+  color: $primary_text_color;
   word-wrap: break-word;
 }
 
 .user-navigation {
 
   h3 {
-    color: $primary_medium;
+    color: lighten($primary_text_color, 35%);
     padding-left: 5px;
   }
   .nav-stacked {
@@ -93,7 +93,7 @@
   .avatar {
     float: left;
     width: 45px;
-    background-color: $secondary;
+    background-color: $primary_background_color;
   }
 
   nav.buttons {
@@ -108,7 +108,7 @@
   h2 {
     a {
       font-size: 14px;
-      color: $primary_light;
+      color: $secondary_text_color;
       cursor: pointer;
     }
   }
@@ -119,10 +119,10 @@
   margin-bottom: 50px;
 
   .about {
-    background-color: $primary;
+    background-color: $secondary_background_color;
     margin-bottom: 10px;
     overflow: hidden;
-    color: $secondary;
+    color: $primary_text_color;
 
     .details {
       text-align: center;
@@ -140,32 +140,32 @@
       }
 
       a[href] {
-        color: $secondary;
+        color: $primary_text_color;
       }
 
       img.avatar {
-        border: 3px solid $primary_lightest;
+        border: 3px solid $primary_border_color;
         margin-bottom: 4px;
       }
 
       .secondary {
-        background-color: $primary;
+        background-color: $secondary_background_color;
         text-align: left;
         padding: 0 10px;
 
         dd {
-          color: $secondary;
+          color: $tertiary_text_color;
           margin: 0 0 7px 0;
         }
         dt {
-          color: $primary_light;
+          color: $secondary_text_color;
           margin: 0;
         }
       }
     }
 
     .controls {
-      background-color: $primary_lighter;
+      background-color: lighten($secondary_background_color, 60%);
       margin-top: 0px;
       padding: 10px 10px 0 10px;
 
@@ -193,7 +193,7 @@
         .avatar {
           float: left;
           margin-right: 10px;
-          border: 2px solid $secondary;
+          border: 2px solid $tertiary_border_color;
           width: 45px;
           height: 45px;
         }
@@ -218,14 +218,14 @@
       margin: 5px 0px;
       font-size: 13px;
       word-wrap: break-word;
-      color: lighten($primary, 30%);
+      color: lighten($primary_text_color, 30%);
     }
     .item.moderator-action {
-      background-color: $tertiary_lightest;
+      background-color: $emphasis_background_color;
     }
     .item.deleted {
       opacity: 0.8;
-      background-color: $highlight_danger_light;
+      background-color: $warning_background_color;
     }
     .item.hidden {
       display: block;
@@ -233,19 +233,19 @@
     }
     .item {
       padding: 10px 8px;
-      background-color: $secondary;
-      border-bottom: 1px solid $primary_light;
+      background-color: $primary_background_color;
+      border-bottom: 1px solid $primary_border_color;
     }
     .type {
-      color: lighten($primary, 40%);
+      color: lighten($primary_text_color, 40%);
     }
     span.name {
-      color: lighten($primary, 40%);
+      color: lighten($primary_text_color, 40%);
     }
     .time {
       display: block;
       float: right;
-      color: $primary_light;
+      color: $secondary_text_color;
       margin-right: 8px;
       font-size: 11px;
     }
@@ -259,7 +259,7 @@
       font-size: 14px;
     }
     .edit-reason {
-      background-color: $highlight;
+      background-color: $highlight_background_color;
       padding: 3px 5px 5px 5px;
     }
   }
@@ -274,7 +274,7 @@
   .fa {
     width: 15px;
     display: inline-block;
-    color: $primary_medium;
+    color: lighten($primary_text_color, 35%);
   }
   .avatar-wrapper {
     border: none;
@@ -298,4 +298,4 @@
   .avatar {
     margin: 5px 10px 5px 0;
   }
-}
+}
\ No newline at end of file
diff --git a/app/views/exceptions/not_found.html.erb b/app/views/exceptions/not_found.html.erb
index da211f249ac..3bf5e23d57c 100644
--- a/app/views/exceptions/not_found.html.erb
+++ b/app/views/exceptions/not_found.html.erb
@@ -1,10 +1,10 @@
 <% local_domain = "#{request.protocol}#{request.host_with_port}" %>
 
-<p><%= t 'page_not_found.title' %></p>
+<h1 class="page-not-found"><%= t 'page_not_found.title' %></h1>
 
 <div class="row">
   <div class="span8">
-    <h2><%= t 'page_not_found.popular_topics' %></h2>
+    <h2 class="popular-topics-title"><%= t 'page_not_found.popular_topics' %></h2>
     <% @top_viewed.each do |t| %>
       <%= link_to t.title, t.relative_url %><br/>
     <% end %>
@@ -12,7 +12,7 @@
     <a href="/latest" class="btn"><%= t 'page_not_found.see_more' %>&hellip;</a>
   </div>
   <div class="span8">
-    <h2><%= t 'page_not_found.recent_topics' %></h2>
+    <h2 class="recent-topics-title"><%= t 'page_not_found.recent_topics' %></h2>
     <% @recent.each do |t| %>
       <%= link_to t.title, t.relative_url %><br/>
     <% end %>
@@ -23,7 +23,7 @@
 
 <div class="row">
   <div class="span10" style='padding-top: 20px'>
-    <h2><%= t 'page_not_found.search_title' %></h2>
+    <h2 class="page-not-found-search"><%= t 'page_not_found.search_title' %></h2>
     <p>
       <form action='//google.com' id='google-search' onsubmit="return google_button_clicked()">
         <input type="text" id='user-query' value="<%= @slug %>">