Merge branch '300424-typescale' into 'master'

Mostly adequate docsite typescale update

See merge request gitlab-org/gitlab-docs!1764

32 files changed, 3020 insertions, 1052 deletions

diff --git a/content/assets/stylesheets/_base.scss b/content/assets/stylesheets/_base.scss
new file mode 100644
index 00000000..74daac05
--- /dev/null
+++ b/content/assets/stylesheets/_base.scss
@@ -0,0 +1,37 @@
+---
+version: 1
+---
+
+@import 'variables';
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 100%;
+  height: 100%;
+}
+
+body {
+  background-color: $white;
+  color: $gray-800;
+  display: flex;
+  flex-flow: column;
+  font-size: 1rem;
+  font-family: $font-sans-serif;
+  line-height: 1.5;
+  min-height: 100%;
+  position: relative;
+  -webkit-font-smoothing: antialiased;
+}
+
+// Fluid images by default
+img {
+  display: block;
+  height: auto;
+  width: 100% \9; // Force IE10 and below to size SVG images correctly
+  max-width: 100%;
+}
diff --git a/content/assets/stylesheets/_breadcrumbs.scss b/content/assets/stylesheets/_breadcrumbs.scss
new file mode 100644
index 00000000..55c96591
--- /dev/null
+++ b/content/assets/stylesheets/_breadcrumbs.scss
@@ -0,0 +1,98 @@
+---
+version: 1
+---
+
+@import 'variables';
+@import 'mixins/breakpoints';
+
+.gl-breadcrumbs {
+  font-size: 0.75rem;
+  grid-area: breadcrumbs;
+
+  @media all and (max-width: $bp-xl) {
+    border-bottom: 0;
+    margin: 1rem 0;
+    padding: 0;
+  }
+
+  @media all and (max-width: $bp-lg) {
+    padding-top: 1rem;
+  }
+
+  img {
+    display: inline;
+    height: 0.938rem;
+    width: 0.938rem;
+  }
+
+  border-width: 0;
+  padding: 2rem 0 1rem;
+}
+
+.gl-breadcrumb-list {
+  background-color: transparent;
+  padding: 0;
+  align-items: center;
+  line-height: 1rem;
+  margin: 0;
+}
+
+@media (max-width: $bp-xs) {
+  .gl-breadcrumb-list {
+    flex-wrap: wrap;
+  }
+}
+
+.gl-breadcrumb-separator {
+  margin-top: -0.6rem;
+}
+
+.gl-breadcrumb-separator>svg {
+  margin: auto 0.5rem;
+  width: 0.5rem;
+  color: $gds-gray-1000;
+  fill: currentColor;
+}
+
+.gl-breadcrumb-avatar-tile {
+  margin-right: 0.25rem;
+  margin-top: 0.1rem;
+  margin-bottom: 0.2rem;
+  border: 1px solid $help-gray-200;
+  border-radius: 50%;
+}
+
+@media (max-width: $bp-md) {
+  .gl-breadcrumb-avatar-tile {
+    margin-left: 2rem;
+  }
+}
+
+.gl-breadcrumb-item {
+  font-size: 0.75rem;
+  line-height: 1rem;
+
+  a {
+    border-bottom: 0;
+  }
+}
+
+.gl-breadcrumb-item>a {
+  color: $gds-gray-1000;
+}
+
+@media (max-width: 575.98px) {
+  .gl-breadcrumb-item>a {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+    white-space: nowrap;
+    max-width: 8rem;
+  }
+}
+
+.gl-breadcrumb-item:last-child {
+  color: $gds-gray-950;
+  font-weight: 600;
+}
diff --git a/content/assets/stylesheets/_landing.scss b/content/assets/stylesheets/_landing.scss
index 70058cc9..a74cc470 100644
--- a/content/assets/stylesheets/_landing.scss
+++ b/content/assets/stylesheets/_landing.scss
@@ -1,11 +1,11 @@
 ---
-version: 2
+version: 4
 ---
 
 @import 'variables';
 
 .landing {
-  font-size: $landing-body-font-size;
+  font-size: $body-font-size;
   background-color: $landing-gl-gray-50;
 
   // buttons, text and utilities
@@ -24,6 +24,7 @@ version: 2
   .card {
     box-shadow: 0 0.5rem 1.5rem -0.75rem $landing-gl-blue-1000;
     border-radius: 0.25rem;
+    transition: all 0.5s;
 
     &.transparent {
       box-shadow: none;
@@ -33,6 +34,40 @@ version: 2
     .card-title {
       color: $gds-purple-900;
     }
+
+    .card-link {
+      text-decoration: none;
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 0.1rem;
+        bottom: 0;
+        left: 0;
+        background-color: $landing-gl-purple-500;
+        visibility: hidden;
+        transform: scaleX(0);
+        transition: all 0.3s ease-in-out 0s;
+      }
+
+      &:hover {
+        &::before {
+          visibility: visible;
+          transform: scaleX(1);
+        }
+      }
+    }
+
+    &:hover {
+      box-shadow: 1rem 1rem 1rem 1rem $landing-gl-blue-1000;
+    }
+  }
+
+  // images
+  img {
+    display: inline;
   }
 
   // sections
@@ -40,12 +75,11 @@ version: 2
     background-image: url('/assets/images/hero-bg.svg');
     background-repeat: no-repeat;
     background-attachment: inherit;
-    background-position: 50% 12%;
+    background-position: 50% 4%;
 
 
-    @media (max-width: $xs-width) {
+    @media (max-width: $bp-sm) {
       background-image: url('/assets/images/hero-bg-mobile.svg');
-      background-position: 50% 4%;
     }
 
     .search {
@@ -54,7 +88,7 @@ version: 2
       border-radius: 0.25rem;
       width: 65%;
 
-      @media (max-width: $md-width) {
+      @media (max-width: $bp-md) {
         width: 100%;
       }
 
@@ -63,7 +97,7 @@ version: 2
         line-height: 3.25rem;
         color: $gds-purple-900;
 
-        @media (max-width: $xs-width) {
+        @media (max-width: $bp-xs) {
           font-size: 2rem;
         }
       }
@@ -75,8 +109,12 @@ version: 2
       .search-icon {
         position: absolute;
         left: 2rem;
-        top: 8.5rem;
+        top: 6.75rem;
         z-index: 1;
+
+        @media all and (max-width: $bp-sm) {
+          top: 10rem;
+        }
       }
 
       .form-control {
@@ -308,7 +346,7 @@ version: 2
     background: radial-gradient(75.78% 75.78% at 50% 1.83%, $landing-gl-black-100 0%, $landing-gl-black-0 100%), $landing-gl-indigo-950;
     padding: 0 10rem;
 
-    @media (max-width: $md-width) {
+    @media (max-width: $bp-md) {
       padding: 0 15px;
     }
 
@@ -348,7 +386,7 @@ version: 2
     background-attachment: inherit;
     background-position: 50% 60%;
 
-    @media (max-width: $md-width) {
+    @media (max-width: $bp-md) {
       background-image: url('/assets/images/hero-bg-mobile.svg');
     }
 
@@ -357,7 +395,7 @@ version: 2
       box-shadow: 0 0 0.125rem $landing-gl-black-50, 0 0.5rem 1.5rem $landing-gl-blue-950;
       border-radius: 0.25rem;
 
-      @media (max-width: $md-width) {
+      @media (max-width: $bp-md) {
         width: 100%;
       }
     }
@@ -381,7 +419,7 @@ version: 2
     height: 3rem;
     background-color: $landing-gl-purple-550;
 
-    @media (max-width: $sm-width) {
+    @media (max-width: $bp-sm) {
       height: auto;
     }
 
diff --git a/content/assets/stylesheets/_mixins.scss b/content/assets/stylesheets/_mixins.scss
new file mode 100644
index 00000000..88e81681
--- /dev/null
+++ b/content/assets/stylesheets/_mixins.scss
@@ -0,0 +1,11 @@
+---
+version: 1
+---
+
+// Mixins
+
+@import 'mixins/functions';
+@import 'mixins/breakpoints';
+@import 'mixins/screen-reader';
+@import 'mixins/md-typography';
+@import 'mixins/spacing';
diff --git a/content/assets/stylesheets/_normalize.scss b/content/assets/stylesheets/_normalize.scss
new file mode 100644
index 00000000..c1bcfc12
--- /dev/null
+++ b/content/assets/stylesheets/_normalize.scss
@@ -0,0 +1,415 @@
+---
+version: 1
+---
+
+@import 'variables';
+
+/*! normalize.scss v0.1.0 | MIT License | based on git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: $gds-black;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type='button'], /* 1 */
+input[type='reset'],
+input[type='submit'] {
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type='checkbox'],
+input[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type='search'] {
+  box-sizing: content-box;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
diff --git a/content/assets/stylesheets/_sidebar.scss b/content/assets/stylesheets/_sidebar.scss
new file mode 100644
index 00000000..7f07a53b
--- /dev/null
+++ b/content/assets/stylesheets/_sidebar.scss
@@ -0,0 +1,178 @@
+---
+version: 1
+---
+
+@import 'variables';
+
+.global-nav {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  overflow: auto;
+  visibility: hidden;
+  .global-nav-cat.active {
+    a {
+      color: $gds-indigo-800;
+    }
+  }
+  .global-nav-content {
+    margin-top: 85px;
+    margin-bottom: 70px;
+  }
+  a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    padding-top: 7px;
+    padding-bottom: 7px;
+    padding-right: 7px;
+    &.has-collapse.active {
+      box-shadow: 0 0 0 0 inset;
+    }
+    &.active {
+      background-color: $gds-gray-100;
+      font-weight: 600;
+      box-shadow: -4px 0 0 0 inset;
+      color: $gds-indigo-800;
+      &:hover {
+        color: $gds-indigo-800;
+      }
+      &.level-1,
+      &.level-2,
+      &.level-3,
+      &.level-4 {
+        background-color: $gds-gray-200;
+      }
+    }
+  }
+  .collapse-toggle {
+    cursor: pointer;
+    display: flex;
+    padding-right: 1rem;
+    align-items: center;
+    justify-content: center;
+    &::after {
+      content: '';
+      border: solid $gds-gray-700;
+      border-width: 0 1px 1px 0;
+      display: inline-block;
+      transform: rotate(45deg);
+      width: 7px;
+      height: 7px;
+    }
+    &.collapsed {
+      &::after {
+        transform: rotate(-50deg);
+      }
+    }
+    &.active {
+      background-color: $gds-gray-200;
+      box-shadow: -4px 0 0 0 inset;
+      color: $gds-indigo-800;
+      &.section-title {
+        background-color: $gds-gray-100;
+      }
+    }
+  }
+
+  .global-nav-block {
+    font-weight: 600;
+    padding-left: 10px;
+  }
+
+  .global-nav-link,
+  .nav-link {
+    text-decoration: none;
+    &:hover {
+      color: $link-color-nav-hover;
+    }
+  }
+
+  .global-nav-link {
+    line-height: 1rem;
+    font-size: 0.875rem;
+    width: 100%;
+  }
+
+  .nav-link {
+    padding: 0;
+    display: flex;
+    justify-content: space-between;
+    a {
+      border-bottom: 0;
+    }
+  }
+
+  .nav-link:hover {
+    background-color: $link-color-bg-active;
+  }
+
+  .global-nav-block-top {
+    font-weight: 600;
+    margin-bottom: 3px;
+    margin-top: 3px;
+    a {
+      text-decoration: none;
+      text-shadow: 3px 3px 5px $link-color-bg-active;
+    }
+  }
+
+  .level-0 {
+    color: $global-nav-link-level0;
+    padding-left: 1.2rem;
+    &:visited {
+      color: $global-nav-link-level0;
+    }
+  }
+
+  .level-1 {
+    color: $global-nav-link-level1;
+    padding-left: 2.333rem;
+    &:visited {
+      color: $global-nav-link-level1;
+    }
+  }
+
+  .level-2 {
+    color: $global-nav-link-level2;
+    padding-left: 3.533rem;
+    &:visited {
+      color: $global-nav-link-level2;
+    }
+  }
+
+  .level-3 {
+    color: $global-nav-link-level3;
+    padding-left: 4.733rem;
+    &:visited {
+      color: $global-nav-link-level3;
+    }
+  }
+
+  .level-4 {
+    color: $global-nav-link-level4;
+    padding-left: 5.933rem;
+    &:visited {
+      color: $global-nav-link-level4;
+    }
+  }
+
+  .global-nav-badges {
+    fill: $gds-gray-700;
+  }
+
+  .last-updated {
+    color: $color-light-gray;
+    font-size: 13px;
+    padding-bottom: 10px;
+    text-align: right;
+  }
+}
+
+@media (min-width: $bp-lg) {
+  .mobile-nav-toggle {
+    display: none;
+    border-bottom: 0;
+  }
+}
diff --git a/content/assets/stylesheets/_tables.scss b/content/assets/stylesheets/_tables.scss
new file mode 100644
index 00000000..341baa77
--- /dev/null
+++ b/content/assets/stylesheets/_tables.scss
@@ -0,0 +1,66 @@
+---
+version: 1
+---
+
+@import 'variables';
+@import 'mixins/breakpoints';
+
+// Tables
+table {
+  margin-top: 1rem;
+  font-weight: normal;
+  letter-spacing: normal;
+  margin-bottom: 1.5em;
+  border-collapse: collapse;
+  width: 100%;
+  max-width: 100%;
+
+  @include breakpoint(md) {
+    table-layout: fixed;
+  }
+
+  @include breakpoint($max: $bp-md) {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  tr {
+    border-top: 1px solid $gray-100;
+
+
+    &:nth-child(even) {
+      background-color: $gray-10;
+    }
+
+    &:last-child {
+      border-bottom: 1px solid $gray-100;
+    }
+  }
+
+  th,
+  td {
+    padding: 1em;
+  }
+
+  th {
+    background-color: $gray-50;
+    color: $gray-900;
+    line-height: 1.25;
+    text-align: left;
+  }
+
+  td {
+    vertical-align: top;
+
+    a {
+      /* stylelint-disable declaration-no-important */
+      border-bottom: 0 !important;
+      /* stylelint-enable declaration-no-important */
+    }
+
+    .badge-drop {
+      display: none;
+    }
+  }
+}
diff --git a/content/assets/stylesheets/_typography.scss b/content/assets/stylesheets/_typography.scss
new file mode 100644
index 00000000..92ca1fca
--- /dev/null
+++ b/content/assets/stylesheets/_typography.scss
@@ -0,0 +1,560 @@
+---
+version: 1
+---
+
+// Typography
+
+@import 'variables';
+@import 'mixins/breakpoints';
+@import 'mixins/md-typography';
+@import 'mixins/spacing';
+
+// Documentation Markdown typescale
+
+.gl-markdown {
+  p,
+  ul,
+  ol,
+  pre,
+  blockquote {
+    font-size: 1rem;
+    font-weight: normal;
+    letter-spacing: normal;
+    margin-top: 0;
+    margin-bottom: 1.5em;
+  }
+
+  blockquote {
+    background-color: $gds-gray-50;
+    color: $gds-black;
+    border: solid 1px $gray-100;
+    border-radius: 0.313rem;
+    margin: 1rem 0;
+    padding: 1rem;
+
+    ul {
+      margin-bottom: 0;
+    }
+  }
+
+  ul,
+  ol {
+    margin-top: 0.5rem;
+    margin-left: 0;
+    padding-left: 1em;
+
+    li {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  ol {
+    ol {
+      list-style-type: lower-alpha;
+      ol {
+        list-style-type: lower-roman;
+      }
+    }
+  }
+
+
+  ul ul,
+  ol ol,
+  ul ol,
+  ol ul {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+  }
+
+  b,
+  strong,
+  em,
+  small {
+    line-height: 1;
+  }
+
+  sup {
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+    top: -0.5em;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  // Keyboard input
+
+  kbd {
+    background-color: $gray-700;
+    border-radius: 4px;
+    color: $white;
+    line-height: 1;
+    overflow-wrap: break-word;
+    padding: 2px 4px;
+  }
+
+  // Highlighted text
+
+  mark {
+    background-color: $blue-100;
+  }
+
+  // Code
+
+  *:not(pre) > code {
+    background-color: $gray-50;
+    border-radius: 4px;
+    line-height: 1;
+    overflow-wrap: break-word;
+    padding: 2px 4px;
+    transition: background-color 0.15s linear;
+  }
+
+  pre {
+    background-color: desaturate($theme-indigo-950, 20%);
+    border-radius: 4px;
+    color: $white;
+    padding: 1rem;
+  }
+
+  .clip-btn {
+    fill: $white;
+    background-color: $pre-code-color;
+    border: 0;
+    svg {
+      opacity: 0.5;
+      transition: opacity 0.3s ease-in;
+      pointer-events: none;
+    }
+    @media all and (max-width: $bp-sm) {
+      display: none;
+    }
+
+    &:hover {
+      svg {
+        opacity: 1;
+      }
+    }
+  }
+
+  // Badge tier
+
+  .badge-tier {
+    color: $red-500;
+    font-size: 0.75rem;
+    font-weight: 800;
+    text-transform: uppercase;
+
+    &:hover {
+      border-bottom-color: $red-700;
+      color: $red-700;
+    }
+  }
+
+  .introduced-in {
+    border-left: 4px solid $theme-indigo-200;
+    padding-left: 0.75rem;
+    margin-bottom: 1.5rem;
+
+    p {
+      font-size: 0.875rem;
+    }
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid rgba($theme-indigo-900, 0.16);
+    height: 0;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+
+    @include breakpoint(md) {
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+    }
+  }
+
+  @include gl-font-size-markdown;
+  @include gl-line-height-24;
+  @include gl-font-regular;
+  @include gl-font-weight-normal;
+
+  -webkit-font-smoothing: auto;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .gl-h1,
+  .gl-h2,
+  .gl-h3,
+  .gl-h4,
+  .gl-h5,
+  .gl-h6 {
+    @include gl-font-weight-bold;
+    @include gl-mb-3;
+
+    // Permalinks on header elements.
+    .anchor {
+      transition: all 0.3s;
+      background: url('/assets/images/icon_anchor.svg') center center / contain no-repeat;
+      opacity: 0;
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      max-height: 2rem;
+      vertical-align: middle;
+      border-bottom: 0;
+      margin-left: 0.25rem;
+      margin-top: -0.25rem;
+      border-bottom: 0;
+    }
+
+    &:hover {
+      .anchor {
+        border-bottom: 0;
+        opacity: 1;
+      }
+    }
+  }
+
+  h3,
+  h4,
+  h5,
+  h6,
+  .gl-h3,
+  .gl-h4,
+  .gl-h5,
+  .gl-h6 {
+    @include gl-mt-6;
+    @include gl-mb-3;
+  }
+
+  h1,
+  .gl-h1 {
+    @include gl-font-size-markdown-h1;
+    @include gl-line-height-32;
+    @include gl-fluid-font-size(
+      $min: $gl-font-size-markdown-h1-md,
+      $max: $gl-font-size-markdown-h1-xl
+    );
+    @include gl-fluid-line-height($min: $gl-line-height-36, $max: $gl-line-height-52);
+    @include gl-mt-0;
+  }
+
+  h2,
+  .gl-h2 {
+    @include gl-font-size-markdown-h2;
+    @include gl-line-height-28;
+    @include gl-fluid-font-size(
+      $min: $gl-font-size-markdown-h2-md,
+      $max: $gl-font-size-markdown-h2-xl
+    );
+    @include gl-fluid-line-height($min: $gl-line-height-28, $max: $gl-line-height-36);
+    @include gl-mt-6;
+  }
+
+  h3,
+  .gl-h3 {
+    @include gl-font-size-markdown-h3;
+    @include gl-line-height-24;
+    @include gl-fluid-font-size(
+      $min: $gl-font-size-markdown-h3-md,
+      $max: $gl-font-size-markdown-h3-xl
+    );
+    @include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28);
+  }
+
+  h4,
+  .gl-h4 {
+    @include gl-font-size-markdown;
+    @include gl-line-height-20;
+  }
+
+  h5,
+  .gl-h5,
+  h6,
+  .gl-h6 {
+    @include gl-font-size-markdown-sm;
+    @include gl-line-height-20;
+  }
+
+  h6,
+  .gl-h6 {
+    @include gl-text-gray-700;
+  }
+
+  p,
+  .gl-paragraph {
+    @include gl-mt-0;
+    @include gl-mb-0;
+
+    + p,
+    + .gl-paragraph {
+      @include gl-mt-5;
+    }
+
+    &.sm {
+      @include gl-font-size-markdown-sm;
+      @include gl-line-height-20;
+    }
+  }
+
+  .sm {
+    @include gl-font-size-markdown-sm;
+    @include gl-line-height-20;
+  }
+
+  .monospace {
+    @include gl-font-monospace;
+    @include gl-font-size-monospace-lg;
+    @include gl-line-height-24;
+
+    &.sm {
+      @include gl-font-size-monospace;
+      @include gl-line-height-20;
+    }
+  }
+
+  // Links
+
+  a {
+    border-bottom: 1px solid rgba($purple-700, 0.24);
+    color: $purple-700;
+    text-decoration: none;
+    transition: color 0.15s linear, border-bottom-color 0.15s linear;
+
+    &:hover {
+      border-bottom: 1px solid $purple-900;
+      color: $purple-900;
+
+      code {
+        background-color: $theme-indigo-100;
+      }
+    }
+  }
+
+  // Responsive Headers
+
+  /* stylelint-disable max-nesting-depth */
+  @mixin responsive-headers($settings) {
+    @each $property, $attribute in $settings {
+      @if type-of($attribute) == 'map' { // property is a breakpoint
+        $breakpoint: $property;
+        @if $breakpoint == $bp-xs {
+          @each $key, $value in $attribute {
+            #{$key}: #{$value};
+          }
+        } @else {
+          @media screen and (min-width: $breakpoint) {
+            @each $key, $value in $attribute {
+              #{$key}: #{$value};
+            }
+          }
+        }
+      } @else {
+        #{$property}: #{$attribute};
+      }
+    }
+  }
+  /* stylelint-enable max-nesting-depth */
+
+  // Headings
+  // For the system of .h1-.h6 classes to properly overwrite the base tag, you must include all properties transformed
+  // at every breakpoint, even if those properties are the default or assigned at an earlier breakpoint.
+
+  // Close to a 1.2 (minor third) scale at the LG breakpoint
+  $h1-properties: (
+    color: $theme-indigo-900,
+    font-weight: 600,
+    margin-top: 0,
+    text-transform: none,
+    $bp-xs : (
+      font-size : 2rem,         // 32px
+      line-height : 1,          // 32px
+      margin-bottom: 1.5rem,    // 24px
+    ),
+      $bp-sm: (
+        font-size : 2rem,         // 32px
+        line-height : 1,          // 32px
+        margin-bottom: 1.5rem,    // 24px
+      ),
+        $bp-md : (
+          font-size : 2.5rem,       // 40px
+          line-height : 1,          // 40px
+          margin-bottom: 1.5rem,    // 24px
+        ),
+          $bp-lg : (
+            font-size : 2.5rem,       // 40px
+            line-height : 1,          // 40px
+            margin-bottom: 1.5rem,    // 24px
+          )
+          ) !default;
+
+  $h2-properties: (
+    color: $theme-indigo-900,
+    font-weight: 600,
+    $bp-xs : (
+      font-size : 1.5rem,       // 24px
+      line-height : 1.25,       // 30px
+      margin-bottom: 1.5rem,    // 24px
+    ),
+      $bp-sm : (
+        font-size : 1.5rem,       // 24px
+        line-height : 1.25,       // 30px
+        margin-bottom: 1.5rem,    // 24px
+      ),
+        $bp-md : (
+          font-size : 2rem,         // 32px
+          line-height : 1,          // 32px
+          margin-bottom: 1.5rem,    // 24px
+        ),
+          $bp-lg : (
+            font-size : 2rem,         // 32px
+            line-height : 1,          // 32px
+            margin-bottom: 1.5rem,    // 24px
+          )
+          ) !default;
+
+  $h3-properties: (
+    color: $theme-indigo-900,
+    font-weight: 600,
+    text-transform: none,
+    $bp-xs : (
+      font-size : 1.25rem,      // 20px
+      line-height : 1.4,        // 28px
+      margin-bottom: 1rem,   // 20px
+    ),
+      $bp-sm : (
+        font-size : 1.25rem,      // 20px
+        line-height : 1.4,        // 28px
+        margin-bottom: 1rem,   // 20px
+      ),
+        $bp-md : (
+          font-size : 1.5rem,       // 24px
+          line-height : 1.273,      // 28px
+          margin-bottom: 1rem,   // 20px
+        ),
+          $bp-lg : (
+            font-size : 1.5rem,       // 24px
+            line-height : 1.273,      // 28px
+            margin-bottom: 1rem,      // 16px
+          )
+          ) !default;
+
+  $h4-properties: (
+    color: $theme-indigo-900,
+    text-transform: none,
+    $bp-xs : (
+      font-size : 1rem,         // 16px
+      line-height : 1.5,        // 24px
+      margin-bottom: 0.75rem,      // 12px
+    ),
+      $bp-sm : (
+        font-size : 1rem,         // 16px
+        line-height : 1.5,        // 24px
+        margin-bottom: 0.75rem,      // 12px
+      ),
+        $bp-md : (
+          font-size : 1.125rem,     // 18px
+          line-height : 1.375,      // 22px
+          margin-bottom: 0.75rem,      // 12px
+        ),
+          $bp-lg : (
+            font-size : 1.125rem,     // 18px
+            line-height : 1.375,      // 22px
+            margin-bottom: 0.75rem,      // 12px
+          )
+          ) !default;
+
+  $h5-properties: (
+    color: $theme-indigo-900,
+    font-weight: 700,
+    text-transform: none,
+    $bp-xs : (
+      font-size : 0.875rem,     // 14px
+      line-height : 1.429,      // 20px
+      margin-bottom: 0.5rem,      // 8px
+    ),
+      $bp-sm : (
+        font-size : 0.875rem,     // 14px
+        line-height : 1.429,      // 20px
+        margin-bottom: 0.5rem,      // 8px
+      ),
+        $bp-md : (
+          font-size : 1rem,         // 16px
+          line-height : 1.5,        // 24px
+          margin-bottom: 0.5rem,      // 8px
+        ),
+          $bp-lg : (
+            font-size : 1rem,         // 16px
+            line-height : 1.5,        // 24px
+            margin-bottom: 0.5rem,      // 8px
+          )
+          ) !default;
+
+  $h6-properties: (
+    color: $theme-indigo-900,
+    text-transform: none,
+    $bp-xs : (
+      font-size : 0.875rem,     // 14px
+      line-height : 1.25,       // 17.5px
+      margin-bottom : 0.25rem,  // 4px
+    ),
+      $bp-sm : (
+        font-size : 0.875rem,     // 14px
+        line-height : 1.25,       // 17.5px
+        margin-bottom : 0.25rem,  // 4px
+      ),
+        $bp-md : (
+          font-size : 0.875rem,     // 14px
+          line-height : 1.25,       // 17.5px
+          margin-bottom : 0.25rem,  // 4px
+        ),
+          $bp-lg : (
+            font-size : 0.875rem,     // 14px
+            line-height : 1.25,       // 17.5px
+            margin-bottom : 0.25rem,  // 4px
+          )
+          ) !default;
+
+  // 	Headings
+
+  // See the headings section in _variables.scss for the responsive properties.
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
+    margin-top: 2.5rem;
+    text-rendering: optimizelegibility;
+  }
+
+  h1 { @include responsive-headers($h1-properties);}
+  h2 { @include responsive-headers($h2-properties);}
+  h3 { @include responsive-headers($h3-properties);}
+  h4 { @include responsive-headers($h4-properties);}
+  h5 { @include responsive-headers($h5-properties);}
+  h6 { @include responsive-headers($h6-properties);}
+
+  // These declarations are kept separate from and placed after
+  // the previous tag-based declarations so that the classes beat the tags in
+  // the CSS cascade, and thus <h1 class="h2"> will be styled like an h2.
+  .h1 { @include responsive-headers($h1-properties);}
+  .h2 { @include responsive-headers($h2-properties);}
+  .h3 { @include responsive-headers($h3-properties);}
+  .h4 { @include responsive-headers($h4-properties);}
+  .h5 { @include responsive-headers($h5-properties);}
+  .h6 { @include responsive-headers($h6-properties);}
+}
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index dcd2ccf4..15072b60 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -1,35 +1,17 @@
-// New Breakpoints
-$xs-width: 576px;
-$sm-width: 768px;
-$md-width: 992px;
-$lg-width: 1400px;
-
-// Border colors
-$introduced-in-border-color: #e3e3e3;
-
 // Fonts
-$mono-font-family: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
 $sans-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-$body-font-size: 15px;
-$tooltip-font-size: 12px;
-$introduced-in-font-size: 13px;
-$landing-body-font-size: 16px;
-
-// Margins
-$h-margin-top: 10px;
-$h2-margin-top: 30px;
-$h-margin-bottom: 10px;
+$body-font-size: 16px;
 
 // Heights
-$page-header-height: 40px;
-$banner-height: 31px;
-$header-height: 48px;
+$page-header-height: 2.5rem;
+$banner-height: 1.938rem;
+$header-height: 3rem;
 
 // Width
 $sidebar-width: 16.66667%;
-$sidebar-mobile-width: 320px;
-$toc-width: 320px;
-$page-content-width: 980px;
+$sidebar-mobile-width: 20rem;
+$toc-width: 20rem;
+$page-content-width: 61.25rem;
 
 // GitLab colors
 // Tanuki
@@ -57,30 +39,15 @@ $gds-gray-950: #1f1f1f;
 $gds-black: #000;
 $gds-gray-1000: #666;
 
-// Transparency
-$gds-t-gray-a2: rgba($gds-black, 0.02);
-$gds-t-gray-a4: rgba($gds-black, 0.04);
-$gds-t-gray-a6: rgba($gds-black, 0.06);
-$gds-t-gray-a8: rgba($gds-black, 0.08);
-
 // Blue palette
-$gds-blue-100: #e4f0fb;
-$gds-blue-200: #b8d6f4;
-$gds-blue-300: #73afea;
-$gds-blue-400: #418cd8;
-$gds-blue-500: #1f78d1;
 $gds-blue-600: #1b69b6;
-$gds-blue-700: #17599c;
 $gds-blue-800: #134a81;
 
 // Purple palatte
-$gds-purple-50: #f4f0ff;
 $gds-purple-900: #2f2a6b;
 
 // Indigo palatte
 $gds-indigo-100: #dbdbf8;
-$gds-indigo-600: #5252b5;
-$gds-indigo-700: #41419f;
 $gds-indigo-800: #393982;
 //// end of GitLab Design System's colors ////
 
@@ -91,9 +58,7 @@ $gds-indigo-800: #393982;
 $body-color: $gds-gray-950; //font color
 $bg-overlay-color: rgba(0, 0, 0, 0.3); // body overlay
 $body-background-color: $gds-white; //body background
-$main-background-color: $gds-white; // content background
 $header-background-color: $gds-purple-900;
-$header-font-color: $gds-indigo-100;
 $header-free-trial-button-color: #cb4e18;
 
 // Link colors
@@ -130,41 +95,24 @@ $versions-link-color-bg-hover: rgba($gds-gray-200, 0.6);
 $versions-active-bg-color: $versions-link-color-bg-hover;
 
 /// Elements
-$blockquote-border-color: #dbdbdb;
-$blockquote-background-color: #fafafa;
-$blockquote-txt-color: #000;
 $h1-border-bottom: $gds-gray-700;
-$h-border-bottom: $gds-gray-300;
-$divider-color: $gds-gray-200;
 $border-color: $gds-gray-200;
-$border-color-light: $gds-gray-50;
-$table-border-color: $border-color;
-$thead-border-color: $gds-gray-200;
-$thead-background-color: $gds-gray-100;
-
-// Buttons
-$button-default-bg-hover: $gds-gray-100;
-$button-primary: #337ab7;
-$button-warning: #f0ad4e;
-$button-cta-background: rgb(230, 83, 40);
-$button-cta-background-hover: rgb(201, 61, 43);
 
 // Pajama alerts
-// $alert-info-bg: $gds-blue-100;
 $alert-info-bg: #fafafa;
-$alert-info-txt: #000;
+$alert-info-txt: $gds-black;
 $alert-info-border: #dbdbdb;
 
 $alert-success-bg: #fafafa;
-$alert-success-txt: #000;
+$alert-success-txt: $gds-black;
 $alert-success-border: #dbdbdb;
 
 $alert-warning-bg: #faf2f1;
-$alert-warning-txt: #000;
+$alert-warning-txt: $gds-black;
 $alert-warning-border: #f6d9d5;
 
 $alert-danger-bg: #faf2f1;
-$alert-danger-txt: #000;
+$alert-danger-txt: $gds-black;
 $alert-danger-border: #f6d9d5;
 
 $alert-gray-bg: $gds-gray-100;
@@ -173,10 +121,6 @@ $alert-gray-border: $gds-gray-200;
 
 //// end of colors conforming with GitLab Design System ////
 
-// Banner
-$alert-banner-background: #fba225;
-$alert-banner-text: #e14329 !important;
-
 // Badges
 $badge-tier: $color-tanuki-dark;
 $badge-tier-transparent: rgba(252, 163, 38, 0.1);
@@ -230,14 +174,7 @@ $help-gray-900: #303030;
 
 // Other colors
 $hr-border-color: $border-color;
-$pre-background-color: rgba(238, 238, 238, 0.35);
 $search-border: rgba(0, 0, 0, 0.25);
-$search-border-dark: rgba(0, 0, 0, 0.5);
-$main-box-shadow: rgba(0, 0, 0, 0.1);
-$secondary-box-shadow: rgba(0, 0, 0, 0.1);
-$text-expander-hover-color: #e1e1e1;
-$white: #fff;
-$black: #333;
 
 // Colors
 $color-white: #fff;
@@ -250,3 +187,242 @@ $youtube: #f00;
 
 // Article colors
 $article-metadata: rgb(110, 110, 110);
+
+
+// New Styles from: https://gitlab.com/gitlab-org/gitlab/-/issues/300424
+// The above styles will be slowly replaced
+
+// Breakpoints
+$bp-xs: 0 !default;
+$bp-sm: 544px !default;
+$bp-md: 768px !default;
+$bp-lg: 992px !default;
+$bp-xl: 1200px !default;
+
+$measure: 48rem;
+
+// Colors
+$green-50: #ecf4ee !default;
+$green-100: #c3e6cd !default;
+$green-200: #91d4a8 !default;
+$green-300: #52b87a !default;
+$green-400: #2da160 !default;
+$green-500: #108548 !default;
+$green-600: #217645 !default;
+$green-700: #24663b !default;
+$green-800: #0d532a !default;
+$green-900: #0a4020 !default;
+$green-950: #072b15 !default;
+
+$blue-50: #e9f3fc !default;
+$blue-100: #cbe2f9 !default;
+$blue-200: #9dc7f1 !default;
+$blue-300: #63a6e9 !default;
+$blue-400: #428fdc !default;
+$blue-500: #1f75cb !default;
+$blue-600: #1068bf !default;
+$blue-700: #0b5cad !default;
+$blue-800: #064787 !default;
+$blue-900: #033464 !default;
+$blue-950: #002850 !default;
+
+$orange-50: #fdf1dd !default;
+$orange-100: #f5d9a8 !default;
+$orange-200: #e9be74 !default;
+$orange-300: #d99530 !default;
+$orange-400: #c17d10 !default;
+$orange-500: #ab6100 !default;
+$orange-600: #9e5400 !default;
+$orange-700: #8f4700 !default;
+$orange-800: #703800 !default;
+$orange-900: #5c2900 !default;
+$orange-950: #421f00 !default;
+
+$red-50: #fcf1ef !default;
+$red-100: #fdd4cd !default;
+$red-200: #fcb5aa !default;
+$red-300: #f57f6c !default;
+$red-400: #ec5941 !default;
+$red-500: #dd2b0e !default;
+$red-600: #c91c00 !default;
+$red-700: #ae1800 !default;
+$red-800: #8d1300 !default;
+$red-900: #660e00 !default;
+$red-950: #4d0a00 !default;
+
+$purple-50: #f4f0ff !default;
+$purple-100: #e1d8f9 !default;
+$purple-200: #cbbbf2 !default;
+$purple-300: #ac93e6 !default;
+$purple-400: #9475db !default;
+$purple-500: #7b58cf !default;
+$purple-600: #694cc0 !default;
+$purple-700: #5943b6 !default;
+$purple-800: #453894 !default;
+$purple-900: #2f2a6b !default;
+$purple-950: #232150 !default;
+
+$white: #fff !default;
+$gray-10: #fafafa !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;
+
+// GitLab themes
+$theme-indigo-50: #f1f1ff !default;
+$theme-indigo-100: #dbdbf8 !default;
+$theme-indigo-200: #c7c7f2 !default;
+$theme-indigo-300: #a2a2e6 !default;
+$theme-indigo-400: #8181d7 !default;
+$theme-indigo-500: #6666c4 !default;
+$theme-indigo-600: #5252b5 !default;
+$theme-indigo-700: #41419f !default;
+$theme-indigo-800: #303083 !default;
+$theme-indigo-900: #222261 !default;
+$theme-indigo-950: #14143d !default;
+
+// Typography
+$font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !default;
+
+$font-size-sm: 0.875rem;
+
+// Gl Markdown
+
+// Fonts
+$gl-monospace-font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
+  'Courier New', 'andale mono', 'lucida console', monospace;
+$gl-regular-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu,
+  Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  'Noto Color Emoji';
+
+$gl-fonts: (
+  'monospace': $gl-monospace-font,
+  'regular': $gl-regular-font,
+);
+
+// Text
+$gl-font-weight-normal: 400;
+$gl-font-weight-bold: 600;
+
+$gl-font-weights: (
+  'normal': $gl-font-weight-normal,
+  'bold': $gl-font-weight-bold,
+);
+
+$gl-font-size-monospace: px-to-rem(13px);
+$gl-font-size-monospace-lg: px-to-rem(15px);
+$gl-font-size-monospace-sm: px-to-rem(11px);
+
+// Misc mixins
+
+@mixin gl-text-gray-700 {
+  color: $gray-700;
+}
+
+@mixin gl-text-gray-900 {
+  color: $gray-900;
+}
+
+@mixin gl-border-b-solid($hover: true) {
+  border-bottom-style: solid;
+}
+
+@mixin gl-border-b-1 {
+  border-bottom-width: $gl-border-size-1;
+}
+
+@mixin gl-border-b-gray-200 {
+  border-bottom-color: $gray-200;
+}
+
+@mixin gl-fluid-font-size($min, $max) {
+  @include gl-responsive-property('font-size', $min, $max);
+}
+
+@mixin gl-fluid-line-height($min, $max) {
+  @include gl-responsive-property('line-height', $min, $max);
+}
+
+@mixin gl-responsive-property(
+  $property,
+  $property-min,
+  $property-max,
+  $breakpoint-min: $breakpoint-md,
+  $breakpoint-max: $breakpoint-xl
+) {
+  $breakpoint-range: ($breakpoint-max - $breakpoint-min) / 1rem;
+  $property-range: ($property-max - $property-min) / 1rem;
+
+  @media (min-width: $breakpoint-min) {
+    #{$property}: calc(#{$property-min} + #{$property-range} * ((100vw - #{$breakpoint-min}) / #{$breakpoint-range}));
+  }
+
+  @media (min-width: $breakpoint-max) {
+    #{$property}: $property-max;
+  }
+}
+
+$gl-border-size-1: 1px;
+
+// Responsive breakpoints
+$breakpoint-sm: px-to-rem(576px);
+$breakpoint-md: px-to-rem(768px);
+$breakpoint-lg: px-to-rem(992px);
+$breakpoint-xl: px-to-rem(1200px);
+
+// Line height
+$gl-line-height-16: px-to-rem(16px);
+$gl-line-height-20: px-to-rem(20px);
+$gl-line-height-24: px-to-rem(24px);
+$gl-line-height-28: px-to-rem(28px);
+$gl-line-height-32: px-to-rem(32px);
+$gl-line-height-36: px-to-rem(36px);
+$gl-line-height-44: px-to-rem(44px);
+$gl-line-height-52: px-to-rem(52px);
+
+// Layout
+$grid-size: 0.5rem;
+$gl-spacing-scale-1: 0.25 * $grid-size;
+$gl-spacing-scale-2: 0.5 * $grid-size;
+$gl-spacing-scale-3: $grid-size;
+$gl-spacing-scale-4: 1.5 * $grid-size;
+$gl-spacing-scale-5: 2 * $grid-size;
+$gl-spacing-scale-6: 3 * $grid-size;
+$gl-spacing-scale-7: 4 * $grid-size;
+$gl-spacing-scale-8: 5 * $grid-size;
+$gl-spacing-scale-9: 6 * $grid-size;
+$gl-spacing-scale-10: 7 * $grid-size;
+$gl-spacing-scale-11: 8 * $grid-size;
+$gl-spacing-scale-11-5: 9 * $grid-size;
+$gl-spacing-scale-12: 10 * $grid-size;
+$gl-spacing-scale-13: 12 * $grid-size;
+$gl-spacing-scale-15: 15 * $grid-size;
+$gl-spacing-scale-20: 20 * $grid-size;
+
+// Markdown typescale
+
+// default (min-width: 0)
+$gl-font-size-markdown: px-to-rem(16px);
+$gl-font-size-markdown-sm: px-to-rem(14px);
+
+$gl-font-size-markdown-h1: px-to-rem(28px);
+$gl-font-size-markdown-h2: px-to-rem(23px);
+$gl-font-size-markdown-h3: px-to-rem(19px);
+
+// breakpoint (min-width: 768px)
+$gl-font-size-markdown-h1-md: px-to-rem(31px);
+$gl-font-size-markdown-h2-md: px-to-rem(25px);
+$gl-font-size-markdown-h3-md: px-to-rem(20px);
+
+// breakpoint (min-width: 1200px)
+$gl-font-size-markdown-h1-xl: px-to-rem(45px);
+$gl-font-size-markdown-h2-xl: px-to-rem(32px);
+$gl-font-size-markdown-h3-xl: px-to-rem(23px);
diff --git a/content/assets/stylesheets/footer.scss b/content/assets/stylesheets/footer.scss
index a0a26642..f4de162e 100644
--- a/content/assets/stylesheets/footer.scss
+++ b/content/assets/stylesheets/footer.scss
@@ -1,15 +1,18 @@
 ---
-version: 9
+version: 10
 ---
 
 @import 'variables';
 
 .footer {
   border-color: $gds-gray-100;
-  max-width: $page-content-width;
-  font-size: $body-font-size;
   a {
     color: $footer-gray-500;
+    border-bottom: 0;
+
+    &:hover {
+      border-bottom: 0;
+    }
   }
 
   .fa {
diff --git a/content/assets/stylesheets/help.scss b/content/assets/stylesheets/help.scss
index 1e3b0f10..988fdea0 100644
--- a/content/assets/stylesheets/help.scss
+++ b/content/assets/stylesheets/help.scss
@@ -1,5 +1,5 @@
 ---
-version: 4
+version: 5
 ---
 
 @import 'variables';
@@ -14,13 +14,13 @@ version: 4
   line-height: 1.333rem;
 
   .right-col {
-    @media all and (min-width: $sm-width) {
+    @media all and (min-width: $bp-sm) {
       border-left: 0.067 solid $help-gray-100;
     }
   }
 
   .help-subsection {
-    @media all and (max-width: $sm-width) {
+    @media all and (max-width: $bp-sm) {
       margin-top: 1rem;
     }
   }
diff --git a/content/assets/stylesheets/highlight.scss b/content/assets/stylesheets/highlight.scss
index a44529a9..d009fa6c 100644
--- a/content/assets/stylesheets/highlight.scss
+++ b/content/assets/stylesheets/highlight.scss
@@ -1,91 +1,11 @@
 ---
-version: 7
+version: 8
 ---
-/* https://github.com/idleberg/base16-pygments/blob/master/css/base16-ocean.dark.css */
 
 pre.highlight {
-  padding: 0;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
-  border-radius: 3px;
-  overflow-x: hidden;
-  margin: 20px 0;
-  background: #2b303b;
-  color: #eff1f5;
-
-  // Code itself
-  code {
-    padding: 13px 0 13px 15px;
-    margin-right: 36px; // 36px: the width of the .clip-btn
-    display: block;
-    color: inherit;
-    overflow-x: auto;
-    background: transparent;
-  }
-
-  .hll { background-color: #4f5b66 }
-  .c { color: #65737e } /* Comment */
-  .err { color: #bf616a } /* Error */
-  .k { color: #b48ead } /* Keyword */
-  .l { color: #d08770 } /* Literal */
-  .n { color: #eff1f5 } /* Name */
-  .o { color: #96b5b4 } /* Operator */
-  .p { color: #eff1f5 } /* Punctuation */
-  .cm { color: #65737e } /* Comment.Multiline */
-  .cp { color: #65737e } /* Comment.Preproc */
-  .c1 { color: #65737e } /* Comment.Single */
-  .cs { color: #65737e } /* Comment.Special */
-  .gd { color: #bf616a } /* Generic.Deleted */
-  .ge { font-style: italic } /* Generic.Emph */
-  .gh { color: #eff1f5; font-weight: bold } /* Generic.Heading */
-  .gi { color: #a3be8c } /* Generic.Inserted */
-  .gp { color: #65737e; font-weight: bold } /* Generic.Prompt */
-  .gs { font-weight: bold } /* Generic.Strong */
-  .gu { color: #96b5b4; font-weight: bold } /* Generic.Subheading */
-  .kc { color: #b48ead } /* Keyword.Constant */
-  .kd { color: #b48ead } /* Keyword.Declaration */
-  .kn { color: #96b5b4 } /* Keyword.Namespace */
-  .kp { color: #b48ead } /* Keyword.Pseudo */
-  .kr { color: #b48ead } /* Keyword.Reserved */
-  .kt { color: #ebcb8b } /* Keyword.Type */
-  .ld { color: #a3be8c } /* Literal.Date */
-  .m { color: #d08770 } /* Literal.Number */
-  .s { color: #a3be8c } /* Literal.String */
-  .na { color: #8fa1b3 } /* Name.Attribute */
-  .nb { color: #eff1f5 } /* Name.Builtin */
-  .nc { color: #ebcb8b } /* Name.Class */
-  .no { color: #bf616a } /* Name.Constant */
-  .nd { color: #96b5b4 } /* Name.Decorator */
-  .ni { color: #eff1f5 } /* Name.Entity */
-  .ne { color: #bf616a } /* Name.Exception */
-  .nf { color: #8fa1b3 } /* Name.Function */
-  .nl { color: #eff1f5 } /* Name.Label */
-  .nn { color: #ebcb8b } /* Name.Namespace */
-  .nx { color: #8fa1b3 } /* Name.Other */
-  .py { color: #eff1f5 } /* Name.Property */
-  .nt { color: #96b5b4 } /* Name.Tag */
-  .nv { color: #bf616a } /* Name.Variable */
-  .ow { color: #96b5b4 } /* Operator.Word */
-  .w { color: #eff1f5 } /* Text.Whitespace */
-  .mf { color: #d08770 } /* Literal.Number.Float */
-  .mh { color: #d08770 } /* Literal.Number.Hex */
-  .mi { color: #d08770 } /* Literal.Number.Integer */
-  .mo { color: #d08770 } /* Literal.Number.Oct */
-  .sb { color: #a3be8c } /* Literal.String.Backtick */
-  .sc { color: #eff1f5 } /* Literal.String.Char */
-  .sd { color: #65737e } /* Literal.String.Doc */
-  .s2 { color: #a3be8c } /* Literal.String.Double */
-  .se { color: #d08770 } /* Literal.String.Escape */
-  .sh { color: #a3be8c } /* Literal.String.Heredoc */
-  .si { color: #d08770 } /* Literal.String.Interpol */
-  .sx { color: #a3be8c } /* Literal.String.Other */
-  .sr { color: #a3be8c } /* Literal.String.Regex */
-  .s1 { color: #a3be8c } /* Literal.String.Single */
-  .ss { color: #a3be8c } /* Literal.String.Symbol */
-  .bp { color: #eff1f5 } /* Name.Builtin.Pseudo */
-  .vc { color: #bf616a } /* Name.Variable.Class */
-  .vg { color: #bf616a } /* Name.Variable.Global */
-  .vi { color: #bf616a } /* Name.Variable.Instance */
-  .il { color: #d08770 } /* Literal.Number.Integer.Long */
-
+  position: relative;
+  margin-top: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
diff --git a/content/assets/stylesheets/instantsearch.scss b/content/assets/stylesheets/instantsearch.scss
index ae0adbc1..baa51400 100644
--- a/content/assets/stylesheets/instantsearch.scss
+++ b/content/assets/stylesheets/instantsearch.scss
@@ -1,5 +1,5 @@
 ---
-version: 12
+version: 13
 ---
 
 @import 'variables';
@@ -35,7 +35,7 @@ $color12: rgba(32, 139, 196, 0.2); //link color lighter
 }
 
 .instantsearch-input {
-  @media all and (max-width: $sm-width) {
+  @media all and (max-width: $bp-sm) {
     margin-top: 40px;
   }
 }
@@ -72,7 +72,7 @@ $color12: rgba(32, 139, 196, 0.2); //link color lighter
   }
 
   .lvl0 {
-    color: $black;
+    color: $gds-black;
   }
 
   .lvl1 {
@@ -80,7 +80,7 @@ $color12: rgba(32, 139, 196, 0.2); //link color lighter
   }
 
   .lvl2 {
-    font-size: 14px;
+    font-size: 0.875rem;
     color: $color7;
   }
 
@@ -126,7 +126,7 @@ $color12: rgba(32, 139, 196, 0.2); //link color lighter
     color: $link-color;
   }
 
-  @media all and (max-width: $sm-width) {
+  @media all and (max-width: $bp-sm) {
     .hit-tag {
       width: 60px;
       height: 23px;
@@ -150,7 +150,7 @@ $color12: rgba(32, 139, 196, 0.2); //link color lighter
 .main.class {
   padding-top: 90px;
 
-  @media (max-width: $sm-width) {
+  @media (max-width: $bp-sm) {
     padding-top: 20px;
   }
 }
diff --git a/content/assets/stylesheets/mixins/_breakpoints.scss b/content/assets/stylesheets/mixins/_breakpoints.scss
new file mode 100644
index 00000000..c6918864
--- /dev/null
+++ b/content/assets/stylesheets/mixins/_breakpoints.scss
@@ -0,0 +1,38 @@
+---
+version: 1
+---
+
+// Breakpoints
+
+// @include breakpoint(sm) {};
+@mixin breakpoint($min: 0, $max: 0) {
+  $type: type-of($min);
+
+  @if $type == string {
+
+    @if $min == xs { // < 544px
+      @media only screen and (max-width: $bp-xs) { @content; }
+    } @else if $min == sm { // > 544px
+      @media only screen and (min-width: $bp-sm) { @content; }
+    } @else if $min == md { // > 768px
+      @media only screen and (min-width: $bp-md) { @content; }
+    } @else if $min == lg { // > 992px
+      @media only screen and (min-width: $bp-lg) { @content; }
+    } @else if $min == xl { // > 1200px
+      @media only screen and (min-width: $bp-xl) { @content; }
+    } @else if $min == 2x {
+      @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+      only screen and (min--moz-device-pixel-ratio: 1.5),
+      only screen and (min-device-pixel-ratio: 1.5) { @content; }
+    } @else {
+      @warn 'Breakpoint mixin supports: xs, sm, md, lg, xl, 2x';
+    }
+  } @else if $type == number {
+    // Allow for custom parameters for min and max size
+    $query: 'all' !default;
+    @if      $min != 0 and $max != 0 { $query: 'only screen and (min-width: #{$min}) and (max-width: #{$max})'; } // set both min and max
+    @else if $min != 0 and $max == 0 { $query: 'only screen and (min-width: #{$min})'; } // set just min
+    @else if $min == 0 and $max != 0 { $query: 'only screen and (max-width: #{$max})'; } // set just max
+    @media #{$query} { @content; }
+  }
+}
diff --git a/content/assets/stylesheets/mixins/_functions.scss b/content/assets/stylesheets/mixins/_functions.scss
new file mode 100644
index 00000000..0a7aec9f
--- /dev/null
+++ b/content/assets/stylesheets/mixins/_functions.scss
@@ -0,0 +1,55 @@
+---
+version: 1
+---
+
+/*
+* SASS preserves units in arithmetic operations. For example:
+* 12em * 0 = 0em. This function return the unit of a numeric value.
+*
+* For more examples, see: https://codepen.io/paulgv/pen/XWrqMgQ
+*/
+@function extract-unit($number) {
+  @return $number * 0 + 1;
+}
+
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number / extract-unit($number);
+  }
+
+  @return $number;
+}
+
+@function single-unit-rem($value, $font-size-base) {
+  @if (extract-unit($value) != 1px) {
+    @return $value;
+  }
+
+  $converted: $value / $font-size-base;
+
+  @return strip-unit($converted) * 1rem;
+}
+
+@function multiple-units-rem($values, $font-size-base) {
+  $rem-values: ();
+
+  @each $value in $values {
+    $rem-values: append($rem-values, single-unit-rem($value, $font-size-base));
+  }
+
+  @return $rem-values;
+}
+
+@function px-to-rem($px, $font-size-base: 16px) {
+  @if type-of($px) == 'number' {
+    @return single-unit-rem($px, $font-size-base);
+  } @else if type-of($px) == 'list' {
+    @return multiple-units-rem($px, $font-size-base);
+  } @else {
+    @return $px;
+  }
+}
+
+@function if-important($important) {
+  @return #{if($important, '!important', '')};
+}
diff --git a/content/assets/stylesheets/mixins/_md-typography.scss b/content/assets/stylesheets/mixins/_md-typography.scss
new file mode 100644
index 00000000..c937f1f6
--- /dev/null
+++ b/content/assets/stylesheets/mixins/_md-typography.scss
@@ -0,0 +1,178 @@
+---
+version: 1
+---
+
+/**
+* Font family utility
+*
+* naming convention: gl-font-{family-name}
+* Notes:
+* - Strictly based on design system typography specs
+*/
+@mixin gl-font-monospace {
+  font-family: $gl-monospace-font;
+}
+
+@mixin gl-font-regular {
+  font-family: $gl-regular-font;
+}
+
+/**
+* Font style utility
+*
+* naming convention: gl-font-style-{family-name}
+*/
+@mixin gl-font-style-italic {
+  font-style: italic;
+}
+
+/**
+* Font size utility
+*
+* naming convention: gl-font-{type-scale-size}
+* Notes:
+* - Strictly based on design system type scale. See
+* $gl-type-scale for further references.
+*/
+@mixin gl-font-sm {
+  font-size: $gl-font-size-sm;
+}
+
+@mixin gl-font-base {
+  font-size: $gl-font-size;
+}
+
+@mixin gl-font-lg {
+  font-size: $gl-font-size-lg;
+}
+
+@mixin gl-font-size-h-display {
+  font-size: $gl-font-size-h-display;
+}
+
+@mixin gl-font-size-h1 {
+  font-size: $gl-font-size-h1;
+}
+
+@mixin gl-font-size-h2 {
+  font-size: $gl-font-size-h2;
+}
+
+@mixin gl-font-size-h-display-xl {
+  font-size: $gl-font-size-h-display-xl;
+}
+
+@mixin gl-font-size-h1-xl {
+  font-size: $gl-font-size-h1-xl;
+}
+
+@mixin gl-font-size-h2-xl {
+  font-size: $gl-font-size-h2-xl;
+}
+
+@mixin gl-font-size-monospace {
+  font-size: $gl-font-size-monospace;
+}
+
+@mixin gl-font-size-monospace-sm {
+  font-size: $gl-font-size-monospace-sm;
+}
+
+@mixin gl-font-size-monospace-lg {
+  font-size: $gl-font-size-monospace-lg;
+}
+
+@mixin gl-font-icon-size {
+  font-size: $default-icon-size;
+}
+
+@mixin gl-font-size-markdown-sm {
+  font-size: $gl-font-size-markdown-sm;
+}
+
+@mixin gl-font-size-markdown {
+  font-size: $gl-font-size-markdown;
+}
+
+@mixin gl-font-size-markdown-h1 {
+  font-size: $gl-font-size-markdown-h1;
+}
+
+@mixin gl-font-size-markdown-h2 {
+  font-size: $gl-font-size-markdown-h2;
+}
+
+@mixin gl-font-size-markdown-h3 {
+  font-size: $gl-font-size-markdown-h3;
+}
+
+@mixin gl-font-size-compact-markdown-h1 {
+  font-size: $gl-font-size-compact-markdown-h1;
+}
+
+/**
+* Font-weight utilities.
+*
+* naming convention: gl-font-weight-[bold|normal|number]
+*/
+
+@mixin gl-font-weight-100 {
+  font-weight: 100;
+}
+
+@mixin gl-font-weight-normal {
+  font-weight: $gl-font-weight-normal;
+}
+
+@mixin gl-font-weight-bold {
+  font-weight: $gl-font-weight-bold;
+}
+
+@mixin gl-sm-font-weight-bold {
+  @media (min-width: $breakpoint-sm) {
+    @include gl-font-weight-bold;
+  }
+}
+
+/**
+* Line height utilities.
+*
+* naming convention: gl-line-height-{line-height-in-pixels}
+* notes:
+* - Strictly based in gl-line-height-{n} variables
+*/
+@mixin gl-line-height-0 {
+  line-height: 0;
+}
+
+@mixin gl-line-height-normal {
+  line-height: $gl-line-height-16;
+}
+
+@mixin gl-line-height-20 {
+  line-height: $gl-line-height-20;
+}
+
+@mixin gl-line-height-24 {
+  line-height: $gl-line-height-24;
+}
+
+@mixin gl-line-height-28 {
+  line-height: $gl-line-height-28;
+}
+
+@mixin gl-line-height-32 {
+  line-height: $gl-line-height-32;
+}
+
+@mixin gl-line-height-36 {
+  line-height: $gl-line-height-36;
+}
+
+@mixin gl-line-height-52 {
+  line-height: $gl-line-height-52;
+}
+
+@mixin gl-reset-line-height {
+  line-height: inherit;
+}
diff --git a/content/assets/stylesheets/mixins/_screen-reader.scss b/content/assets/stylesheets/mixins/_screen-reader.scss
new file mode 100644
index 00000000..705dc4bc
--- /dev/null
+++ b/content/assets/stylesheets/mixins/_screen-reader.scss
@@ -0,0 +1,36 @@
+---
+version: 1
+---
+
+// Only display content to screen readers
+// See: http://a11yproject.com/posts/how-to-hide-content/
+
+@mixin sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  white-space: nowrap;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+// Credit: HTML5 Boilerplate
+
+@mixin sr-only-focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+}
+
diff --git a/content/assets/stylesheets/mixins/_spacing.scss b/content/assets/stylesheets/mixins/_spacing.scss
new file mode 100644
index 00000000..18e5ca87
--- /dev/null
+++ b/content/assets/stylesheets/mixins/_spacing.scss
@@ -0,0 +1,823 @@
+---
+version: 1
+---
+
+/**
+* Padding utilities.
+*
+* naming convention: gl-p{position}-{spacing-scale-index}
+* notes:
+* - Utilities should strictly follow $gl-spacing-scale
+*/
+@mixin gl-p-0 {
+  padding: 0;
+}
+
+@mixin gl-p-1 {
+  padding: $gl-spacing-scale-1;
+}
+
+@mixin gl-p-2 {
+  padding: $gl-spacing-scale-2;
+}
+
+@mixin gl-p-3 {
+  padding: $gl-spacing-scale-3;
+}
+
+@mixin gl-p-4 {
+  padding: $gl-spacing-scale-4;
+}
+
+@mixin gl-p-5 {
+  padding: $gl-spacing-scale-5;
+}
+
+@mixin gl-p-6 {
+  padding: $gl-spacing-scale-6;
+}
+
+@mixin gl-p-7 {
+  padding: $gl-spacing-scale-7;
+}
+
+@mixin gl-px-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+@mixin gl-px-1 {
+  padding-left: $gl-spacing-scale-1;
+  padding-right: $gl-spacing-scale-1;
+}
+
+@mixin gl-px-2 {
+  padding-left: $gl-spacing-scale-2;
+  padding-right: $gl-spacing-scale-2;
+}
+
+@mixin gl-px-3 {
+  padding-left: $gl-spacing-scale-3;
+  padding-right: $gl-spacing-scale-3;
+}
+
+@mixin gl-px-4 {
+  padding-left: $gl-spacing-scale-4;
+  padding-right: $gl-spacing-scale-4;
+}
+
+@mixin gl-px-5 {
+  padding-left: $gl-spacing-scale-5;
+  padding-right: $gl-spacing-scale-5;
+}
+
+@mixin gl-px-6 {
+  padding-left: $gl-spacing-scale-6;
+  padding-right: $gl-spacing-scale-6;
+}
+
+@mixin gl-px-7 {
+  padding-left: $gl-spacing-scale-7;
+  padding-right: $gl-spacing-scale-7;
+}
+
+@mixin gl-px-8 {
+  padding-left: $gl-spacing-scale-8;
+  padding-right: $gl-spacing-scale-8;
+}
+
+@mixin gl-pr-0 {
+  padding-right: 0;
+}
+
+@mixin gl-pr-1 {
+  padding-right: $gl-spacing-scale-1;
+}
+
+@mixin gl-pr-2 {
+  padding-right: $gl-spacing-scale-2;
+}
+
+@mixin gl-pr-3 {
+  padding-right: $gl-spacing-scale-3;
+}
+
+@mixin gl-pr-4 {
+  padding-right: $gl-spacing-scale-4;
+}
+
+@mixin gl-pr-5 {
+  padding-right: $gl-spacing-scale-5;
+}
+
+@mixin gl-pr-6 {
+  padding-right: $gl-spacing-scale-6;
+}
+
+@mixin gl-pr-7 {
+  padding-right: $gl-spacing-scale-7;
+}
+
+@mixin gl-pr-8 {
+  padding-right: $gl-spacing-scale-8;
+}
+
+@mixin gl-pr-9 {
+  padding-right: $gl-spacing-scale-9;
+}
+
+@mixin gl-pl-0 {
+  padding-left: 0;
+}
+
+@mixin gl-pl-1 {
+  padding-left: $gl-spacing-scale-1;
+}
+
+@mixin gl-pl-2 {
+  padding-left: $gl-spacing-scale-2;
+}
+
+@mixin gl-pl-3 {
+  padding-left: $gl-spacing-scale-3;
+}
+
+@mixin gl-pl-4 {
+  padding-left: $gl-spacing-scale-4;
+}
+
+@mixin gl-pl-5 {
+  padding-left: $gl-spacing-scale-5;
+}
+
+@mixin gl-pl-6 {
+  padding-left: $gl-spacing-scale-6;
+}
+
+@mixin gl-pl-7 {
+  padding-left: $gl-spacing-scale-7;
+}
+
+@mixin gl-pl-9 {
+  padding-left: $gl-spacing-scale-9;
+}
+
+@mixin gl-pt-0 {
+  padding-top: 0;
+}
+
+@mixin gl-pt-1 {
+  padding-top: $gl-spacing-scale-1;
+}
+
+@mixin gl-pt-2 {
+  padding-top: $gl-spacing-scale-2;
+}
+
+@mixin gl-pt-md-2 {
+  @media (min-width: $breakpoint-md) {
+    padding-top: $gl-spacing-scale-2;
+  }
+}
+
+@mixin gl-pt-3 {
+  padding-top: $gl-spacing-scale-3;
+}
+
+@mixin gl-pt-4 {
+  padding-top: $gl-spacing-scale-4;
+}
+
+@mixin gl-pt-5 {
+  padding-top: $gl-spacing-scale-5;
+}
+
+@mixin gl-pt-6 {
+  padding-top: $gl-spacing-scale-6;
+}
+
+@mixin gl-pt-7 {
+  padding-top: $gl-spacing-scale-7;
+}
+
+@mixin gl-pt-8 {
+  padding-top: $gl-spacing-scale-8;
+}
+
+@mixin gl-pt-9 {
+  padding-top: $gl-spacing-scale-9;
+}
+
+@mixin gl-pt-12 {
+  padding-top: $gl-spacing-scale-12;
+}
+
+@mixin gl-md-pt-12 {
+  @media (min-width: $breakpoint-md) {
+    @include gl-pt-12;
+  }
+}
+
+@mixin gl-pb-0 {
+  padding-bottom: 0;
+}
+
+@mixin gl-pb-1 {
+  padding-bottom: $gl-spacing-scale-1;
+}
+
+@mixin gl-pb-2 {
+  padding-bottom: $gl-spacing-scale-2;
+}
+
+@mixin gl-pb-3 {
+  padding-bottom: $gl-spacing-scale-3;
+}
+
+@mixin gl-pb-4 {
+  padding-bottom: $gl-spacing-scale-4;
+}
+
+@mixin gl-pb-5 {
+  padding-bottom: $gl-spacing-scale-5;
+}
+
+@mixin gl-pb-6 {
+  padding-bottom: $gl-spacing-scale-6;
+}
+
+@mixin gl-pb-7 {
+  padding-bottom: $gl-spacing-scale-7;
+}
+
+@mixin gl-pb-11 {
+  padding-bottom: $gl-spacing-scale-11;
+}
+
+@mixin gl-py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+@mixin gl-py-1 {
+  padding-top: $gl-spacing-scale-1;
+  padding-bottom: $gl-spacing-scale-1;
+}
+
+@mixin gl-py-2 {
+  padding-top: $gl-spacing-scale-2;
+  padding-bottom: $gl-spacing-scale-2;
+}
+
+@mixin gl-py-3 {
+  padding-top: $gl-spacing-scale-3;
+  padding-bottom: $gl-spacing-scale-3;
+}
+
+@mixin gl-py-4 {
+  padding-top: $gl-spacing-scale-4;
+  padding-bottom: $gl-spacing-scale-4;
+}
+
+@mixin gl-py-5 {
+  padding-top: $gl-spacing-scale-5;
+  padding-bottom: $gl-spacing-scale-5;
+}
+
+@mixin gl-py-6 {
+  padding-top: $gl-spacing-scale-6;
+  padding-bottom: $gl-spacing-scale-6;
+}
+
+@mixin gl-py-7 {
+  padding-top: $gl-spacing-scale-7;
+  padding-bottom: $gl-spacing-scale-7;
+}
+
+/**
+* Margin utilities.
+*
+* naming convention: gl-m{position}-{spacing-scale-index}
+* notes:
+* - Utilities should strictly follow $gl-spacing-scale
+*/
+@mixin gl-m-0 {
+  margin: 0;
+}
+
+@mixin gl-m-2 {
+  margin: $gl-spacing-scale-2;
+}
+
+@mixin gl-m-3 {
+  margin: $gl-spacing-scale-3;
+}
+
+@mixin gl-m-4 {
+  margin: $gl-spacing-scale-4;
+}
+
+@mixin gl-m-5 {
+  margin: $gl-spacing-scale-5;
+}
+
+@mixin gl-mt-0 {
+  margin-top: 0;
+}
+
+@mixin gl-mt-1 {
+  margin-top: $gl-spacing-scale-1;
+}
+
+@mixin gl-mt-n1 {
+  margin-top: -$gl-spacing-scale-1;
+}
+
+@mixin gl-mt-md-n2 {
+  @media (min-width: $breakpoint-md) {
+    margin-top: -$gl-spacing-scale-2;
+  }
+}
+
+@mixin gl-mt-2 {
+  margin-top: $gl-spacing-scale-2;
+}
+
+@mixin gl-mt-n2 {
+  margin-top: -$gl-spacing-scale-2;
+}
+
+@mixin gl-mt-3 {
+  margin-top: $gl-spacing-scale-3;
+}
+
+@mixin gl-mt-n3 {
+  margin-top: -$gl-spacing-scale-3;
+}
+
+@mixin gl-mt-4 {
+  margin-top: $gl-spacing-scale-4;
+}
+
+@mixin gl-mt-5 {
+  margin-top: $gl-spacing-scale-5;
+}
+
+@mixin gl-mt-6 {
+  margin-top: $gl-spacing-scale-6;
+}
+
+@mixin gl-mt-7 {
+  margin-top: $gl-spacing-scale-7;
+}
+
+@mixin gl-mr-auto {
+  margin-right: auto;
+}
+
+@mixin gl-mr-0 {
+  margin-right: 0;
+}
+
+@mixin gl-mr-1 {
+  margin-right: $gl-spacing-scale-1;
+}
+
+@mixin gl-mr-n1 {
+  margin-right: -$gl-spacing-scale-1;
+}
+
+@mixin gl-mr-2 {
+  margin-right: $gl-spacing-scale-2;
+}
+
+@mixin gl-mr-3 {
+  margin-right: $gl-spacing-scale-3;
+}
+
+@mixin gl-mr-4 {
+  margin-right: $gl-spacing-scale-4;
+}
+
+@mixin gl-mr-n4 {
+  margin-right: -$gl-spacing-scale-4;
+}
+
+@mixin gl-mr-5 {
+  margin-right: $gl-spacing-scale-5;
+}
+
+@mixin gl-mr-6 {
+  margin-right: $gl-spacing-scale-6;
+}
+
+@mixin gl-mr-7 {
+  margin-right: $gl-spacing-scale-7;
+}
+
+@mixin gl-mb-0 {
+  margin-bottom: 0;
+}
+
+@mixin gl-mb-1 {
+  margin-bottom: $gl-spacing-scale-1;
+}
+
+@mixin gl-mb-n1 {
+  margin-bottom: -$gl-spacing-scale-1;
+}
+
+@mixin gl-mb-2 {
+  margin-bottom: $gl-spacing-scale-2;
+}
+
+@mixin gl-mb-3 {
+  margin-bottom: $gl-spacing-scale-3;
+}
+
+@mixin gl-mb-4 {
+  margin-bottom: $gl-spacing-scale-4;
+}
+
+@mixin gl-mb-5 {
+  margin-bottom: $gl-spacing-scale-5;
+}
+
+@mixin gl-mb-6 {
+  margin-bottom: $gl-spacing-scale-6;
+}
+
+@mixin gl-mb-7 {
+  margin-bottom: $gl-spacing-scale-7;
+}
+
+@mixin gl-mb-8 {
+  margin-bottom: $gl-spacing-scale-8;
+}
+
+@mixin gl-md-mb-0 {
+  @media (min-width: $breakpoint-md) {
+    @include gl-mb-0;
+  }
+}
+
+@mixin gl-ml-auto {
+  margin-left: auto;
+}
+
+@mixin gl-ml-0 {
+  margin-left: 0;
+}
+
+@mixin gl-ml-1 {
+  margin-left: $gl-spacing-scale-1;
+}
+
+@mixin gl-ml-n1 {
+  margin-left: -$gl-spacing-scale-1;
+}
+
+@mixin gl-ml-2 {
+  margin-left: $gl-spacing-scale-2;
+}
+
+@mixin gl-ml-n2 {
+  margin-left: -$gl-spacing-scale-2;
+}
+
+@mixin gl-ml-3 {
+  margin-left: $gl-spacing-scale-3;
+}
+
+@mixin gl-ml-4 {
+  margin-left: $gl-spacing-scale-4;
+}
+
+@mixin gl-ml-n4 {
+  margin-left: -$gl-spacing-scale-4;
+}
+
+@mixin gl-ml-5 {
+  margin-left: $gl-spacing-scale-5;
+}
+
+@mixin gl-ml-6 {
+  margin-left: $gl-spacing-scale-6;
+}
+
+@mixin gl-ml-7 {
+  margin-left: $gl-spacing-scale-7;
+}
+
+@mixin gl-ml-11 {
+  margin-left: $gl-spacing-scale-11;
+}
+
+@mixin gl-my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+@mixin gl-my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+@mixin gl-my-1 {
+  margin-top: $gl-spacing-scale-1;
+  margin-bottom: $gl-spacing-scale-1;
+}
+
+@mixin gl-my-2 {
+  margin-top: $gl-spacing-scale-2;
+  margin-bottom: $gl-spacing-scale-2;
+}
+
+@mixin gl-my-3 {
+  margin-top: $gl-spacing-scale-3;
+  margin-bottom: $gl-spacing-scale-3;
+}
+
+@mixin gl-my-4 {
+  margin-top: $gl-spacing-scale-4;
+  margin-bottom: $gl-spacing-scale-4;
+}
+
+@mixin gl-my-5 {
+  margin-top: $gl-spacing-scale-5;
+  margin-bottom: $gl-spacing-scale-5;
+}
+
+@mixin gl-my-6 {
+  margin-top: $gl-spacing-scale-6;
+  margin-bottom: $gl-spacing-scale-6;
+}
+
+@mixin gl-my-7 {
+  margin-top: $gl-spacing-scale-7;
+  margin-bottom: $gl-spacing-scale-7;
+}
+
+@mixin gl-my-8 {
+  margin-top: $gl-spacing-scale-8;
+  margin-bottom: $gl-spacing-scale-8;
+}
+
+@mixin gl-my-9 {
+  margin-top: $gl-spacing-scale-9;
+  margin-bottom: $gl-spacing-scale-9;
+}
+
+@mixin gl-my-11 {
+  margin-top: $gl-spacing-scale-11;
+  margin-bottom: $gl-spacing-scale-11;
+}
+
+@mixin gl-my-12 {
+  margin-top: $gl-spacing-scale-12;
+  margin-bottom: $gl-spacing-scale-12;
+}
+
+@mixin gl-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@mixin gl-mx-0 {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+@mixin gl-mx-1 {
+  margin-left: $gl-spacing-scale-1;
+  margin-right: $gl-spacing-scale-1;
+}
+
+@mixin gl-mx-2 {
+  margin-left: $gl-spacing-scale-2;
+  margin-right: $gl-spacing-scale-2;
+}
+
+@mixin gl-mx-3 {
+  margin-left: $gl-spacing-scale-3;
+  margin-right: $gl-spacing-scale-3;
+}
+
+@mixin gl-mx-4 {
+  margin-left: $gl-spacing-scale-4;
+  margin-right: $gl-spacing-scale-4;
+}
+
+@mixin gl-mx-5 {
+  margin-left: $gl-spacing-scale-5;
+  margin-right: $gl-spacing-scale-5;
+}
+
+@mixin gl-mx-6 {
+  margin-left: $gl-spacing-scale-6;
+  margin-right: $gl-spacing-scale-6;
+}
+
+@mixin gl-mx-7 {
+  margin-left: $gl-spacing-scale-7;
+  margin-right: $gl-spacing-scale-7;
+}
+
+@mixin gl-mx-8 {
+  margin-left: $gl-spacing-scale-8;
+  margin-right: $gl-spacing-scale-8;
+}
+
+/**
+* Negative margin utilities.
+*
+* naming convention: gl-m{position}-n{spacing-scale-index}
+* notes:
+* - Utilities should strictly follow $gl-spacing-scale
+*/
+@mixin gl-my-n1 {
+  margin-top: -#{$gl-spacing-scale-1};
+  margin-bottom: -#{$gl-spacing-scale-1};
+}
+
+@mixin gl-mx-n1 {
+  margin-left: -#{$gl-spacing-scale-1};
+  margin-right: -#{$gl-spacing-scale-1};
+}
+
+@mixin gl-my-n2 {
+  margin-top: -#{$gl-spacing-scale-2};
+  margin-bottom: -#{$gl-spacing-scale-2};
+}
+
+@mixin gl-mx-n2 {
+  margin-left: -#{$gl-spacing-scale-2};
+  margin-right: -#{$gl-spacing-scale-2};
+}
+
+@mixin gl-my-n3 {
+  margin-top: -#{$gl-spacing-scale-3};
+  margin-bottom: -#{$gl-spacing-scale-3};
+}
+
+@mixin gl-mx-n3 {
+  margin-left: -#{$gl-spacing-scale-3};
+  margin-right: -#{$gl-spacing-scale-3};
+}
+
+@mixin gl-my-n4 {
+  margin-top: -#{$gl-spacing-scale-4};
+  margin-bottom: -#{$gl-spacing-scale-4};
+}
+
+@mixin gl-mx-n4 {
+  margin-left: -#{$gl-spacing-scale-4};
+  margin-right: -#{$gl-spacing-scale-4};
+}
+
+/**
+* Responsive margin utilities.
+*
+* naming convention: gl-{breakpoint}-m{position}-{spacing-scale-index}
+* notes:
+* - Utilities should strictly follow $gl-spacing-scale
+*/
+
+@mixin gl-xs-mb-3 {
+  @media (max-width: $breakpoint-sm) {
+    @include gl-mb-3;
+  }
+}
+
+@mixin gl-sm-ml-3 {
+  @media (min-width: $breakpoint-sm) {
+    @include gl-ml-3;
+  }
+}
+
+@mixin gl-sm-mt-0 {
+  @media (min-width: $breakpoint-sm) {
+    @include gl-mt-0;
+  }
+}
+
+@mixin gl-sm-mt-5 {
+  @media (min-width: $breakpoint-sm) {
+    @include gl-mt-5;
+  }
+}
+
+@mixin gl-sm-mb-7 {
+  @media (min-width: $breakpoint-sm) {
+    @include gl-mb-7;
+  }
+}
+
+@mixin gl-sm-my-12 {
+  @media (min-width: $breakpoint-sm) {
+    @include gl-my-12;
+  }
+}
+
+@mixin gl-sm-mx-0 {
+  @media (min-width: $breakpoint-sm) {
+    @include gl-mx-0;
+  }
+}
+
+@mixin gl-md-mt-0 {
+  @media (min-width: $breakpoint-md) {
+    @include gl-mx-0;
+  }
+}
+
+@mixin gl-lg-mb-0 {
+  @media (min-width: $breakpoint-lg) {
+    @include gl-mb-0;
+  }
+}
+
+@mixin gl-md-mr-3 {
+  @media (min-width: $breakpoint-md) {
+    @include gl-mr-3;
+  }
+}
+
+@mixin gl-lg-mr-2 {
+  @media (min-width: $breakpoint-lg) {
+    @include gl-mr-2;
+  }
+}
+
+@mixin gl-lg-mr-3 {
+  @media (min-width: $breakpoint-lg) {
+    @include gl-mr-3;
+  }
+}
+
+@mixin gl-lg-ml-2 {
+  @media (min-width: $breakpoint-lg) {
+    @include gl-ml-2;
+  }
+}
+
+@mixin gl-lg-ml-3 {
+  @media (min-width: $breakpoint-lg) {
+    @include gl-ml-3;
+  }
+}
+
+@mixin gl-lg-mx-2 {
+  @media (min-width: $breakpoint-lg) {
+    @include gl-mx-2;
+  }
+}
+
+@mixin gl-lg-mx-3 {
+  @media (min-width: $breakpoint-lg) {
+    @include gl-mx-3;
+  }
+}
+
+@mixin gl-lg-mt-0 {
+  @media (min-width: $breakpoint-lg) {
+    @include gl-mt-0;
+  }
+}
+
+/**
+* Responsive padding utilities.
+*
+* naming convention: gl-{breakpoint}-p{position}-{spacing-scale-index}
+* notes:
+* - Utilities should strictly follow $gl-spacing-scale
+*/
+@mixin gl-sm-pr-5 {
+  @media (max-width: $breakpoint-sm) {
+    @include gl-pr-5;
+  }
+}
+
+@mixin gl-sm-pl-5 {
+  @media (max-width: $breakpoint-sm) {
+    @include gl-pl-5;
+  }
+}
+
+@mixin gl-md-pr-1 {
+  @media (min-width: $breakpoint-md) {
+    @include gl-pr-1;
+  }
+}
+
+@mixin gl-md-pr-2 {
+  @media (min-width: $breakpoint-md) {
+    @include gl-pr-2;
+  }
+}
+
+@mixin gl-lg-pr-5 {
+  @media (min-width: $breakpoint-lg) {
+    @include gl-pr-5;
+  }
+}
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 6ae49996..faa4f957 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,317 +1,41 @@
 ---
-version: 108
+version: 109
 ---
 
-@import 'variables';
+// @import 'variables';
 @import 'utilities';
 @import 'landing';
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
+@import 'normalize';
+@import 'mixins';
+@import 'variables';
+@import 'base';
+@import 'typography';
+@import 'tables';
+@import 'breadcrumbs';
+@import 'sidebar';
 
 body {
-  margin: 0;
-  padding: 0;
-  line-height: 24px;
-  font-family: $sans-font-family;
-  font-size: $body-font-size;
-  color: $body-color;
   overflow-x: hidden;
   >.wrapper {
     min-height: 100vh;
-    @media(max-width: $md-width) {
+    @media(max-width: $bp-md) {
       flex-direction: column-reverse;
       background-color: $white;
     }
-    // adds extra padding to the side-nav and main content if a banner is displayed.
-    &.show-banner .nav-wrapper,
-    &.show-banner .main {
-      padding-top: calc(#{$page-header-height} + #{$banner-height});
-    }
-  }
-}
-
-a,
-a:visited {
-  text-decoration: none;
-  color: $link-color;
-  &:hover {
-    color: $link-color-hover;
-    text-decoration: underline;
-  }
-}
-
-details {
-  summary {
-    display: list-item;
-  }
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  overflow-x: auto;
-  margin: 15px auto;
-  word-wrap: break-word;
-  clear: both;
-  thead {
-    background: $thead-background-color;
-  }
-  tbody {
-    border-top: 3px solid $gds-gray-200;
-    &:first-child {
-      border-top: 0;
-    }
-    tr>td {
-      max-width: 100%;
-      min-width: 100px;
-    }
-    code {
-      word-wrap: break-word;
-    }
-  }
-
-  td,
-  th {
-    text-align: left;
-    vertical-align: top;
-    padding: 8px;
-    border: 1px solid $table-border-color;
-    font-size: 14px;
-    .badge-small {
-      &:hover::after {
-        padding: 5px;
-      }
-    }
-  }
-  @media all and (max-width: $sm-width) {
-    display: block;
-  }
-  &.borderless-table {
-    border: 0;
-    tr,
-    td,
-    th {
-      border: 0;
-    }
-  }
-  &.center {
-    td {
-      text-align: center;
-    }
-  }
-  &.fixed-table {
-    table-layout: fixed; // use this for columns with the same width
-    thead th {
-      top: $header-height;
-      position: sticky;
-      background-color: $thead-background-color;
-      z-index: 3;
-    }
-  }
-}
-
-blockquote {
-  background-color: $blockquote-background-color;
-  color: $blockquote-txt-color;
-  border: solid 1px $blockquote-border-color;
-  border-radius: 5px;
-  margin: 1rem 0;
-  padding: 0 1rem;
-  font-size: $body-font-size;
-  .highlight {
-    background-color: $white;
-  }
-
-  p:first-child {
-    margin-top: 1rem;
-  }
-
-  // Override bootstrap
-  ol:last-child,
-  p:last-child,
-  ul:last-child {
-    margin: inherit;
-
-    li {
-      line-height: 1rem;
-      padding-top: 0.5rem;
-    }
-  }
-}
-
-kbd {
-  @include code-styles;
-}
-
-pre {
-  background-color: $pre-background-color;
-  position: relative;
-  code {
-    @include code-styles;
-  }
-  .clip-btn {
-    display: inline-block;
-    padding: 10px 10px 10px 13px;
-    right: -0.25rem;
-    top: 0;
-    cursor: pointer;
-    position: absolute;
-    fill: $white;
-    background-color: $pre-code-color;
-    border: 0;
-    outline: 0;
-    svg {
-      opacity: 0.5;
-      transition: opacity 0.3s ease-in;
-      pointer-events: none;
-    }
-    @media all and (max-width: $sm-width) {
-      display: none;
-    }
-  }
-  &:hover {
-    .clip-btn {
-      svg {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-code,
-code span {
-  font-family: $mono-font-family;
-}
-
-p code,
-li code,
-table code {
-  @include code-color;
-}
-
-a>code {
-  color: $link-code-color;
-}
-
-hr {
-  border: 0;
-  border-top: 1px solid $hr-border-color;
-  width: 100%;
-}
-
-// Make code in headers match the font size of the given header.
-// https://gitlab.com/gitlab-org/gitlab-docs/issues/107#note_36655246
-h2,
-h3,
-h4,
-h5,
-h6 {
-  line-height: 1.4;
-  padding-bottom: 5px;
-  code {
-    @include code-color;
-  }
-  &[id]::before {
-    display: block;
-    content: ' ';
-    margin-top: -75px;
-    height: 75px;
-    visibility: hidden;
-  }
-  @media all and (min-width: $sm-width) {
-    .anchor {
-      opacity: 0;
-      float: left;
-      margin-left: -30px;
-      vertical-align: bottom;
-      margin-top: 8px;
-      height: 22px;
-    }
-    &:hover .anchor {
-      opacity: 1;
-    }
   }
 }
 
-// base fonts
-// p font size = $body-font-size: 15px;
 h1 {
-  font-size: 34px;
-  font-weight: 700;
-  border-bottom: solid 2px $h1-border-bottom;
-  padding-bottom: 10px;
-  margin-top: $h-margin-top;
-  margin-bottom: $h-margin-bottom;
-  @media (max-width: $sm-width) {
-    font-size: 26px;
-  }
-  code {
-    @include code-color;
-  }
-
   .anchor {
     display: none;
   }
 }
 
-h2 {
-  font-size: 28px;
-  font-weight: 700;
-  margin-top: $h2-margin-top;
-  margin-bottom: $h-margin-bottom;
-  @media (max-width: $sm-width) {
-    font-size: 24px;
-  }
-}
-
-h3 {
-  font-size: 23px;
-  font-weight: 700;
-  margin-top: $h2-margin-top;
-  margin-bottom: $h-margin-bottom;
-  @media (max-width: $sm-width) {
-    font-size: 22px;
-  }
-}
-
-h4 {
-  font-size: 18px;
-  font-weight: 700;
-  margin-top: $h2-margin-top;
-  margin-bottom: $h-margin-bottom;
-  @media (max-width: $sm-width) {
-    font-size: 20px;
-  }
-}
-
-h5 {
-  font-size: 16px;
-  font-weight: 600;
-  margin-top: $h2-margin-top;
-  margin-bottom: $h-margin-bottom;
-  @media (max-width: $sm-width) {
-    font-size: 18px;
-  }
-}
-
-h6 {
-  font-size: 15px;
-  font-weight: 600;
-  margin-top: $h2-margin-top;
-  margin-bottom: $h-margin-bottom;
-  @media (max-width: $sm-width) {
-    font-size: 16px;
-  }
-}
-
 .main {
-  padding: 0 5%;
-  background: $main-background-color;
+  padding: 0 1rem 0 3rem;
   z-index: 1;
+
   &:not(.has-toc) {
     >.doc-nav {
       display: none;
@@ -327,7 +51,7 @@ h6 {
       &::before {
         content: '\f126';
         font-family: FontAwesome;
-        font-size: 14px;
+        font-size: 0.875rem;
         font-style: normal;
         font-weight: normal;
         padding-right: 5px;
@@ -338,100 +62,7 @@ h6 {
       }
     }
   }
-  // external link and footer social links
-  [href^='http://'],
-  [href^='https://'] {
-    &:not([href*='gitlab.com']):not(.gitlab-social) {
-      &::after {
-        content: '\f08e';
-        font-family: FontAwesome;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: normal;
-        padding-left: 5px;
-        line-height: 10px;
-      }
-    }
-  }
-  p {
-    margin: 0 0 1em;
-  }
-  ul {
-    margin-top: -8px 0;
-    margin-bottom: 0 0;
-  }
-  ol {
-    margin-top: -8px 0;
-    margin-bottom: 0 0;
-    ol {
-      list-style-type: lower-alpha;
-      ol {
-        list-style-type: lower-roman;
-      }
-    }
-  }
-  li {
-    &:not(.gl-breadcrumb-item) {
-      line-height: 1.6em;
-      padding-bottom: 0.5rem;
-      ul li:first-of-type {
-        padding-top: 12px;
-      }
-      ol li:first-of-type {
-        padding-top: 12px;
-      }
-      >ul,
-      >ol {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-    }
-  }
-  main img {
-    max-width: calc(100% - 10px);
-    max-height: 100vh;
-    border: 1px solid $gds-gray-200;
-    margin-top: 26px;
-    margin-bottom: 30px;
-    margin-right: auto;
-    margin-left: auto;
-    display: block;
-  }
-  // Override bootstrap defaults
-  .nav-tabs>li>a {
-    padding: 10px 15px;
-    display: block;
-    margin-right: 2px;
-    border-radius: 4px 4px 0 0;
-    text-decoration: none;
-    &.active {
-      background-color: $gds-white;
-    }
-  }
-  .nav-link {
-    padding: 0;
-  }
-  code {
-    word-break: normal;
-    padding: 2px 4px;
-    line-height: 22px;
-  }
-  .input-group-text {
-    background-color: transparent;
-    display: flex;
-  }
-  .footer {
-    margin-left: -40px;
-    margin-right: -40px;
-    max-width: unset;
-    .row {
-      padding-left: 20px;
-      padding-right: 40px;
-    }
-  }
-  @media (max-width: $md-width) {
-    padding: 0 10px;
-
+  @media (max-width: $bp-md) {
     &.active {
       background-color: $bg-overlay-color;
       overflow: hidden;
@@ -440,25 +71,6 @@ h6 {
   }
 }
 
-// Override Bootstraps default button (for GDS colors)
-.btn-primary {
-  background-color: $button-primary;
-}
-
-.btn-warning {
-  background-color: $button-warning;
-  color: $gds-white;
-}
-
-.btn-close {
-  padding: 0 4px;
-}
-
-// Override Bootstrap tooltip
-.tooltip .tooltip-inner {
-  font-size: $tooltip-font-size;
-}
-
 .nav-wrapper {
   background-color: $gds-white;
   display: flex;
@@ -482,7 +94,7 @@ h6 {
       .label {
         display: block;
         pointer-events: none;
-        font-size: 14px;
+        font-size: 0.875rem;
         color: $gds-gray-700;
         margin-left: 30px;
         flex-shrink: 0;
@@ -536,7 +148,7 @@ h6 {
       transform: rotate(-45deg) translateY(-4px);
     }
   }
-  @media(max-width: $md-width) {
+  @media(max-width: $bp-lg) {
     width: 0;
 
     .nav-toggle {
@@ -553,338 +165,6 @@ h6 {
   }
 }
 
-.global-nav {
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  overflow: auto;
-  visibility: hidden;
-  .global-nav-cat.active {
-    a {
-      color: $gds-indigo-800;
-    }
-  }
-  .global-nav-content {
-    margin-top: 85px;
-    margin-bottom: 70px;
-  }
-  a {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    padding-top: 7px;
-    padding-bottom: 7px;
-    padding-right: 7px;
-    &.has-collapse.active {
-      box-shadow: 0 0 0 0 inset;
-    }
-    &.active {
-      background-color: $gds-gray-100;
-      font-weight: 600;
-      box-shadow: -4px 0 0 0 inset;
-      color: $gds-indigo-800;
-      &:hover {
-        color: $gds-indigo-800;
-      }
-      &.level-1,
-      &.level-2,
-      &.level-3,
-      &.level-4 {
-        background-color: $gds-gray-200;
-      }
-    }
-  }
-  .collapse-toggle {
-    cursor: pointer;
-    display: flex;
-    padding-right: 1rem;
-    align-items: center;
-    justify-content: center;
-    &::after {
-      content: '';
-      border: solid $gds-gray-700;
-      border-width: 0 1px 1px 0;
-      display: inline-block;
-      transform: rotate(45deg);
-      width: 7px;
-      height: 7px;
-    }
-    &.collapsed {
-      &::after {
-        transform: rotate(-50deg);
-      }
-    }
-    &.active {
-      background-color: $gds-gray-200;
-      box-shadow: -4px 0 0 0 inset;
-      color: $gds-indigo-800;
-      &.section-title {
-        background-color: $gds-gray-100;
-      }
-    }
-  }
-
-  .global-nav-block {
-    font-weight: 600;
-    padding-left: 10px;
-  }
-
-  .global-nav-link,
-  .nav-link {
-    text-decoration: none;
-    &:hover {
-      color: $link-color-nav-hover;
-    }
-  }
-
-  .global-nav-link {
-    line-height: 1rem;
-    font-size: 0.875rem;
-    width: 100%;
-  }
-
-  .nav-link {
-    padding: 0;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .nav-link:hover {
-    background-color: $link-color-bg-active;
-  }
-
-  .global-nav-block-top {
-    font-weight: 600;
-    margin-bottom: 3px;
-    margin-top: 3px;
-    a {
-      text-decoration: none;
-      text-shadow: 3px 3px 5px $link-color-bg-active;
-    }
-  }
-
-  .level-0 {
-    color: $global-nav-link-level0;
-    padding-left: 1.2rem;
-    &:visited {
-      color: $global-nav-link-level0;
-    }
-  }
-
-  .level-1 {
-    color: $global-nav-link-level1;
-    padding-left: 2.333rem;
-    &:visited {
-      color: $global-nav-link-level1;
-    }
-  }
-
-  .level-2 {
-    color: $global-nav-link-level2;
-    padding-left: 3.533rem;
-    &:visited {
-      color: $global-nav-link-level2;
-    }
-  }
-
-  .level-3 {
-    color: $global-nav-link-level3;
-    padding-left: 4.733rem;
-    &:visited {
-      color: $global-nav-link-level3;
-    }
-  }
-
-  .level-4 {
-    color: $global-nav-link-level4;
-    padding-left: 5.933rem;
-    &:visited {
-      color: $global-nav-link-level4;
-    }
-  }
-
-  .global-nav-badges {
-    fill: $gds-gray-700;
-  }
-
-  .last-updated {
-    color: $color-light-gray;
-    font-size: 13px;
-    padding-bottom: 10px;
-    text-align: right;
-  }
-}
-
-
-.btn-tanuki {
-  &:hover {
-    background-color: $color-btn-tanuki;
-  }
-}
-
-@media (min-width: $md-width) {
-  .mobile-nav-toggle {
-    display: none;
-  }
-}
-
-.gl-breadcrumbs {
-  border-width: 0;
-  padding-top: 2rem;
-  padding-bottom: 1rem;
-}
-
-@media (max-width: $md-width) {
-  .gl-breadcrumbs {
-    padding-top: 1rem;
-  }
-}
-
-.gl-breadcrumb-list {
-  margin-top: 0.1rem;
-  background-color: transparent;
-  padding: 0;
-  align-items: center;
-  line-height: 1rem;
-  margin: 0;
-}
-
-@media (max-width: $xs-width) {
-  .gl-breadcrumb-list {
-    flex-wrap: wrap;
-  }
-}
-
-.gl-breadcrumb-separator {
-  margin-top: -0.2rem;
-}
-
-.gl-breadcrumb-separator>svg {
-  margin: auto 0.5rem;
-  width: 0.5rem;
-  color: $gds-gray-1000;
-  fill: currentColor;
-}
-
-.gl-breadcrumb-avatar-tile {
-  margin-right: 0.25rem;
-  margin-top: 0.1rem;
-  margin-bottom: 0.2rem;
-  border: 1px solid $help-gray-200;
-  border-radius: 50%;
-}
-
-@media (max-width: $md-width) {
-  .gl-breadcrumb-avatar-tile {
-    margin-left: 2rem;
-  }
-}
-
-.gl-breadcrumb-item {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-.gl-breadcrumb-item>a {
-  color: $gds-gray-1000;
-  code {
-    @include code-color;
-  }
-}
-
-@media (max-width:575.98px) {
-  .gl-breadcrumb-item>a {
-    display: inline-block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: top;
-    white-space: nowrap;
-    max-width: 8rem;
-  }
-}
-
-.gl-breadcrumb-item:last-child {
-  color: $gds-gray-950;
-  font-weight: 600;
-}
-
-// Permalinks on header elements.
-.anchor {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  max-height: 25px;
-  vertical-align: middle;
-  background: url('<%= @items['/assets/images/icon_anchor.svg'].path %>') center center / contain no-repeat;
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-// Version history ('Introduced in') notes
-.introduced-in {
-  font-size: $introduced-in-font-size;
-  color: $gds-black;
-  .introduced-in-content {
-    margin-top: 8px;
-    ul {
-      margin: 0;
-      padding-left: 26px;
-    }
-  }
-  .collapsing {
-    transition: none;
-  }
-}
-
-.text-expander {
-  background: url('<%= @items['/assets/images/ellipsis_h.svg'].path %>') center center / 12px no-repeat;
-  vertical-align: middle;
-  border: 1px solid $introduced-in-border-color;
-  border-radius: 4px;
-  margin-left: 8px;
-  margin-bottom: 2px;
-  width: 22px;
-  height: 16px;
-  &:hover {
-    background-color: $text-expander-hover-color;
-  }
-}
-
-// End of version history ('Introduced in') notes
-// Articles layout
-.article-metadata {
-  color: $article-metadata;
-  display: block;
-  order: -1;
-  font-style: italic;
-  margin-bottom: 15px;
-}
-
-// Embedded video
-.video-container {
-  width: 560px;
-  height: 315px;
-  position: relative;
-  padding-top: 0;
-  margin: 20px 0;
-  box-shadow: 5px 5px 10px $gds-gray-300;
-  iframe,
-  video {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-// Embedded video fallback for GitLab's /help
-.video-fallback {
-  display: none;
-}
-
 // Override bootstrap's alert color
 .alert {
   color: inherit;
@@ -970,6 +250,24 @@ h6 {
     font-size: 0.875rem;
   }
 
+  .navbar-nav {
+    margin-top: 0;
+
+    .dropdown-menu {
+      a {
+        border-bottom: 0;
+
+        &:hover {
+          border-bottom: 0;
+        }
+      }
+    }
+  }
+
+  .nav-item {
+    margin-bottom: 0;
+  }
+
   .nav-link {
     color: $gds-indigo-100;
   }
@@ -979,12 +277,23 @@ h6 {
       z-index: 1;
     }
 
+    .algolia-autocomplete {
+      @media all and (max-width: $bp-lg) {
+        width: 100%;
+        margin: 0 2.5rem 0 0.5rem;
+      }
+    }
+
     .docsearch {
       font-size: 1rem;
-      height: 32px;
-      min-width: 320px;
-      text-indent: 1rem;
-      padding: 12px 8px;
+      height: 2rem;
+      min-width: 20rem;
+      text-indent: 1.25rem;
+      padding: 0 1rem;
+
+      @media all and (max-width: $bp-sm) {
+        min-width: 100%;
+      }
     }
   }
 
@@ -992,7 +301,7 @@ h6 {
     background-color: $help-indigo-500;
   }
 
-  @media all and (max-width: $md-width) {
+  @media all and (max-width: $bp-md) {
     .btn {
       width: 100%;
     }
@@ -1003,8 +312,14 @@ h6 {
 .badges-drop {
   display: inline-block;
   cursor: pointer;
-  padding-left: 5px;
   transition: background-color 0.5s ease-in-out;
+  /* stylelint-disable declaration-no-important */
+  border-bottom: 0 !important;
+  /* stylelint-enable declaration-no-important */
+
+  &:hover {
+    border-bottom: 0;
+  }
 
   .badge-tier,
   .badge-self-managed,
@@ -1013,7 +328,7 @@ h6 {
       content: '';
       display: block;
       width: 0;
-      height: 2px;
+      height: 1px;
       transition: width 0.3s;
       opacity: 0.5;
     }
@@ -1047,77 +362,6 @@ h6 {
   }
 }
 
-h1,
-h2,
-h3,
-h4 {
-  .badge-display {
-    font-size: 11px;
-  }
-}
-
-h5,
-h6 {
-  .badge-display {
-    font-size: 10px;
-    padding: 2px 4px;
-  }
-}
-
-p,
-li {
-  .badge-display {
-    font-size: 9px;
-    padding: 1px;
-  }
-}
-
-p {
-  .badges-drop {
-    margin-left: 3px;
-    margin-right: 0;
-  }
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  .badges-drop {
-    float: none;
-  }
-}
-
-h1 {
-  @media all and (max-width: $sm-width) {
-    .badges-drop {
-      padding-top: 5px;
-    }
-  }
-}
-
-li {
-  .badges-drop {
-    margin-left: 0;
-    margin-right: 3px;
-  }
-}
-
-.badge-display {
-  text-transform: uppercase;
-  text-align: center;
-  display: inline-block;
-  color: $white;
-  margin-left: 2px;
-  border-radius: 2px;
-  font-size: 1em;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-  line-height: 1.4;
-}
-
 .badge-tier {
   color: $badge-tier;
 }
@@ -1155,16 +399,21 @@ li {
   }
 }
 
-.dotcom-false {
-  .badge-saas {
-    display: none;
-  }
+.badge-display {
+  text-transform: uppercase;
+  text-align: center;
+  display: inline-block;
+  margin-left: 2px;
+  border-radius: 2px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  line-height: 1.4;
 }
 
 //
 // Algolia search override
 // https://community.algolia.com/docsearch/styling.html
-//
 .algolia-autocomplete {
   // Scrollable search results box
   // https://gitlab.com/gitlab-org/gitlab-docs/issues/362
@@ -1173,8 +422,8 @@ li {
     overflow-x: hidden;
   }
 }
-
 // Algolia search override end
+
 //in-page styles
 .youtube {
   color: $youtube;
@@ -1206,3 +455,68 @@ li {
 .btn-cta {
   background-color: $header-free-trial-button-color;
 }
+
+h2[id]::before,
+h3[id]::before,
+h4[id]::before,
+h5[id]::before,
+h6[id]::before {
+  display: block;
+  content: ' ';
+  margin-top: -4.688rem;
+  height: 4.688rem;
+  visibility: hidden;
+}
+
+// Embedded video
+.video-container {
+  width: 35rem;
+  height: 19.688rem;
+  position: relative;
+  padding-top: 0;
+  margin: 1.25rem 0;
+  box-shadow: 0.313rem 0.313rem 0.625rem $gds-gray-300;
+  iframe,
+  video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// Embedded video fallback for GitLab's /help
+.video-fallback {
+  display: none;
+}
+
+.text-expander {
+  background: url('/assets/images/ellipsis_h.svg') center center / 12px no-repeat;
+  vertical-align: middle;
+  border: 1px solid $gray-100;
+  border-radius: 4px;
+  margin-left: 8px;
+  margin-bottom: 2px;
+  width: 22px;
+  height: 1rem;
+  &:hover {
+    background-color: $gray-200;
+  }
+}
+
+// external link and footer social links
+[href^='http://'],
+[href^='https://'] {
+  &:not([href*='gitlab.com']):not(.gitlab-social) {
+    &::after {
+      content: '\f08e';
+      font-family: FontAwesome, sans-serif;
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: normal;
+      padding-left: 5px;
+      line-height: 10px;
+    }
+  }
+}
diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss
index 74dd2eb9..669a6584 100644
--- a/content/assets/stylesheets/toc.scss
+++ b/content/assets/stylesheets/toc.scss
@@ -1,16 +1,16 @@
 ---
-version: 19
+version: 20
 ---
 @import 'variables';
 @import 'utilities';
 
 $base-nav-link-padding: 0.75rem;
 $sm-nav-link-padding: 0.25rem;
-$nav-link-font-size: 14px;
+$nav-link-font-size: 0.875rem;
 
 // ToC styles
 .table-of-contents {
-  padding: 16px 0;
+  padding: 1rem 1rem 0;
   margin-top: 35px;
 
   li {
@@ -22,12 +22,14 @@ $nav-link-font-size: 14px;
     color: $toc-link-color;
     border-radius: 0;
     border-left: 3px solid $gds-indigo-100;
+    border-bottom: 0;
 
     &:hover {
       color: $link-color-nav-hover;
       text-decoration: underline;
       background-color: transparent;
       box-shadow: none;
+      border-bottom: 0;
     }
 
     &.active {
@@ -46,9 +48,10 @@ $nav-link-font-size: 14px;
 
 .markdown-toc {
   top: 0;
-  padding-left: 16px;
 
-  @media(min-width: $md-width) {
+  @media(min-width: $bp-lg) {
+    padding-left: 1rem;
+    margin-bottom: 1.5rem;
     overflow-y: scroll;
     height: 100vh;
   }
@@ -69,14 +72,16 @@ $nav-link-font-size: 14px;
   }
 }
 
-@media(max-width: $md-width) {
+@media(max-width: $bp-lg) {
   .doc-nav {
     margin-left: -20px;
     margin-top: -55px;
   }
 
   .table-of-contents {
-    margin-top: 10px;
+    padding: 0 1rem;
+    font-size: 0.875rem;
+
     .nav-link {
       border-left: 0;
       padding: $sm-nav-link-padding;
@@ -107,7 +112,7 @@ $nav-link-font-size: 14px;
 }
 
 // wide enough to show toc but not quick nav
-@media(min-width: $md-width) {
+@media(min-width: $bp-lg) {
   .header {
     top: 0;
     left: 0;
diff --git a/content/frontend/default/components/table_of_contents.vue b/content/frontend/default/components/table_of_contents.vue
index 000023a7..78fec2c6 100644
--- a/content/frontend/default/components/table_of_contents.vue
+++ b/content/frontend/default/components/table_of_contents.vue
@@ -66,7 +66,7 @@ export default {
     <div class="table-of-contents">
       <h4 class="border-0 toc-sm d-lg-none">
         <a
-          class="d-flex text-decoration-none"
+          class="d-flex text-decoration-none border-bottom-0"
           href="#"
           role="button"
           :aria-expanded="!isCollapsed"
diff --git a/content/frontend/default/components/table_of_contents_list.vue b/content/frontend/default/components/table_of_contents_list.vue
index 9c28d4be..b6f1023d 100644
--- a/content/frontend/default/components/table_of_contents_list.vue
+++ b/content/frontend/default/components/table_of_contents_list.vue
@@ -29,7 +29,7 @@ export default {
 </script>
 <template>
   <ul class="nav nav-pills flex-column">
-    <li v-for="(item, index) in allItems" :key="`${item.text}_${index}`">
+    <li v-for="(item, index) in allItems" :key="`${item.text}_${index}`" class="mb-0">
       <a :id="item.id" class="nav-link d-block" :href="item.href" :class="item.levelClass">{{
         item.text
       }}</a>
diff --git a/content/index.erb b/content/index.erb
index 5c53055d..12c53ef5 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -160,14 +160,14 @@ title: GitLab Documentation
   </section>
 
   <!-- Self Managed-->
-  <section class="self-managed text-center pb-4 pt-1 mb-3">
+  <section class="self-managed text-center py-5 mb-3">
     <div class="container">
       <div class="row">
         <div class="col-12">
           <h2>Install self-managed GitLab</h2>
         </div>
         <div class="col-12 options">
-          <p>You’ve got options. <a href="/ee/install/">See them all <img src="/assets/images/collapse.svg" alt="" role="img" /></a></p>
+          <p>You’ve got options. <a href="/ee/install/">See them all <img src="/assets/images/collapse.svg" class="mt-n1" alt="" role="img" /></a></p>
         </div>
       </div>
 
@@ -178,7 +178,7 @@ title: GitLab Documentation
               <img class="card-img-top" src="/assets/images/docs-omnibus.svg" alt="" role="img" />
               <h5 class="card-title mb-0 pb-1">Install on Linux</h5>
               <p class="card-text">The Omnibus package includes services and tools to install GitLab without laborious configuration.</p>
-              <a href="https://about.gitlab.com/install/" class="card-link">Use the Omnibus package <img src="/assets/images/collapse.svg" alt="" role="img" /></a>
+              <a href="https://about.gitlab.com/install/" class="card-link">Use the Omnibus package <img src="/assets/images/collapse.svg" class="mt-n1" alt="" role="img" /></a>
             </div>
           </div>
         </div>
@@ -188,7 +188,7 @@ title: GitLab Documentation
               <img class="card-img-top" src="/assets/images/docs-charts.svg" alt="" role="img" />
               <h5 class="card-title mb-0 pb-1">Install on Kubernetes</h5>
               <p class="card-text">If you're using cluster management, we recommend the Helm Chart for installing cloud-native GitLab.</p>
-              <a href="/charts/" class="card-link">Use the Helm Chart <img src="/assets/images/collapse.svg" alt="" role="img" /></a>
+              <a href="/charts/" class="card-link">Use the Helm Chart <img src="/assets/images/collapse.svg" class="mt-n1" alt="" role="img" /></a>
             </div>
           </div>
         </div>
@@ -223,7 +223,7 @@ title: GitLab Documentation
   </section>
 
   <!-- Reference -->
-  <section class="reference text-center pb-3">
+  <section class="reference text-center py-5">
     <div class="container">
       <div class="row">
         <div class="col-12">
@@ -243,9 +243,9 @@ title: GitLab Documentation
             <div class="circle rounded-circle">
               <a class="text-white text-decoration-none" href="<%= ref[:url] %>">
                 <span class="d-block title pt-5"><%= ref[:title] %></span>
-                <span class="d-block sub-title">users</span>
+                <span class="d-block sub-title mt-n3">users</span>
                 <span class="d-block">
-                  <img src="/assets/images/arrow-right.svg" alt="" class="pt-4" role="img" />
+                  <img src="/assets/images/arrow-right.svg" alt="" role="img" />
                 </span>
               </a>
             </div>
@@ -258,9 +258,9 @@ title: GitLab Documentation
             <div class="circle rounded-circle">
               <a class="text-white text-decoration-none" href="<%= ref[:url] %>">
                 <span class="d-block title pt-5"><%= ref[:title] %></span>
-                <span class="d-block sub-title">users</span>
+                <span class="d-block sub-title mt-n3">users</span>
                 <span class="d-block">
-                  <img src="/assets/images/arrow-right.svg" alt="" class="pt-4" role="img" />
+                  <img src="/assets/images/arrow-right.svg" alt="" role="img" />
                 </span>
               </a>
             </div>
diff --git a/layouts/404.html b/layouts/404.html
index 9749cac9..3b91b156 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -6,7 +6,7 @@
     <link rel="canonical" href="<%= @config[:base_url] %>/404.html">
     <link rel="stylesheet" href="<%= @items['/assets/stylesheets/404.*'].path %>">
   </head>
-  <body>
+  <body class="gl-markdown">
     <%= render '/header.*' %>
     <section class="container">
       <div class="row">
diff --git a/layouts/archives.html b/layouts/archives.html
index 3728b4ea..3b345a2d 100644
--- a/layouts/archives.html
+++ b/layouts/archives.html
@@ -3,7 +3,7 @@
 <head>
 <%= render '/head.*' %>
 </head>
-<body>
+<body class="gl-markdown">
   <%= render '/gtm.*' %>
   <%= render '/header.*' %>
   <div id="js-banner"></div>
diff --git a/layouts/breadcrumbs.html b/layouts/breadcrumbs.html
index baa2d8bc..48957f17 100644
--- a/layouts/breadcrumbs.html
+++ b/layouts/breadcrumbs.html
@@ -2,8 +2,8 @@
   <% ancestor_array = ancestor_path_array(@item) unless ancestor_path_array(@item).empty? %>
     <% if ancestor_array %>
     <div class="gl-breadcrumbs d-flex w-100">
-      <img src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=15" class="gl-breadcrumb-avatar-tile" width="15" height="15" alt="">
-      <ol class="breadcrumb gl-breadcrumb-list ml-1">
+      <img src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=15" class="gl-breadcrumb-avatar-tile" alt="">
+      <ol class="breadcrumb gl-breadcrumb-list ml-1 mt-0 pl-0">
         <% ancestor_array.reverse_each do |item| %>
           <% if !item[:title].empty? %>
             <li class="gl-breadcrumb-item"><%= link_to item.key?(:title) ? "#{item[:title]}" : "Breadcrumb", item %></li>
@@ -16,7 +16,7 @@
     <% else %>
     <div class="gl-breadcrumbs d-flex w-100">
       <img src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=15" class="gl-breadcrumb-avatar-tile" width="15" height="15">
-      <ol class="breadcrumb gl-breadcrumb-list ml-1">
+      <ol class="breadcrumb gl-breadcrumb-list ml-1 mt-0 pl-0">
         <li class="gl-breadcrumb-item"><%= @item.key?(:title) ? "#{@item[:title]}" : "Current page" %></li>
       </ol>
       </div>
diff --git a/layouts/default.html b/layouts/default.html
index 83556510..ce00ca61 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -6,7 +6,7 @@
     <%= render '/head.*' %>
     <%= render '/canonical_urls.*' %>
   </head>
-  <body itemscope itemtype="http://schema.org/WebPage" data-spy="scroll" data-target="#doc-nav" data-offset="90">
+  <body class="gl-markdown" itemscope itemtype="http://schema.org/WebPage" data-spy="scroll" data-target="#doc-nav" data-offset="90">
     <%= render '/gtm.*' %>
     <%= render '/header.*' %>
     <section class="container-fluid pt-5">
@@ -36,7 +36,7 @@
           <div class="row">
             <div class="col">
               <div class="my-3 my-lg-0">
-              <a class="position-absolute text-muted mt-2 pt-1 text-decoration-none mobile-nav-toggle" href="#"><i class="fa fa-bars fa-lg" aria-hidden="true"></i> | </a>
+              <a class="position-absolute text-muted mt-2 pt-1 text-decoration-none border-bottom-0 mobile-nav-toggle" href="#"><i class="fa fa-bars fa-lg" aria-hidden="true"></i> | </a>
               <%= render '/breadcrumbs.*' %>
               </div>
             </div>
diff --git a/layouts/footer.html b/layouts/footer.html
index 36d5e657..89e3fd3d 100644
--- a/layouts/footer.html
+++ b/layouts/footer.html
@@ -1,6 +1,7 @@
-<footer class="pl-4 pr-3 border-top footer">
+<footer class="px-3 border-top footer">
   <div class="row py-2">
     <div class="col-9">
+      <img src="/assets/images/gitlab-logo.svg" alt="" aria-hidden="true" role="img">
     </div>
     <div class="col-3 p-0 m-0">
       <div class="d-none d-md-flex justify-content-end">
@@ -51,7 +52,7 @@
         <p class="text-muted">
           View <a href="<%= edit_on_gitlab(@item) %>" target="_blank" rel="noopener noreferrer"><span class="text-decoration-underline">page source</span></a> -
           Edit in <a href="<%= edit_on_gitlab(@item, editor: :webide) %>" target="_blank" rel="noopener noreferrer"><span class="text-decoration-underline">Web IDE</span></a>
-          <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer"><img src="<%= @items['/assets/images/by-sa.svg'].path %>" alt="Creative Commons License"></a>
+          <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer"><img class="d-inline pl-3" src="<%= @items['/assets/images/by-sa.svg'].path %>" alt="Creative Commons License"></a>
         </p>
       </div>
     </div>
@@ -74,4 +75,4 @@
       </ul>
     </div>
   </div>
-</footer>
+</footer>
\ No newline at end of file
diff --git a/layouts/header.html b/layouts/header.html
index b622ff10..343ad61f 100644
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -7,12 +7,12 @@
     <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarSupportedContent">
-    <ul class="navbar-nav mr-auto">
+    <ul class="navbar-nav mr-auto mb-0">
       <li class="nav-item active">
         <% if @item[:searchbar].nil? %>
           <% unless @item.identifier.to_s.split('/')[1] == 'search' %>
             <form class="form-inline my-2 my-lg-0" id="search-form" action="/search/" method="get">
-              <span class="fa fa-search form-control-feedback position-absolute ml-2 text-muted"></span>
+              <span class="fa fa-search form-control-feedback position-absolute ml-3 text-muted"></span>
               <input class="form-control mr-sm-2 docsearch border-0"  name="query" type="search" placeholder="Search the docs..." aria-label="Search">
               <input type="submit" style="visibility: hidden; position:absolute;" />
             </form>
@@ -20,7 +20,7 @@
         <% end %>
       </li>
     </ul>
-    <ul class="navbar-nav">
+    <ul class="navbar-nav mb-0">
       <li class="nav-item p-2 dropdown">
         <button class="btn dropdown-toggle text-white" type="button" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <%= version_dropdown_title %>
@@ -51,10 +51,10 @@
       </li>
       <li class="nav-item p-2">
         <% if @item.identifier.to_s.split('/')[1] == 'omnibus' %>
-        <%= render '/cta_omnibus.*' %>
-      <% else %>
-        <%= render '/cta.*' %>
-      <% end %>
+          <%= render '/cta_omnibus.*' %>
+        <% else %>
+          <%= render '/cta.*' %>
+        <% end %>
       </li>
     </ul>
   </div>
diff --git a/layouts/instantsearch.html b/layouts/instantsearch.html
index a40f2c18..fd590ac9 100644
--- a/layouts/instantsearch.html
+++ b/layouts/instantsearch.html
@@ -5,7 +5,7 @@
     <link rel="canonical" href="<%= @config[:base_url] %>/search/">
     <%= render '/instantsearch-head.*' %>
   </head>
-  <body>
+  <body class="gl-markdown">
     <%= render '/gtm.*' %>
     <%= render '/header.*' %>
     <section class="container">
diff --git a/layouts/redirect.html b/layouts/redirect.html
index e0ca9179..be8b06df 100644
--- a/layouts/redirect.html
+++ b/layouts/redirect.html
@@ -16,7 +16,7 @@
     <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic' rel='stylesheet' type='text/css'>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
   </head>
-  <body>
+  <body class="gl-markdown">
     <%= render '/header.*' %>
     <div class="wrapper pt-5">
       <div id="doc-nav" class="doc-nav"></div>
diff --git a/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap b/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
index a2e3647a..06567e10 100644
--- a/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
+++ b/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
@@ -13,7 +13,7 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
       <a
         aria-controls="markdown-toc"
         aria-expanded="true"
-        class="d-flex text-decoration-none"
+        class="d-flex text-decoration-none border-bottom-0"
         data-testid="collapse"
         href="#"
         role="button"
@@ -42,7 +42,9 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
         class="nav nav-pills flex-column my-0"
         data-testid="main-list"
       >
-        <li>
+        <li
+          class="mb-0"
+        >
           <a
             class="nav-link d-block toc-level-0"
             href="#lorem"
@@ -53,7 +55,9 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
            
           <!---->
         </li>
-        <li>
+        <li
+          class="mb-0"
+        >
           <a
             class="nav-link d-block toc-level-1"
             href="#lorem-"
@@ -64,7 +68,9 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
            
           <!---->
         </li>
-        <li>
+        <li
+          class="mb-0"
+        >
           <a
             class="nav-link d-block toc-level-0"
             href="#ipsum"
@@ -75,7 +81,9 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
            
           <!---->
         </li>
-        <li>
+        <li
+          class="mb-0"
+        >
           <a
             class="nav-link d-block toc-level-1"
             href="#dolar"
@@ -86,7 +94,9 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
            
           <!---->
         </li>
-        <li>
+        <li
+          class="mb-0"
+        >
           <a
             class="nav-link d-block toc-level-2"
             href="#sit"
@@ -97,7 +107,9 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
            
           <!---->
         </li>
-        <li>
+        <li
+          class="mb-0"
+        >
           <a
             class="nav-link d-block toc-level-2"
             href="#amit"
@@ -108,7 +120,9 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
            
           <!---->
         </li>
-        <li>
+        <li
+          class="mb-0"
+        >
           <a
             class="nav-link d-block toc-level-2"
             href="#test"
@@ -119,7 +133,9 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
            
           <!---->
         </li>
-        <li>
+        <li
+          class="mb-0"
+        >
           <a
             class="nav-link d-block toc-level-0"
             href="#test-help-and-feedback"