Merge branch '28614-harmonious-color-palette' into 'master'

Change full colors to a more harmonious palette

Closes #28614

See merge request !10154

23 files changed, 249 insertions, 221 deletions

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index cda46223492..50849e95541 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 186bb9ac616..da5b754aec7 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -195,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 2890fcd088b..432024779fd 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 6660a022260..fa02598760f 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 db8d231a82a..87667f39ab8 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 46632f15f35..1537b0744cc 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 4d5a2ca52f0..20c7bc93c28 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 7adbb0a4188..15dc0aa6a52 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 {
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
index 0fc89d5976a..c9f345d24be 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 82c9c76c4c0..97794a47df8 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: #eb4d5c;
-$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;
@@ -191,10 +193,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;
@@ -209,30 +211,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;
@@ -272,7 +274,7 @@ $dropdown-toggle-active-border-color: darken($border-color, 14%);
 /*
 * Filtered Search
 */
-$dropdown-hover-color: #3b86ff;
+$dropdown-hover-color: $blue-400;
 
 /*
 * Buttons
@@ -295,10 +297,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;
 
 /*
@@ -360,18 +362,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
@@ -391,7 +393,7 @@ $common-green: $gl-text-green;
 /*
 * Editor
 */
-$editor-cancel-color: #b94a48;
+$editor-cancel-color: $red-600;
 
 /*
 * Events
@@ -415,10 +417,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
@@ -452,14 +454,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
@@ -473,33 +475,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;
 
@@ -513,7 +515,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 f9ee33019cd..575d32b1a23 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -487,9 +487,9 @@
   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%;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index ddc0e78c7b6..c1a9bc4be28 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 b27741a928d..b2f45625a2a 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;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 71ed5b1361a..8249e02b64a 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/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index 5a9f199fb34..35cefd449f1 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 7c3172421c1..6630904ec92 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;
   }
 }
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index 27c47d36818..efbd9365fd9 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 e238f0865f6..a2129722633 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 a20db153d09..a4fe652b52f 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -673,51 +673,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 1a983d8c9ef..703c5fc8869 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 bed6470dbd3..23a9c2ada80 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 6f31d4ed789..4a284247143 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/28614-harmonious-color-palette.yml b/changelogs/unreleased/28614-harmonious-color-palette.yml
new file mode 100644
index 00000000000..b436e7129a4
--- /dev/null
+++ b/changelogs/unreleased/28614-harmonious-color-palette.yml
@@ -0,0 +1,4 @@
+---
+title: Update color palette to a more harmonious and consistent one.
+merge_request: 10154
+author: