Add latest changes from gitlab-org/gitlab@15-6-stable-eev15.6.0-rc42

34 files changed, 797 insertions, 709 deletions

diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
index 21d9db26382..6878e9a10d7 100644
--- a/app/assets/stylesheets/_page_specific_files.scss
+++ b/app/assets/stylesheets/_page_specific_files.scss
@@ -1,4 +1,3 @@
-@import './pages/branches';
 @import './pages/colors';
 @import './pages/commits';
 @import './pages/detail_page';
@@ -9,11 +8,11 @@
 @import './pages/issues';
 @import './pages/labels';
 @import './pages/login';
+@import './pages/ml_experiment_tracking';
 @import './pages/merge_requests';
 @import './pages/monitor';
 @import './pages/note_form';
 @import './pages/notes';
-@import './pages/notifications';
 @import './pages/pipelines';
 @import './pages/profile';
 @import './pages/projects';
diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss
index e69d7b4462d..27e9a041145 100644
--- a/app/assets/stylesheets/framework/calendar.scss
+++ b/app/assets/stylesheets/framework/calendar.scss
@@ -1,6 +1,4 @@
 .user-contrib-cell {
-  stroke: $t-gray-a-08;
-
   &:hover {
     cursor: pointer;
     stroke: $black;
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index d561a7d9450..c5a34ca4b31 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -46,6 +46,10 @@
       }
     }
 
+    &.dropdown-reduced-height {
+      max-height: $dropdown-max-height;
+    }
+
     @include media-breakpoint-down(xs) {
       width: 100%;
     }
diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss
index a31910e3090..68a3493670d 100644
--- a/app/assets/stylesheets/framework/emojis.scss
+++ b/app/assets/stylesheets/framework/emojis.scss
@@ -8,6 +8,7 @@ gl-emoji {
 }
 
 .user-status-emoji {
+  margin-left: $gl-padding-4;
   margin-right: $gl-padding-4;
 
   gl-emoji {
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 07516275e58..b28302f29ef 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -290,6 +290,10 @@
         padding: $gl-padding;
       }
     }
