diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 0f2a818d582b65105d2c54b2f4276a4cd209895f..c4d9af180946da375beac1d3409ea18dce0ac8d6 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -88,14 +88,6 @@ $white-normal: #f0f0f0 !default;
 $white-dark: #eaeaea !default;
 $white-transparent: rgba($white, 0.8) !default;
 
-$gray-lightest: #fdfdfd !default;
-$gray-light: #fafafa !default;
-$gray-lighter: #f9f9f9 !default;
-$gray-normal: #f5f5f5 !default;
-$gray-dark: darken($gray-light, $darken-dark-factor) !default;
-$gray-darker: #eee !default;
-$gray-darkest: #c4c4c4 !default;
-
 $purple: #6d49cb !default;
 $purple-light: #ede8fb !default;
 
@@ -103,11 +95,6 @@ $black: #000 !default;
 $black-transparent: rgba(0, 0, 0, 0.3) !default;
 $almost-black: #242424 !default;
 
-$t-gray-a-02: rgba($black, 0.02) !default;
-$t-gray-a-04: rgba($black, 0.04) !default;
-$t-gray-a-06: rgba($black, 0.06) !default;
-$t-gray-a-08: rgba($black, 0.08) !default;
-
 $green-50: #ecf4ee !default;
 $green-100: #c3e6cd !default;
 $green-200: #91d4a8 !default;
@@ -168,18 +155,33 @@ $purple-800: #453894 !default;
 $purple-900: #2f2a6b !default;
 $purple-950: #232150 !default;
 
-$gray-10: #f5f5f5 !default;
-$gray-50: #f0f0f0 !default;
-$gray-100: #dbdbdb !default;
-$gray-200: #bfbfbf !default;
-$gray-300: #999 !default;
-$gray-400: #868686 !default;
-$gray-500: #666 !default;
-$gray-600: #5e5e5e !default;
-$gray-700: #525252 !default;
-$gray-800: #404040 !default;
-$gray-900: #303030 !default;
-$gray-950: #1f1f1f !default;
+$gray-10: #fbfafd !default;
+$gray-50: #ececef !default;
+$gray-100: #dcdcde !default;
+$gray-200: #bfbfc3 !default;
+$gray-300: #a4a3a8 !default;
+$gray-400: #89888d !default;
+$gray-500: #737278 !default;
+$gray-600: #626168 !default;
+$gray-700: #535158 !default;
+$gray-800: #434248 !default;
+$gray-900: #333238 !default;
+$gray-950: #1f1e24 !default;
+
+$gray-lightest: lighten($gray-10, 1) !default;
+$gray-light: $gray-10 !default;
+$gray-lighter: lighten($gray-50, 4) !default;
+$gray-normal: lighten($gray-50, 2) !default;
+$gray-dark: darken($gray-light, $darken-dark-factor) !default;
+$gray-darker: $gray-50 !default;
+$gray-darkest: $gray-200 !default;
+
+$t-gray-a-02: rgba($gray-950, 0.02) !default;
+$t-gray-a-04: rgba($gray-950, 0.04) !default;
+$t-gray-a-06: rgba($gray-950, 0.06) !default;
+$t-gray-a-08: rgba($gray-950, 0.08) !default;
+$t-gray-a-16: rgba($gray-950, 0.16) !default;
+$t-gray-a-24: rgba($gray-950, 0.24) !default;
 
 $greens: (
   '50': $green-50,
@@ -370,7 +372,7 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor);
 /*
  * UI elements
  */
-$contextual-sidebar-bg-color: #f5f5f5;
+$contextual-sidebar-bg-color: $gray-10;
 $contextual-sidebar-border-color: #e9e9e9;
 $border-color: $gray-100;
 $shadow-color: $t-gray-a-08;
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index 8e8cabbe511ac8b7acdc254b279368902d560ab5..cdbefefd54276517406c672ebf063ac1df1576c7 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -1,15 +1,15 @@
-$gray-10: #1f1f1f;
-$gray-50: #303030;
-$gray-100: #404040;
-$gray-200: #525252;
-$gray-300: #5e5e5e;
-$gray-400: #868686;
-$gray-500: #999;
-$gray-600: #bfbfbf;
-$gray-700: #dbdbdb;
-$gray-800: #f0f0f0;
-$gray-900: #fafafa;
-$gray-950: #fff;
+$gray-10: #1f1e24;
+$gray-50: #333238;
+$gray-100: #434248;
+$gray-200: #535158;
+$gray-300: #626168;
+$gray-400: #737278;
+$gray-500: #89888d;
+$gray-600: #a4a3a8;
+$gray-700: #bfbfc3;
+$gray-800: #dcdcde;
+$gray-900: #ececef;
+$gray-950: #fbfafd;
 
 $green-50: #0a4020;
 $green-100: #0d532a;
diff --git a/ee/spec/frontend/analytics/cycle_analytics/mock_data.js b/ee/spec/frontend/analytics/cycle_analytics/mock_data.js
index a2044cfbaddd15d28aee2de31228d5a3c80cf850..61dce4f03709c43a280c27abfc23c8fd52831723 100644
--- a/ee/spec/frontend/analytics/cycle_analytics/mock_data.js
+++ b/ee/spec/frontend/analytics/cycle_analytics/mock_data.js
@@ -346,10 +346,10 @@ export const durationDataNullSeries = {
     ['2019-01-02', null],
   ],
   itemStyle: {
-    color: '#999',
+    color: '#a4a3a8',
   },
   lineStyle: {
-    color: '#999',
+    color: '#a4a3a8',
     type: 'dashed',
   },
   name: `${DURATION_CHART_Y_AXIS_TITLE} no data series`,
diff --git a/ee/spec/frontend/dora/components/__snapshots__/util_spec.js.snap b/ee/spec/frontend/dora/components/__snapshots__/util_spec.js.snap
index a575dd7e6fd98a2cdfd4a4f1b7e9de14e6e44ac7..d1e1ea7e61c18cfd1d87caaad9949c1df41585a6 100644
--- a/ee/spec/frontend/dora/components/__snapshots__/util_spec.js.snap
+++ b/ee/spec/frontend/dora/components/__snapshots__/util_spec.js.snap
@@ -37,10 +37,10 @@ Array [
       ],
     ],
     "itemStyle": Object {
-      "color": "#999",
+      "color": "#a4a3a8",
     },
     "lineStyle": Object {
-      "color": "#999",
+      "color": "#a4a3a8",
       "type": "dashed",
     },
     "name": "No data available",
diff --git a/ee/spec/frontend/insights/mock_data.js b/ee/spec/frontend/insights/mock_data.js
index 92605974772c49df4d50b329b89b8da56d6b4f51..33de00071ec045e4e97f193c714bb465d0dc0400 100644
--- a/ee/spec/frontend/insights/mock_data.js
+++ b/ee/spec/frontend/insights/mock_data.js
@@ -88,10 +88,10 @@ export const doraSeries = [
       ['February', null],
     ],
     itemStyle: {
-      color: '#999',
+      color: '#a4a3a8',
     },
     lineStyle: {
-      color: '#999',
+      color: '#a4a3a8',
       type: 'dashed',
     },
     name: 'No data available',