diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index cda46223492adfa7125515d756d4fe5948ec12f0..50849e95541caf4a610151f82ee95da14698063d 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -68,23 +68,19 @@
 }
 
 @mixin btn-green {
-  @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, $white-light);
+  @include btn-color($green-500, $green-600, $green-600, $green-700, $green-700, $green-800, $white-light);
 }
 
 @mixin btn-blue {
-  @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, $white-light);
-}
-
-@mixin btn-blue-medium {
-  @include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, $white-light);
+  @include btn-color($blue-500, $blue-600, $blue-600, $blue-700, $blue-700, $blue-800, $white-light);
 }
 
 @mixin btn-orange {
-  @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, $white-light);
+  @include btn-color($orange-500, $orange-600, $orange-600, $orange-700, $orange-700, $orange-800, $white-light);
 }
 
 @mixin btn-red {
-  @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, $white-light);
+  @include btn-color($red-500, $red-600, $red-600, $red-700, $red-700, $red-800, $white-light);
 }
 
 @mixin btn-gray {
@@ -145,11 +141,11 @@
     &.btn-new,
     &.btn-create,
     &.btn-save {
-      @include btn-outline($white-light, $border-green-light, $border-green-light, $green-light, $white-light, $border-green-light, $green-normal, $border-green-normal);
+      @include btn-outline($white-light, $green-600, $green-500, $green-500, $white-light, $green-600, $green-600, $green-700);
     }
 
     &.btn-remove {
-      @include btn-outline($white-light, $border-red-light, $border-red-light, $red-light, $white-light, $border-red-light, $red-normal, $border-red-normal);
+      @include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700);
     }
   }
 
@@ -157,11 +153,8 @@
     @include btn-gray;
   }
 
-  &.btn-primary {
-    @include btn-blue-medium;
-  }
-
   &.btn-info,
+  &.btn-primary,
   &.btn-register {
     @include btn-blue;
   }
@@ -171,11 +164,11 @@
   }
 
   &.btn-close {
-    @include btn-outline($white-light, $border-orange-light, $border-orange-light, $orange-light, $white-light, $border-orange-light, $orange-normal, $border-orange-normal);
+    @include btn-outline($white-light, $orange-600, $orange-500, $orange-500, $white-light, $orange-600, $orange-600, $orange-700);
   }
 
   &.btn-spam {
-    @include btn-outline($white-light, $border-red-light, $border-red-light, $red-light, $white-light, $border-red-light, $red-normal, $border-red-normal);
+    @include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700);
   }
 
   &.btn-danger,
@@ -360,7 +353,7 @@
 
 .btn-inverted {
   &-secondary {
-    @include btn-outline($white-light, $border-blue-light, $border-blue-light, $blue-light, $white-light, $border-blue-light, $blue-normal, $border-blue-normal);
+    @include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700);
   }
 }
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index fb8f8699bb2eac0bd1931e48d5cdab0f7e87f925..da5b754aec7c09f0078fef96a0fd7447083529a1 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -188,10 +188,6 @@
     white-space: nowrap;
     overflow: hidden;
 