+
+    .content-visibility-auto {
+      content-visibility: auto;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 02b76b89482..7a92adf7b7b 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -207,7 +207,7 @@ body {
 }
 
 @include media-breakpoint-up(sm) {
-  .logged-out-marketing-header-candidate {
+  .logged-out-marketing-header {
     --header-height: 72px;
   }
 }
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 900cf9fa4db..ea741af918c 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -1,15 +1,3 @@
-.ajax-users-select {
-  width: 400px;
-
-  &.input-large {
-    width: 210px;
-  }
-
-  &.input-clamp {
-    max-width: 100%;
-  }
-}
-
 .group-result {
   .group-image {
     float: left;
@@ -49,7 +37,3 @@
     }
   }
 }
-
-.ajax-users-dropdown {
-  min-width: 250px !important;
-}
diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss
index 39786aa0138..14971e3b2ee 100644
--- a/app/assets/stylesheets/framework/snippets.scss
+++ b/app/assets/stylesheets/framework/snippets.scss
@@ -24,6 +24,10 @@
   + .snippet-file-content {
     @include gl-mt-5;
   }
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 }
 
 .snippet-header {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 9cfc5a0201e..99284ea0a64 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,
@@ -346,6 +348,20 @@ $theme-light-red-500: #c24b38;
 $theme-light-red-600: #b03927;
 $theme-light-red-700: #a62e21;
 
+// Data visualization color palette
+
+$data-viz-blue-50: #e9ebff;
+$data-viz-blue-100: #d4dcfa;
+$data-viz-blue-200: #b7c6ff;
+$data-viz-blue-300: #97acff;
+$data-viz-blue-400: #748eff;
+$data-viz-blue-500: #5772ff;
+$data-viz-blue-600: #445cf2;
+$data-viz-blue-700: #3547de;
+$data-viz-blue-800: #232fcf;
+$data-viz-blue-900: #1e23a8;
+$data-viz-blue-950: #11118a;
+
 $border-white-light: darken($white, $darken-border-factor) !default;
 $border-white-normal: darken($white-normal, $darken-border-factor) !default;
 
@@ -356,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;
@@ -660,18 +676,7 @@ $ci-skipped-color: #888;
 */
 $issue-boards-font-size: 14px;
 $issue-boards-card-shadow: rgba(0, 0, 0, 0.1);
-/*
- The following heights are used in boards.scss and are used for calculation of the board height.
- They probably should be derived in a smarter way.
-*/
 $issue-boards-filter-height: 68px;
-$issue-boards-filter-height-md: 110px;
-$issue-boards-filter-height-sm: 299px;
-$issue-boards-breadcrumbs-height-xs: 63px;
-$issue-board-list-difference-xs: calc(#{$header-height} + #{$issue-boards-breadcrumbs-height-xs});
-$issue-board-list-difference-sm: calc(#{$header-height} + #{$breadcrumb-min-height});
-$issue-board-list-difference-md: calc(#{$issue-board-list-difference-sm} + #{$issue-boards-filter-height-md});
-$issue-board-list-difference-lg: calc(#{$issue-board-list-difference-sm} + #{$issue-boards-filter-height});
 /*
  The following heights are used in environment_logs.scss and are used for calculation of the log viewer height.
 */
@@ -710,11 +715,11 @@ $job-arrow-margin: 55px;
  */
 // See https://gitlab.com/gitlab-org/gitlab/-/issues/332150 to align with Pajamas Design System
 $calendar-activity-colors: (
-  #f5f5f5,
-  #d4dcfa,
-  #748eff,
-  #3547de,
-  #11118a,
+  $gray-50,
+  $data-viz-blue-100,
+  $data-viz-blue-400,
+  $data-viz-blue-700,
+  $data-viz-blue-950,
 ) !default;
 
 /*
@@ -756,12 +761,6 @@ $document-index-color: #888;
 $help-shortcut-header-color: #333;
 
 /*
-* Issues
-*/
-$issues-today-bg: #f3fff2 !default;
-$issues-today-border: #e1e8d5 !default;
-
-/*
 * Label
 */
 $label-font-size: 12px;
diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss
index 7fb2bf9a875..3438a73eff6 100644
--- a/app/assets/stylesheets/highlight/themes/dark.scss
+++ b/app/assets/stylesheets/highlight/themes/dark.scss
@@ -125,6 +125,14 @@ $dark-il: #de935f;
 }
 
 .code.dark {
+  // Highlight.js theme overrides (https://gitlab.com/gitlab-org/gitlab/-/issues/365167)
+  // We should be able to remove the overrides once the upstream issue is fixed (https://github.com/sourcegraph/sourcegraph/issues/23251)
+  @include hljs-override('title\\.class', $dark-nc);
+  @include hljs-override('title\\.class\\.inherited', $dark-no);
+  @include hljs-override('variable\\.constant', $dark-no);
+  @include hljs-override('title\\.function', $dark-nf);
+  
+
   // Line numbers
   .file-line-num {
     @include line-link($white, 'link');
diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss
index 66cada9181c..75dd342393d 100644
--- a/app/assets/stylesheets/highlight/themes/monokai.scss
+++ b/app/assets/stylesheets/highlight/themes/monokai.scss
@@ -104,7 +104,7 @@ $monokai-gh: #75715e;
   @include hljs-override('selector-tag', $monokai-nt);
   @include hljs-override('keyword', $monokai-k);
   @include hljs-override('variable', $monokai-nv);
-  @include hljs-override('variable.language_', $monokai-k);
+  @include hljs-override('variable\\.language_', $monokai-k);
   @include hljs-override('title', $monokai-nf);
   @include hljs-override('name', $monokai-k);
   @include hljs-override('tag', $monokai-nt);
@@ -116,7 +116,13 @@ $monokai-gh: #75715e;
   @include hljs-override('bullet', $monokai-n);
   @include hljs-override('subst', $monokai-p);
   @include hljs-override('symbol', $monokai-ss);
-  @include hljs-override('title.class_.inherited__', $monokai-no);
+  @include hljs-override('title\\.class_\\.inherited__', $monokai-no);
+  @include hljs-override('title\\.class\\.inherited', $monokai-no);
+  @include hljs-override('title\\.class', $monokai-nc);
+  @include hljs-override('title\\.function', $monokai-nf);
+  @include hljs-override('variable\\.constant', $monokai-no);
+  @include hljs-override('variable\\.language', $monokai-nb);
+  @include hljs-override('params', $monokai-nb);
 
   // Line numbers
   .file-line-num {
diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
index a1bba8720a2..c0b2fb90aa0 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
@@ -107,7 +107,9 @@ $solarized-dark-il: #2aa198;
     @include hljs-override('selector-tag', $solarized-dark-nt);
     @include hljs-override('keyword', $solarized-dark-k);
     @include hljs-override('variable', $solarized-dark-nv);
-    @include hljs-override('variable.language_', $solarized-dark-k);
+    @include hljs-override('variable\\.language_', $solarized-dark-k);
+    @include hljs-override('variable\\.language', $solarized-dark-k);
+    @include hljs-override('variable\\.constant', $solarized-dark-no);
     @include hljs-override('title', $solarized-dark-nf);
     @include hljs-override('name', $solarized-dark-k);
     @include hljs-override('tag', $solarized-dark-nt);
@@ -119,7 +121,11 @@ $solarized-dark-il: #2aa198;
     @include hljs-override('bullet', $solarized-dark-n);
     @include hljs-override('subst', $solarized-dark-p);
     @include hljs-override('symbol', $solarized-dark-ni);
-    @include hljs-override('title.class_.inherited__', $solarized-dark-no);
+    @include hljs-override('title\\.class_\\.inherited__', $solarized-dark-no);
+    @include hljs-override('title\\.class', $solarized-dark-nc);
+    @include hljs-override('title\\.class\\.inherited', $solarized-dark-no);
+    @include hljs-override('title\\.function', $solarized-dark-nf);
+    @include hljs-override('params', $solarized-dark-nb);
 
   // Line numbers
   .file-line-num {
diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss
index 33945f7cda9..921b36dd610 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-light.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss
@@ -106,7 +106,17 @@ $solarized-light-il: #2aa198;
 }
 
 .code.solarized-light {
-  @include hljs-override('title.class_.inherited__', $solarized-light-no);
+  // Highlight.js theme overrides (https://gitlab.com/gitlab-org/gitlab/-/issues/365167)
+  // We should be able to remove the overrides once the upstream issue is fixed (https://github.com/sourcegraph/sourcegraph/issues/23251)
+  @include hljs-override('keyword', $solarized-light-k);
+  @include hljs-override('title\\.class_\\.inherited__', $solarized-light-no);
+  @include hljs-override('title\\.class\\.inherited', $solarized-light-no);
+  @include hljs-override('title\\.class', $solarized-light-nc);
+  @include hljs-override('title\\.function', $solarized-light-nf);
+  @include hljs-override('variable\\.constant', $solarized-light-no);
+  @include hljs-override('variable\\.language', $solarized-light-nb);
+  @include hljs-override('params', $solarized-light-nb);
+  
   // Line numbers
   .file-line-num {
     @include line-link($black, 'link');
diff --git a/app/assets/stylesheets/highlight/themes/white.scss b/app/assets/stylesheets/highlight/themes/white.scss
index b0f6595feff..f6cce25671f 100644
--- a/app/assets/stylesheets/highlight/themes/white.scss
+++ b/app/assets/stylesheets/highlight/themes/white.scss
@@ -2,9 +2,18 @@
   @import '../white_base';
 
   @include conflict-colors('white');
+
+  // Highlight.js theme overrides (https://gitlab.com/gitlab-org/gitlab/-/issues/365167)
+  // We should be able to remove the overrides once the upstream issue is fixed (https://github.com/sourcegraph/sourcegraph/issues/23251)
   @include hljs-override('variable', $white-nv);
   @include hljs-override('symbol', $white-ss);
-  @include hljs-override('title.class_.inherited__', $white-no);
+  @include hljs-override('title\\.class_\\.inherited__', $white-no);
+  @include hljs-override('title\\.class\\.inherited', $white-no);
+  @include hljs-override('title\\.class', $white-nc);
+  @include hljs-override('variable\\.constant', $white-no);
+  @include hljs-override('variable\\.language', $white-nb);
+  @include hljs-override('title\\.function', $white-nf);
+  @include hljs-override('params', $white-nb);
 }
 
 :root {
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index d45bc865da5..0cc1fb40e4a 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -18,38 +18,9 @@
 
 .boards-list,
 .board-swimlanes {
-  height: calc(100vh - #{$issue-board-list-difference-xs});
   overflow-x: scroll;
   min-height: 200px;
   border-left: 8px solid var(--gray-10, $white);
-
-  @include media-breakpoint-only(sm) {
-    height: calc(100vh - #{$issue-board-list-difference-sm});
-  }
-
-  @include media-breakpoint-up(md) {
-    height: calc(100vh - #{$issue-board-list-difference-md});
-  }
-
-  @include media-breakpoint-up(lg) {
-    height: calc(100vh - #{$issue-board-list-difference-lg});
-  }
-
-  .with-performance-bar & {
-    height: calc(100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height});
-
-    @include media-breakpoint-only(sm) {
-      height: calc(100vh - #{$issue-board-list-difference-sm} - #{$performance-bar-height});
-    }
-
-    @include media-breakpoint-up(md) {
-      height: calc(100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height});
-    }
-
-    @include media-breakpoint-up(lg) {
-      height: calc(100vh - #{$issue-board-list-difference-lg} - #{$performance-bar-height});
-    }
-  }
 }
 
 .board {
diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/page_bundles/branches.scss
index 18158fab75f..2aa90529e22 100644
--- a/app/assets/stylesheets/pages/branches.scss
+++ b/app/assets/stylesheets/page_bundles/branches.scss
@@ -1,3 +1,5 @@
+@import 'mixins_and_variables_and_functions';
+
 .branch-info {
   flex: auto;
   min-width: 0;
diff --git a/app/assets/stylesheets/page_bundles/clusters.scss b/app/assets/stylesheets/page_bundles/clusters.scss
index a877ae72e31..4f29ff4b1ad 100644
--- a/app/assets/stylesheets/page_bundles/clusters.scss
+++ b/app/assets/stylesheets/page_bundles/clusters.scss
@@ -20,3 +20,7 @@
     min-height: 372px;
   }
 }
+
+.cluster-button-container:focus-within {
+  @include gl-focus;
+}
diff --git a/app/assets/stylesheets/page_bundles/dashboard.scss b/app/assets/stylesheets/page_bundles/dashboard.scss
new file mode 100644
index 00000000000..986a9cc530d
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/dashboard.scss
@@ -0,0 +1,5 @@
+@import 'mixins_and_variables_and_functions';
+
+.empty-state .svg-250 img {
+  max-width: $gl-spacing-scale-20;
+}
diff --git a/app/assets/stylesheets/page_bundles/design_management.scss b/app/assets/stylesheets/page_bundles/design_management.scss
new file mode 100644
index 00000000000..143682e1cd7
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/design_management.scss
@@ -0,0 +1,215 @@
+@import 'mixins_and_variables_and_functions';
+
+$design-pin-diameter: 28px;
+$design-pin-diameter-sm: 24px;
+$t-gray-a-16-design-pin: rgba($black, 0.16);
+
+.design-card-header {
+  background: transparent;
+}
+
+.design-checkbox {
+  position: absolute;
+  top: $gl-padding;
+  left: 30px;
+}
+
+.layout-page.design-detail-layout {
+  max-height: 100vh;
+}
+
+.design-detail {
+  background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
+
+  .with-performance-bar & {
+    top: 35px;
+  }
+
+  .comment-indicator {
+    border-radius: 50%;
+  }
+
+  .comment-indicator,
+  .frame .design-note-pin {
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
+
+.design-list-item {
+  height: 280px;
+  text-decoration: none;
+
+  .icon-version-status {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+  }
+
+  .card-body {
+    height: 230px;
+  }
+}
+
+// This is temporary class to be removed after feature flag removal: https://gitlab.com/gitlab-org/gitlab/-/issues/223197
+.design-list-item-new {
+  height: 210px;
+}
+
+.design-note-pin {
+  display: flex;
+  height: $design-pin-diameter;
+  width: $design-pin-diameter;
+  box-sizing: content-box;
+  background-color: var(--purple-500, $purple-500);
+  color: var(--white, $white);
+  font-weight: $gl-font-weight-bold;
+  border-radius: 50%;
+  z-index: 1;
+  padding: 0;
+  border: 0;
+
+  &.draft {
+    background-color: var(--orange-500, $orange-500);
+  }
+
+  &.resolved {
+    background-color: var(--gray-500, $gray-500);
+  }
+
+  &.on-image {
+    box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24;
+    border: var(--white, $white) 2px solid;
+    will-change: transform, box-shadow, opacity;
+    // NOTE: verbose transition property required for Safari
+    transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear;
+    transform-origin: 0 0;
+    transform: translate(-50%, -50%);
+
+    &:hover {
+      transform: scale(1.2) translate(-50%, -50%);
+    }
+
+    &:active {
+      box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin;
+    }
+
+    &.inactive {
+      @include gl-opacity-5;
+
+      &:hover {
+        @include gl-opacity-10;
+      }
+    }
+  }
+
+  &.small {
+    position: absolute;
+    border: 1px solid var(--white, $white);
+    height: $design-pin-diameter-sm;
+    width: $design-pin-diameter-sm;
+  }
+
+  &.user-avatar {
+    top: 25px;
+    right: 8px;
+  }
+}
+
+.design-scaler-wrapper {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.image-notes {
+  overflow-y: scroll;
+  padding: $gl-padding;
+  padding-top: 50px;
+  background-color: var(--white, $white);
+  flex-shrink: 0;
+  min-width: 400px;
+  flex-basis: 28%;
+
+  .link-inherit-color {
+    &:hover,
+    &:active,
+    &:focus {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+
+  .toggle-comments {
+    line-height: 20px;
+    border-top: 1px solid var(--border-color, $border-color);
+
+    &.expanded {
+      border-bottom: 1px solid var(--border-color, $border-color);
+    }
+
+    .toggle-comments-button:focus {
+      text-decoration: none;
+      color: var(--blue-600, $blue-600);
+    }
+  }
+
+  .design-note-pin {
+    margin-left: $gl-padding;
+  }
+
+  .design-discussion {
+    margin: $gl-padding 0;
+
+    &::before {
+      content: '';
+      border-left: 1px solid var(--gray-100, $gray-100);
+      position: absolute;
+      left: 28px;
+      top: -17px;
+      height: 17px;
+    }
+
+    .design-note {
+      padding: $gl-padding;
+      list-style: none;
+      transition: background $gl-transition-duration-medium $general-hover-transition-curve;
+      border-top-left-radius: $border-radius-default; // same border radius used by .bordered-box
+      border-top-right-radius: $border-radius-default;
+
+      a {
+        color: inherit;
+      }
+
+      .note-text a {
+        color: var(--blue-600, $blue-600);
+      }
+    }
+
+    .reply-wrapper {
+      padding: $gl-padding;
+    }
+  }
+
+  .reply-wrapper {
+    border-top: 1px solid var(--border-color, $border-color);
+  }
+
+  .new-discussion-disclaimer {
+    line-height: 20px;
+  }
+}
+
+@media (max-width: map-get($grid-breakpoints, lg)) {
+  .design-detail {
+    overflow-y: scroll;
+  }
+
+  .image-notes {
+    overflow-y: auto;
+    min-width: 100%;
+    flex-grow: 1;
+    flex-basis: auto;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 3951f72112f..ec75c53d026 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -568,6 +568,11 @@ $ide-commit-header-height: 48px;
       text-decoration: line-through;
     }
   }
+
+  .gl-form-radio,
+  .gl-form-checkbox {
+    color: var(--ide-text-color, $gl-text-color);
+  }
 }
 
 .ide-sidebar-link {
diff --git a/app/assets/stylesheets/page_bundles/issues_show.scss b/app/assets/stylesheets/page_bundles/issues_show.scss
index bbdcf1ea0c6..26d694f7421 100644
--- a/app/assets/stylesheets/page_bundles/issues_show.scss
+++ b/app/assets/stylesheets/page_bundles/issues_show.scss
@@ -1,9 +1,5 @@
 @import 'mixins_and_variables_and_functions';
 
-$design-pin-diameter: 28px;
-$design-pin-diameter-sm: 24px;
-$t-gray-a-16-design-pin: rgba($black, 0.16);
-
 .description {
   li {
     position: relative;
@@ -27,216 +23,6 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
   }
 }
 
-.design-card-header {
-  background: transparent;
-}
-
-.design-checkbox {
-  position: absolute;
-  top: $gl-padding;
-  left: 30px;
-}
-
-.layout-page.design-detail-layout {
-  max-height: 100vh;
-}
-
-.design-detail {
-  background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
-
-  .with-performance-bar & {
-    top: 35px;
-  }
-
-  .comment-indicator {
-    border-radius: 50%;
-  }
-
-  .comment-indicator,
-  .frame .design-note-pin {
-    &:active {
-      cursor: grabbing;
-    }
-  }
-}
-
-.design-list-item {
-  height: 280px;
-  text-decoration: none;
-
-  .icon-version-status {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-  }
-
-  .card-body {
-    height: 230px;
-  }
-}
-
-// This is temporary class to be removed after feature flag removal: https://gitlab.com/gitlab-org/gitlab/-/issues/223197
-.design-list-item-new {
-  height: 210px;
-}
-
-.design-note-pin {
-  display: flex;
-  height: $design-pin-diameter;
-  width: $design-pin-diameter;
-  box-sizing: content-box;
-  background-color: var(--purple-500, $purple-500);
-  color: var(--white, $white);
-  font-weight: $gl-font-weight-bold;
-  border-radius: 50%;
-  z-index: 1;
-  padding: 0;
-  border: 0;
-
-  &.draft {
-    background-color: var(--orange-500, $orange-500);
-  }
-
-  &.resolved {
-    background-color: var(--gray-500, $gray-500);
-  }
-
-  &.on-image {
-    box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24;
-    border: var(--white, $white) 2px solid;
-    will-change: transform, box-shadow, opacity;
-    // NOTE: verbose transition property required for Safari
-    transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear;
-    transform-origin: 0 0;
-    transform: translate(-50%, -50%);
-
-    &:hover {
-      transform: scale(1.2) translate(-50%, -50%);
-    }
-
-    &:active {
-      box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin;
-    }
-
-    &.inactive {
-      @include gl-opacity-5;
-
-      &:hover {
-        @include gl-opacity-10;
-      }
-    }
-  }
-
-  &.small {
-    position: absolute;
-    border: 1px solid var(--white, $white);
-    height: $design-pin-diameter-sm;
-    width: $design-pin-diameter-sm;
-  }
-
-  &.user-avatar {
-    top: 25px;
-    right: 8px;
-  }
-}
-
-.design-scaler-wrapper {
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.image-notes {
-  overflow-y: scroll;
-  padding: $gl-padding;
-  padding-top: 50px;
-  background-color: var(--white, $white);
-  flex-shrink: 0;
-  min-width: 400px;
-  flex-basis: 28%;
-
-  .link-inherit-color {
-    &:hover,
-    &:active,
-    &:focus {
-      color: inherit;
-      text-decoration: none;
-    }
-  }
-
-  .toggle-comments {
-    line-height: 20px;
-    border-top: 1px solid var(--border-color, $border-color);
-
-    &.expanded {
-      border-bottom: 1px solid var(--border-color, $border-color);
-    }
-
-    .toggle-comments-button:focus {
-      text-decoration: none;
-      color: var(--blue-600, $blue-600);
-    }
-  }
-
-  .design-note-pin {
-    margin-left: $gl-padding;
-  }
-
-  .design-discussion {
-    margin: $gl-padding 0;
-
-    &::before {
-      content: '';
-      border-left: 1px solid var(--gray-100, $gray-100);
-      position: absolute;
-      left: 28px;
-      top: -17px;
-      height: 17px;
-    }
-
-    .design-note {
-      padding: $gl-padding;
-      list-style: none;
-      transition: background $gl-transition-duration-medium $general-hover-transition-curve;
-      border-top-left-radius: $border-radius-default; // same border radius used by .bordered-box
-      border-top-right-radius: $border-radius-default;
-
-      a {
-        color: inherit;
-      }
-
-      .note-text a {
-        color: var(--blue-600, $blue-600);
-      }
-    }
-
-    .reply-wrapper {
-      padding: $gl-padding;
-    }
-  }
-
-  .reply-wrapper {
-    border-top: 1px solid var(--border-color, $border-color);
-  }
-
-  .new-discussion-disclaimer {
-    line-height: 20px;
-  }
-}
-
-@media (max-width: map-get($grid-breakpoints, lg)) {
-  .design-detail {
-    overflow-y: scroll;
-  }
-
-  .image-notes {
-    overflow-y: auto;
-    min-width: 100%;
-    flex-grow: 1;
-    flex-basis: auto;
-  }
-}
-
 .is-ghost {
   opacity: 0.3;
   pointer-events: none;
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index b2fbce7cb4b..771428b49e0 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -269,7 +269,7 @@ $tabs-holder-z-index: 250;
 
   position: -webkit-sticky;
   position: sticky;
-  top: var(--top-pos);
+  top: calc(var(--top-pos) + var(--performance-bar-height, 0px));
   max-height: calc(100vh - var(--top-pos) - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px));
 
   .drag-handle {
@@ -391,6 +391,10 @@ $tabs-holder-z-index: 250;
     text-overflow: ellipsis;
     min-width: 100px;
 
+    display: grid;
+    grid-template-columns: max-content minmax(0, max-content) max-content;
+    grid-gap: $gl-spacing-scale-2;
+
     @include media-breakpoint-up(xs) {
       min-width: 0;
       max-width: 100%;
@@ -404,6 +408,7 @@ $tabs-holder-z-index: 250;
 
 .deploy-heading,
 .merge-train-position-indicator {
+  padding: $gl-padding-8;
   @include media-breakpoint-up(md) {
     padding: $gl-padding-8 $gl-padding;
   }
@@ -476,6 +481,19 @@ $tabs-holder-z-index: 250;
   border-radius: $border-radius-default;
   background: var(--white, $white);
 
+  > .mr-widget-section {
+    > :first-child {
+      border-top-left-radius: $border-radius-default - 1px;
+      border-top-right-radius: $border-radius-default - 1px;
+    }
+
+    > :last-child,
+    .deploy-heading:last-child {
+      border-bottom-left-radius: $border-radius-default - 1px;
+      border-bottom-right-radius: $border-radius-default - 1px;
+    }
+  }
+
   > .mr-widget-border-top:first-of-type {
     border-top: 0;
   }
@@ -637,7 +655,6 @@ $tabs-holder-z-index: 250;
     word-break: break-all;
   }
 
-  .deploy-link,
   .label-branch {
     &.label-truncate {
       // NOTE: This selector targets its children because some of the HTML comes from
@@ -808,6 +825,13 @@ $tabs-holder-z-index: 250;
 
 .mr-widget-border-top {
   border-top: 1px solid var(--border-color, $border-color);
+
+  &:last-child {
+    .report-block-container {
+      border-bottom-left-radius: $border-radius-default - 1px;
+      border-bottom-right-radius: $border-radius-default - 1px;
+    }
+  }
 }
 
 .mr-widget-extension {
@@ -875,9 +899,12 @@ $tabs-holder-z-index: 250;
 }
 
 .mr-widget-workflow {
-  margin-top: $gl-padding;
   position: relative;
 
+  &:not(:first-child) {
+    margin-top: $gl-padding;
+  }
+
   &:not(:last-child)::before {
     content: '';
     border-left: 2px solid var(--gray-10, $gray-10);
@@ -1078,6 +1105,31 @@ $tabs-holder-z-index: 250;
   border-top: 0;
 }
 
+.mr-widget-status-icon-level-1::before {
+  @include gl-content-empty;
+  @include gl-absolute;
+  @include gl-left-0;
+  @include gl-top-0;
+  @include gl-bottom-0;
+  @include gl-right-0;
+  @include gl-opacity-3;
+  @include gl-rounded-full;
+  @include gl-border-solid;
+  @include gl-border-4;
+}
+
+.mr-widget-status-icon-level-1::after {
+  @include gl-content-empty;
+  @include gl-absolute;
+  @include gl-rounded-full;
+  @include gl-border-solid;
+  @include gl-border-4;
+  @include gl-left-2;
+  @include gl-right-2;
+  @include gl-top-2;
+  @include gl-bottom-2;
+}
+
 .memory-graph-container {
   background: var(--white, $white);
   border: 1px solid var(--gray-100, $gray-100);
@@ -1154,3 +1206,19 @@ $tabs-holder-z-index: 250;
     margin-bottom: 0;
   }
 }
+
+.commits ol:not(:last-of-type) {
+  margin-bottom: 0;
+}
+
+.mr-section-container {
+  .state-container-action-buttons {
+    @include media-breakpoint-up(md) {
+      flex-direction: row-reverse;
+
+      .btn {
+        margin-left: auto;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/notifications.scss b/app/assets/stylesheets/page_bundles/notifications.scss
index 2fd2757cf08..88437954f4c 100644
--- a/app/assets/stylesheets/pages/notifications.scss
+++ b/app/assets/stylesheets/page_bundles/notifications.scss
@@ -1,3 +1,5 @@
+@import 'mixins_and_variables_and_functions';
+
 .notification-list-item {
   @include media-breakpoint-down(sm) {
     .notification-dropdown {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 6070311dcb6..1b6e7954366 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -76,10 +76,6 @@
   .btn-edit {
     margin-left: auto;
   }
-
-  .emoji-block {
-    padding: $gl-padding-4 0;
-  }
 }
 
 .issuable-show-labels {
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index c88834c088f..c2ac4f32480 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -75,11 +75,6 @@ ul.related-merge-requests > li gl-emoji {
 
 .merge-request,
 .issue {
-  &.today {
-    background: $issues-today-bg;
-    border-color: $issues-today-border;
-  }
-
   &.closed,
   &.merged {
     background: $gray-light;
@@ -123,9 +118,6 @@ ul.related-merge-requests > li gl-emoji {
 }
 
 .new-branch-col {
-  @include gl-pb-3;
-  @include gl-my-2;
-
   .discussion-filter-container {
     &:not(:last-child) {
       margin-right: $gl-spacing-scale-3;
@@ -225,7 +217,7 @@ ul.related-merge-requests > li gl-emoji {
 
     .new-branch-col {
       @include gl-pb-0;
-      align-self: center;
+      align-self: flex-end;
     }
   }
 
diff --git a/app/assets/stylesheets/pages/ml_experiment_tracking.scss b/app/assets/stylesheets/pages/ml_experiment_tracking.scss
new file mode 100644
index 00000000000..2dff51cff92
--- /dev/null
+++ b/app/assets/stylesheets/pages/ml_experiment_tracking.scss
@@ -0,0 +1,16 @@
+@import '../page_bundles/mixins_and_variables_and_functions';
+
+.ml-experiment-row {
+  .title {
+    margin-bottom: $gl-spacing-scale-1;
+    font-weight: $gl-font-weight-bold;
+  }
+
+  .ml-experiment-info {
+    color: $gl-text-color-secondary;
+  }
+
+  a {
+    color: $gl-text-color;
+  }
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 438b7b1afa6..fa3c87490f1 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -6,7 +6,7 @@ $system-note-svg-size: 1rem;
     content: '';
     border-left: 2px solid var(--gray-10, $gray-10);
     position: absolute;
-    top: 0;
+    top: $gl-padding-6;
     bottom: 0;
     left: calc(#{$left} - 1px);
     height: calc(100% + 1.5rem);
@@ -421,7 +421,7 @@ $system-note-svg-size: 1rem;
       height: $system-note-icon-size;
       border: 1px solid $gray-10;
       border-radius: $system-note-icon-size;
-      margin: -8px 0 0;
+      margin: -6px 0 0;
 
       svg {
         width: $system-note-svg-size;
@@ -968,7 +968,7 @@ $system-note-svg-size: 1rem;
     height: 12px;
   }
 
-  &:hover,
+  &:hover:not([disabled]),
   &.inverted {
     &::before {
       background-color: $white;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index be8707dcd50..bf20204cfd9 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -277,139 +277,128 @@
   .description p {
     margin-bottom: 0;
     color: $gl-text-color-secondary;
+    @include str-truncated(100%);
   }
 }
 
 .projects-list {
   @include basic-list;
-  display: flex;
-  flex-direction: column;
+  @include gl-display-table;
 
   .project-row {
-    @include basic-list-stats;
-    display: flex;
-    align-items: center;
-    padding: $gl-padding-12 0;
+    @include gl-display-table-row;
   }
 
-  h2 {
-    font-size: $gl-font-size;
-    font-weight: $gl-font-weight-bold;
-    margin-bottom: 0;
-
-    @include media-breakpoint-up(sm) {
-      .namespace-name {
-        font-weight: $gl-font-weight-normal;
-      }
-    }
+  .project-cell {
+    @include gl-display-table-cell;
+    @include gl-border-b;
+    @include gl-vertical-align-top;
+    @include gl-py-4;
   }
 
-  .avatar-container {
-    flex: 0 0 auto;
-    align-self: flex-start;
+  .project-row:last-of-type {
+    .project-cell {
+      @include gl-border-none;
+    }
   }
 
-  .project-details {
-    min-width: 0;
-    line-height: $gl-line-height;
 
-    .flex-wrapper {
-      min-width: 0;
-      margin-top: -$gl-padding-8; // negative margin required for flex-wrap
-      flex: 1 1 100%;
+  &.admin-projects,
+  &.group-settings-projects {
+    .project-row {
+      @include basic-list-stats;
 
-      .project-title {
-        line-height: 20px;
+      .description > p {
+        @include gl-mb-0;
       }
     }
 
+    .controls {
+      @include gl-line-height-42;
+    }
+  }
+
+  .project-details {
+    max-width: 625px;
+
     p,
     .commit-row-message {
+      @include gl-mb-0;
       @include str-truncated(100%);
-      margin-bottom: 0;
-    }
-
-    .user-access-role {
-      margin: 0;
     }
 
     .description {
       line-height: 1.5;
-      color: $gl-text-color-secondary;
-    }
-
-    @include media-breakpoint-down(md) {
-      .user-access-role {
-        line-height: $gl-line-height-14;
-      }
+      max-height: $gl-spacing-scale-8;
     }
   }
 
   .ci-status-link {
-    display: inline-block;
-    line-height: 17px;
-    vertical-align: middle;
-
-    &:hover {
-      text-decoration: none;
-    }
+    @include gl-text-decoration-none;
   }
 
-  .controls {
-    @include media-breakpoint-down(xs) {
-      margin-top: $gl-padding-8;
+  &:not(.compact) {
+    .controls {
+      @include media-breakpoint-up(lg) {
+        @include gl-justify-content-start;
+        @include gl-pr-9;
+
+        &:not(.with-pipeline-status) {
+          .icon-wrapper:first-of-type {
+            @include media-breakpoint-up(lg) {
+              @include gl-ml-7;
+            }
+          }
+        }
+      }
     }
 
-    @include media-breakpoint-up(sm) {
-      margin-top: 0;
+    .project-details {
+      p,
+      .commit-row-message {
+        @include gl-white-space-normal;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        /* stylelint-disable-next-line value-no-vendor-prefix */
+        display: -webkit-box;
+      }
     }
+  }
 
-    @include media-breakpoint-up(lg) {
-      flex: 1 1 40%;
+  .controls {
+    @include media-breakpoint-up(sm) {
+      @include gl-justify-content-end;
     }
 
     .icon-wrapper {
-      color: inherit;
-      margin-right: $gl-padding;
-
       @include media-breakpoint-down(md) {
-        margin-right: 0;
-        margin-left: $gl-padding-8;
+        @include gl-mr-0;
+        @include gl-ml-3;
       }
 
       @include media-breakpoint-down(xs) {
         &:first-child {
-          margin-left: 0;
-        }
-      }
-    }
-
-    &:not(.with-pipeline-status) {
-      .icon-wrapper:first-of-type {
-        @include media-breakpoint-up(lg) {
-          margin-left: $gl-padding-32;
+          @include gl-ml-0;
         }
       }
     }
 
     .ci-status-link {
-      display: inline-flex;
+      @include gl-display-inline-flex;
     }
   }
 
   .icon-container {
-    @include media-breakpoint-down(xs) {
-      margin-right: $gl-padding-8;
+    @include media-breakpoint-up(lg) {
+      margin-right: $gl-spacing-scale-7;
     }
   }
 
   &.compact {
-    .project-row {
-      padding: $gl-padding 0;
-    }
-
-    h2 {
-      font-size: $gl-font-size;
+    .description {
+      @include gl-w-full;
+      @include gl-display-table;
+      @include gl-table-layout-fixed;
     }
 
     .avatar-container {
@@ -422,27 +411,15 @@
       }
     }
 
-    .controls {
-      @include media-breakpoint-up(sm) {
-        margin-top: 0;
-      }
-    }
-
     .updated-note {
       @include media-breakpoint-up(sm) {
-        margin-top: $gl-padding-8;
+        @include gl-mt-2;
       }
     }
 
     .icon-wrapper {
-      margin-left: $gl-padding-8;
-      margin-right: 0;
-
-      @include media-breakpoint-down(xs) {
-        &:first-child {
-          margin-left: 0;
-        }
-      }
+      @include gl-ml-3;
+      @include gl-mr-0;
     }
 
     .user-access-role {
@@ -451,10 +428,6 @@
   }
 
   @include media-breakpoint-down(md) {
-    h2 {
-      font-size: $gl-font-size;
-    }
-
     .avatar-container {
       @include avatar-size(40px, 10px);
       min-height: 40px;
@@ -468,24 +441,18 @@
 
   @include media-breakpoint-down(md) {
     .updated-note {
-      margin-top: $gl-padding-8;
-      text-align: right;
+      @include gl-mt-3;
+      @include gl-text-right;
     }
   }
 
   .forks,
   .pipeline-status,
   .updated-note {
-    display: flex;
+    @include gl-display-flex;
   }
 
   @include media-breakpoint-down(md) {
-    &:not(.explore) {
-      .forks {
-        display: none;
-      }
-    }
-
     &.explore {
       .pipeline-status,
       .updated-note {
@@ -496,8 +463,8 @@
 
   @include media-breakpoint-down(xs) {
     .updated-note {
-      margin-top: 0;
-      text-align: left;
+      @include gl-mt-0;
+      @include gl-text-left;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index a8027d2a5f5..1bca04e5eb1 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -52,13 +52,6 @@ input[type='checkbox']:hover {
     .global-search-container {
       flex-grow: 1;
     }
-
-    @include media-breakpoint-down(lg) {
-      .title-container {
-        flex: 0;
-        overflow: hidden;
-      }
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index 32c3ce1ba8c..11131cc1a4b 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -6,15 +6,15 @@
   color-scheme: dark;
 }
 body.gl-dark {
-  --gray-10: #1f1f1f;
-  --gray-50: #303030;
-  --gray-100: #404040;
-  --gray-200: #525252;
-  --gray-700: #dbdbdb;
-  --gray-900: #fafafa;
+  --gray-10: #1f1e24;
+  --gray-50: #333238;
+  --gray-100: #434248;
+  --gray-200: #535158;
+  --gray-700: #bfbfc3;
+  --gray-900: #ececef;
   --green-100: #0d532a;
   --green-700: #91d4a8;
-  --gl-text-color: #fafafa;
+  --gl-text-color: #ececef;
   --border-color: #4f4f4f;
   --black: #fff;
 }
@@ -42,9 +42,9 @@ body {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #fafafa;
+  color: #ececef;
   text-align: left;
-  background-color: #1f1f1f;
+  background-color: #1f1e24;
 }
 ul {
   margin-top: 0;
@@ -118,7 +118,7 @@ kbd {
   padding: 0.2rem 0.4rem;
   font-size: 90%;
   color: #333;
-  background-color: #fafafa;
+  background-color: #ececef;
   border-radius: 0.2rem;
 }
 kbd kbd {
@@ -141,24 +141,24 @@ kbd kbd {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #fafafa;
+  color: #ececef;
   background-color: #333;
   background-clip: padding-box;
-  border: 1px solid #868686;
+  border: 1px solid #737278;
   border-radius: 0.25rem;
 }
 @media (prefers-reduced-motion: reduce) {
 }
 .form-control:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 #fafafa;
+  text-shadow: 0 0 0 #ececef;
 }
 .form-control::placeholder {
-  color: #bfbfbf;
+  color: #a4a3a8;
   opacity: 1;
 }
 .form-control:disabled {
-  background-color: #303030;
+  background-color: #333238;
   opacity: 1;
 }
 .form-inline {
@@ -176,7 +176,7 @@ kbd kbd {
 .btn {
   display: inline-block;
   font-weight: 400;
-  color: #fafafa;
+  color: #ececef;
   text-align: center;
   vertical-align: middle;
   user-select: none;
@@ -212,7 +212,7 @@ kbd kbd {
   padding: 0.5rem 0;
   margin: 0.125rem 0 0;
   font-size: 1rem;
-  color: #fafafa;
+  color: #ececef;
   text-align: left;
   list-style: none;
   background-color: #333;
@@ -319,15 +319,15 @@ kbd kbd {
   border-radius: 10rem;
 }
 .badge-success {
-  color: #fff;
+  color: #fbfafd;
   background-color: #2da160;
 }
 .badge-info {
-  color: #fff;
+  color: #fbfafd;
   background-color: #428fdc;
 }
 .badge-warning {
-  color: #fff;
+  color: #fbfafd;
   background-color: #c17d10;
 }
 .rounded-circle {
@@ -371,7 +371,7 @@ kbd kbd {
 .gl-avatar {
   border-width: 1px;
   border-style: solid;
-  border-color: rgba(0, 0, 0, 0.08);
+  border-color: rgba(251, 250, 253, 0.08);
   overflow: hidden;
   flex-shrink: 0;
 }
@@ -455,8 +455,8 @@ a.gl-badge.badge-warning:active {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   height: auto;
-  color: #fafafa;
-  box-shadow: inset 0 0 0 1px #868686;
+  color: #ececef;
+  box-shadow: inset 0 0 0 1px #737278;
   border-style: none;
   appearance: none;
   -moz-appearance: none;
@@ -465,17 +465,17 @@ a.gl-badge.badge-warning:active {
 .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
-  background-color: #1f1f1f;
-  box-shadow: inset 0 0 0 1px #404040;
+  background-color: #1f1e24;
+  box-shadow: inset 0 0 0 1px #434248;
 }
 .gl-form-input:disabled,
 .gl-form-input.form-control:disabled {
   cursor: not-allowed;
-  color: #999;
+  color: #89888d;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {
-  color: #868686;
+  color: #737278;
 }
 .gl-icon {
   fill: currentColor;
@@ -518,9 +518,9 @@ a.gl-badge.badge-warning:active {
   padding-right: 0.75rem;
   background-color: transparent;
   line-height: 1rem;
-  color: #fafafa;
+  color: #ececef;
   fill: currentColor;
-  box-shadow: inset 0 0 0 1px #525252;
+  box-shadow: inset 0 0 0 1px #535158;
   justify-content: center;
   align-items: center;
   font-size: 0.875rem;
@@ -531,20 +531,20 @@ a.gl-badge.badge-warning:active {
 }
 .gl-button.gl-button.btn-default:active,
 .gl-button.gl-button.btn-default.active {
-  box-shadow: inset 0 0 0 1px #bfbfbf, 0 0 0 1px #333, 0 0 0 3px #1f75cb;
+  box-shadow: inset 0 0 0 1px #a4a3a8, 0 0 0 1px #333, 0 0 0 3px #1f75cb;
   outline: none;
-  background-color: #404040;
+  background-color: #434248;
 }
 .gl-button.gl-button.btn-default:active .gl-icon,
 .gl-button.gl-button.btn-default.active .gl-icon {
-  color: #fafafa;
+  color: #ececef;
 }
 .gl-button.gl-button.btn-default .gl-icon {
-  color: #999;
+  color: #89888d;
 }
 .gl-search-box-by-type-search-icon {
   margin: 0.5rem;
-  color: #999;
+  color: #89888d;
   width: 1rem;
   position: absolute;
 }
@@ -594,35 +594,40 @@ svg {
   height: 0;
   margin: 4px 0;
   overflow: hidden;
-  border-top: 1px solid #404040;
+  border-top: 1px solid #434248;
 }
 .toggle-sidebar-button .collapse-text,
 .toggle-sidebar-button .icon-chevron-double-lg-left {
-  color: #999;
+  color: #89888d;
 }
 html {
   overflow-y: scroll;
 }
+@media (min-width: 576px) {
+  .logged-out-marketing-header {
+    --header-height: 72px;
+  }
+}
 .btn {
   border-radius: 4px;
   font-size: 0.875rem;
   font-weight: 400;
   padding: 6px 10px;
   background-color: #333;
-  border-color: #404040;
-  color: #fafafa;
-  color: #fafafa;
+  border-color: #434248;
+  color: #ececef;
+  color: #ececef;
   white-space: nowrap;
 }
 .btn:active {
-  background-color: #303030;
+  background-color: #333238;
   box-shadow: none;
 }
 .btn:active,
 .btn.active {
   background-color: #444;
   border-color: #4f4f4f;
-  color: #fafafa;
+  color: #ececef;
 }
 .btn svg {
   height: 15px;
@@ -634,7 +639,7 @@ html {
 .badge.badge-pill:not(.gl-badge) {
   font-weight: 400;
   background-color: rgba(255, 255, 255, 0.07);
-  color: #dbdbdb;
+  color: #bfbfc3;
   vertical-align: baseline;
 }
 .gl-font-sm {
@@ -653,10 +658,10 @@ html {
 .dropdown-menu-toggle {
   padding: 6px 8px 6px 10px;
   background-color: #333;
-  color: #fafafa;
+  color: #ececef;
   font-size: 14px;
   text-align: left;
-  border: 1px solid #404040;
+  border: 1px solid #434248;
   border-radius: 0.25rem;
   white-space: nowrap;
 }
@@ -685,7 +690,7 @@ html {
   font-weight: 400;
   padding: 8px 0;
   background-color: #333;
-  border: 1px solid #404040;
+  border: 1px solid #434248;
   border-radius: 0.25rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -708,7 +713,7 @@ html {
   font-weight: 400;
   position: relative;
   padding: 8px 12px;
-  color: #fafafa;
+  color: #ececef;
   line-height: 16px;
   white-space: normal;
   overflow: hidden;
@@ -718,7 +723,7 @@ html {
 .dropdown-menu li > a:active,
 .dropdown-menu li button:active {
   background-color: #4f4f4f;
-  color: #fafafa;
+  color: #ececef;
   outline: 0;
   text-decoration: none;
 }
@@ -732,7 +737,7 @@ html {
   height: 1px;
   margin: 0.25rem 0;
   padding: 0;
-  background-color: #404040;
+  background-color: #434248;
 }
 .dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) {
   margin-right: 40px;
@@ -759,7 +764,7 @@ html {
 }
 input {
   border-radius: 0.25rem;
-  color: #fafafa;
+  color: #ececef;
   background-color: #333;
 }
 .form-control {
@@ -767,23 +772,23 @@ input {
   padding: 6px 10px;
 }
 .form-control::placeholder {
-  color: #868686;
+  color: #737278;
 }
 kbd {
   display: inline-block;
   padding: 3px 5px;
   font-size: 0.6875rem;
   line-height: 10px;
-  color: var(--gray-700, #dbdbdb);
+  color: var(--gray-700, #bfbfc3);
   vertical-align: middle;
-  background-color: var(--gray-10, #1f1f1f);
+  background-color: var(--gray-10, #1f1e24);
   border-width: 1px;
   border-style: solid;
-  border-color: var(--gray-100, #404040) var(--gray-100, #404040)
-    var(--gray-200, #525252);
+  border-color: var(--gray-100, #434248) var(--gray-100, #434248)
+    var(--gray-200, #535158);
   border-image: none;
   border-radius: 3px;
-  box-shadow: 0 -1px 0 var(--gray-200, #525252) inset;
+  box-shadow: 0 -1px 0 var(--gray-200, #535158) inset;
 }
 .navbar-gitlab {
   padding: 0 16px;
@@ -1037,7 +1042,7 @@ kbd {
   width: 100%;
   align-items: center;
   padding: 10px 16px 10px 10px;
-  color: #fafafa;
+  color: #ececef;
   background-color: transparent;
   border: 0;
   text-align: left;
@@ -1049,7 +1054,7 @@ kbd {
 .context-header .sidebar-context-title {
   overflow: hidden;
   text-overflow: ellipsis;
-  color: #fafafa;
+  color: #ececef;
 }
 @media (min-width: 768px) {
   .page-with-contextual-sidebar {
@@ -1073,7 +1078,7 @@ kbd {
   z-index: 600;
   width: 256px;
   top: var(--header-height, 48px);
-  background-color: #f5f5f5;
+  background-color: #1f1e24;
   border-right: 1px solid #e9e9e9;
   transform: translate3d(0, 0, 0);
 }
@@ -1110,7 +1115,7 @@ kbd {
 }
 .nav-sidebar a {
   text-decoration: none;
-  color: #fafafa;
+  color: #ececef;
 }
 .nav-sidebar li {
   white-space: nowrap;
@@ -1395,7 +1400,7 @@ kbd {
   display: block;
 }
 .sidebar-top-level-items li > a.gl-link {
-  color: #fafafa;
+  color: #ececef;
 }
 .sidebar-top-level-items li > a.gl-link:active {
   text-decoration: none;
@@ -1412,12 +1417,12 @@ kbd {
 .close-nav-button {
   height: 48px;
   padding: 0 16px;
-  background-color: #303030;
+  background-color: #333238;
   border: 0;
-  color: #999;
+  color: #89888d;
   display: flex;
   align-items: center;
-  background-color: #f5f5f5;
+  background-color: #1f1e24;
   position: fixed;
   bottom: 0;
   width: 255px;
@@ -1488,14 +1493,14 @@ kbd {
   }
 }
 input::-moz-placeholder {
-  color: #868686;
+  color: #737278;
   opacity: 1;
 }
 input::-ms-input-placeholder {
-  color: #868686;
+  color: #737278;
 }
 input:-ms-input-placeholder {
-  color: #868686;
+  color: #737278;
 }
 svg {
   fill: currentColor;
@@ -1624,7 +1629,7 @@ svg.s16 {
   padding: 0;
   background: #222;
   overflow: hidden;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(251, 250, 253, 0.1);
 }
 .avatar.avatar-tile {
   border-radius: 0;
@@ -1633,8 +1638,8 @@ svg.s16 {
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: #fafafa;
-  background-color: #303030;
+  color: #ececef;
+  background-color: #333238;
 }
 .identicon.s16 {
   font-size: 10px;
@@ -1663,7 +1668,7 @@ svg.s16 {
   background-color: #5c2900;
 }
 .identicon.bg7 {
-  background-color: #303030;
+  background-color: #333238;
 }
 .avatar-container {
   overflow: hidden;
@@ -1702,18 +1707,18 @@ svg.s16 {
   color-scheme: dark;
 }
 body.gl-dark {
-  --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;
   --green-200: #24663b;
@@ -1785,58 +1790,59 @@ body.gl-dark {
   --dark-icon-color-purple-3: #9a79f7;
   --dark-icon-color-orange-1: #665349;
   --dark-icon-color-orange-2: #b37a5d;
-  --gl-text-color: #fafafa;
+  --gl-text-color: #ececef;
   --border-color: #4f4f4f;
   --white: #333;
   --black: #fff;
+  --gray-light: #333238;
   --svg-status-bg: #333;
 }
 .nav-sidebar,
 .toggle-sidebar-button,
 .close-nav-button {
-  background-color: #262626;
-  border-right: 1px solid #303030;
+  background-color: #29282d;
+  border-right: 1px solid #333238;
 }
 .gl-avatar:not(.gl-avatar-identicon),
 .avatar-container,
 .avatar {
-  background: rgba(255, 255, 255, 0.04);
+  background: rgba(251, 250, 253, 0.04);
 }
 .gl-avatar {
   border-style: none;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(251, 250, 253, 0.1);
 }
 body.gl-dark {
-  --gl-theme-accent: #868686;
+  --gl-theme-accent: #737278;
 }
 body.gl-dark .navbar-gitlab {
-  background-color: #fafafa;
+  background-color: #ececef;
 }
 body.gl-dark .navbar-gitlab .navbar-collapse {
-  color: #fafafa;
+  color: #ececef;
 }
 body.gl-dark .navbar-gitlab .container-fluid .navbar-toggler {
-  border-left: 1px solid #b3b3b3;
-  color: #fafafa;
+  border-left: 1px solid #a3a2a6;
+  color: #ececef;
 }
 body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > a,
 body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > button,
 body.gl-dark .navbar-gitlab .navbar-nav > li.active > a,
 body.gl-dark .navbar-gitlab .navbar-nav > li.active > button {
-  color: #fafafa;
+  color: #ececef;
   background-color: #333;
 }
 body.gl-dark .navbar-gitlab .navbar-sub-nav {
-  color: #fafafa;
+  color: #ececef;
 }
 body.gl-dark .navbar-gitlab .nav > li {
-  color: #fafafa;
+  color: #ececef;
 }
 body.gl-dark .navbar-gitlab .nav > li.header-search-new {
-  color: #fafafa;
+  color: #ececef;
 }
 body.gl-dark .navbar-gitlab .nav > li > a .notification-dot {
-  border: 2px solid #fafafa;
+  border: 2px solid #ececef;
 }
 body.gl-dark
   .navbar-gitlab
@@ -1844,7 +1850,7 @@ body.gl-dark
   > li
   > a.header-help-dropdown-toggle
   .notification-dot {
-  background-color: #fafafa;
+  background-color: #ececef;
 }
 body.gl-dark
   .navbar-gitlab
@@ -1852,10 +1858,10 @@ body.gl-dark
   > li
   > a.header-user-dropdown-toggle
   .header-user-avatar {
-  border-color: #fafafa;
+  border-color: #ececef;
 }
 body.gl-dark .navbar-gitlab .nav > li.active > a {
-  color: #fafafa;
+  color: #ececef;
   background-color: #333;
 }
 body.gl-dark .navbar-gitlab .nav > li.active > a .notification-dot {
@@ -1867,48 +1873,48 @@ body.gl-dark
   > li.active
   > a.header-help-dropdown-toggle
   .notification-dot {
-  background-color: #fafafa;
+  background-color: #ececef;
 }
 body.gl-dark .header-search {
-  background-color: rgba(250, 250, 250, 0.2) !important;
+  background-color: rgba(236, 236, 239, 0.2) !important;
   border-radius: 4px;
 }
 body.gl-dark .header-search svg.gl-search-box-by-type-search-icon {
-  color: rgba(250, 250, 250, 0.8);
+  color: rgba(236, 236, 239, 0.8);
 }
 body.gl-dark .header-search input {
   background-color: transparent;
-  color: rgba(250, 250, 250, 0.8);
-  box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.4);
+  color: rgba(236, 236, 239, 0.8);
+  box-shadow: inset 0 0 0 1px rgba(236, 236, 239, 0.4);
 }
 body.gl-dark .header-search input::placeholder {
-  color: rgba(250, 250, 250, 0.8);
+  color: rgba(236, 236, 239, 0.8);
 }
 body.gl-dark .header-search input:active::placeholder {
-  color: #868686;
+  color: #737278;
 }
 body.gl-dark .header-search .keyboard-shortcut-helper {
-  color: #fafafa;
-  background-color: rgba(250, 250, 250, 0.2);
+  color: #ececef;
+  background-color: rgba(236, 236, 239, 0.2);
 }
 body.gl-dark .search form {
-  background-color: rgba(250, 250, 250, 0.2);
+  background-color: rgba(236, 236, 239, 0.2);
 }
 body.gl-dark .search .search-input::placeholder {
-  color: rgba(250, 250, 250, 0.8);
+  color: rgba(236, 236, 239, 0.8);
 }
 body.gl-dark .search .search-input-wrap .search-icon,
 body.gl-dark .search .search-input-wrap .clear-icon {
-  fill: rgba(250, 250, 250, 0.8);
+  fill: rgba(236, 236, 239, 0.8);
 }
 body.gl-dark .nav-sidebar li.active > a {
-  color: #fafafa;
+  color: #ececef;
 }
 body.gl-dark .nav-sidebar .fly-out-top-item a,
 body.gl-dark .nav-sidebar .fly-out-top-item.active a,
 body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container {
-  background-color: var(--gray-100, #303030);
-  color: var(--gray-900, #fafafa);
+  background-color: var(--gray-100, #333238);
+  color: var(--gray-900, #ececef);
 }
 body.gl-dark .navbar-gitlab {
   background-color: var(--gray-50);
@@ -1945,18 +1951,18 @@ body.gl-dark .navbar-gitlab .search form .search-input {
   color-scheme: dark;
 }
 body.gl-dark {
-  --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;
   --green-200: #24663b;
@@ -2028,10 +2034,11 @@ body.gl-dark {
   --dark-icon-color-purple-3: #9a79f7;
   --dark-icon-color-orange-1: #665349;
   --dark-icon-color-orange-2: #b37a5d;
-  --gl-text-color: #fafafa;
+  --gl-text-color: #ececef;
   --border-color: #4f4f4f;
   --white: #333;
   --black: #fff;
+  --gray-light: #333238;
   --svg-status-bg: #333;
 }
 .tab-width-8 {
@@ -2054,9 +2061,19 @@ body.gl-dark {
 .gl-display-none {
   display: none;
 }
+@media (min-width: 576px) {
+  .gl-sm-display-none {
+    display: none;
+  }
+}
 .gl-display-flex {
   display: flex;
 }
+@media (min-width: 992px) {
+  .gl-lg-display-flex {
+    display: flex;
+  }
+}
 @media (min-width: 576px) {
   .gl-sm-display-block {
     display: block;
@@ -2067,9 +2084,6 @@ body.gl-dark {
     display: block;
   }
 }
-.gl-display-inline-block\! {
-  display: inline-block !important;
-}
 .gl-align-items-center {
   align-items: center;
 }
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 61a2ce8dd62..7fb373bb6f4 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -23,7 +23,7 @@ body {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #303030;
+  color: #333238;
   text-align: left;
   background-color: #fff;
 }
@@ -99,7 +99,7 @@ kbd {
   padding: 0.2rem 0.4rem;
   font-size: 90%;
   color: #fff;
-  background-color: #303030;
+  background-color: #333238;
   border-radius: 0.2rem;
 }
 kbd kbd {
@@ -122,24 +122,24 @@ kbd kbd {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #303030;
+  color: #333238;
   background-color: #fff;
   background-clip: padding-box;
-  border: 1px solid #868686;
+  border: 1px solid #89888d;
   border-radius: 0.25rem;
 }
 @media (prefers-reduced-motion: reduce) {
 }
 .form-control:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 #303030;
+  text-shadow: 0 0 0 #333238;
 }
 .form-control::placeholder {
-  color: #5e5e5e;
+  color: #626168;
   opacity: 1;
 }
 .form-control:disabled {
-  background-color: #fafafa;
+  background-color: #fbfafd;
   opacity: 1;
 }
 .form-inline {
@@ -157,7 +157,7 @@ kbd kbd {
 .btn {
   display: inline-block;
   font-weight: 400;
-  color: #303030;
+  color: #333238;
   text-align: center;
   vertical-align: middle;
   user-select: none;
@@ -193,7 +193,7 @@ kbd kbd {
   padding: 0.5rem 0;
   margin: 0.125rem 0 0;
   font-size: 1rem;
-  color: #303030;
+  color: #333238;
   text-align: left;
   list-style: none;
   background-color: #fff;
@@ -352,7 +352,7 @@ kbd kbd {
 .gl-avatar {
   border-width: 1px;
   border-style: solid;
-  border-color: rgba(0, 0, 0, 0.08);
+  border-color: rgba(31, 30, 36, 0.08);
   overflow: hidden;
   flex-shrink: 0;
 }
@@ -436,8 +436,8 @@ a.gl-badge.badge-warning:active {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   height: auto;
-  color: #303030;
-  box-shadow: inset 0 0 0 1px #868686;
+  color: #333238;
+  box-shadow: inset 0 0 0 1px #89888d;
   border-style: none;
   appearance: none;
   -moz-appearance: none;
@@ -446,17 +446,17 @@ a.gl-badge.badge-warning:active {
 .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
-  background-color: #f5f5f5;
-  box-shadow: inset 0 0 0 1px #dbdbdb;
+  background-color: #fbfafd;
+  box-shadow: inset 0 0 0 1px #dcdcde;
 }
 .gl-form-input:disabled,
 .gl-form-input.form-control:disabled {
   cursor: not-allowed;
-  color: #666;
+  color: #737278;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {
-  color: #868686;
+  color: #89888d;
 }
 .gl-icon {
   fill: currentColor;
@@ -499,9 +499,9 @@ a.gl-badge.badge-warning:active {
   padding-right: 0.75rem;
   background-color: transparent;
   line-height: 1rem;
-  color: #303030;
+  color: #333238;
   fill: currentColor;
-  box-shadow: inset 0 0 0 1px #bfbfbf;
+  box-shadow: inset 0 0 0 1px #bfbfc3;
   justify-content: center;
   align-items: center;
   font-size: 0.875rem;
@@ -512,20 +512,20 @@ a.gl-badge.badge-warning:active {
 }
 .gl-button.gl-button.btn-default:active,
 .gl-button.gl-button.btn-default.active {
-  box-shadow: inset 0 0 0 1px #5e5e5e, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
+  box-shadow: inset 0 0 0 1px #626168, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
   outline: none;
-  background-color: #dbdbdb;
+  background-color: #dcdcde;
 }
 .gl-button.gl-button.btn-default:active .gl-icon,
 .gl-button.gl-button.btn-default.active .gl-icon {
-  color: #303030;
+  color: #333238;
 }
 .gl-button.gl-button.btn-default .gl-icon {
-  color: #666;
+  color: #737278;
 }
 .gl-search-box-by-type-search-icon {
   margin: 0.5rem;
-  color: #666;
+  color: #737278;
   width: 1rem;
   position: absolute;
 }
@@ -575,35 +575,40 @@ svg {
   height: 0;
   margin: 4px 0;
   overflow: hidden;
-  border-top: 1px solid #dbdbdb;
+  border-top: 1px solid #dcdcde;
 }
 .toggle-sidebar-button .collapse-text,
 .toggle-sidebar-button .icon-chevron-double-lg-left {
-  color: #666;
+  color: #737278;
 }
 html {
   overflow-y: scroll;
 }
+@media (min-width: 576px) {
+  .logged-out-marketing-header {
+    --header-height: 72px;
+  }
+}
 .btn {
   border-radius: 4px;
   font-size: 0.875rem;
   font-weight: 400;
   padding: 6px 10px;
   background-color: #fff;
-  border-color: #dbdbdb;
-  color: #303030;
-  color: #303030;
+  border-color: #dcdcde;
+  color: #333238;
+  color: #333238;
   white-space: nowrap;
 }
 .btn:active {
-  background-color: #f0f0f0;
+  background-color: #ececef;
   box-shadow: none;
 }
 .btn:active,
 .btn.active {
   background-color: #eaeaea;
   border-color: #e3e3e3;
-  color: #303030;
+  color: #333238;
 }
 .btn svg {
   height: 15px;
@@ -615,7 +620,7 @@ html {
 .badge.badge-pill:not(.gl-badge) {
   font-weight: 400;
   background-color: rgba(0, 0, 0, 0.07);
-  color: #525252;
+  color: #535158;
   vertical-align: baseline;
 }
 .gl-font-sm {
@@ -634,10 +639,10 @@ html {
 .dropdown-menu-toggle {
   padding: 6px 8px 6px 10px;
   background-color: #fff;
-  color: #303030;
+  color: #333238;
   font-size: 14px;
   text-align: left;
-  border: 1px solid #dbdbdb;
+  border: 1px solid #dcdcde;
   border-radius: 0.25rem;
   white-space: nowrap;
 }
@@ -666,7 +671,7 @@ html {
   font-weight: 400;
   padding: 8px 0;
   background-color: #fff;
-  border: 1px solid #dbdbdb;
+  border: 1px solid #dcdcde;
   border-radius: 0.25rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -689,7 +694,7 @@ html {
   font-weight: 400;
   position: relative;
   padding: 8px 12px;
-  color: #303030;
+  color: #333238;
   line-height: 16px;
   white-space: normal;
   overflow: hidden;
@@ -698,8 +703,8 @@ html {
 }
 .dropdown-menu li > a:active,
 .dropdown-menu li button:active {
-  background-color: #eee;
-  color: #303030;
+  background-color: #ececef;
+  color: #333238;
   outline: 0;
   text-decoration: none;
 }
@@ -713,7 +718,7 @@ html {
   height: 1px;
   margin: 0.25rem 0;
   padding: 0;
-  background-color: #dbdbdb;
+  background-color: #dcdcde;
 }
 .dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) {
   margin-right: 40px;
@@ -740,7 +745,7 @@ html {
 }
 input {
   border-radius: 0.25rem;
-  color: #303030;
+  color: #333238;
   background-color: #fff;
 }
 .form-control {
@@ -748,23 +753,23 @@ input {
   padding: 6px 10px;
 }
 .form-control::placeholder {
-  color: #868686;
+  color: #89888d;
 }
 kbd {
   display: inline-block;
   padding: 3px 5px;
   font-size: 0.6875rem;
   line-height: 10px;
-  color: var(--gray-700, #525252);
+  color: var(--gray-700, #535158);
   vertical-align: middle;
-  background-color: var(--gray-10, #f5f5f5);
+  background-color: var(--gray-10, #fbfafd);
   border-width: 1px;
   border-style: solid;
-  border-color: var(--gray-100, #dbdbdb) var(--gray-100, #dbdbdb)
-    var(--gray-200, #bfbfbf);
+  border-color: var(--gray-100, #dcdcde) var(--gray-100, #dcdcde)
+    var(--gray-200, #bfbfc3);
   border-image: none;
   border-radius: 3px;
-  box-shadow: 0 -1px 0 var(--gray-200, #bfbfbf) inset;
+  box-shadow: 0 -1px 0 var(--gray-200, #bfbfc3) inset;
 }
 .navbar-gitlab {
   padding: 0 16px;
@@ -986,7 +991,7 @@ kbd {
   float: left;
   margin-right: 5px;
   border-radius: 50%;
-  border: 1px solid #f5f5f5;
+  border: 1px solid #f2f2f4;
 }
 .notification-dot {
   background-color: #d99530;
@@ -1018,7 +1023,7 @@ kbd {
   width: 100%;
   align-items: center;
   padding: 10px 16px 10px 10px;
-  color: #303030;
+  color: #333238;
   background-color: transparent;
   border: 0;
   text-align: left;
@@ -1030,7 +1035,7 @@ kbd {
 .context-header .sidebar-context-title {
   overflow: hidden;
   text-overflow: ellipsis;
-  color: #303030;
+  color: #333238;
 }
 @media (min-width: 768px) {
   .page-with-contextual-sidebar {
@@ -1054,7 +1059,7 @@ kbd {
   z-index: 600;
   width: 256px;
   top: var(--header-height, 48px);
-  background-color: #f5f5f5;
+  background-color: #fbfafd;
   border-right: 1px solid #e9e9e9;
   transform: translate3d(0, 0, 0);
 }
@@ -1091,7 +1096,7 @@ kbd {
 }
 .nav-sidebar a {
   text-decoration: none;
-  color: #303030;
+  color: #333238;
 }
 .nav-sidebar li {
   white-space: nowrap;
@@ -1376,7 +1381,7 @@ kbd {
   display: block;
 }
 .sidebar-top-level-items li > a.gl-link {
-  color: #303030;
+  color: #333238;
 }
 .sidebar-top-level-items li > a.gl-link:active {
   text-decoration: none;
@@ -1393,12 +1398,12 @@ kbd {
 .close-nav-button {
   height: 48px;
   padding: 0 16px;
-  background-color: #fafafa;
+  background-color: #fbfafd;
   border: 0;
-  color: #666;
+  color: #737278;
   display: flex;
   align-items: center;
-  background-color: #f5f5f5;
+  background-color: #fbfafd;
   position: fixed;
   bottom: 0;
   width: 255px;
@@ -1469,14 +1474,14 @@ kbd {
   }
 }
 input::-moz-placeholder {
-  color: #868686;
+  color: #89888d;
   opacity: 1;
 }
 input::-ms-input-placeholder {
-  color: #868686;
+  color: #89888d;
 }
 input:-ms-input-placeholder {
-  color: #868686;
+  color: #89888d;
 }
 svg {
   fill: currentColor;
@@ -1603,9 +1608,9 @@ svg.s16 {
   width: 40px;
   height: 40px;
   padding: 0;
-  background: #fdfdfd;
+  background: #fefefe;
   overflow: hidden;
-  box-shadow: inset 0 0 0 1px rgba(31, 31, 31, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(31, 30, 36, 0.1);
 }
 .avatar.avatar-tile {
   border-radius: 0;
@@ -1614,8 +1619,8 @@ svg.s16 {
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: #303030;
-  background-color: #f0f0f0;
+  color: #333238;
+  background-color: #ececef;
 }
 .identicon.s16 {
   font-size: 10px;
@@ -1644,7 +1649,7 @@ svg.s16 {
   background-color: #fdf1dd;
 }
 .identicon.bg7 {
-  background-color: #f0f0f0;
+  background-color: #ececef;
 }
 .avatar-container {
   overflow: hidden;
@@ -1700,9 +1705,19 @@ svg.s16 {
 .gl-display-none {
   display: none;
 }
+@media (min-width: 576px) {
+  .gl-sm-display-none {
+    display: none;
+  }
+}
 .gl-display-flex {
   display: flex;
 }
+@media (min-width: 992px) {
+  .gl-lg-display-flex {
+    display: flex;
+  }
+}
 @media (min-width: 576px) {
   .gl-sm-display-block {
     display: block;
@@ -1713,9 +1728,6 @@ svg.s16 {
     display: block;
   }
 }
-.gl-display-inline-block\! {
-  display: inline-block !important;
-}
 .gl-align-items-center {
   align-items: center;
 }
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index 33e10b9bd62..7ae158b3930 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -22,7 +22,7 @@ body {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #303030;
+  color: #333238;
   text-align: left;
   background-color: #fff;
 }
@@ -110,7 +110,7 @@ h3 {
   margin-bottom: 0.25rem;
   font-weight: 600;
   line-height: 1.2;
-  color: #303030;
+  color: #333238;
 }
 h1 {
   font-size: 2.1875rem;
@@ -196,24 +196,24 @@ hr {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #303030;
+  color: #333238;
   background-color: #fff;
   background-clip: padding-box;
-  border: 1px solid #868686;
+  border: 1px solid #89888d;
   border-radius: 0.25rem;
 }
 @media (prefers-reduced-motion: reduce) {
 }
 .form-control:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 #303030;
+  text-shadow: 0 0 0 #333238;
 }
 .form-control::placeholder {
-  color: #5e5e5e;
+  color: #626168;
   opacity: 1;
 }
 .form-control:disabled {
-  background-color: #fafafa;
+  background-color: #fbfafd;
   opacity: 1;
 }
 .form-group {
@@ -222,7 +222,7 @@ hr {
 .btn {
   display: inline-block;
   font-weight: 400;
-  color: #303030;
+  color: #333238;
   text-align: center;
   vertical-align: middle;
   user-select: none;
@@ -282,10 +282,10 @@ input.btn-block[type="button"] {
   border-color: #b3d7ff;
 }
 .custom-control-input:disabled ~ .custom-control-label {
-  color: #5e5e5e;
+  color: #626168;
 }
 .custom-control-input:disabled ~ .custom-control-label::before {
-  background-color: #fafafa;
+  background-color: #fbfafd;
 }
 .custom-control-label {
   position: relative;
@@ -302,7 +302,7 @@ input.btn-block[type="button"] {
   pointer-events: none;
   content: "";
   background-color: #fff;
-  border: #666 solid 1px;
+  border: #737278 solid 1px;
 }
 .custom-control-label::after {
   position: absolute;
@@ -400,8 +400,8 @@ input.btn-block[type="button"] {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   height: auto;
-  color: #303030;
-  box-shadow: inset 0 0 0 1px #868686;
+  color: #333238;
+  box-shadow: inset 0 0 0 1px #89888d;
   border-style: none;
   appearance: none;
   -moz-appearance: none;
@@ -410,27 +410,27 @@ input.btn-block[type="button"] {
 .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
-  background-color: #f5f5f5;
-  box-shadow: inset 0 0 0 1px #dbdbdb;
+  background-color: #fbfafd;
+  box-shadow: inset 0 0 0 1px #dcdcde;
 }
 .gl-form-input:disabled,
 .gl-form-input.form-control:disabled {
   cursor: not-allowed;
-  color: #666;
+  color: #737278;
 }
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {
-  color: #868686;
+  color: #89888d;
 }
 .gl-form-checkbox {
   font-size: 0.875rem;
   line-height: 1rem;
-  color: #303030;
+  color: #333238;
 }
 .gl-form-checkbox .custom-control-input:disabled,
 .gl-form-checkbox .custom-control-input:disabled ~ .custom-control-label {
   cursor: not-allowed;
-  color: #868686;
+  color: #89888d;
 }
 .gl-form-checkbox.custom-control .custom-control-input ~ .custom-control-label {
   cursor: pointer;
@@ -447,7 +447,7 @@ input.btn-block[type="button"] {
   .custom-control-input
   ~ .custom-control-label::before {
   background-color: #fff;
-  border-color: #868686;
+  border-color: #89888d;
 }
 .gl-form-checkbox.custom-control
   .custom-control-input:checked
@@ -490,8 +490,8 @@ input.btn-block[type="button"] {
 .gl-form-checkbox.custom-control
   .custom-control-input:disabled
   ~ .custom-control-label::before {
-  background-color: #f0f0f0;
-  border-color: #dbdbdb;
+  background-color: #ececef;
+  border-color: #dcdcde;
   pointer-events: auto;
 }
 .gl-form-checkbox.custom-control
@@ -500,8 +500,8 @@ input.btn-block[type="button"] {
 .gl-form-checkbox.custom-control
   .custom-control-input[type="checkbox"]:indeterminate:disabled
   ~ .custom-control-label::before {
-  background-color: #dbdbdb;
-  border-color: #dbdbdb;
+  background-color: #dcdcde;
+  border-color: #dcdcde;
 }
 .gl-form-checkbox.custom-control
   .custom-control-input:checked:disabled
@@ -509,7 +509,7 @@ input.btn-block[type="button"] {
 .gl-form-checkbox.custom-control
   .custom-control-input[type="checkbox"]:indeterminate:disabled
   ~ .custom-control-label::after {
-  background-color: #5e5e5e;
+  background-color: #626168;
 }
 .gl-button {
   display: inline-flex;
@@ -526,9 +526,9 @@ input.btn-block[type="button"] {
   padding-right: 0.75rem;
   background-color: transparent;
   line-height: 1rem;
-  color: #303030;
+  color: #333238;
   fill: currentColor;
-  box-shadow: inset 0 0 0 1px #bfbfbf;
+  box-shadow: inset 0 0 0 1px #bfbfc3;
   justify-content: center;
   align-items: center;
   font-size: 0.875rem;
@@ -560,9 +560,9 @@ input.btn-block[type="button"] {
 .gl-button.gl-button.btn-default.active,
 .gl-button.gl-button.btn-block.btn-default:active,
 .gl-button.gl-button.btn-block.btn-default.active {
-  box-shadow: inset 0 0 0 1px #5e5e5e, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
+  box-shadow: inset 0 0 0 1px #626168, 0 0 0 1px #fff, 0 0 0 3px #428fdc;
   outline: none;
-  background-color: #dbdbdb;
+  background-color: #dcdcde;
 }
 .gl-button.gl-button.btn-confirm,
 .gl-button.gl-button.btn-block.btn-confirm {
@@ -636,20 +636,20 @@ body.navless {
   font-weight: 400;
   padding: 6px 10px;
   background-color: #fff;
-  border-color: #dbdbdb;
-  color: #303030;
-  color: #303030;
+  border-color: #dcdcde;
+  color: #333238;
+  color: #333238;
   white-space: nowrap;
 }
 .btn:active {
-  background-color: #f0f0f0;
+  background-color: #ececef;
   box-shadow: none;
 }
 .btn:active,
 .btn.active {
   background-color: #eaeaea;
   border-color: #e3e3e3;
-  color: #303030;
+  color: #333238;
 }
 .btn svg {
   height: 15px;
@@ -676,7 +676,7 @@ body.navless {
 }
 hr {
   margin: 1.5rem 0;
-  border-top: 1px solid #eee;
+  border-top: 1px solid #ececef;
 }
 .footer-links {
   margin-bottom: 20px;
@@ -704,7 +704,7 @@ hr {
 }
 input {
   border-radius: 0.25rem;
-  color: #303030;
+  color: #333238;
   background-color: #fff;
 }
 label {
@@ -721,7 +721,7 @@ label.label-bold {
   padding: 6px 10px;
 }
 .form-control::placeholder {
-  color: #868686;
+  color: #89888d;
 }
 .gl-show-field-errors .form-control:not(textarea) {
   height: 34px;
@@ -730,7 +730,7 @@ label.label-bold {
   justify-content: center;
   height: var(--header-height, 48px);
   background: #fff;
-  border-bottom: 1px solid #dbdbdb;
+  border-bottom: 1px solid #dcdcde;
 }
 .navbar-empty .tanuki-logo,
 .navbar-empty .brand-header-logo {
@@ -747,14 +747,14 @@ label.label-bold {
   fill: #fca326;
 }
 input::-moz-placeholder {
-  color: #868686;
+  color: #89888d;
   opacity: 1;
 }
 input::-ms-input-placeholder {
-  color: #868686;
+  color: #89888d;
 }
 input:-ms-input-placeholder {
-  color: #868686;
+  color: #89888d;
 }
 svg {
   fill: currentColor;
@@ -805,7 +805,7 @@ svg {
 }
 .login-page .login-box,
 .login-page .omniauth-container {
-  box-shadow: 0 0 0 1px #dbdbdb;
+  box-shadow: 0 0 0 1px #dcdcde;
   border-radius: 0.25rem;
 }
 .login-page .login-box .login-heading h3,
@@ -863,7 +863,7 @@ svg {
 }
 .login-page .new-session-tabs {
   display: flex;
-  box-shadow: 0 0 0 1px #dbdbdb;
+  box-shadow: 0 0 0 1px #dcdcde;
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
@@ -874,7 +874,7 @@ svg {
 .login-page .new-session-tabs.nav-links-unboxed .nav-item {
   border-left: 0;
   border-right: 0;
-  border-bottom: 1px solid #dbdbdb;
+  border-bottom: 1px solid #dcdcde;
   background-color: transparent;
 }
 .login-page .new-session-tabs.custom-provider-tabs {
@@ -885,7 +885,7 @@ svg {
   flex-basis: auto;
 }
 .login-page .new-session-tabs.custom-provider-tabs li:nth-child(n + 5) {
-  border-top: 1px solid #dbdbdb;
+  border-top: 1px solid #dcdcde;
 }
 .login-page .new-session-tabs.custom-provider-tabs a {
   font-size: 16px;
@@ -893,7 +893,7 @@ svg {
 .login-page .new-session-tabs li {
   flex: 1;
   text-align: center;
-  border-left: 1px solid #dbdbdb;
+  border-left: 1px solid #dcdcde;
 }
 .login-page .new-session-tabs li:first-of-type {
   border-left: 0;
@@ -903,7 +903,7 @@ svg {
   border-top-right-radius: 4px;
 }
 .login-page .new-session-tabs li:not(.active) {
-  background-color: #fafafa;
+  background-color: #fbfafd;
 }
 .login-page .new-session-tabs li a {
   width: 100%;
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index 8e8cabbe511..a3474d2ed50 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;
@@ -203,6 +203,7 @@ body.gl-dark {
 
   --white: #{$white};
   --black: #{$black};
+  --gray-light: #{$gray-50};
 
   --svg-status-bg: #{$white};
 
@@ -255,9 +256,6 @@ $popover-arrow-outer-color: $gray-800;
 
 $secondary: $gray-600;
 
-$issues-today-bg: #333838;
-$issues-today-border: #333a40;
-
 $yiq-text-dark: $gray-50;
 $yiq-text-light: $gray-950;
 
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
index d644d8acc98..f37b426cd91 100644
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ b/app/assets/stylesheets/themes/theme_helper.scss
@@ -219,6 +219,16 @@
     }
   }
 
+  .search-sidebar {
+    .nav-link {
+      &.active,
+      &:hover {
+        background-color: rgba($gray-50, 0.8);
+        color: $gray-900;
+      }
+    }
+  }
+
   // Sidebar
   .nav-sidebar li.active > a {
     color: $gray-900;