diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index a450167b04f..b3397d16016 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -36,7 +36,7 @@ header {
       padding: 0;
 
       .nav > li > a {
-        color: #7f8fa4;
+        color: $gl-icon-color;
         font-size: 18px;
         padding: 0;
         margin: ($header-height - 28) / 2 0;
@@ -62,7 +62,7 @@ header {
           background-color: #eee;
         }
         &.active {
-          color: #7f8fa4;
+          color: $gl-icon-color;
         }
       }
     }
@@ -81,14 +81,14 @@ header {
       font-size: 19px;
       line-height: $header-height;
       font-weight: normal;
-      color: #4c4e54;
+      color: $gl-text-color;
       overflow: hidden;
       text-overflow: ellipsis;
       vertical-align: top;
       white-space: nowrap;
 
       a {
-        color: #4c4e54;
+        color: $gl-text-color;
         &:hover {
           text-decoration: underline;
         }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index bb49ae396c7..0bac23f3d45 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -26,6 +26,7 @@ $gl-text-orange:       #d90;
 $gl-link-color:        #3084bb;
 $gl-dark-link-color:   #333;
 $gl-placeholder-color: #8f8f8f;
+$gl-icon-color:        $gl-placeholder-color;
 $gl-gray:              $gl-text-color;
 $gl-header-color:      $gl-title-color;
 
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index e909e15f74c..e83fa9e3d52 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -6,7 +6,7 @@
 .navbar-nav {
   li {
     .badge.todos-pending-count {
-      background-color: #7f8fa4;
+      background-color: $gl-icon-color;
       margin-top: -5px;
       font-weight: normal;
     }