-    &.text-danger {
-      color: $gl-danger;
-    }
-
     &:hover,
     &:focus,
     &.is-focused {
@@ -199,7 +195,7 @@
       text-decoration: none;
 
       .badge {
-        background-color: darken($row-hover, 5%);
+        background-color: darken($dropdown-link-hover-bg, 5%);
       }
     }
 
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 25d6fbe465affaabf7ea83d6afbc049843c67556..01036c049c2bbf765e8023a591740deb04fcaa3c 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -177,34 +177,34 @@ label {
 }
 
 .gl-field-error {
-  color: $red-normal;
+  color: $red-500;
 }
 
 .gl-show-field-errors {
   .gl-field-success-outline {
-    border: 1px solid $green-normal;
+    border: 1px solid $green-600;
 
     &:focus {
-      box-shadow: 0 0 0 1px $green-normal inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-normal;
+      box-shadow: 0 0 0 1px $green-600 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-600;
       border: 0 none;
     }
   }
 
   .gl-field-error-outline {
-    border: 1px solid $red-normal;
+    border: 1px solid $red-500;
 
     &:focus {
-      box-shadow: 0 0 0 1px $red-normal inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error;
+      box-shadow: 0 0 0 1px $red-500 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error;
       border: 0 none;
     }
   }
 
   .gl-field-success-message {
-    color: $green-normal;
+    color: $green-600;
   }
 
   .gl-field-error-message {
-    color: $red-normal;
+    color: $red-500;
   }
 
   .gl-field-hint {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 6660a0222607bbce625ccc8ed27ad58287775aee..fa02598760fba8405cf2f4b42454c17a7b05b44a 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -265,7 +265,7 @@ header {
   }
 
   .impersonation i {
-    color: $red-normal;
+    color: $red-500;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index db8d231a82a9b2b6758e4a2a757ce6e530b1f951..87667f39ab88c5d3d3c1d076770af14faebd9840 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -1,8 +1,8 @@
 .ci-status-icon-success {
-  color: $gl-success;
+  color: $green-500;
 
   svg {
-    fill: $gl-success;
+    fill: $green-500;
   }
 }
 
@@ -17,18 +17,18 @@
 .ci-status-icon-pending,
 .ci-status-icon-failed_with_warnings,
 .ci-status-icon-success_with_warnings {
-  color: $gl-warning;
+  color: $orange-500;
 
   svg {
-    fill: $gl-warning;
+    fill: $orange-500;
   }
 }
 
 .ci-status-icon-running {
-  color: $blue-normal;
+  color: $blue-400;
 
   svg {
-    fill: $blue-normal;
+    fill: $blue-400;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index 46632f15f35d76fea3d8f336ad15497bcacbad4c..1537b0744ccedd14a10a0d226a65561e9fda8cde 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -33,7 +33,7 @@
   }
 
   &.status-box-open {
-    background-color: $green-light;
+    background-color: $green-500;
   }
 
   &.status-box-expired {
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 4d5a2ca52f072cee1160e058d9e3974f6d9d2902..20c7bc93c2800f379e2f1bc4f9e33cd4dbef0791 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -76,28 +76,28 @@ body {
   /* Stripe the background colors so that adjacent alert-warnings are distinct from one another */
   .alert-warning {
     transition: background-color 0.15s, border-color 0.15s;
-    background-color: lighten($gl-warning, 4%);
-    border-color: lighten($gl-warning, 4%);
+    background-color: $orange-500;
+    border-color: $orange-500;
   }
 
   .alert-warning + .alert-warning {
-    background-color: $gl-warning;
-    border-color: $gl-warning;
+    background-color: $orange-600;
+    border-color: $orange-600;
   }
 
   .alert-warning + .alert-warning + .alert-warning {
-    background-color: darken($gl-warning, 4%);
-    border-color: darken($gl-warning, 4%);
+    background-color: $orange-700;
+    border-color: $orange-700;
   }
 
   .alert-warning + .alert-warning + .alert-warning + .alert-warning {
-    background-color: darken($gl-warning, 8%);
-    border-color: darken($gl-warning, 8%);
+    background-color: $orange-800;
+    border-color: $orange-800;
   }
 
   .alert-warning:only-of-type {
-    background-color: $gl-warning;
-    border-color: $gl-warning;
+    background-color: $orange-500;
+    border-color: $orange-500;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index f1528e060c23d329614698449d028b625e507688..15dc0aa6a528838649d0bf9865eca9c7164650a2 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -122,7 +122,7 @@ ul.content-list {
     }
 
     .member-group-link {
-      color: $blue-normal;
+      color: $blue-600;
     }
 
     .description {
@@ -152,12 +152,6 @@ ul.content-list {
         margin-top: 3px;
         margin-bottom: 4px;
 
-        &.btn-ldap-override {
-          @media (min-width: $screen-sm-min) {
-            margin-bottom: 0;
-          }
-        }
-
         &:last-child {
           margin-right: 0;
 
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
index 0fc89d5976acfdf8f3442c4057934dcab218851a..c9f345d24bed8d83176780ccc9814633f85412bc 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
@@ -31,6 +31,7 @@ $border-radius-small: 3px !default;
 //
 $text-color: $gl-text-color;
 $link-color: $gl-link-color;
+$link-hover-color: $gl-link-hover-color;
 
 
 //== Typography
@@ -73,7 +74,7 @@ $pagination-hover-color: $gl-text-color;
 $pagination-hover-bg: $row-hover;
 $pagination-hover-border: $border-color;
 
-$pagination-active-color: $blue-dark;
+$pagination-active-color: $blue-600;
 $pagination-active-bg: $white-light;
 $pagination-active-border: $border-color;
 
@@ -135,8 +136,8 @@ $well-border: #eee;
 //
 //##
 
-$code-color: #c7254e;
-$code-bg: #f9f2f4;
+$code-color: $red-600;
+$code-bg: lighten($red-50, 2%);
 
 $kbd-color: $white-light;
 $kbd-bg: #333;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 487ec486ed5ead96ba135587dfde2c110dc6e17a..168af187928eb3371e3c63ff50d88b92b4ea6ab6 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -26,27 +26,49 @@ $gray-dark: darken($gray-light, $darken-dark-factor);
 $gray-darker: #eee;
 $gray-darkest: #c4c4c4;
 
-$green-light: #3cbd70;
-$green-normal: darken($green-light, $darken-normal-factor);
-$green-dark: darken($green-light, $darken-dark-factor);
-
-$blue-light: #2ea8e5;
-$blue-normal: darken($blue-light, $darken-normal-factor);
-$blue-dark: darken($blue-light, $darken-dark-factor);
-
-$blue-medium-light: #3498cb;
-$blue-medium: darken($blue-medium-light, $darken-normal-factor);
-$blue-medium-dark: darken($blue-medium-light, $darken-dark-factor);
-
-$blue-light-transparent: rgba(44, 159, 216, 0.05);
-
-$orange-light: #fc8a51;
-$orange-normal: darken($orange-light, $darken-normal-factor);
-$orange-dark: darken($orange-light, $darken-dark-factor);
-
-$red-light: #e52c5a;
-$red-normal: darken($red-light, $darken-normal-factor);
-$red-dark: darken($red-light, $darken-dark-factor);
+$green-50: #e4f5eb;
+$green-100: #bae6cc;
+$green-200: #8dd5aa;
+$green-300: #5fc488;
+$green-400: #3cb76f;
+$green-500: #1aaa55;
+$green-600: #168f48;
+$green-700: #12753a;
+$green-800: #0e5a2d;
+$green-900: #0a4020;
+
+$blue-50: #e4eff9;
+$blue-100: #bcd7f1;
+$blue-200: #8fbce8;
+$blue-300: #62a1df;
+$blue-400: #418cd8;
+$blue-500: #1f78d1;
+$blue-600: #1b69b6;
+$blue-700: #17599c;
+$blue-800: #134a81;
+$blue-900: #0f3b66;
+
+$orange-50: #fff2e1;
+$orange-100: #fedfb3;
+$orange-200: #feca81;
+$orange-300: #fdb44f;
+$orange-400: #fca429;
+$orange-500: #fc9403;
+$orange-600: #de7e00;
+$orange-700: #c26700;
+$orange-800: #a35100;
+$orange-900: #853b00;
+
+$red-50: #fbe7e4;
+$red-100: #f4c4bc;
+$red-200: #ed9d90;
+$red-300: #e67664;
+$red-400: #e05842;
+$red-500: #db3b21;
+$red-600: #c0341d;
+$red-700: #a62d19;
+$red-800: #8b2615;
+$red-900: #711e11;
 
 $black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
@@ -58,32 +80,11 @@ $border-gray-light: darken($gray-light, $darken-border-factor);
 $border-gray-normal: darken($gray-normal, $darken-border-factor);
 $border-gray-dark: darken($white-normal, $darken-border-factor);
 
-$border-green-extra-light: #9adb84;
-$border-green-light: darken($green-light, $darken-border-factor);
-$border-green-normal: darken($green-normal, $darken-border-factor);
-$border-green-dark: darken($green-dark, $darken-border-factor);
-
-$border-blue-light: darken($blue-light, $darken-border-factor);
-$border-blue-normal: darken($blue-normal, $darken-border-factor);
-$border-blue-dark: darken($blue-dark, $darken-border-factor);
-
-$border-orange-light: darken($orange-light, $darken-border-factor);
-$border-orange-normal: darken($orange-normal, $darken-border-factor);
-$border-orange-dark: darken($orange-dark, $darken-border-factor);
-
-$border-red-light: darken($red-light, $darken-border-factor);
-$border-red-normal: darken($red-normal, $darken-border-factor);
-$border-red-dark: darken($red-dark, $darken-border-factor);
-
-$warning-message-bg: #fbf2d9;
-$warning-message-color: #9e8e60;
-$warning-message-border: #f0e2bb;
-
 /*
  * UI elements
  */
 $border-color: #e5e5e5;
-$focus-border-color: #3aabf0;
+$focus-border-color: $blue-300;
 $well-expand-item: #e8f2f7;
 $well-inner-border: #eef0f2;
 $well-light-border: #f1f1f1;
@@ -96,10 +97,11 @@ $gl-font-size: 14px;
 $gl-text-color: rgba(0, 0, 0, .85);
 $gl-text-color-secondary: rgba(0, 0, 0, .55);
 $gl-text-color-disabled: rgba(0, 0, 0, .35);
-$gl-text-green: #4a2;
-$gl-text-red: #d12f19;
-$gl-text-orange: #d90;
-$gl-link-color: #3777b0;
+$gl-text-green: $green-600;
+$gl-text-red: $red-500;
+$gl-text-orange: $orange-600;
+$gl-link-color: $blue-600;
+$gl-link-hover-color: $blue-800;
 $gl-grayish-blue: #7f8fa4;
 $gl-gray: $gl-text-color;
 $gl-gray-dark: #313236;
@@ -116,9 +118,9 @@ $list-text-disabled-color: $gl-text-color-disabled;
 $list-border-light: #eee;
 $list-border: rgba(0, 0, 0, 0.05);
 $list-text-height: 42px;
-$list-warning-row-bg: #fcf8e3;
-$list-warning-row-border: #faebcc;
-$list-warning-row-color: #8a6d3b;
+$list-warning-row-bg: $orange-50;
+$list-warning-row-border: $orange-100;
+$list-warning-row-color: $orange-700;
 
 /*
  * Markdown
@@ -145,24 +147,24 @@ $gl-sidebar-padding: 22px;
 /*
  * Misc
  */
-$row-hover: #f7faff;
-$row-hover-border: #b2d7ff;
+$row-hover: lighten($blue-50, 2%);
+$row-hover-border: $blue-100;
 $progress-color: #c0392b;
 $header-height: 50px;
 $fixed-layout-width: 1280px;
 $limited-layout-width: 990px;
 $gl-avatar-size: 40px;
-$error-exclamation-point: #e62958;
+$error-exclamation-point: $red-500;
 $border-radius-default: 2px;
 $settings-icon-size: 18px;
-$provider-btn-not-active-color: #4688f1;
-$link-underline-blue: #4a8bee;
-$active-item-blue: #4a8bee;
+$provider-btn-not-active-color: $blue-500;
+$link-underline-blue: $blue-500;
+$active-item-blue: $blue-500;
 $layout-link-gray: #7e7c7c;
 $btn-side-margin: 10px;
 $btn-sm-side-margin: 7px;
 $btn-xs-side-margin: 5px;
-$issue-status-expired: #cea61b;
+$issue-status-expired: $orange-500;
 $issuable-sidebar-color: $gl-text-color-secondary;
 $show-aside-bg: #eee;
 $show-aside-color: #777;
@@ -180,7 +182,8 @@ $general-hover-transition-duration: 100ms;
 $general-hover-transition-curve: linear;
 $issue-box-upcoming-bg: #8f8f8f;
 $pages-group-name-color: #4c4e54;
-$ldap-members-override-bg: #fff1e0;
+$ldap-members-override-bg: $orange-50;
+
 
 /*
 * Common component specific colors
@@ -194,10 +197,10 @@ $user-mention-color: #2fa0bb;
 $time-color: #999;
 $project-member-show-color: #aaa;
 $gl-promo-color: #aaa;
-$error-bg: #c67;
-$warning-message-bg: #ffffe6;
-$warning-message-border: #ed9;
-$warning-message-color: #b90;
+$error-bg: $red-400;
+$warning-message-bg: $orange-50;
+$warning-message-border: $orange-100;
+$warning-message-color: $orange-700;
 $control-group-descr-color: #666;
 $table-permission-x-bg: #d9edf7;
 $username-color: #666;
@@ -212,30 +215,30 @@ $tanuki-yellow: #fca326;
 /*
  * State colors:
  */
-$gl-primary: $blue-normal;
-$gl-success: $green-normal;
+$gl-primary: $blue-500;
+$gl-success: $green-500;
 $gl-success-focus: rgba($gl-success, .4);
-$gl-info: $blue-normal;
-$gl-warning: $orange-normal;
-$gl-danger: $red-normal;
+$gl-info: $blue-500;
+$gl-warning: $orange-500;
+$gl-danger: $red-500;
 $gl-btn-active-background: rgba(0, 0, 0, 0.16);
 $gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;
 
 /*
  * Commit Diff Colors
  */
-$added: #63c363;
-$deleted: #f77;
-$line-added: #ecfdf0;
-$line-added-dark: #c7f0d2;
-$line-removed: #fbe9eb;
-$line-removed-dark: #fac5cd;
-$line-number-old: #f9d7dc;
-$line-number-new: #ddfbe6;
-$line-number-select: #fbf2da;
-$line-target-blue: #f6faff;
-$line-select-yellow: #fcf8e7;
-$line-select-yellow-dark: #f0e2bd;
+$added: $green-300;
+$deleted: $red-300;
+$line-added: $green-50;
+$line-added-dark: $green-100;
+$line-removed: $red-50;
+$line-removed-dark: $red-100;
+$line-number-old: lighten($red-100, 5%);
+$line-number-new: lighten($green-100, 5%);
+$line-number-select: lighten($orange-100, 5%);
+$line-target-blue: $blue-50;
+$line-select-yellow: $orange-50;
+$line-select-yellow-dark: $orange-100;
 $dark-diff-match-bg: rgba(255, 255, 255, 0.3);
 $dark-diff-match-color: rgba(255, 255, 255, 0.1);
 $file-mode-changed: #777;
@@ -275,7 +278,7 @@ $dropdown-toggle-active-border-color: darken($border-color, 14%);
 /*
 * Filtered Search
 */
-$dropdown-hover-color: #3b86ff;
+$dropdown-hover-color: $blue-400;
 
 /*
 * Buttons
@@ -298,10 +301,10 @@ $award-emoji-menu-shadow: rgba(0,0,0,.175);
 /*
  * Search Box
  */
-$search-input-border-color: rgba(#4688f1, .8);
+$search-input-border-color: rgba($blue-400, .8);
 $search-input-focus-shadow-color: $dropdown-input-focus-shadow;
 $search-input-width: 220px;
-$location-badge-active-bg: #4f91f8;
+$location-badge-active-bg: $blue-500;
 $location-icon-color: #e7e9ed;
 
 /*
@@ -363,18 +366,18 @@ $builds-trace-bg: #111;
 /*
 * Callout
 */
-$callout-danger-bg: #fdf7f7;
-$callout-danger-border: #eed3d7;
-$callout-danger-color: #b94a48;
-$callout-warning-bg: #faf8f0;
-$callout-warning-border: #faebcc;
-$callout-warning-color: #8a6d3b;
-$callout-info-bg: #f4f8fa;
-$callout-info-border: #bce8f1;
-$callout-info-color: #34789a;
-$callout-success-bg: #dff0d8;
-$callout-success-border: #5ca64d;
-$callout-success-color: #3c763d;
+$callout-danger-bg: $red-50;
+$callout-danger-border: $red-100;
+$callout-danger-color: $red-700;
+$callout-warning-bg: $orange-50;
+$callout-warning-border: $orange-100;
+$callout-warning-color: $orange-700;
+$callout-info-bg: $blue-50;
+$callout-info-border: $blue-100;
+$callout-info-color: $blue-700;
+$callout-success-bg: $green-50;
+$callout-success-border: $green-100;
+$callout-success-color: $green-700;
 
 /*
 * Commit Page
@@ -394,7 +397,7 @@ $common-green: $gl-text-green;
 /*
 * Editor
 */
-$editor-cancel-color: #b94a48;
+$editor-cancel-color: $red-600;
 
 /*
 * Events
@@ -418,10 +421,10 @@ $logs-p-color: #333;
 * Forms
 */
 $input-danger-bg: #f2dede;
-$input-danger-border: #d66;
+$input-danger-border: $red-400;
 $input-group-addon-bg: #f7f8fa;
 $gl-field-focus-shadow: rgba(0, 0, 0, 0.075);
-$gl-field-focus-shadow-error: rgba(210, 40, 82, 0.6);
+$gl-field-focus-shadow-error: rgba($red-500, 0.6);
 
 /*
 * Help
@@ -455,14 +458,14 @@ $label-border-radius: 100px;
 /*
 * Lint
 */
-$lint-incorrect-color: red;
-$lint-correct-color: #47a447;
+$lint-incorrect-color: $red-500;
+$lint-correct-color: $green-500;
 
 /*
 * Login
 */
 $login-brand-holder-color: #888;
-$login-devise-error-color: #a00;
+$login-devise-error-color: $red-700;
 
 /*
 * Nav
@@ -476,33 +479,33 @@ $nav-toggle-gray: #666;
 */
 $notify-details: #777;
 $notify-footer: #777;
-$notify-new-file: #090;
-$notify-deleted-file: #b00;
+$notify-new-file: $green-600;
+$notify-deleted-file: $red-700;
 
 /*
 * Projects
 */
 $project-option-descr-color: #54565b;
 $project-breadcrumb-color: #999;
-$project-private-forks-notice-odd: #2aa056;
+$project-private-forks-notice-odd: $green-600;
 $project-network-controls-color: #888;
 
 /*
 * Runners
 */
-$runner-state-shared-bg: #32b186;
-$runner-state-specific-bg: #3498db;
-$runner-status-online-color: $green-normal;
+$runner-state-shared-bg: $green-400;
+$runner-state-specific-bg: $blue-400;
+$runner-status-online-color: $green-600;
 $runner-status-offline-color: $gray-darkest;
-$runner-status-paused-color: $red-normal;
+$runner-status-paused-color: $red-500;
 
 /*
 Stat Graph
 */
 $stat-graph-common-bg: #f3f3f3;
-$stat-graph-area-fill: #1db34f;
+$stat-graph-area-fill: $green-500;
 $stat-graph-axis-fill: #aaa;
-$stat-graph-orange-fill: #f17f49;
+$stat-graph-orange-fill: $orange-500;
 $stat-graph-selection-fill: #333;
 $stat-graph-selection-stroke: #333;
 
@@ -516,7 +519,7 @@ $select2-drop-shadow2: rgba(31, 37, 50, 0.317647);
 /*
 * Todo
 */
-$todo-alert-blue: #428bca;
+$todo-alert-blue: $blue-500;
 $todo-body-pre-color: #777;
 $todo-body-border: #ddd;
 
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 9975b860026c93f9d0fa54a4209a08d68676dc46..575d32b1a238c967dc820a3240acf0fed1604376 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -49,35 +49,6 @@
   .page-with-sidebar {
     padding-bottom: 0;
   }
-
-  .issues-details-filters {
-    display: -webkit-flex;
-    display: flex;
-  }
-
-  .filter-form {
-    width: 100%;
-  }
-}
-
-.board-extra-actions {
-  font-size: 0;
-  white-space: nowrap;
-}
-
-@media (min-width: $screen-sm-min) {
-  .issue-boards-content.is-focused {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    background: $white-light;
-    z-index: 100;
-
-    .boards-list {
-      height: calc(100vh - 50px);
-    }
-  }
 }
 
 .boards-app {
@@ -102,7 +73,7 @@
   @media (min-width: $screen-sm-min) {
     height: 475px; // Needed for PhantomJS
     height: calc(100vh - 220px);
-    min-height: 409px;
+    min-height: 475px;
     transition: width .2s;
 
     &.is-compact {
@@ -325,26 +296,6 @@
   }
 }
 
-.boards-title-holder {
-  padding: 25px 13px $gl-padding;
-
-  .dropdown-menu {
-    margin-top: -15px;
-    margin-left: 8px;
-  }
-}
-
-.board-selector-page-two {
-  padding-left: 10px;
-  padding-right: 10px;
-  white-space: normal;
-}
-
-.board-delete-btns {
-  padding-top: 12px;
-  border-top: 1px solid $border-color;
-}
-
 .issue-boards-sidebar {
   &.right-sidebar {
     top: 0;
@@ -536,13 +487,12 @@
   right: -3px;
   top: -3px;
   width: 17px;
-  background-color: $blue-light;
+  background-color: $blue-500;
   color: $white-light;
-  border: 1px solid $border-blue-light;
+  border: 1px solid $blue-600;
   font-size: 9px;
   line-height: 15px;
   border-radius: 50%;
-
 }
 
 .modal-filters {
@@ -565,36 +515,3 @@
     }
   }
 }
-
-.boards-switcher {
-  padding-right: 10px;
-}
-
-.board-milestone-list {
-  > li {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  a {
-    padding-left: 25px;
-  }
-
-  .fa-check {
-    margin-left: -18px;
-  }
-}
-
-.board-inner-milestone-dropdown {
-  margin-top: 10px;
-
-  .dropdown-menu {
-    position: fixed;
-  }
-}
-
-.board-milestone-footer-content {
-  padding-left: 12px;
-  padding-right: 12px;
-  color: $gl-gray-dark;
-}
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 6d80be7914e4dbf3e8e275b742c0366a258c91cc..77edd02b44618b0b85ab7a2680f9dd3ab0a16e35 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -239,18 +239,18 @@
   margin: 1px;
 
   &-finished {
-    background-color: lighten($green-light, 25%);
-    border-color: $green-light;
+    background-color: $green-400;
+    border-color: $green-500;
   }
 
   &-deploying {
-    background-color: lighten($green-light, 40%);
-    border-color: $green-light;
+    background-color: $green-400;
+    border-color: $green-500;
   }
 
   &-failed {
-    background-color: lighten($red-light, 20%);
-    border-color: $red-normal;
+    background-color: $red-400;
+    border-color: $red-500;
   }
 
   &-ready {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index ddc0e78c7b619a94832a1697a25a2a02badd51ac..c1a9bc4be28dbc84f3ec953a965476cf240d5ac8 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -520,12 +520,12 @@
 
     &.over_estimate {
       .meter-fill {
-        background: $red-light;
+        background: $red-500;
       }
 
       .time-remaining,
       .compare-value.spent {
-        color: $red-light;
+        color: $red-500;
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 199d628f19f56fd3fcf5d500b2d37fb4b784c597..b2f45625a2a462768ff947218e2da638cab81895 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -69,21 +69,17 @@ ul.related-merge-requests > li {
   height: 20px;
   border-radius: 3px;
   line-height: 18px;
-  border: 1px solid;
 
   &.merged {
-    border-color: darken($blue-normal, 10%);
-    background: $blue-normal;
+    background: $blue-500;
   }
 
   &.closed {
-    border-color: darken($red-normal, 10%);
-    background: $red-normal;
+    background: $red-500;
   }
 
   &.open {
-    border: 1px solid darken($green-normal, 10%);
-    background: $green-normal;
+    background: $green-500;
   }
 }
 
@@ -132,21 +128,6 @@ ul.related-merge-requests > li {
   padding-bottom: 37px;
 }
 
-.issues-export-modal {
-  .export-svg-container {
-    height: 56px;
-    padding: 10px 10px 0;
-  }
-
-  svg {
-    height: 100%;
-  }
-
-  .export-checkmark {
-    color: $green-light;
-  }
-}
-
 .issue-email-modal-btn {
   padding: 0;
   color: $gl-link-color;
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 71ed5b1361a0e9ec657e7fae39512ebb3f0c95f0..8249e02b64a59fc84c465dc150b43940b85d6c7d 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -85,11 +85,11 @@
       }
 
       .username .validation-success {
-        color: $green-normal;
+        color: $green-600;
       }
 
       .username .validation-error {
-        color: $red-normal;
+        color: $red-500;
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index f2d6da9dbe6df3fad25e3536ce3febd2a9a0460d..c7e9d13c2215193db72acb17784f42a770a595fb 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -158,7 +158,7 @@
   > p {
     float: left;
     margin-bottom: 10px;
-    color: $orange-normal;
+    color: $orange-600;
 
     @media (min-width: $screen-sm-min) {
       padding-left: 55px;
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index 5a9f199fb34ba4940db0056341b83f05409a5fb9..35cefd449f147e99ba4fd575fa2dd2bd73c0a20b 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -255,7 +255,7 @@ $colors: (
 
     &.saved {
       .editor {
-        border-top: solid 2px $border-green-extra-light;
+        border-top: solid 2px $green-200;
       }
     }
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 5094be6517ef4960040277ca25fbbfeb91a0ce9e..6630904ec92d4050705c63fdba948c60990b9d24 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -535,7 +535,7 @@
   }
 
   .fa-info-circle {
-    color: $orange-normal;
+    color: $orange-500;
     padding-right: 5px;
   }
 }
@@ -575,93 +575,3 @@
     }
   }
 }
-
-#merge-request-widget-app .loading {
-  padding-top: 5px;
-}
-
-#merge-request-widget-app .loading,
-.approvals-components {
-  border-top: 1px solid $well-inner-border;
-}
-
-.approvals-body {
-  @media (max-width: $screen-xs-max) {
-    text-align: center;
-  }
-
-  .approve-btn {
-    margin-top: 10px;
-  }
-}
-
-.approvals-footer {
-  display: flex;
-
-  // vertically centers all children
-  > span {
-    align-self: center;
-  }
-
-  .hide-asset {
-    img {
-      display: none;
-    }
-
-    svg {
-      margin-bottom: -7px; // makes up for border removed
-      border: none;
-    }
-  }
-
-  .approvers-prefix {
-    margin-right: 5px;
-  }
-
-  .unapprove-btn-wrap {
-    border-left: 1px solid $gray-darker;
-    padding-left: 5px;
-    margin-left: 10px;
-  }
-
-  .unapprove-btn {
-    border: none;
-    background: transparent;
-    cursor: pointer;
-
-    &:hover {
-      color: $gl-text-color-secondary;
-      text-decoration: none;
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  // styles for approver avatar checkmark
-  .approver-avatar {
-    position: relative;
-    display: inline-block;
-
-    svg.avatar {
-      position: absolute;
-      top: 12%;
-      right: 4%;
-      height: 45%;
-      width: 45%;
-    }
-  }
-}
-
-.link-to-member-avatar {
-  .disabled {
-    pointer-events: none;
-    cursor: default;
-  }
-
-  .avatar {
-    margin-bottom: -2px;
-    margin-right: 3px;
-  }
-}
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index 27c47d368187c855635d69afd2609f53d1eab39c..efbd9365fd9695aa5a607d0148191f7dd82601fb 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -63,7 +63,7 @@
   }
 
   .remaining-days {
-    color: $orange-light;
+    color: $orange-600;
   }
 
   .milestone-stats-and-buttons {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index e238f0865f6961be2b78b8280179003df8e76e24..a2129722633e26327b05f739386de77c46f1e0d8 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -462,17 +462,18 @@ ul.notes {
   background: $white-light;
   padding: 1px 5px;
   font-size: 12px;
-  color: $gl-link-color;
+  color: $blue-500;
   margin-left: -55px;
   position: absolute;
   z-index: 10;
   width: 23px;
   height: 23px;
-  border: 1px solid $border-color;
+  border: 1px solid $blue-500;
   transition: transform .1s ease-in-out;
 
   &:hover {
-    background: $gl-info;
+    background: $blue-500;
+    border-color: $blue-600;
     color: $white-light;
     transform: scale(1.15);
   }
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 5ad6c283abe12b4b5c317f451f2da04c8285e4f7..27c29483d62eaa3ab1ab512312d95b14f0576390 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -132,10 +132,6 @@
       padding: 10px 0;
     }
 
-    td.deploy-board-container {
-      padding: 0;
-    }
-
     .commit-link {
       padding: 9px 8px 10px 2px;
     }
@@ -671,51 +667,71 @@
 
   // Dropdown button animation in mini pipeline graph
   &.ci-status-icon-success {
-    border-color: $gl-success;
-    color: $gl-success;
+    border-color: $green-500;
+    color: $green-500;
 
     &:hover,
     &:focus,
     &:active {
-      background-color: rgba($gl-success, 0.1);
-      border-color: $gl-success;
+      background-color: $green-50;
+      border-color: $green-600;
+      color: $green-600;
+
+      svg {
+        fill: $green-600;
+      }
     }
   }
 
   &.ci-status-icon-failed {
-    border-color: $gl-danger;
-    color: $gl-danger;
+    border-color: $red-500;
+    color: $red-500;
 
     &:hover,
     &:focus,
     &:active {
-      background-color: rgba($gl-danger, 0.1);
-      border-color: $gl-danger;
+      background-color: $red-50;
+      border-color: $red-600;
+      color: $red-600;
+
+      svg {
+        fill: $red-600;
+      }
     }
   }
 
   &.ci-status-icon-pending,
   &.ci-status-icon-success_with_warnings {
-    border-color: $gl-warning;
-    color: $gl-warning;
+    border-color: $orange-500;
+    color: $orange-500;
 
     &:hover,
     &:focus,
     &:active {
-      background-color: rgba($gl-warning, 0.1);
-      border-color: $gl-warning;
+      background-color: $orange-50;
+      border-color: $orange-600;
+      color: $orange-600;
+
+      svg {
+        fill: $orange-600;
+      }
     }
   }
 
   &.ci-status-icon-running {
-    border-color: $blue-normal;
-    color: $blue-normal;
+    border-color: $blue-400;
+    color: $blue-400;
 
     &:hover,
     &:focus,
     &:active {
-      background-color: rgba($blue-normal, 0.1);
-      border-color: $blue-normal;
+      background-color: $blue-50;
+      border-color: $blue-600;
+      color: $blue-600;
+
+      svg {
+        fill: $blue-600;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 1a983d8c9efc9e40d329827fd62ce04c651217d8..703c5fc88696d4a7204777f97507382076e78433 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -74,7 +74,6 @@
   display: inline;
 
   a {
-    color: $blue-dark;
     text-decoration: none;
   }
 }
diff --git a/app/assets/stylesheets/pages/sherlock.scss b/app/assets/stylesheets/pages/sherlock.scss
index bed6470dbd31a54b7e3cb33952251af74e8b0d49..23a9c2ada803359cdb052828f9c9ce5bf0570c6c 100644
--- a/app/assets/stylesheets/pages/sherlock.scss
+++ b/app/assets/stylesheets/pages/sherlock.scss
@@ -28,6 +28,6 @@ table .sherlock-code {
 }
 
 .sherlock-line-samples-table .slow {
-  color: $red-light;
+  color: $red-500;
   font-weight: bold;
 }
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 6f31d4ed78977dba58a05528ac620aa289c6e98d..4a2842471434734b0ff6fb6b3ab053734195adc0 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -21,42 +21,41 @@
 
     &.ci-failed,
     &.ci-failed_with_warnings {
-      color: $gl-danger;
-      border-color: $gl-danger;
+      color: $red-500;
+      border-color: $red-500;
 
       &:not(span):hover {
-        background-color: rgba($gl-danger, .07);
+        background-color: $red-50;
+        color: $red-600;
+        border-color: $red-600;
+
+        svg {
+          fill: $red-600;
+        }
       }
 
       svg {
-        fill: $gl-danger;
+        fill: $red-500;
       }
     }
 
     &.ci-success,
     &.ci-success_with_warnings {
-      color: $gl-success;
-      border-color: $gl-success;
+      color: $green-600;
+      border-color: $green-500;
 
       &:not(span):hover {
-        background-color: rgba($gl-success, .07);
-      }
-
-      svg {
-        fill: $gl-success;
-      }
-    }
-
-    &.ci-info {
-      color: $gl-info;
-      border-color: $gl-info;
+        background-color: $green-50;
+        color: $green-700;
+        border-color: $green-600;
 
-      &:not(span):hover {
-        background-color: rgba($gl-info, .07);
+        svg {
+          fill: $green-600;
+        }
       }
 
       svg {
-        fill: $gl-info;
+        fill: $green-500;
       }
     }
 
@@ -75,28 +74,41 @@
     }
 
     &.ci-pending {
-      color: $gl-warning;
-      border-color: $gl-warning;
+      color: $orange-600;
+      border-color: $orange-500;
 
       &:not(span):hover {
-        background-color: rgba($gl-warning, .07);
+        background-color: $orange-50;
+        color: $orange-700;
+        border-color: $orange-600;
+
+        svg {
+          fill: $orange-600;
+        }
       }
 
       svg {
-        fill: $gl-warning;
+        fill: $orange-500;
       }
     }
 
+    &.ci-info,
     &.ci-running {
-      color: $blue-normal;
-      border-color: $blue-normal;
+      color: $blue-500;
+      border-color: $blue-500;
 
       &:not(span):hover {
-        background-color: rgba($blue-normal, .07);
+        background-color: $blue-50;
+        color: $blue-600;
+        border-color: $blue-600;
+
+        svg {
+          fill: $blue-600;
+        }
       }
 
       svg {
-        fill: $blue-normal;
+        fill: $blue-500;
       }
     }
 
diff --git a/changelogs/unreleased-ee/gitlab-ce-28614-harmonious-color-palette.yml b/changelogs/unreleased-ee/gitlab-ce-28614-harmonious-color-palette.yml
new file mode 100644
index 0000000000000000000000000000000000000000..6110555910c4f2a5ff734884d8cb8fd5762e4996
--- /dev/null
+++ b/changelogs/unreleased-ee/gitlab-ce-28614-harmonious-color-palette.yml
@@ -0,0 +1,4 @@
+---
+title: Update color palette to a more harmonious and consistent one.
+merge_request: 1500
+author: