diff --git a/app/assets/stylesheets/generic/files.scss b/app/assets/stylesheets/generic/files.scss
index 91220a856ac..8014dcb165b 100644
--- a/app/assets/stylesheets/generic/files.scss
+++ b/app/assets/stylesheets/generic/files.scss
@@ -94,7 +94,7 @@
       }
       .author,
       .blame_commit {
-        background: #f5f5f5;
+        background: $background-color;
         vertical-align: top;
       }
       .lines {
diff --git a/app/assets/stylesheets/generic/lists.scss b/app/assets/stylesheets/generic/lists.scss
index 5950885c42c..85176fec0dc 100644
--- a/app/assets/stylesheets/generic/lists.scss
+++ b/app/assets/stylesheets/generic/lists.scss
@@ -35,7 +35,7 @@
       color: #8a6d3b;
     }
 
-    &.smoke { background-color: #f5f5f5; }
+    &.smoke { background-color: $background-color; }
 
     &:hover {
       background: $hover;
@@ -46,7 +46,7 @@
       border-bottom: none;
 
       &.bottom {
-        background: #f5f5f5;
+        background: $background-color;
       }
     }
 
@@ -74,9 +74,10 @@
     }
 
     .row_title {
-      color: #444;
+      color: $text-color;
+
       &:hover {
-        color: #444;
+        color: $text-color;
         text-decoration: underline;
       }
     }
diff --git a/app/assets/stylesheets/generic/nav_sidebar.scss b/app/assets/stylesheets/generic/nav_sidebar.scss
index c14f12284da..bb890171985 100644
--- a/app/assets/stylesheets/generic/nav_sidebar.scss
+++ b/app/assets/stylesheets/generic/nav_sidebar.scss
@@ -1,18 +1,18 @@
 .page-with-sidebar {
-  background: #F5F5F5;
+  background: $background-color;
 
   .sidebar-wrapper {
     position: fixed;
     top: 0;
     left: 0;
     height: 100%;
-    border-right: 1px solid #EAEAEA;
+    border-right: 1px solid $border-color;
   }
 }
 
 .sidebar-wrapper {
   z-index: 99;
-  background: #F5F5F5;
+  background: $background-color;
 }
 
 .content-wrapper {
@@ -39,7 +39,7 @@
 
 .nav-sidebar li {
   &.active a {
-    color: #333;
+    color: $text-color;
     background: #FFF !important;
     font-weight: bold;
     border: 1px solid #EEE;
@@ -52,32 +52,33 @@
     }
 
     i {
-      color: #444;
+      color: $text-color;
     }
   }
 }
 
 .nav-sidebar li {
+  text-shadow: 0 1px 1px $border-color;
+
   &.separate-item {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $border-color;
     padding-top: 10px;
     margin-top: 10px;
   }
 
   a {
-    color: #555;
+    color: #3b5a5b;
     display: block;
     text-decoration: none;
     padding: 8px 15px;
     font-size: 13px;
     line-height: 20px;
-    text-shadow: 0 1px 2px #FFF;
     padding-left: 20px;
 
     &:hover {
       text-decoration: none;
-      color: #333;
-      background: #EEE;
+      color: $text-color;
+      background: #f2f6f7;
     }
 
     &:active, &:focus {
@@ -86,7 +87,7 @@
 
     i {
       width: 20px;
-      color: #888;
+      color: $gray-dark;
       margin-right: 23px;
     }
   }
@@ -156,18 +157,17 @@
   position: fixed;
   top: 46px;
   padding: 5px 13px 5px 13px;
-  left: 197px;
+  left: 198px;
   font-size: 13px;
-  background: #EEE;
+  background: transparent;
   color: black;
-  border-left: 1px solid rgba(0,0,0,0.035);
-  border-right: 1px solid rgba(0,0,0,0.035);
+  border-left: 1px solid $border-color;
+  border-bottom: 1px solid $border-color;
 }
 
 .collapse-nav a:hover {
   text-decoration: none;
-  color: #333;
-  background: #eaeaea;
+  background: #f2f6f7;
 }
 
 @media (max-width: $screen-md-max) {
diff --git a/app/assets/stylesheets/generic/typography.scss b/app/assets/stylesheets/generic/typography.scss
index 4d940ee6b29..80190424c1b 100644
--- a/app/assets/stylesheets/generic/typography.scss
+++ b/app/assets/stylesheets/generic/typography.scss
@@ -4,7 +4,6 @@
  */
 .page-title {
   margin-top: 0px;
-  color: #333;
   line-height: 1.5;
   font-weight: normal;
   margin-bottom: 5px;
@@ -16,7 +15,7 @@ pre {
 
   &.dark {
     background: #333;
-    color: #f5f5f5;
+    color: $background-color;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 5a9f93dc03d..83f65913ee6 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -89,7 +89,7 @@
       margin: 0px;
       padding: 0px;
       border: none;
-      background: #F5F5F5;
+      background: $background-color;
       color: rgba(0,0,0,0.3);
       padding: 0px 5px;
       border-right: 1px solid $border-color;
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 851f126318d..759ba6b1c22 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -37,7 +37,7 @@
   }
 
   .editor-ref {
-    background: #f5f5f5;
+    background: $background-color;
     padding: 11px 15px;
     border-right: 1px solid #CCC;
     display: inline-block;
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index bbd12172672..83daea10ed5 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -190,7 +190,7 @@
   li a {
     font-size: 13px;
     padding: 5px 10px;
-    background: rgba(0,0,0,0.045);
+    background: $background-color;
     margin-left: 4px;
   }
 }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index d41e34caba1..fe5667a587f 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -129,7 +129,7 @@
     font-size: 15px;
     border-bottom: 1px solid #BBB;
     color: #777;
-    background-color: #F5F5F5;
+    background-color: $background-color;
 
     &.ci-success {
       color: $gl-success;
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index ce02cdb1652..b0e6a05fa06 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -27,7 +27,7 @@
       }
       &.selected {
         td {
-          background: #f5f5f5;
+          background: $background-color;
           border-top: 1px solid #EEE;
           border-bottom: 1px solid #EEE;
         }
diff --git a/app/views/notify/project_was_moved_email.html.haml b/app/views/notify/project_was_moved_email.html.haml
index f53de2de287..d2df398ed4a 100644
--- a/app/views/notify/project_was_moved_email.html.haml
+++ b/app/views/notify/project_was_moved_email.html.haml
@@ -6,10 +6,10 @@
     = @project.name_with_namespace
 %p
   To update the remote url in your local repository run (for ssh):
-%p{ style: "background:#f5f5f5; padding:10px; border:1px solid #ddd" }
+%p{ style: "background:$background-color; padding:10px; border:1px solid #ddd" }
   git remote set-url origin #{@project.ssh_url_to_repo}
 %p
   or for http(s):
-%p{ style: "background:#f5f5f5; padding:10px; border:1px solid #ddd" }
+%p{ style: "background:$background-color; padding:10px; border:1px solid #ddd" }
   git remote set-url origin #{@project.http_url_to_repo}
 %br