diff --git a/_sass/base.scss b/_sass/base.scss
index 1ea39036..839fa0d1 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -76,9 +76,11 @@ a:not([class]) {
   background-size: 1px 1px;
 
   &:hover {
-    background-image: linear-gradient(rgba($link-color, 0.45) 0%, rgba($link-color, 0.45) 100%);
+    background-image: linear-gradient(
+      rgba($link-color, 0.45) 0%,
+      rgba($link-color, 0.45) 100%
+    );
     background-size: 1px 1px;
-
   }
 }
 
@@ -88,7 +90,8 @@ code {
   line-height: $body-line-height;
 }
 
-figure {
+figure,
+pre {
   margin: 0;
 }
 
diff --git a/_sass/buttons.scss b/_sass/buttons.scss
index 05db0ed9..57660e05 100644
--- a/_sass/buttons.scss
+++ b/_sass/buttons.scss
@@ -21,7 +21,7 @@
   cursor: pointer;
   background-color: $base-button-color;
   border-width: 0;
-  border-radius: 3px;
+  border-radius: $border-radius;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
   appearance: none;
 
diff --git a/_sass/code.scss b/_sass/code.scss
index f29a97c1..97ce8f47 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -11,9 +11,11 @@ code {
   border-radius: $border-radius;
 }
 
-pre.highlight {
+pre.highlight,
+figure.highlight {
   padding: $sp-3;
   margin-bottom: 0;
+  -webkit-overflow-scrolling: touch;
   background-color: $code-background-color;
 
   code {
@@ -28,74 +30,212 @@ pre.highlight {
   border-radius: $border-radius;
 }
 
-.highlight .c { color: #586e75; } // comment //
-.highlight .err { color: #93a1a1; } // error //
-.highlight .g { color: #93a1a1; } // generic //
-.highlight .k { color: #859900; } // keyword //
-.highlight .l { color: #93a1a1; } // literal //
-.highlight .n { color: #93a1a1; } // name //
-.highlight .o { color: #859900; } // operator //
-.highlight .x { color: #cb4b16; } // other //
-.highlight .p { color: #93a1a1; } // punctuation //
-.highlight .cm { color: #586e75; } // comment.multiline //
-.highlight .cp { color: #859900; } // comment.preproc //
-.highlight .c1 { color: #586e75; } // comment.single //
-.highlight .cs { color: #859900; } // comment.special //
-.highlight .gd { color: #2aa198; } // generic.deleted //
-.highlight .ge { font-style: italic; color: #93a1a1; } // generic.emph //
-.highlight .gr { color: #dc322f; } // generic.error //
-.highlight .gh { color: #cb4b16; } // generic.heading //
-.highlight .gi { color: #859900; } // generic.inserted //
-.highlight .go { color: #93a1a1; } // generic.output //
-.highlight .gp { color: #93a1a1; } // generic.prompt //
-.highlight .gs { font-weight: bold; color: #93a1a1; } // generic.strong //
-.highlight .gu { color: #cb4b16; } // generic.subheading //
-.highlight .gt { color: #93a1a1; } // generic.traceback //
-.highlight .kc { color: #cb4b16; } // keyword.constant //
-.highlight .kd { color: #268bd2; } // keyword.declaration //
-.highlight .kn { color: #859900; } // keyword.namespace //
-.highlight .kp { color: #859900; } // keyword.pseudo //
-.highlight .kr { color: #268bd2; } // keyword.reserved //
-.highlight .kt { color: #dc322f; } // keyword.type //
-.highlight .ld { color: #93a1a1; } // literal.date //
-.highlight .m { color: #2aa198; } // literal.number //
-.highlight .s { color: #2aa198; } // literal.string //
-.highlight .na { color: #93a1a1; } // name.attribute //
-.highlight .nb { color: #b58900; } // name.builtin //
-.highlight .nc { color: #268bd2; } // name.class //
-.highlight .no { color: #cb4b16; } // name.constant //
-.highlight .nd { color: #268bd2; } // name.decorator //
-.highlight .ni { color: #cb4b16; } // name.entity //
-.highlight .ne { color: #cb4b16; } // name.exception //
-.highlight .nf { color: #268bd2; } // name.function //
-.highlight .nl { color: #93a1a1; } // name.label //
-.highlight .nn { color: #93a1a1; } // name.namespace //
-.highlight .nx { color: #555; } // name.other //
-.highlight .py { color: #93a1a1; } // name.property //
-.highlight .nt { color: #268bd2; } // name.tag //
-.highlight .nv { color: #268bd2; } // name.variable //
-.highlight .ow { color: #859900; } // operator.word //
-.highlight .w { color: #93a1a1; } // text.whitespace //
-.highlight .mf { color: #2aa198; } // literal.number.float //
-.highlight .mh { color: #2aa198; } // literal.number.hex //
-.highlight .mi { color: #2aa198; } // literal.number.integer //
-.highlight .mo { color: #2aa198; } // literal.number.oct //
-.highlight .sb { color: #586e75; } // literal.string.backtick //
-.highlight .sc { color: #2aa198; } // literal.string.char //
-.highlight .sd { color: #93a1a1; } // literal.string.doc //
-.highlight .s2 { color: #2aa198; } // literal.string.double //
-.highlight .se { color: #cb4b16; } // literal.string.escape //
-.highlight .sh { color: #93a1a1; } // literal.string.heredoc //
-.highlight .si { color: #2aa198; } // literal.string.interpol //
-.highlight .sx { color: #2aa198; } // literal.string.other //
-.highlight .sr { color: #dc322f; } // literal.string.regex //
-.highlight .s1 { color: #2aa198; } // literal.string.single //
-.highlight .ss { color: #2aa198; } // literal.string.symbol //
-.highlight .bp { color: #268bd2; } // name.builtin.pseudo //
-.highlight .vc { color: #268bd2; } // name.variable.class //
-.highlight .vg { color: #268bd2; } // name.variable.global //
-.highlight .vi { color: #268bd2; } // name.variable.instance //
-.highlight .il { color: #2aa198; } // literal.number.integer.long //
+.highlight .c {
+  color: #586e75;
+} // comment //
+.highlight .err {
+  color: #93a1a1;
+} // error //
+.highlight .g {
+  color: #93a1a1;
+} // generic //
+.highlight .k {
+  color: #859900;
+} // keyword //
+.highlight .l {
+  color: #93a1a1;
+} // literal //
+.highlight .n {
+  color: #93a1a1;
+} // name //
+.highlight .o {
+  color: #859900;
+} // operator //
+.highlight .x {
+  color: #cb4b16;
+} // other //
+.highlight .p {
+  color: #93a1a1;
+} // punctuation //
+.highlight .cm {
+  color: #586e75;
+} // comment.multiline //
+.highlight .cp {
+  color: #859900;
+} // comment.preproc //
+.highlight .c1 {
+  color: #586e75;
+} // comment.single //
+.highlight .cs {
+  color: #859900;
+} // comment.special //
+.highlight .gd {
+  color: #2aa198;
+} // generic.deleted //
+.highlight .ge {
+  font-style: italic;
+  color: #93a1a1;
+} // generic.emph //
+.highlight .gr {
+  color: #dc322f;
+} // generic.error //
+.highlight .gh {
+  color: #cb4b16;
+} // generic.heading //
+.highlight .gi {
+  color: #859900;
+} // generic.inserted //
+.highlight .go {
+  color: #93a1a1;
+} // generic.output //
+.highlight .gp {
+  color: #93a1a1;
+} // generic.prompt //
+.highlight .gs {
+  font-weight: bold;
+  color: #93a1a1;
+} // generic.strong //
+.highlight .gu {
+  color: #cb4b16;
+} // generic.subheading //
+.highlight .gt {
+  color: #93a1a1;
+} // generic.traceback //
+.highlight .kc {
+  color: #cb4b16;
+} // keyword.constant //
+.highlight .kd {
+  color: #268bd2;
+} // keyword.declaration //
+.highlight .kn {
+  color: #859900;
+} // keyword.namespace //
+.highlight .kp {
+  color: #859900;
+} // keyword.pseudo //
+.highlight .kr {
+  color: #268bd2;
+} // keyword.reserved //
+.highlight .kt {
+  color: #dc322f;
+} // keyword.type //
+.highlight .ld {
+  color: #93a1a1;
+} // literal.date //
+.highlight .m {
+  color: #2aa198;
+} // literal.number //
+.highlight .s {
+  color: #2aa198;
+} // literal.string //
+.highlight .na {
+  color: #555;
+} // name.attribute //
+.highlight .nb {
+  color: #b58900;
+} // name.builtin //
+.highlight .nc {
+  color: #268bd2;
+} // name.class //
+.highlight .no {
+  color: #cb4b16;
+} // name.constant //
+.highlight .nd {
+  color: #268bd2;
+} // name.decorator //
+.highlight .ni {
+  color: #cb4b16;
+} // name.entity //
+.highlight .ne {
+  color: #cb4b16;
+} // name.exception //
+.highlight .nf {
+  color: #268bd2;
+} // name.function //
+.highlight .nl {
+  color: #555;
+} // name.label //
+.highlight .nn {
+  color: #93a1a1;
+} // name.namespace //
+.highlight .nx {
+  color: #555;
+} // name.other //
+.highlight .py {
+  color: #93a1a1;
+} // name.property //
+.highlight .nt {
+  color: #268bd2;
+} // name.tag //
+.highlight .nv {
+  color: #268bd2;
+} // name.variable //
+.highlight .ow {
+  color: #859900;
+} // operator.word //
+.highlight .w {
+  color: #93a1a1;
+} // text.whitespace //
+.highlight .mf {
+  color: #2aa198;
+} // literal.number.float //
+.highlight .mh {
+  color: #2aa198;
+} // literal.number.hex //
+.highlight .mi {
+  color: #2aa198;
+} // literal.number.integer //
+.highlight .mo {
+  color: #2aa198;
+} // literal.number.oct //
+.highlight .sb {
+  color: #586e75;
+} // literal.string.backtick //
+.highlight .sc {
+  color: #2aa198;
+} // literal.string.char //
+.highlight .sd {
+  color: #93a1a1;
+} // literal.string.doc //
+.highlight .s2 {
+  color: #2aa198;
+} // literal.string.double //
+.highlight .se {
+  color: #cb4b16;
+} // literal.string.escape //
+.highlight .sh {
+  color: #93a1a1;
+} // literal.string.heredoc //
+.highlight .si {
+  color: #2aa198;
+} // literal.string.interpol //
+.highlight .sx {
+  color: #2aa198;
+} // literal.string.other //
+.highlight .sr {
+  color: #dc322f;
+} // literal.string.regex //
+.highlight .s1 {
+  color: #2aa198;
+} // literal.string.single //
+.highlight .ss {
+  color: #2aa198;
+} // literal.string.symbol //
+.highlight .bp {
+  color: #268bd2;
+} // name.builtin.pseudo //
+.highlight .vc {
+  color: #268bd2;
+} // name.variable.class //
+.highlight .vg {
+  color: #268bd2;
+} // name.variable.global //
+.highlight .vi {
+  color: #268bd2;
+} // name.variable.instance //
+.highlight .il {
+  color: #2aa198;
+} // literal.number.integer.long //
 
 //
 // Code examples (rendered)
@@ -104,7 +244,7 @@ pre.highlight {
 .code-example {
   padding: $sp-3;
   margin-bottom: $sp-3;
-  overflow: scroll;
+  overflow: auto;
   border: 1px solid $border-color;
   border-radius: $border-radius;
 
diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss
index 6c2e8a9c..9a0b9ea4 100644
--- a/_sass/color_schemes/dark.scss
+++ b/_sass/color_schemes/dark.scss
@@ -1,4 +1,3 @@
-
 $body-background-color: $grey-dk-300;
 $sidebar-color: $grey-dk-300;
 $border-color: $grey-dk-200;
@@ -6,9 +5,12 @@ $border-color: $grey-dk-200;
 $body-text-color: $grey-lt-300;
 $body-heading-color: $grey-lt-000;
 $nav-child-link-color: $grey-dk-000;
+$search-result-preview-color: $grey-dk-000;
 
 $link-color: $blue-000;
 $btn-primary-color: $blue-200;
 $base-button-color: $grey-dk-250;
 
 $code-background-color: $grey-dk-250;
+$search-background-color: $grey-dk-250;
+$table-background-color: $grey-dk-250;
diff --git a/_sass/content.scss b/_sass/content.scss
index 46fc2948..2940286f 100644
--- a/_sass/content.scss
+++ b/_sass/content.scss
@@ -1,9 +1,13 @@
+@charset "UTF-8";
+
 //
 // Styles for rendered markdown in the .main-content container
 //
 // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
 
 .page-content {
+  line-height: $content-line-height;
+
   a {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -19,13 +23,13 @@
     list-style-type: none;
     counter-reset: step-counter;
 
-    li {
+    > li {
       position: relative;
 
       &::before {
         position: absolute;
         top: 0.2em;
-        left: -1.5em;
+        left: -1.6em;
         color: $grey-dk-000;
         content: counter(step-counter);
         counter-increment: step-counter;
@@ -52,10 +56,10 @@
   ul {
     list-style: none;
 
-    li {
+    > li {
       &::before {
         position: absolute;
-        margin-left: -1.5em;
+        margin-left: -1.4em;
         color: $grey-dk-000;
         content: "•";
       }
@@ -109,4 +113,48 @@
     margin-left: 1em;
     font-weight: 500;
   }
+
+  .anchor-heading {
+    position: absolute;
+    right: -$sp-4;
+    width: $sp-5;
+    height: 100%;
+    padding-right: $sp-1;
+    padding-left: $sp-1;
+    overflow: visible;
+
+    @include mq(md) {
+      right: auto;
+      left: -$sp-5;
+    }
+
+    svg {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      fill: $link-color;
+      visibility: hidden;
+    }
+  }
+
+  .anchor-heading:hover,
+  h1:hover > .anchor-heading,
+  h2:hover > .anchor-heading,
+  h3:hover > .anchor-heading,
+  h4:hover > .anchor-heading,
+  h5:hover > .anchor-heading,
+  h6:hover > .anchor-heading {
+    svg {
+      visibility: visible;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+  }
 }
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
index 82064a55..9ac503b6 100644
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@@ -1,120 +1,129 @@
-// //
-// // Typography
-// //
-//
-// $body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
-// $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace;
-// $root-font-size: 16px;         // Base font-size for rems
-// $body-line-height: 1.4;
-// $body-heading-line-height: 1.15;
-//
-// //
-// // Colors
-// //
-//
-// $white: #fff;
-//
-// $grey-dk-000: #959396;
-// $grey-dk-100: #5c5962;
-// $grey-dk-200: #44434d;
-// $grey-dk-250: #302d36 !default;
-// $grey-dk-300: #27262b;
-//
-// $grey-lt-000: #f5f6fa;
-// $grey-lt-100: #eeebee;
-// $grey-lt-200: #ecebed;
-// $grey-lt-300: #e6e1e8;
-//
-// $purple-000: #7253ed;
-// $purple-100: #5e41d0;
-// $purple-200: #4e26af;
-// $purple-300: #381885;
-//
-// $blue-000: #2c84fa;
-// $blue-100: #2869e6;
-// $blue-200: #264caf;
-// $blue-300: #183385;
-//
-// $green-000: #41d693;
-// $green-100: #11b584;
-// $green-200: #009c7b;
-// $green-300: #026e57;
-//
-// $body-background-color: $white !default;
-// $sidebar-color: $grey-lt-000 !default;
-// $code-background-color: $grey-lt-000 !default;
-
-// $body-text-color: $grey-dk-100 !default;
-// $body-heading-color: $grey-dk-300 !default;
-// $nav-child-link-color: $grey-dk-100 !default;
-// $link-color: $purple-000 !default;
-// $btn-primary-color: $purple-100 !default;
-// $base-button-color: #f7f7f7 !default;
-//
-// //
-// // Media queries in pixels
-// //
-//
-// $media-queries: (
-//   xs: 320px,
-//   sm: 500px,
-//   md: 740px,
-//   lg: 1120px,
-//   xl: 1400px
-// );
-//
-// //
-// // Spacing
-// //
-//
-// $spacing-unit: 1rem; // 1rem == 16px
-//
-// $spacers: (
-//   sp-0: 0,
-//   sp-1: $spacing-unit * 0.25,
-//   sp-2: $spacing-unit * 0.5,
-//   sp-3: $spacing-unit * 0.75,
-//   sp-4: $spacing-unit,
-//   sp-5: $spacing-unit * 1.5,
-//   sp-6: $spacing-unit * 2,
-//   sp-7: $spacing-unit * 2.5,
-//   sp-8: $spacing-unit * 3,
-//   sp-9: $spacing-unit * 3.5,
-//   sp-10: $spacing-unit * 4
-// );
-//
-// $sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
-// $sp-2: map-get($spacers, sp-2); // 0.5  rem == 8px
-// $sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
-// $sp-4: map-get($spacers, sp-4); // 1    rem == 16px
-// $sp-5: map-get($spacers, sp-5); // 1.5  rem == 24px
-// $sp-6: map-get($spacers, sp-6); // 2    rem == 32px
-// $sp-7: map-get($spacers, sp-7); // 2.5  rem == 40px
-// $sp-8: map-get($spacers, sp-8); // 3    rem == 48px
-// $sp-9: map-get($spacers, sp-9); // 4    rem == 48px
-// $sp-10: map-get($spacers, sp-10); // 4.5  rem == 48px
-//
-// //
-// // Borders
-// //
-//
-// $border: 1px solid;
-// $border-radius: 4px;
-// $border-color: $grey-lt-100;
-//
-// //
-// // Grid system
-// //
-//
-// $gutter-spacing: $sp-6;
-// $gutter-spacing-sm: $sp-4;
-// $nav-width: 232px;
-// $content-width: 800px;
-//
-// $media-queries: (
-//   xs: 320px,
-//   sm: 500px,
-//   md: 740px,
-//   lg: 800px,
-//   xl: 1316px
-// );
+////
+//// Typography
+////
+
+//$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
+//$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace;
+//$root-font-size: 16px;         // Base font-size for rems
+//$body-line-height: 1.4;
+//$content-line-height: 1.5;
+//$body-heading-line-height: 1.15;
+
+////
+//// Colors
+////
+
+//$white: #fff;
+
+//$grey-dk-000: #959396;
+//$grey-dk-100: #5c5962;
+//$grey-dk-200: #44434d;
+//$grey-dk-250: #302d36;
+//$grey-dk-300: #27262b;
+
+//$grey-lt-000: #f5f6fa;
+//$grey-lt-100: #eeebee;
+//$grey-lt-200: #ecebed;
+//$grey-lt-300: #e6e1e8;
+
+//$purple-000: #7253ed;
+//$purple-100: #5e41d0;
+//$purple-200: #4e26af;
+//$purple-300: #381885;
+
+//$blue-000: #2c84fa;
+//$blue-100: #2869e6;
+//$blue-200: #264caf;
+//$blue-300: #183385;
+
+//$green-000: #41d693;
+//$green-100: #11b584;
+//$green-200: #009c7b;
+//$green-300: #026e57;
+
+//$yellow-000: #ffeb82;
+//$yellow-100: #fadf50;
+//$yellow-200: #f7d12e;
+//$yellow-300: #e7af06;
+
+//$red-000: #f77e7e;
+//$red-100: #f96e65;
+//$red-200: #e94c4c;
+//$red-300: #dd2e2e;
+
+//$body-background-color: $white;
+//$sidebar-color: $grey-lt-000;
+//$search-background-color: $white;
+//$table-background-color: $white;
+//$code-background-color: $grey-lt-000;
+
+//$body-text-color: $grey-dk-100;
+//$body-heading-color: $grey-dk-300;
+//$search-result-preview-color: $grey-dk-000;
+//$nav-child-link-color: $grey-dk-100;
+//$link-color: $purple-000;
+//$btn-primary-color: $purple-100;
+//$base-button-color: #f7f7f7;
+
+////
+//// Spacing
+////
+
+//$spacing-unit: 1rem; // 1rem == 16px
+
+//$spacers: (
+//sp-0: 0,
+//sp-1: $spacing-unit * 0.25,
+//sp-2: $spacing-unit * 0.5,
+//sp-3: $spacing-unit * 0.75,
+//sp-4: $spacing-unit,
+//sp-5: $spacing-unit * 1.5,
+//sp-6: $spacing-unit * 2,
+//sp-7: $spacing-unit * 2.5,
+//sp-8: $spacing-unit * 3,
+//sp-9: $spacing-unit * 3.5,
+//sp-10: $spacing-unit * 4
+//);
+
+//$sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
+//$sp-2: map-get($spacers, sp-2); // 0.5  rem == 8px
+//$sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
+//$sp-4: map-get($spacers, sp-4); // 1    rem == 16px
+//$sp-5: map-get($spacers, sp-5); // 1.5  rem == 24px
+//$sp-6: map-get($spacers, sp-6); // 2    rem == 32px
+//$sp-7: map-get($spacers, sp-7); // 2.5  rem == 40px
+//$sp-8: map-get($spacers, sp-8); // 3    rem == 48px
+//$sp-9: map-get($spacers, sp-9); // 4    rem == 48px
+//$sp-10: map-get($spacers, sp-10); // 4.5  rem == 48px
+
+////
+//// Borders
+////
+
+//$border: 1px solid;
+//$border-radius: 4px;
+//$border-color: $grey-lt-100;
+
+////
+//// Grid system
+////
+
+//$gutter-spacing: $sp-6;
+//$gutter-spacing-sm: $sp-4;
+//$nav-width: 264px;
+//$nav-width-md: 248px;
+//$content-width: 800px;
+//$header-height: 60px;
+//$search-results-width: 500px;
+
+////
+//// Media queries in pixels
+////
+
+//$media-queries: (
+//xs: 320px,
+//sm: 500px,
+//md: $content-width,
+//lg: $content-width + $nav-width,
+//xl: 1400px
+//);
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 27f15e9a..79169e42 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -19,17 +19,13 @@
   z-index: 100;
   display: flex;
   flex-wrap: wrap;
-  padding-top: $gutter-spacing-sm;
-  padding-bottom: $gutter-spacing-sm;
   background-color: $sidebar-color;
 
   @include mq(md) {
     flex-wrap: nowrap;
     position: absolute;
-    width: $nav-width + 16px;
+    width: $nav-width-md;
     height: 100%;
-    padding-top: $gutter-spacing * 2;
-    padding-bottom: 0;
     flex-direction: column;
     border-right: $border $border-color;
     align-items: flex-end;
@@ -48,7 +44,6 @@
     left: 0;
     width: 100%;
     height: 100%;
-    min-height: 600px;
     -webkit-overflow-scrolling: touch;
     overflow-x: hidden;
     overflow-y: scroll;
@@ -56,67 +51,138 @@
 }
 
 .main-content {
-  padding-top: $gutter-spacing-sm;
-  @include container;
-
   @include mq(md) {
     position: relative;
     max-width: $content-width;
-    padding-top: $gutter-spacing;
-    padding-bottom: $gutter-spacing;
-    padding-left: $gutter-spacing * 1.5;
-    margin-left: $nav-width;
+    margin-left: $nav-width-md;
   }
 
   @include mq(lg) {
-    padding-left: $gutter-spacing;
-    margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
+    margin-left: calc(
+      (100% - #{$nav-width + $content-width}) / 2 + #{$nav-width}
+    );
+  }
+}
+
+.js-main-content:focus {
+  outline: none;
+}
+
+.page {
+  @include container;
+  padding-top: $gutter-spacing-sm;
+  padding-bottom: $gutter-spacing-sm;
+
+  @include mq(md) {
+    padding-top: $gutter-spacing;
+    padding-bottom: $gutter-spacing;
   }
 }
 
 .page-header {
+  @include container;
+  display: none;
+  padding-top: $gutter-spacing-sm;
+  padding-bottom: $gutter-spacing-sm;
   background-color: $sidebar-color;
 
   @include mq(md) {
+    display: flex;
+    justify-content: flex-end;
+    height: $header-height;
     background-color: $body-background-color;
+    border-bottom: $border $border-color;
   }
 
-  .main-content {
-    padding-top: 0;
+  &.nav-open {
+    display: block;
 
     @include mq(md) {
       display: flex;
-      justify-content: flex-end;
-      height: 60px;
-      padding-top: $sp-4;
-      padding-bottom: $sp-4;
-      border-bottom: $border $border-color;
     }
   }
 }
 
 .navigation,
-.site-title,
+.site-header,
 .site-footer {
-
-  @include container;
-
   width: 100%;
 
   @include mq(lg) {
-    width: $nav-width + 32px;
+    width: $nav-width;
   }
 }
 
 .navigation {
+  @include container;
+
   @include mq(md) {
     padding-top: $sp-8;
+    padding-bottom: $gutter-spacing-sm;
     overflow-y: auto;
     flex: 1 1 auto;
   }
 }
 
-// stylelint-disable selector-no-type
+.site-header {
+  display: flex;
+  min-height: $header-height;
+  align-items: center;
+
+  @include mq(md) {
+    z-index: 101;
+    height: $header-height;
+    max-height: $header-height;
+    border-bottom: $border $border-color;
+  }
+}
+
+.site-title {
+  @include container;
+  flex-grow: 1;
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding-top: $sp-3;
+  padding-bottom: $sp-3;
+  color: $body-heading-color;
+  @include fs-6;
+
+  @include mq(md) {
+    padding-top: $sp-2;
+    padding-bottom: $sp-2;
+  }
+}
+
+@if variable-exists(logo) {
+  .site-logo {
+    width: 100%;
+    height: 100%;
+    background-image: url($logo);
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-size: contain;
+  }
+}
+
+.menu-button {
+  appearance: none;
+  display: flex;
+  height: 100%;
+  padding: $gutter-spacing-sm;
+  align-items: center;
+  color: $link-color;
+  text-transform: uppercase;
+  background: transparent;
+  border: 0;
+
+  @include mq(md) {
+    display: none;
+  }
+}
+
+// stylelint-disable selector-max-type
+
 body {
   position: relative;
   padding-bottom: $sp-10;
@@ -126,18 +192,19 @@ body {
     padding-bottom: 0;
   }
 }
-// stylelint-enable selector-no-type
+
+// stylelint-enable selector-max-type
 
 .site-footer {
+  @include container;
   position: absolute;
   bottom: 0;
+  left: 0;
   padding-top: $sp-4;
   padding-bottom: $sp-4;
 
   @include mq(md) {
     position: static;
-    align-self: flex-end;
     justify-self: end;
-    background-color: $sidebar-color;
   }
 }
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index 364c569a..c7749043 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -1,33 +1,11 @@
 //
 // Main nav, breadcrumb, etc...
 //
-
-.site-title {
-  display: block;
-  flex: 1 1 auto;
-  color: $body-heading-color;
-  background-color: $sidebar-color;
-
-  @include mq(md) {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 101;
-    height: 60px;
-    padding-top: $sp-4;
-    border-bottom: $border $border-color;
-  }
-}
-
 .navigation-list {
   padding: 0;
-  margin-top: $sp-4;
+  margin-top: 0;
   margin-bottom: 0;
   list-style: none;
-
-  @include mq(md) {
-    margin-top: 0;
-  }
 }
 
 .navigation-list-child-list {
@@ -90,8 +68,7 @@
 
 // Small screen nav
 
-.main-nav,
-.aux-nav {
+.main-nav {
   display: none;
 
   &.nav-open {
@@ -102,13 +79,8 @@
   }
 }
 
-.navigation-list-toggle {
-  position: absolute;
-  right: $sp-4;
-
-  @include mq(md) {
-    display: none !important;
-  }
+.aux-nav {
+  align-self: center;
 }
 
 // Breadcrumb nav
diff --git a/_sass/overrides.scss b/_sass/overrides.scss
new file mode 100644
index 00000000..21e9527d
--- /dev/null
+++ b/_sass/overrides.scss
@@ -0,0 +1,3 @@
+//
+// Custom overrides from a user.
+//
diff --git a/_sass/search.scss b/_sass/search.scss
index 32ec1dbe..bef2df73 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -5,60 +5,46 @@
 .search {
   position: relative;
   z-index: 99;
-  display: none;
   flex-grow: 1;
-  padding: $sp-2;
+  height: 100%;
   margin-bottom: $sp-3;
-  background-color: $white;
-  border-radius: 3px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.05);
 
   @include mq(md) {
-    display: block;
-    padding-top: $sp-1;
-    padding-right: 0;
-    padding-bottom: 0;
-    padding-left: 0;
     margin-bottom: 0;
-    background-color: transparent;
-    box-shadow: none;
-  }
-
-  &.nav-open {
-    display: block;
-  }
-}
-
-.search-results-wrap {
-  display: none;
-
-  &.active {
-    position: absolute;
-    top: $sp-1;
-    z-index: 100;
-    display: block;
-    width: 300px;
-    margin-top: $gutter-spacing;
-    background: lighten($body-background-color, 1%);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
   }
 }
 
 .search-input-wrap {
   display: flex;
-  background-color: $body-background-color;
+  height: 100%;
+  padding: $sp-2;
+  background-color: $search-background-color;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+
+  @include mq(md) {
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    background-color: $body-background-color;
+    border-radius: 0;
+    box-shadow: none;
+  }
 }
 
 .search-input {
+  align-self: center;
   width: 100%;
   padding-top: $sp-1;
   padding-bottom: $sp-1;
-  background-color: $body-background-color;
+  background-color: $search-background-color;
   border-top: 0;
   border-right: 0;
   border-bottom: 0;
   border-left: 0;
   order: 2;
+  @include fs-4;
 
   &:focus {
     outline: 0;
@@ -69,14 +55,9 @@
     }
   }
 
-  @include fs-5;
-
-  @include mq(sm) {
-    @include fs-3;
-  }
-
   @include mq(md) {
-    @include fs-2;
+    background-color: $body-background-color;
+    @include fs-3;
   }
 }
 
@@ -87,12 +68,34 @@
   order: 1;
 }
 
+.search-results-wrap {
+  position: absolute;
+  z-index: 100;
+  display: none;
+  width: 100%;
+  background: $search-background-color;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+
+  &.active {
+    display: block;
+  }
+
+  @include mq(md) {
+    width: $search-results-width;
+  }
+}
+
 .search-results-list {
   padding-left: 0;
   margin-top: $sp-1;
   margin-bottom: $sp-1;
   list-style: none;
-  @include fs-3;
+  @include fs-4;
+
+  @include mq(md) {
+    @include fs-3;
+  }
 }
 
 .search-results-list-item {
@@ -100,15 +103,65 @@
   margin: 0;
 }
 
-.search-results-link {
+.search-result {
   display: block;
   padding-top: $sp-1;
   padding-right: $sp-3;
   padding-bottom: $sp-1;
   padding-left: $sp-3;
 
-  &:hover {
-    color: $body-heading-color;
-    background-color: darken($body-background-color, 2%);
+  &:hover,
+  &.active {
+    background-color: $sidebar-color;
+  }
+
+  @include mq(md) {
+    padding-right: $sp-4;
+    padding-left: $sp-4;
   }
 }
+
+.search-result-title {
+  display: block;
+  padding-top: $sp-2;
+  padding-right: $sp-4;
+  padding-bottom: $sp-2;
+
+  @include mq(sm) {
+    display: inline-block;
+    width: 40%;
+    word-wrap: break-word;
+    vertical-align: top;
+  }
+}
+
+.search-result-rel-url {
+  display: block;
+  overflow: hidden;
+  color: $search-result-preview-color;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  @include fs-1;
+}
+
+.search-result-preview {
+  display: block;
+  padding-top: $sp-2;
+  padding-bottom: $sp-2;
+  padding-left: $sp-4;
+  color: $search-result-preview-color;
+  border-left: $border;
+  border-left-color: $border-color;
+  @include fs-2;
+
+  @include mq(sm) {
+    display: inline-block;
+    width: 60%;
+    vertical-align: top;
+  }
+}
+
+.search-result-highlight {
+  font-weight: bold;
+  color: $link-color;
+}
diff --git a/_sass/support/_functions.scss b/_sass/support/_functions.scss
index e9885f62..6772f4e4 100644
--- a/_sass/support/_functions.scss
+++ b/_sass/support/_functions.scss
@@ -1,10 +1,9 @@
-@function rem($size, $unit:"") {
+@function rem($size, $unit: "") {
   $remSize: $size / $root-font-size;
 
   @if ($unit == false) {
     @return #{$remSize};
-  }
-  @else {
+  } @else {
     @return #{$remSize}rem;
   }
 }
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index 8a09eda3..76d8b5df 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -2,10 +2,12 @@
 // Typography
 //
 
-$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
+$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue",
+  helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
 $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
-$root-font-size: 16px !default;         // Base font-size for rems
+$root-font-size: 16px !default; // Base font-size for rems
 $body-line-height: 1.4 !default;
+$content-line-height: 1.5 !default;
 $body-heading-line-height: 1.15 !default !default;
 
 //
@@ -52,27 +54,18 @@ $red-300: #dd2e2e !default;
 
 $body-background-color: $white !default;
 $sidebar-color: $grey-lt-000 !default;
+$search-background-color: $white !default;
+$table-background-color: $white !default;
 $code-background-color: $grey-lt-000 !default;
 
 $body-text-color: $grey-dk-100 !default;
 $body-heading-color: $grey-dk-300 !default;
+$search-result-preview-color: $grey-dk-000 !default;
 $nav-child-link-color: $grey-dk-100 !default;
 $link-color: $purple-000 !default;
 $btn-primary-color: $purple-100 !default;
 $base-button-color: #f7f7f7 !default;
 
-//
-// Media queries in pixels
-//
-
-$media-queries: (
-  xs: 320px,
-  sm: 500px,
-  md: 740px,
-  lg: 1120px,
-  xl: 1400px
-) !default;
-
 //
 // Spacing
 //
@@ -90,7 +83,7 @@ $spacers: (
   sp-7: $spacing-unit * 2.5,
   sp-8: $spacing-unit * 3,
   sp-9: $spacing-unit * 3.5,
-  sp-10: $spacing-unit * 4
+  sp-10: $spacing-unit * 4,
 ) !default;
 
 $sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px
@@ -118,13 +111,20 @@ $border-color: $grey-lt-100 !default;
 
 $gutter-spacing: $sp-6 !default;
 $gutter-spacing-sm: $sp-4 !default;
-$nav-width: 232px !default;
+$nav-width: 264px !default;
+$nav-width-md: 248px !default;
 $content-width: 800px !default;
+$header-height: 60px !default;
+$search-results-width: 500px !default;
+
+//
+// Media queries in pixels
+//
 
 $media-queries: (
   xs: 320px,
   sm: 500px,
-  md: 740px,
-  lg: 800px,
-  xl: 1316px
+  md: $content-width,
+  lg: $content-width + $nav-width,
+  xl: 1400px,
 ) !default;
diff --git a/_sass/support/mixins/_layout.scss b/_sass/support/mixins/_layout.scss
index 7e7967e4..27ad6c7d 100644
--- a/_sass/support/mixins/_layout.scss
+++ b/_sass/support/mixins/_layout.scss
@@ -15,9 +15,7 @@
     @media (min-width: rem($value)) {
       @content;
     }
-  }
-
-  @else {
+  } @else {
     @warn "No value could be retrieved from `#{$media-query}`. "
       + "Please make sure it is defined in `$media-queries` map.";
   }
diff --git a/_sass/tables.scss b/_sass/tables.scss
index 39bc0dc3..b2ac7cdb 100644
--- a/_sass/tables.scss
+++ b/_sass/tables.scss
@@ -3,18 +3,20 @@
 //
 // stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
 
-table {
+.table-wrapper {
   display: block;
   width: 100%;
   max-width: 100%;
   margin-bottom: $sp-5;
   overflow-x: auto;
-  border-collapse: separate;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
+  border-radius: $border-radius;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+}
 
-  @include mq(sm) {
-    display: table;
-  }
+table {
+  display: table;
+  min-width: 100%;
+  border-collapse: separate;
 }
 
 th,
@@ -25,7 +27,7 @@ td {
   padding-right: $sp-3;
   padding-bottom: $sp-2;
   padding-left: $sp-3;
-  background-color: lighten($body-background-color, 2%);
+  background-color: $table-background-color;
   border-bottom: $border rgba($border-color, 0.5);
   border-left: $border $border-color;
 
@@ -34,38 +36,16 @@ td {
   }
 }
 
-thead,
-tbody:first-child {
-  tr {
-    &:first-of-type {
-      th,
-      td {
-        &:first-of-type {
-          border-top-left-radius: $border-radius;
-        }
-
-        &:last-of-type {
-          border-top-right-radius: $border-radius;
-        }
-      }
-    }
-  }
-}
-
 tbody {
   tr {
     &:last-of-type {
       th,
       td {
         border-bottom: 0;
+      }
 
-        &:first-of-type {
-          border-bottom-left-radius: $border-radius;
-        }
-
-        &:last-of-type {
-          border-bottom-right-radius: $border-radius;
-        }
+      td {
+        padding-bottom: $sp-3;
       }
     }
   }
@@ -73,6 +53,6 @@ tbody {
 
 thead {
   th {
-    border-bottom: 1px solid $border-color;
+    border-bottom: $border $border-color;
   }
 }
diff --git a/_sass/typography.scss b/_sass/typography.scss
index ac1eed98..ccf16040 100644
--- a/_sass/typography.scss
+++ b/_sass/typography.scss
@@ -1,7 +1,7 @@
 //
 // Typography
 //
-// stylelint-disable primer/selector-no-utility, selector-no-type, selector-max-type
+// stylelint-disable primer/selector-no-utility, primer/no-override, selector-no-type, selector-max-type
 
 h1,
 .text-alpha {
diff --git a/_sass/utilities/_layout.scss b/_sass/utilities/_layout.scss
index d16ed5a9..3247ea39 100644
--- a/_sass/utilities/_layout.scss
+++ b/_sass/utilities/_layout.scss
@@ -1,15 +1,25 @@
-// stylelint-disable primer/selector-no-utility
+// stylelint-disable primer/selector-no-utility, primer/no-override
 //
 // Utility classes for layout
 //
 
 // Display
 
-.d-block { display: block !important; }
-.d-flex { display: flex !important; }
-.d-inline { display: inline !important; }
-.d-inline-block { display: inline-block !important; }
-.d-none { display: none !important; }
+.d-block {
+  display: block !important;
+}
+.d-flex {
+  display: flex !important;
+}
+.d-inline {
+  display: inline !important;
+}
+.d-inline-block {
+  display: inline-block !important;
+}
+.d-none {
+  display: none !important;
+}
 
 @each $media-query in map-keys($media-queries) {
   @for $i from 1 through length($spacers) {
@@ -18,21 +28,42 @@
       $scale: #{$i - 1};
 
       // .d-sm-block, .d-md-none, .d-lg-inline
-      .d-#{$media-query}-block { display: block !important; }
-      .d-#{$media-query}-flex { display: flex !important; }
-      .d-#{$media-query}-inline { display: inline !important; }
-      .d-#{$media-query}-inline-block { display: inline-block !important; }
-      .d-#{$media-query}-none { display: none !important; }
-
+      .d-#{$media-query}-block {
+        display: block !important;
+      }
+      .d-#{$media-query}-flex {
+        display: flex !important;
+      }
+      .d-#{$media-query}-inline {
+        display: inline !important;
+      }
+      .d-#{$media-query}-inline-block {
+        display: inline-block !important;
+      }
+      .d-#{$media-query}-none {
+        display: none !important;
+      }
     }
   }
 }
 
 // Vertical alignment
 
-.v-align-baseline { vertical-align: baseline !important; }
-.v-align-bottom { vertical-align: bottom !important; }
-.v-align-middle { vertical-align: middle !important; }
-.v-align-text-bottom { vertical-align: text-bottom !important; }
-.v-align-text-top { vertical-align: text-top !important; }
-.v-align-top { vertical-align: top !important; }
+.v-align-baseline {
+  vertical-align: baseline !important;
+}
+.v-align-bottom {
+  vertical-align: bottom !important;
+}
+.v-align-middle {
+  vertical-align: middle !important;
+}
+.v-align-text-bottom {
+  vertical-align: text-bottom !important;
+}
+.v-align-text-top {
+  vertical-align: text-top !important;
+}
+.v-align-top {
+  vertical-align: top !important;
+}
diff --git a/_sass/utilities/_lists.scss b/_sass/utilities/_lists.scss
index 0c5bcad7..c7b2293d 100644
--- a/_sass/utilities/_lists.scss
+++ b/_sass/utilities/_lists.scss
@@ -2,10 +2,16 @@
 // Utility classes for lists
 //
 
-// stylelint-disable primer/selector-no-utility
+// stylelint-disable primer/selector-no-utility, primer/no-override, selector-max-type
 
 .list-style-none {
   padding: 0 !important;
   margin: 0 !important;
   list-style: none !important;
+
+  li {
+    &::before {
+      display: none !important;
+    }
+  }
 }
diff --git a/_sass/utilities/_spacing.scss b/_sass/utilities/_spacing.scss
index 9b428169..917dd3c7 100644
--- a/_sass/utilities/_spacing.scss
+++ b/_sass/utilities/_spacing.scss
@@ -3,7 +3,7 @@
 //
 
 // scss-lint:disable SpaceAfterPropertyName
-// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
+// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility, primer/no-override
 
 // Margin spacer utilities
 
@@ -12,11 +12,21 @@
   $scale: #{$i - 1};
 
   // .m-0, .m-1, .m-2...
-  .m-#{$scale}  { margin: #{$size} !important; }
-  .mt-#{$scale} { margin-top: #{$size} !important; }
-  .mr-#{$scale} { margin-right: #{$size} !important; }
-  .mb-#{$scale} { margin-bottom: #{$size} !important; }
-  .ml-#{$scale} { margin-left: #{$size} !important; }
+  .m-#{$scale} {
+    margin: #{$size} !important;
+  }
+  .mt-#{$scale} {
+    margin-top: #{$size} !important;
+  }
+  .mr-#{$scale} {
+    margin-right: #{$size} !important;
+  }
+  .mb-#{$scale} {
+    margin-bottom: #{$size} !important;
+  }
+  .ml-#{$scale} {
+    margin-left: #{$size} !important;
+  }
 
   .mx-#{$scale} {
     margin-right: #{$size} !important;
@@ -46,11 +56,21 @@
       $scale: #{$i - 1};
 
       // .m-sm-0, .m-md-1, .m-lg-2...
-      .m-#{$media-query}-#{$scale}  { margin: #{$size} !important; }
-      .mt-#{$media-query}-#{$scale} { margin-top: #{$size} !important; }
-      .mr-#{$media-query}-#{$scale} { margin-right: #{$size} !important; }
-      .mb-#{$media-query}-#{$scale} { margin-bottom: #{$size} !important; }
-      .ml-#{$media-query}-#{$scale} { margin-left: #{$size} !important; }
+      .m-#{$media-query}-#{$scale} {
+        margin: #{$size} !important;
+      }
+      .mt-#{$media-query}-#{$scale} {
+        margin-top: #{$size} !important;
+      }
+      .mr-#{$media-query}-#{$scale} {
+        margin-right: #{$size} !important;
+      }
+      .mb-#{$media-query}-#{$scale} {
+        margin-bottom: #{$size} !important;
+      }
+      .ml-#{$media-query}-#{$scale} {
+        margin-left: #{$size} !important;
+      }
 
       .mx-#{$media-query}-#{$scale} {
         margin-right: #{$size} !important;
@@ -77,11 +97,21 @@
   $scale: #{$i - 1};
 
   // .p-0, .p-1, .p-2...
-  .p-#{$scale}  { padding: #{$size} !important; }
-  .pt-#{$scale} { padding-top: #{$size} !important; }
-  .pr-#{$scale} { padding-right: #{$size} !important; }
-  .pb-#{$scale} { padding-bottom: #{$size} !important; }
-  .pl-#{$scale} { padding-left: #{$size} !important; }
+  .p-#{$scale} {
+    padding: #{$size} !important;
+  }
+  .pt-#{$scale} {
+    padding-top: #{$size} !important;
+  }
+  .pr-#{$scale} {
+    padding-right: #{$size} !important;
+  }
+  .pb-#{$scale} {
+    padding-bottom: #{$size} !important;
+  }
+  .pl-#{$scale} {
+    padding-left: #{$size} !important;
+  }
 
   .px-#{$scale} {
     padding-right: #{$size} !important;
@@ -101,11 +131,21 @@
       $scale: #{$i - 1};
 
       // .p-sm-0, .p-md-1, .p-lg-2...
-      .p-#{$media-query}-#{$scale}  { padding: #{$size} !important; }
-      .pt-#{$media-query}-#{$scale} { padding-top: #{$size} !important; }
-      .pr-#{$media-query}-#{$scale} { padding-right: #{$size} !important; }
-      .pb-#{$media-query}-#{$scale} { padding-bottom: #{$size} !important; }
-      .pl-#{$media-query}-#{$scale} { padding-left: #{$size} !important; }
+      .p-#{$media-query}-#{$scale} {
+        padding: #{$size} !important;
+      }
+      .pt-#{$media-query}-#{$scale} {
+        padding-top: #{$size} !important;
+      }
+      .pr-#{$media-query}-#{$scale} {
+        padding-right: #{$size} !important;
+      }
+      .pb-#{$media-query}-#{$scale} {
+        padding-bottom: #{$size} !important;
+      }
+      .pl-#{$media-query}-#{$scale} {
+        padding-left: #{$size} !important;
+      }
 
       .px-#{$media-query}-#{$scale} {
         padding-right: #{$size} !important;
diff --git a/_sass/utilities/_typography.scss b/_sass/utilities/_typography.scss
index 7206deff..2397acbc 100644
--- a/_sass/utilities/_typography.scss
+++ b/_sass/utilities/_typography.scss
@@ -2,7 +2,7 @@
 // Utility classes for typography
 //
 
-// stylelint-disable primer/selector-no-utility
+// stylelint-disable primer/selector-no-utility, primer/no-override
 
 .fs-1 {
   @include fs-1;
diff --git a/_sass/vendor/base.scss b/_sass/vendor/base.scss
new file mode 100644
index 00000000..839fa0d1
--- /dev/null
+++ b/_sass/vendor/base.scss
@@ -0,0 +1,113 @@
+//
+// Base element style overrides
+//
+// stylelint-disable selector-no-type, selector-max-type
+
+* {
+  box-sizing: border-box;
+}
+
+::selection {
+  color: $white;
+  background: $link-color;
+}
+
+html {
+  @include fs-4;
+}
+
+body {
+  font-family: $body-font-family;
+  font-size: inherit;
+  line-height: $body-line-height;
+  color: $body-text-color;
+  background-color: $body-background-color;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ol,
+ul,
+pre,
+address,
+blockquote,
+dl,
+div,
+fieldset,
+form,
+hr,
+noscript,
+table {
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 1.2em;
+  margin-bottom: 0.8em;
+  font-weight: 500;
+  line-height: $body-heading-line-height;
+  color: $body-heading-color;
+}
+
+p {
+  margin-bottom: 1em;
+}
+
+a {
+  color: $link-color;
+  text-decoration: none;
+}
+
+a:not([class]) {
+  text-decoration: none;
+  background-image: linear-gradient($border-color 0%, $border-color 100%);
+  background-repeat: repeat-x;
+  background-position: 0 100%;
+  background-size: 1px 1px;
+
+  &:hover {
+    background-image: linear-gradient(
+      rgba($link-color, 0.45) 0%,
+      rgba($link-color, 0.45) 100%
+    );
+    background-size: 1px 1px;
+  }
+}
+
+code {
+  font-family: $mono-font-family;
+  font-size: 12px;
+  line-height: $body-line-height;
+}
+
+figure,
+pre {
+  margin: 0;
+}
+
+li {
+  margin: 0.25em 0;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+hr {
+  height: 1px;
+  padding: 0;
+  margin: $sp-6 0;
+  background-color: $border-color;
+  border: 0;
+}
diff --git a/_sass/vendor/buttons.scss b/_sass/vendor/buttons.scss
new file mode 100644
index 00000000..57660e05
--- /dev/null
+++ b/_sass/vendor/buttons.scss
@@ -0,0 +1,118 @@
+//
+// Buttons and things that look like buttons
+//
+// stylelint-disable color-named
+
+.btn {
+  display: inline-block;
+  box-sizing: border-box;
+  padding-top: 0.3em;
+  padding-right: 1em;
+  padding-bottom: 0.3em;
+  padding-left: 1em;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 500;
+  line-height: 1.5;
+  color: $link-color;
+  text-decoration: none;
+  vertical-align: baseline;
+  cursor: pointer;
+  background-color: $base-button-color;
+  border-width: 0;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+  appearance: none;
+
+  &:focus {
+    text-decoration: none;
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(blue, 0.25);
+  }
+
+  &:focus:hover,
+  &.selected:focus {
+    box-shadow: 0 0 0 3px rgba(blue, 0.25);
+  }
+
+  &:hover,
+  &.zeroclipboard-is-hover {
+    color: darken($link-color, 2%);
+  }
+
+  &:hover,
+  &:active,
+  &.zeroclipboard-is-hover,
+  &.zeroclipboard-is-active {
+    text-decoration: none;
+    background-color: darken($base-button-color, 1%);
+  }
+
+  &:active,
+  &.selected,
+  &.zeroclipboard-is-active {
+    background-color: darken($base-button-color, 3%);
+    background-image: none;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
+  }
+
+  &.selected:hover {
+    background-color: darken(#dcdcdc, 5%);
+  }
+
+  &:disabled,
+  &.disabled {
+    &,
+    &:hover {
+      color: rgba(102, 102, 102, 0.5);
+      cursor: default;
+      background-color: rgba(229, 229, 229, 0.5);
+      background-image: none;
+      box-shadow: none;
+    }
+  }
+}
+
+.btn-outline {
+  color: $link-color;
+  background: transparent;
+  box-shadow: inset 0 0 0 2px $grey-lt-300;
+
+  &:hover,
+  &:active,
+  &.zeroclipboard-is-hover,
+  &.zeroclipboard-is-active {
+    color: darken($link-color, 4%);
+    text-decoration: none;
+    background-color: transparent;
+    box-shadow: inset 0 0 0 3px $grey-lt-300;
+  }
+
+  &:focus {
+    text-decoration: none;
+    outline: none;
+    box-shadow: inset 0 0 0 2px $grey-dk-100, 0 0 0 3px rgba(blue, 0.25);
+  }
+
+  &:focus:hover,
+  &.selected:focus {
+    box-shadow: inset 0 0 0 2px $grey-dk-100;
+  }
+}
+
+.btn-primary {
+  @include btn-color($white, $btn-primary-color);
+}
+
+.btn-purple {
+  @include btn-color($white, $purple-100);
+}
+
+.btn-blue {
+  @include btn-color($white, $blue-000);
+}
+
+.btn-green {
+  @include btn-color($white, $green-100);
+}
diff --git a/_sass/vendor/code.scss b/_sass/vendor/code.scss
new file mode 100644
index 00000000..97ce8f47
--- /dev/null
+++ b/_sass/vendor/code.scss
@@ -0,0 +1,261 @@
+//
+// Code and syntax highlighting
+//
+// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type
+
+code {
+  padding: 0.2em 0.15em;
+  font-weight: 400;
+  background-color: $code-background-color;
+  border: $border $border-color;
+  border-radius: $border-radius;
+}
+
+pre.highlight,
+figure.highlight {
+  padding: $sp-3;
+  margin-bottom: 0;
+  -webkit-overflow-scrolling: touch;
+  background-color: $code-background-color;
+
+  code {
+    padding: 0;
+    border: 0;
+  }
+}
+
+.highlighter-rouge {
+  margin-bottom: $sp-3;
+  overflow: hidden;
+  border-radius: $border-radius;
+}
+
+.highlight .c {
+  color: #586e75;
+} // comment //
+.highlight .err {
+  color: #93a1a1;
+} // error //
+.highlight .g {
+  color: #93a1a1;
+} // generic //
+.highlight .k {
+  color: #859900;
+} // keyword //
+.highlight .l {
+  color: #93a1a1;
+} // literal //
+.highlight .n {
+  color: #93a1a1;
+} // name //
+.highlight .o {
+  color: #859900;
+} // operator //
+.highlight .x {
+  color: #cb4b16;
+} // other //
+.highlight .p {
+  color: #93a1a1;
+} // punctuation //
+.highlight .cm {
+  color: #586e75;
+} // comment.multiline //
+.highlight .cp {
+  color: #859900;
+} // comment.preproc //
+.highlight .c1 {
+  color: #586e75;
+} // comment.single //
+.highlight .cs {
+  color: #859900;
+} // comment.special //
+.highlight .gd {
+  color: #2aa198;
+} // generic.deleted //
+.highlight .ge {
+  font-style: italic;
+  color: #93a1a1;
+} // generic.emph //
+.highlight .gr {
+  color: #dc322f;
+} // generic.error //
+.highlight .gh {
+  color: #cb4b16;
+} // generic.heading //
+.highlight .gi {
+  color: #859900;
+} // generic.inserted //
+.highlight .go {
+  color: #93a1a1;
+} // generic.output //
+.highlight .gp {
+  color: #93a1a1;
+} // generic.prompt //
+.highlight .gs {
+  font-weight: bold;
+  color: #93a1a1;
+} // generic.strong //
+.highlight .gu {
+  color: #cb4b16;
+} // generic.subheading //
+.highlight .gt {
+  color: #93a1a1;
+} // generic.traceback //
+.highlight .kc {
+  color: #cb4b16;
+} // keyword.constant //
+.highlight .kd {
+  color: #268bd2;
+} // keyword.declaration //
+.highlight .kn {
+  color: #859900;
+} // keyword.namespace //
+.highlight .kp {
+  color: #859900;
+} // keyword.pseudo //
+.highlight .kr {
+  color: #268bd2;
+} // keyword.reserved //
+.highlight .kt {
+  color: #dc322f;
+} // keyword.type //
+.highlight .ld {
+  color: #93a1a1;
+} // literal.date //
+.highlight .m {
+  color: #2aa198;
+} // literal.number //
+.highlight .s {
+  color: #2aa198;
+} // literal.string //
+.highlight .na {
+  color: #555;
+} // name.attribute //
+.highlight .nb {
+  color: #b58900;
+} // name.builtin //
+.highlight .nc {
+  color: #268bd2;
+} // name.class //
+.highlight .no {
+  color: #cb4b16;
+} // name.constant //
+.highlight .nd {
+  color: #268bd2;
+} // name.decorator //
+.highlight .ni {
+  color: #cb4b16;
+} // name.entity //
+.highlight .ne {
+  color: #cb4b16;
+} // name.exception //
+.highlight .nf {
+  color: #268bd2;
+} // name.function //
+.highlight .nl {
+  color: #555;
+} // name.label //
+.highlight .nn {
+  color: #93a1a1;
+} // name.namespace //
+.highlight .nx {
+  color: #555;
+} // name.other //
+.highlight .py {
+  color: #93a1a1;
+} // name.property //
+.highlight .nt {
+  color: #268bd2;
+} // name.tag //
+.highlight .nv {
+  color: #268bd2;
+} // name.variable //
+.highlight .ow {
+  color: #859900;
+} // operator.word //
+.highlight .w {
+  color: #93a1a1;
+} // text.whitespace //
+.highlight .mf {
+  color: #2aa198;
+} // literal.number.float //
+.highlight .mh {
+  color: #2aa198;
+} // literal.number.hex //
+.highlight .mi {
+  color: #2aa198;
+} // literal.number.integer //
+.highlight .mo {
+  color: #2aa198;
+} // literal.number.oct //
+.highlight .sb {
+  color: #586e75;
+} // literal.string.backtick //
+.highlight .sc {
+  color: #2aa198;
+} // literal.string.char //
+.highlight .sd {
+  color: #93a1a1;
+} // literal.string.doc //
+.highlight .s2 {
+  color: #2aa198;
+} // literal.string.double //
+.highlight .se {
+  color: #cb4b16;
+} // literal.string.escape //
+.highlight .sh {
+  color: #93a1a1;
+} // literal.string.heredoc //
+.highlight .si {
+  color: #2aa198;
+} // literal.string.interpol //
+.highlight .sx {
+  color: #2aa198;
+} // literal.string.other //
+.highlight .sr {
+  color: #dc322f;
+} // literal.string.regex //
+.highlight .s1 {
+  color: #2aa198;
+} // literal.string.single //
+.highlight .ss {
+  color: #2aa198;
+} // literal.string.symbol //
+.highlight .bp {
+  color: #268bd2;
+} // name.builtin.pseudo //
+.highlight .vc {
+  color: #268bd2;
+} // name.variable.class //
+.highlight .vg {
+  color: #268bd2;
+} // name.variable.global //
+.highlight .vi {
+  color: #268bd2;
+} // name.variable.instance //
+.highlight .il {
+  color: #2aa198;
+} // literal.number.integer.long //
+
+//
+// Code examples (rendered)
+//
+
+.code-example {
+  padding: $sp-3;
+  margin-bottom: $sp-3;
+  overflow: auto;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+
+  + .highlighter-rouge,
+  + figure.highlight {
+    position: relative;
+    margin-top: -$sp-4;
+    border-right: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
+    border-left: 1px solid $border-color;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
diff --git a/_sass/vendor/color_schemes/dark.scss b/_sass/vendor/color_schemes/dark.scss
new file mode 100644
index 00000000..9a0b9ea4
--- /dev/null
+++ b/_sass/vendor/color_schemes/dark.scss
@@ -0,0 +1,16 @@
+$body-background-color: $grey-dk-300;
+$sidebar-color: $grey-dk-300;
+$border-color: $grey-dk-200;
+
+$body-text-color: $grey-lt-300;
+$body-heading-color: $grey-lt-000;
+$nav-child-link-color: $grey-dk-000;
+$search-result-preview-color: $grey-dk-000;
+
+$link-color: $blue-000;
+$btn-primary-color: $blue-200;
+$base-button-color: $grey-dk-250;
+
+$code-background-color: $grey-dk-250;
+$search-background-color: $grey-dk-250;
+$table-background-color: $grey-dk-250;
diff --git a/_sass/vendor/content.scss b/_sass/vendor/content.scss
new file mode 100644
index 00000000..2940286f
--- /dev/null
+++ b/_sass/vendor/content.scss
@@ -0,0 +1,160 @@
+@charset "UTF-8";
+
+//
+// Styles for rendered markdown in the .main-content container
+//
+// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
+
+.page-content {
+  line-height: $content-line-height;
+
+  a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  ul,
+  ol {
+    padding-left: 1.5em;
+  }
+
+  ol {
+    list-style-type: none;
+    counter-reset: step-counter;
+
+    > li {
+      position: relative;
+
+      &::before {
+        position: absolute;
+        top: 0.2em;
+        left: -1.6em;
+        color: $grey-dk-000;
+        content: counter(step-counter);
+        counter-increment: step-counter;
+        @include fs-3;
+
+        @include mq(sm) {
+          top: 0.11em;
+        }
+      }
+
+      ol {
+        counter-reset: sub-counter;
+
+        li {
+          &::before {
+            content: counter(sub-counter, lower-alpha);
+            counter-increment: sub-counter;
+          }
+        }
+      }
+    }
+  }
+
+  ul {
+    list-style: none;
+
+    > li {
+      &::before {
+        position: absolute;
+        margin-left: -1.4em;
+        color: $grey-dk-000;
+        content: "•";
+      }
+    }
+  }
+
+  .task-list {
+    padding-left: 0;
+  }
+
+  .task-list-item {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      content: "";
+    }
+  }
+
+  .task-list-item-checkbox {
+    margin-right: 0.6em;
+  }
+
+  hr + * {
+    margin-top: 0;
+  }
+
+  h1:first-of-type {
+    margin-top: 0.5em;
+  }
+
+  dl {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+  }
+
+  dt,
+  dd {
+    margin: 0.25em 0;
+  }
+
+  dt {
+    text-align: right;
+
+    &::after {
+      content: ":";
+    }
+  }
+
+  dd {
+    margin-left: 1em;
+    font-weight: 500;
+  }
+
+  .anchor-heading {
+    position: absolute;
+    right: -$sp-4;
+    width: $sp-5;
+    height: 100%;
+    padding-right: $sp-1;
+    padding-left: $sp-1;
+    overflow: visible;
+
+    @include mq(md) {
+      right: auto;
+      left: -$sp-5;
+    }
+
+    svg {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      fill: $link-color;
+      visibility: hidden;
+    }
+  }
+
+  .anchor-heading:hover,
+  h1:hover > .anchor-heading,
+  h2:hover > .anchor-heading,
+  h3:hover > .anchor-heading,
+  h4:hover > .anchor-heading,
+  h5:hover > .anchor-heading,
+  h6:hover > .anchor-heading {
+    svg {
+      visibility: visible;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+  }
+}
diff --git a/_sass/vendor/custom/custom.scss b/_sass/vendor/custom/custom.scss
new file mode 100644
index 00000000..9ac503b6
--- /dev/null
+++ b/_sass/vendor/custom/custom.scss
@@ -0,0 +1,129 @@
+////
+//// Typography
+////
+
+//$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
+//$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace;
+//$root-font-size: 16px;         // Base font-size for rems
+//$body-line-height: 1.4;
+//$content-line-height: 1.5;
+//$body-heading-line-height: 1.15;
+
+////
+//// Colors
+////
+
+//$white: #fff;
+
+//$grey-dk-000: #959396;
+//$grey-dk-100: #5c5962;
+//$grey-dk-200: #44434d;
+//$grey-dk-250: #302d36;
+//$grey-dk-300: #27262b;
+
+//$grey-lt-000: #f5f6fa;
+//$grey-lt-100: #eeebee;
+//$grey-lt-200: #ecebed;
+//$grey-lt-300: #e6e1e8;
+
+//$purple-000: #7253ed;
+//$purple-100: #5e41d0;
+//$purple-200: #4e26af;
+//$purple-300: #381885;
+
+//$blue-000: #2c84fa;
+//$blue-100: #2869e6;
+//$blue-200: #264caf;
+//$blue-300: #183385;
+
+//$green-000: #41d693;
+//$green-100: #11b584;
+//$green-200: #009c7b;
+//$green-300: #026e57;
+
+//$yellow-000: #ffeb82;
+//$yellow-100: #fadf50;
+//$yellow-200: #f7d12e;
+//$yellow-300: #e7af06;
+
+//$red-000: #f77e7e;
+//$red-100: #f96e65;
+//$red-200: #e94c4c;
+//$red-300: #dd2e2e;
+
+//$body-background-color: $white;
+//$sidebar-color: $grey-lt-000;
+//$search-background-color: $white;
+//$table-background-color: $white;
+//$code-background-color: $grey-lt-000;
+
+//$body-text-color: $grey-dk-100;
+//$body-heading-color: $grey-dk-300;
+//$search-result-preview-color: $grey-dk-000;
+//$nav-child-link-color: $grey-dk-100;
+//$link-color: $purple-000;
+//$btn-primary-color: $purple-100;
+//$base-button-color: #f7f7f7;
+
+////
+//// Spacing
+////
+
+//$spacing-unit: 1rem; // 1rem == 16px
+
+//$spacers: (
+//sp-0: 0,
+//sp-1: $spacing-unit * 0.25,
+//sp-2: $spacing-unit * 0.5,
+//sp-3: $spacing-unit * 0.75,
+//sp-4: $spacing-unit,
+//sp-5: $spacing-unit * 1.5,
+//sp-6: $spacing-unit * 2,
+//sp-7: $spacing-unit * 2.5,
+//sp-8: $spacing-unit * 3,
+//sp-9: $spacing-unit * 3.5,
+//sp-10: $spacing-unit * 4
+//);
+
+//$sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
+//$sp-2: map-get($spacers, sp-2); // 0.5  rem == 8px
+//$sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
+//$sp-4: map-get($spacers, sp-4); // 1    rem == 16px
+//$sp-5: map-get($spacers, sp-5); // 1.5  rem == 24px
+//$sp-6: map-get($spacers, sp-6); // 2    rem == 32px
+//$sp-7: map-get($spacers, sp-7); // 2.5  rem == 40px
+//$sp-8: map-get($spacers, sp-8); // 3    rem == 48px
+//$sp-9: map-get($spacers, sp-9); // 4    rem == 48px
+//$sp-10: map-get($spacers, sp-10); // 4.5  rem == 48px
+
+////
+//// Borders
+////
+
+//$border: 1px solid;
+//$border-radius: 4px;
+//$border-color: $grey-lt-100;
+
+////
+//// Grid system
+////
+
+//$gutter-spacing: $sp-6;
+//$gutter-spacing-sm: $sp-4;
+//$nav-width: 264px;
+//$nav-width-md: 248px;
+//$content-width: 800px;
+//$header-height: 60px;
+//$search-results-width: 500px;
+
+////
+//// Media queries in pixels
+////
+
+//$media-queries: (
+//xs: 320px,
+//sm: 500px,
+//md: $content-width,
+//lg: $content-width + $nav-width,
+//xl: 1400px
+//);
diff --git a/_sass/vendor/labels.scss b/_sass/vendor/labels.scss
new file mode 100644
index 00000000..23cc5101
--- /dev/null
+++ b/_sass/vendor/labels.scss
@@ -0,0 +1,36 @@
+//
+// Labels (not the form kind)
+//
+
+.label,
+.label-blue {
+  display: inline-block;
+  padding-top: 0.16em;
+  padding-right: 0.42em;
+  padding-bottom: 0.16em;
+  padding-left: 0.42em;
+  margin-right: $sp-1;
+  margin-left: $sp-1;
+  color: $white;
+  text-transform: uppercase;
+  vertical-align: middle;
+  background-color: $blue-100;
+  @include fs-2;
+}
+
+.label-green {
+  background-color: $green-200;
+}
+
+.label-purple {
+  background-color: $purple-100;
+}
+
+.label-red {
+  background-color: $red-200;
+}
+
+.label-yellow {
+  color: $grey-dk-200;
+  background-color: $yellow-200;
+}
diff --git a/_sass/vendor/layout.scss b/_sass/vendor/layout.scss
new file mode 100644
index 00000000..79169e42
--- /dev/null
+++ b/_sass/vendor/layout.scss
@@ -0,0 +1,210 @@
+//
+// The basic two column layout
+//
+
+.page-wrap {
+  @include mq(md) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+  }
+}
+
+.side-bar {
+  z-index: 100;
+  display: flex;
+  flex-wrap: wrap;
+  background-color: $sidebar-color;
+
+  @include mq(md) {
+    flex-wrap: nowrap;
+    position: absolute;
+    width: $nav-width-md;
+    height: 100%;
+    flex-direction: column;
+    border-right: $border $border-color;
+    align-items: flex-end;
+  }
+
+  @include mq(lg) {
+    width: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
+    min-width: $nav-width;
+  }
+}
+
+.main-content-wrap {
+  @include mq(md) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+}
+
+.main-content {
+  @include mq(md) {
+    position: relative;
+    max-width: $content-width;
+    margin-left: $nav-width-md;
+  }
+
+  @include mq(lg) {
+    margin-left: calc(
+      (100% - #{$nav-width + $content-width}) / 2 + #{$nav-width}
+    );
+  }
+}
+
+.js-main-content:focus {
+  outline: none;
+}
+
+.page {
+  @include container;
+  padding-top: $gutter-spacing-sm;
+  padding-bottom: $gutter-spacing-sm;
+
+  @include mq(md) {
+    padding-top: $gutter-spacing;
+    padding-bottom: $gutter-spacing;
+  }
+}
+
+.page-header {
+  @include container;
+  display: none;
+  padding-top: $gutter-spacing-sm;
+  padding-bottom: $gutter-spacing-sm;
+  background-color: $sidebar-color;
+
+  @include mq(md) {
+    display: flex;
+    justify-content: flex-end;
+    height: $header-height;
+    background-color: $body-background-color;
+    border-bottom: $border $border-color;
+  }
+
+  &.nav-open {
+    display: block;
+
+    @include mq(md) {
+      display: flex;
+    }
+  }
+}
+
+.navigation,
+.site-header,
+.site-footer {
+  width: 100%;
+
+  @include mq(lg) {
+    width: $nav-width;
+  }
+}
+
+.navigation {
+  @include container;
+
+  @include mq(md) {
+    padding-top: $sp-8;
+    padding-bottom: $gutter-spacing-sm;
+    overflow-y: auto;
+    flex: 1 1 auto;
+  }
+}
+
+.site-header {
+  display: flex;
+  min-height: $header-height;
+  align-items: center;
+
+  @include mq(md) {
+    z-index: 101;
+    height: $header-height;
+    max-height: $header-height;
+    border-bottom: $border $border-color;
+  }
+}
+
+.site-title {
+  @include container;
+  flex-grow: 1;
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding-top: $sp-3;
+  padding-bottom: $sp-3;
+  color: $body-heading-color;
+  @include fs-6;
+
+  @include mq(md) {
+    padding-top: $sp-2;
+    padding-bottom: $sp-2;
+  }
+}
+
+@if variable-exists(logo) {
+  .site-logo {
+    width: 100%;
+    height: 100%;
+    background-image: url($logo);
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-size: contain;
+  }
+}
+
+.menu-button {
+  appearance: none;
+  display: flex;
+  height: 100%;
+  padding: $gutter-spacing-sm;
+  align-items: center;
+  color: $link-color;
+  text-transform: uppercase;
+  background: transparent;
+  border: 0;
+
+  @include mq(md) {
+    display: none;
+  }
+}
+
+// stylelint-disable selector-max-type
+
+body {
+  position: relative;
+  padding-bottom: $sp-10;
+
+  @include mq(md) {
+    position: static;
+    padding-bottom: 0;
+  }
+}
+
+// stylelint-enable selector-max-type
+
+.site-footer {
+  @include container;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding-top: $sp-4;
+  padding-bottom: $sp-4;
+
+  @include mq(md) {
+    position: static;
+    justify-self: end;
+  }
+}
diff --git a/_sass/vendor/navigation.scss b/_sass/vendor/navigation.scss
new file mode 100644
index 00000000..c7749043
--- /dev/null
+++ b/_sass/vendor/navigation.scss
@@ -0,0 +1,120 @@
+//
+// Main nav, breadcrumb, etc...
+//
+.navigation-list {
+  padding: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.navigation-list-child-list {
+  padding-left: $sp-3;
+  list-style: none;
+
+  .navigation-list-link {
+    color: $nav-child-link-color;
+  }
+
+  .navigation-list-item {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      margin-top: 0.3em;
+      margin-left: -0.8em;
+      color: rgba($body-text-color, 0.3);
+      content: "- ";
+    }
+
+    &.active {
+      &::before {
+        color: $body-text-color;
+      }
+    }
+  }
+}
+
+.navigation-list-item {
+  @include fs-4;
+  margin: 0;
+
+  @include mq(md) {
+    @include fs-3;
+  }
+
+  .navigation-list-child-list {
+    display: none;
+  }
+
+  &.active {
+    .navigation-list-child-list {
+      display: block;
+    }
+  }
+}
+
+.navigation-list-link {
+  display: block;
+  padding-top: $sp-1;
+  padding-bottom: $sp-1;
+
+  &.active {
+    font-weight: 600;
+    color: $body-heading-color;
+    text-decoration: none;
+  }
+}
+
+// Small screen nav
+
+.main-nav {
+  display: none;
+
+  &.nav-open {
+    display: block;
+  }
+  @include mq(md) {
+    display: block;
+  }
+}
+
+.aux-nav {
+  align-self: center;
+}
+
+// Breadcrumb nav
+.breadcrumb-nav {
+  @include mq(md) {
+    margin-top: -$sp-4;
+  }
+}
+
+.breadcrumb-nav-list {
+  padding-left: 0;
+  margin-bottom: $sp-3;
+  list-style: none;
+}
+
+.breadcrumb-nav-list-item {
+  display: table-cell;
+  @include fs-2;
+
+  &::before {
+    display: none;
+  }
+
+  &::after {
+    display: inline-block;
+    margin-right: $sp-2;
+    margin-left: $sp-2;
+    color: $grey-dk-000;
+    content: "/";
+  }
+
+  &:last-child {
+    &::after {
+      content: "";
+    }
+  }
+}
diff --git a/_sass/vendor/overrides.scss b/_sass/vendor/overrides.scss
new file mode 100644
index 00000000..21e9527d
--- /dev/null
+++ b/_sass/vendor/overrides.scss
@@ -0,0 +1,3 @@
+//
+// Custom overrides from a user.
+//
diff --git a/_sass/vendor/search.scss b/_sass/vendor/search.scss
new file mode 100644
index 00000000..bef2df73
--- /dev/null
+++ b/_sass/vendor/search.scss
@@ -0,0 +1,167 @@
+//
+// Search input and autocomplete
+//
+
+.search {
+  position: relative;
+  z-index: 99;
+  flex-grow: 1;
+  height: 100%;
+  margin-bottom: $sp-3;
+
+  @include mq(md) {
+    margin-bottom: 0;
+  }
+}
+
+.search-input-wrap {
+  display: flex;
+  height: 100%;
+  padding: $sp-2;
+  background-color: $search-background-color;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+
+  @include mq(md) {
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    background-color: $body-background-color;
+    border-radius: 0;
+    box-shadow: none;
+  }
+}
+
+.search-input {
+  align-self: center;
+  width: 100%;
+  padding-top: $sp-1;
+  padding-bottom: $sp-1;
+  background-color: $search-background-color;
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 0;
+  border-left: 0;
+  order: 2;
+  @include fs-4;
+
+  &:focus {
+    outline: 0;
+    box-shadow: none;
+
+    + .search-icon {
+      fill: $link-color;
+    }
+  }
+
+  @include mq(md) {
+    background-color: $body-background-color;
+    @include fs-3;
+  }
+}
+
+.search-icon {
+  align-self: center;
+  margin-right: $sp-2;
+  fill: $grey-dk-000;
+  order: 1;
+}
+
+.search-results-wrap {
+  position: absolute;
+  z-index: 100;
+  display: none;
+  width: 100%;
+  background: $search-background-color;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+
+  &.active {
+    display: block;
+  }
+
+  @include mq(md) {
+    width: $search-results-width;
+  }
+}
+
+.search-results-list {
+  padding-left: 0;
+  margin-top: $sp-1;
+  margin-bottom: $sp-1;
+  list-style: none;
+  @include fs-4;
+
+  @include mq(md) {
+    @include fs-3;
+  }
+}
+
+.search-results-list-item {
+  padding: 0;
+  margin: 0;
+}
+
+.search-result {
+  display: block;
+  padding-top: $sp-1;
+  padding-right: $sp-3;
+  padding-bottom: $sp-1;
+  padding-left: $sp-3;
+
+  &:hover,
+  &.active {
+    background-color: $sidebar-color;
+  }
+
+  @include mq(md) {
+    padding-right: $sp-4;
+    padding-left: $sp-4;
+  }
+}
+
+.search-result-title {
+  display: block;
+  padding-top: $sp-2;
+  padding-right: $sp-4;
+  padding-bottom: $sp-2;
+
+  @include mq(sm) {
+    display: inline-block;
+    width: 40%;
+    word-wrap: break-word;
+    vertical-align: top;
+  }
+}
+
+.search-result-rel-url {
+  display: block;
+  overflow: hidden;
+  color: $search-result-preview-color;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  @include fs-1;
+}
+
+.search-result-preview {
+  display: block;
+  padding-top: $sp-2;
+  padding-bottom: $sp-2;
+  padding-left: $sp-4;
+  color: $search-result-preview-color;
+  border-left: $border;
+  border-left-color: $border-color;
+  @include fs-2;
+
+  @include mq(sm) {
+    display: inline-block;
+    width: 60%;
+    vertical-align: top;
+  }
+}
+
+.search-result-highlight {
+  font-weight: bold;
+  color: $link-color;
+}
diff --git a/_sass/vendor/support/_functions.scss b/_sass/vendor/support/_functions.scss
new file mode 100644
index 00000000..6772f4e4
--- /dev/null
+++ b/_sass/vendor/support/_functions.scss
@@ -0,0 +1,9 @@
+@function rem($size, $unit: "") {
+  $remSize: $size / $root-font-size;
+
+  @if ($unit == false) {
+    @return #{$remSize};
+  } @else {
+    @return #{$remSize}rem;
+  }
+}
diff --git a/_sass/vendor/support/_variables.scss b/_sass/vendor/support/_variables.scss
new file mode 100644
index 00000000..76d8b5df
--- /dev/null
+++ b/_sass/vendor/support/_variables.scss
@@ -0,0 +1,130 @@
+//
+// Typography
+//
+
+$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue",
+  helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
+$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
+$root-font-size: 16px !default; // Base font-size for rems
+$body-line-height: 1.4 !default;
+$content-line-height: 1.5 !default;
+$body-heading-line-height: 1.15 !default !default;
+
+//
+// Colors
+//
+
+$white: #fff !default;
+
+$grey-dk-000: #959396 !default;
+$grey-dk-100: #5c5962 !default;
+$grey-dk-200: #44434d !default;
+$grey-dk-250: #302d36 !default;
+$grey-dk-300: #27262b !default;
+
+$grey-lt-000: #f5f6fa !default;
+$grey-lt-100: #eeebee !default;
+$grey-lt-200: #ecebed !default;
+$grey-lt-300: #e6e1e8 !default;
+
+$purple-000: #7253ed !default;
+$purple-100: #5e41d0 !default;
+$purple-200: #4e26af !default;
+$purple-300: #381885 !default;
+
+$blue-000: #2c84fa !default;
+$blue-100: #2869e6 !default;
+$blue-200: #264caf !default;
+$blue-300: #183385 !default;
+
+$green-000: #41d693 !default;
+$green-100: #11b584 !default;
+$green-200: #009c7b !default;
+$green-300: #026e57 !default;
+
+$yellow-000: #ffeb82 !default;
+$yellow-100: #fadf50 !default;
+$yellow-200: #f7d12e !default;
+$yellow-300: #e7af06 !default;
+
+$red-000: #f77e7e !default;
+$red-100: #f96e65 !default;
+$red-200: #e94c4c !default;
+$red-300: #dd2e2e !default;
+
+$body-background-color: $white !default;
+$sidebar-color: $grey-lt-000 !default;
+$search-background-color: $white !default;
+$table-background-color: $white !default;
+$code-background-color: $grey-lt-000 !default;
+
+$body-text-color: $grey-dk-100 !default;
+$body-heading-color: $grey-dk-300 !default;
+$search-result-preview-color: $grey-dk-000 !default;
+$nav-child-link-color: $grey-dk-100 !default;
+$link-color: $purple-000 !default;
+$btn-primary-color: $purple-100 !default;
+$base-button-color: #f7f7f7 !default;
+
+//
+// Spacing
+//
+
+$spacing-unit: 1rem; // 1rem == 16px
+
+$spacers: (
+  sp-0: 0,
+  sp-1: $spacing-unit * 0.25,
+  sp-2: $spacing-unit * 0.5,
+  sp-3: $spacing-unit * 0.75,
+  sp-4: $spacing-unit,
+  sp-5: $spacing-unit * 1.5,
+  sp-6: $spacing-unit * 2,
+  sp-7: $spacing-unit * 2.5,
+  sp-8: $spacing-unit * 3,
+  sp-9: $spacing-unit * 3.5,
+  sp-10: $spacing-unit * 4,
+) !default;
+
+$sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px
+$sp-2: map-get($spacers, sp-2) !default; // 0.5  rem == 8px
+$sp-3: map-get($spacers, sp-3) !default; // 0.75 rem == 12px
+$sp-4: map-get($spacers, sp-4) !default; // 1    rem == 16px
+$sp-5: map-get($spacers, sp-5) !default; // 1.5  rem == 24px
+$sp-6: map-get($spacers, sp-6) !default; // 2    rem == 32px
+$sp-7: map-get($spacers, sp-7) !default; // 2.5  rem == 40px
+$sp-8: map-get($spacers, sp-8) !default; // 3    rem == 48px
+$sp-9: map-get($spacers, sp-9) !default; // 4    rem == 48px
+$sp-10: map-get($spacers, sp-10) !default; // 4.5  rem == 48px
+
+//
+// Borders
+//
+
+$border: 1px solid !default;
+$border-radius: 4px !default;
+$border-color: $grey-lt-100 !default;
+
+//
+// Grid system
+//
+
+$gutter-spacing: $sp-6 !default;
+$gutter-spacing-sm: $sp-4 !default;
+$nav-width: 264px !default;
+$nav-width-md: 248px !default;
+$content-width: 800px !default;
+$header-height: 60px !default;
+$search-results-width: 500px !default;
+
+//
+// Media queries in pixels
+//
+
+$media-queries: (
+  xs: 320px,
+  sm: 500px,
+  md: $content-width,
+  lg: $content-width + $nav-width,
+  xl: 1400px,
+) !default;
diff --git a/_sass/vendor/support/mixins/_buttons.scss b/_sass/vendor/support/mixins/_buttons.scss
new file mode 100644
index 00000000..e3e6c4fb
--- /dev/null
+++ b/_sass/vendor/support/mixins/_buttons.scss
@@ -0,0 +1,27 @@
+// Colored button
+
+@mixin btn-color($fg, $bg) {
+  color: $fg;
+  background-color: darken($bg, 2%);
+  background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%));
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12);
+
+  &:hover,
+  &.zeroclipboard-is-hover {
+    color: $fg;
+    background-color: darken($bg, 4%);
+    background-image: linear-gradient((lighten($bg, 2%), darken($bg, 4%)));
+  }
+
+  &:active,
+  &.selected,
+  &.zeroclipboard-is-active {
+    background-color: darken($bg, 5%);
+    background-image: none;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
+  }
+
+  &.selected:hover {
+    background-color: darken($bg, 10%);
+  }
+}
diff --git a/_sass/vendor/support/mixins/_layout.scss b/_sass/vendor/support/mixins/_layout.scss
new file mode 100644
index 00000000..27ad6c7d
--- /dev/null
+++ b/_sass/vendor/support/mixins/_layout.scss
@@ -0,0 +1,34 @@
+// Media query
+
+// Media query mixin
+// Usage:
+// @include mq(md) {
+//   ..medium and up styles
+// }
+@mixin mq($name) {
+  // Retrieves the value from the key
+  $value: map-get($media-queries, $name);
+
+  // If the key exists in the map
+  @if $value != null {
+    // Prints a media query based on the value
+    @media (min-width: rem($value)) {
+      @content;
+    }
+  } @else {
+    @warn "No value could be retrieved from `#{$media-query}`. "
+      + "Please make sure it is defined in `$media-queries` map.";
+  }
+}
+
+// Responsive container
+
+@mixin container {
+  padding-right: $gutter-spacing-sm;
+  padding-left: $gutter-spacing-sm;
+
+  @include mq(md) {
+    padding-right: $gutter-spacing;
+    padding-left: $gutter-spacing;
+  }
+}
diff --git a/_sass/vendor/support/mixins/_typography.scss b/_sass/vendor/support/mixins/_typography.scss
new file mode 100644
index 00000000..e6d85bea
--- /dev/null
+++ b/_sass/vendor/support/mixins/_typography.scss
@@ -0,0 +1,81 @@
+// Font size
+
+@mixin fs-1 {
+  font-size: 9px !important;
+
+  @include mq(sm) {
+    font-size: 10px !important;
+  }
+}
+
+@mixin fs-2 {
+  font-size: 11px !important;
+
+  @include mq(sm) {
+    font-size: 12px !important;
+  }
+}
+
+@mixin fs-3 {
+  font-size: 12px !important;
+
+  @include mq(sm) {
+    font-size: 14px !important;
+  }
+}
+
+@mixin fs-4 {
+  font-size: 14px !important;
+
+  @include mq(sm) {
+    font-size: 16px !important;
+  }
+}
+
+@mixin fs-5 {
+  font-size: 16px !important;
+
+  @include mq(sm) {
+    font-size: 18px !important;
+  }
+}
+
+@mixin fs-6 {
+  font-size: 18px !important;
+
+  @include mq(sm) {
+    font-size: 24px !important;
+  }
+}
+
+@mixin fs-7 {
+  font-size: 24px !important;
+
+  @include mq(sm) {
+    font-size: 32px !important;
+  }
+}
+
+@mixin fs-8 {
+  font-size: 32px !important;
+
+  @include mq(sm) {
+    font-size: 36px !important;
+  }
+}
+
+@mixin fs-9 {
+  font-size: 36px !important;
+
+  @include mq(sm) {
+    font-size: 42px !important;
+  }
+}
+
+@mixin fs-10 {
+  font-size: 42px !important;
+
+  @include mq(sm) {
+    font-size: 48px !important;
+  }
+}
diff --git a/_sass/vendor/support/mixins/mixins.scss b/_sass/vendor/support/mixins/mixins.scss
new file mode 100644
index 00000000..0506fbf5
--- /dev/null
+++ b/_sass/vendor/support/mixins/mixins.scss
@@ -0,0 +1,3 @@
+@import "./layout";
+@import "./buttons";
+@import "./typography";
diff --git a/_sass/vendor/support/support.scss b/_sass/vendor/support/support.scss
new file mode 100644
index 00000000..8131a320
--- /dev/null
+++ b/_sass/vendor/support/support.scss
@@ -0,0 +1,3 @@
+@import "./variables";
+@import "./functions";
+@import "./mixins/mixins";
diff --git a/_sass/vendor/tables.scss b/_sass/vendor/tables.scss
new file mode 100644
index 00000000..b2ac7cdb
--- /dev/null
+++ b/_sass/vendor/tables.scss
@@ -0,0 +1,58 @@
+//
+// Tables
+//
+// stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
+
+.table-wrapper {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: $sp-5;
+  overflow-x: auto;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+}
+
+table {
+  display: table;
+  min-width: 100%;
+  border-collapse: separate;
+}
+
+th,
+td {
+  @include fs-3;
+  min-width: 120px;
+  padding-top: $sp-2;
+  padding-right: $sp-3;
+  padding-bottom: $sp-2;
+  padding-left: $sp-3;
+  background-color: $table-background-color;
+  border-bottom: $border rgba($border-color, 0.5);
+  border-left: $border $border-color;
+
+  &:first-of-type {
+    border-left: 0;
+  }
+}
+
+tbody {
+  tr {
+    &:last-of-type {
+      th,
+      td {
+        border-bottom: 0;
+      }
+
+      td {
+        padding-bottom: $sp-3;
+      }
+    }
+  }
+}
+
+thead {
+  th {
+    border-bottom: $border $border-color;
+  }
+}
diff --git a/_sass/vendor/typography.scss b/_sass/vendor/typography.scss
new file mode 100644
index 00000000..ccf16040
--- /dev/null
+++ b/_sass/vendor/typography.scss
@@ -0,0 +1,58 @@
+//
+// Typography
+//
+// stylelint-disable primer/selector-no-utility, primer/no-override, selector-no-type, selector-max-type
+
+h1,
+.text-alpha {
+  @include fs-8;
+  font-weight: 300;
+}
+
+h2,
+.text-beta {
+  @include fs-6;
+}
+
+h3,
+.text-gamma {
+  @include fs-5;
+}
+
+h4,
+.text-delta {
+  @include fs-2;
+  font-weight: 300;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+h5,
+.text-epsilon {
+  @include fs-3;
+  color: $grey-dk-200;
+}
+
+h6,
+.text-zeta {
+  @include fs-2;
+  color: $grey-dk-200;
+}
+
+li {
+  .highlight {
+    margin-top: $sp-2;
+  }
+}
+
+.text-small {
+  @include fs-2;
+}
+
+.text-mono {
+  font-family: $mono-font-family !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
diff --git a/_sass/vendor/utilities/_colors.scss b/_sass/vendor/utilities/_colors.scss
new file mode 100644
index 00000000..f3607ab8
--- /dev/null
+++ b/_sass/vendor/utilities/_colors.scss
@@ -0,0 +1,239 @@
+//
+// Utility classes for colors
+//
+
+// Text colors
+
+.text-grey-dk-000 {
+  color: $grey-dk-000 !important;
+}
+
+.text-grey-dk-100 {
+  color: $grey-dk-100 !important;
+}
+
+.text-grey-dk-200 {
+  color: $grey-dk-200 !important;
+}
+
+.text-grey-dk-250 {
+  color: $grey-dk-250 !important;
+}
+
+.text-grey-dk-300 {
+  color: $grey-dk-300 !important;
+}
+
+.text-grey-lt-000 {
+  color: $grey-lt-000 !important;
+}
+
+.text-grey-lt-100 {
+  color: $grey-lt-100 !important;
+}
+
+.text-grey-lt-200 {
+  color: $grey-lt-200 !important;
+}
+
+.text-grey-lt-300 {
+  color: $grey-lt-300 !important;
+}
+
+.text-blue-000 {
+  color: $blue-000 !important;
+}
+
+.text-blue-100 {
+  color: $blue-100 !important;
+}
+
+.text-blue-200 {
+  color: $blue-200 !important;
+}
+
+.text-blue-300 {
+  color: $blue-300 !important;
+}
+
+.text-green-000 {
+  color: $green-000 !important;
+}
+
+.text-green-100 {
+  color: $green-100 !important;
+}
+
+.text-green-200 {
+  color: $green-200 !important;
+}
+
+.text-green-300 {
+  color: $green-300 !important;
+}
+
+.text-purple-000 {
+  color: $purple-000 !important;
+}
+
+.text-purple-100 {
+  color: $purple-100 !important;
+}
+
+.text-purple-200 {
+  color: $purple-200 !important;
+}
+
+.text-purple-300 {
+  color: $purple-300 !important;
+}
+
+.text-yellow-000 {
+  color: $yellow-000 !important;
+}
+
+.text-yellow-100 {
+  color: $yellow-100 !important;
+}
+
+.text-yellow-200 {
+  color: $yellow-200 !important;
+}
+
+.text-yellow-300 {
+  color: $yellow-300 !important;
+}
+
+.text-red-000 {
+  color: $red-000 !important;
+}
+
+.text-red-100 {
+  color: $red-100 !important;
+}
+
+.text-red-200 {
+  color: $red-200 !important;
+}
+
+.text-red-300 {
+  color: $red-300 !important;
+}
+
+// Background colors
+
+.bg-grey-dk-000 {
+  background-color: $grey-dk-000 !important;
+}
+
+.bg-grey-dk-100 {
+  background-color: $grey-dk-100 !important;
+}
+
+.bg-grey-dk-200 {
+  background-color: $grey-dk-200 !important;
+}
+
+.bg-grey-dk-250 {
+  background-color: $grey-dk-250 !important;
+}
+
+.bg-grey-dk-300 {
+  background-color: $grey-dk-300 !important;
+}
+
+.bg-grey-lt-000 {
+  background-color: $grey-lt-000 !important;
+}
+
+.bg-grey-lt-100 {
+  background-color: $grey-lt-100 !important;
+}
+
+.bg-grey-lt-200 {
+  background-color: $grey-lt-200 !important;
+}
+
+.bg-grey-lt-300 {
+  background-color: $grey-lt-300 !important;
+}
+
+.bg-blue-000 {
+  background-color: $blue-000 !important;
+}
+
+.bg-blue-100 {
+  background-color: $blue-100 !important;
+}
+
+.bg-blue-200 {
+  background-color: $blue-200 !important;
+}
+
+.bg-blue-300 {
+  background-color: $blue-300 !important;
+}
+
+.bg-green-000 {
+  background-color: $green-000 !important;
+}
+
+.bg-green-100 {
+  background-color: $green-100 !important;
+}
+
+.bg-green-200 {
+  background-color: $green-200 !important;
+}
+
+.bg-green-300 {
+  background-color: $green-300 !important;
+}
+
+.bg-purple-000 {
+  background-color: $purple-000 !important;
+}
+
+.bg-purple-100 {
+  background-color: $purple-100 !important;
+}
+
+.bg-purple-200 {
+  background-color: $purple-200 !important;
+}
+
+.bg-purple-300 {
+  background-color: $purple-300 !important;
+}
+
+.bg-yellow-000 {
+  background-color: $yellow-000 !important;
+}
+
+.bg-yellow-100 {
+  background-color: $yellow-100 !important;
+}
+
+.bg-yellow-200 {
+  background-color: $yellow-200 !important;
+}
+
+.bg-yellow-300 {
+  background-color: $yellow-300 !important;
+}
+
+.bg-red-000 {
+  background-color: $red-000 !important;
+}
+
+.bg-red-100 {
+  background-color: $red-100 !important;
+}
+
+.bg-red-200 {
+  background-color: $red-200 !important;
+}
+
+.bg-red-300 {
+  background-color: $red-300 !important;
+}
diff --git a/_sass/vendor/utilities/_layout.scss b/_sass/vendor/utilities/_layout.scss
new file mode 100644
index 00000000..3247ea39
--- /dev/null
+++ b/_sass/vendor/utilities/_layout.scss
@@ -0,0 +1,69 @@
+// stylelint-disable primer/selector-no-utility, primer/no-override
+//
+// Utility classes for layout
+//
+
+// Display
+
+.d-block {
+  display: block !important;
+}
+.d-flex {
+  display: flex !important;
+}
+.d-inline {
+  display: inline !important;
+}
+.d-inline-block {
+  display: inline-block !important;
+}
+.d-none {
+  display: none !important;
+}
+
+@each $media-query in map-keys($media-queries) {
+  @for $i from 1 through length($spacers) {
+    @include mq($media-query) {
+      $size: #{map-get($spacers, sp-#{$i - 1})};
+      $scale: #{$i - 1};
+
+      // .d-sm-block, .d-md-none, .d-lg-inline
+      .d-#{$media-query}-block {
+        display: block !important;
+      }
+      .d-#{$media-query}-flex {
+        display: flex !important;
+      }
+      .d-#{$media-query}-inline {
+        display: inline !important;
+      }
+      .d-#{$media-query}-inline-block {
+        display: inline-block !important;
+      }
+      .d-#{$media-query}-none {
+        display: none !important;
+      }
+    }
+  }
+}
+
+// Vertical alignment
+
+.v-align-baseline {
+  vertical-align: baseline !important;
+}
+.v-align-bottom {
+  vertical-align: bottom !important;
+}
+.v-align-middle {
+  vertical-align: middle !important;
+}
+.v-align-text-bottom {
+  vertical-align: text-bottom !important;
+}
+.v-align-text-top {
+  vertical-align: text-top !important;
+}
+.v-align-top {
+  vertical-align: top !important;
+}
diff --git a/_sass/vendor/utilities/_lists.scss b/_sass/vendor/utilities/_lists.scss
new file mode 100644
index 00000000..c7b2293d
--- /dev/null
+++ b/_sass/vendor/utilities/_lists.scss
@@ -0,0 +1,17 @@
+//
+// Utility classes for lists
+//
+
+// stylelint-disable primer/selector-no-utility, primer/no-override, selector-max-type
+
+.list-style-none {
+  padding: 0 !important;
+  margin: 0 !important;
+  list-style: none !important;
+
+  li {
+    &::before {
+      display: none !important;
+    }
+  }
+}
diff --git a/_sass/vendor/utilities/_spacing.scss b/_sass/vendor/utilities/_spacing.scss
new file mode 100644
index 00000000..917dd3c7
--- /dev/null
+++ b/_sass/vendor/utilities/_spacing.scss
@@ -0,0 +1,161 @@
+//
+// Utility classes for margins and padding
+//
+
+// scss-lint:disable SpaceAfterPropertyName
+// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility, primer/no-override
+
+// Margin spacer utilities
+
+@for $i from 1 through length($spacers) {
+  $size: #{map-get($spacers, sp-#{$i - 1})};
+  $scale: #{$i - 1};
+
+  // .m-0, .m-1, .m-2...
+  .m-#{$scale} {
+    margin: #{$size} !important;
+  }
+  .mt-#{$scale} {
+    margin-top: #{$size} !important;
+  }
+  .mr-#{$scale} {
+    margin-right: #{$size} !important;
+  }
+  .mb-#{$scale} {
+    margin-bottom: #{$size} !important;
+  }
+  .ml-#{$scale} {
+    margin-left: #{$size} !important;
+  }
+
+  .mx-#{$scale} {
+    margin-right: #{$size} !important;
+    margin-left: #{$size} !important;
+  }
+
+  .my-#{$scale} {
+    margin-top: #{$size} !important;
+    margin-bottom: #{$size} !important;
+  }
+
+  .mxn-#{$scale} {
+    margin-right: -#{$size} !important;
+    margin-left: -#{$size} !important;
+  }
+}
+
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+@each $media-query in map-keys($media-queries) {
+  @for $i from 1 through length($spacers) {
+    @include mq($media-query) {
+      $size: #{map-get($spacers, sp-#{$i - 1})};
+      $scale: #{$i - 1};
+
+      // .m-sm-0, .m-md-1, .m-lg-2...
+      .m-#{$media-query}-#{$scale} {
+        margin: #{$size} !important;
+      }
+      .mt-#{$media-query}-#{$scale} {
+        margin-top: #{$size} !important;
+      }
+      .mr-#{$media-query}-#{$scale} {
+        margin-right: #{$size} !important;
+      }
+      .mb-#{$media-query}-#{$scale} {
+        margin-bottom: #{$size} !important;
+      }
+      .ml-#{$media-query}-#{$scale} {
+        margin-left: #{$size} !important;
+      }
+
+      .mx-#{$media-query}-#{$scale} {
+        margin-right: #{$size} !important;
+        margin-left: #{$size} !important;
+      }
+
+      .my-#{$media-query}-#{$scale} {
+        margin-top: #{$size} !important;
+        margin-bottom: #{$size} !important;
+      }
+
+      .mxn-#{$media-query}-#{$scale} {
+        margin-right: -#{$size} !important;
+        margin-left: -#{$size} !important;
+      }
+    }
+  }
+}
+
+// Padding spacer utilities
+
+@for $i from 1 through length($spacers) {
+  $size: #{map-get($spacers, sp-#{$i - 1})};
+  $scale: #{$i - 1};
+
+  // .p-0, .p-1, .p-2...
+  .p-#{$scale} {
+    padding: #{$size} !important;
+  }
+  .pt-#{$scale} {
+    padding-top: #{$size} !important;
+  }
+  .pr-#{$scale} {
+    padding-right: #{$size} !important;
+  }
+  .pb-#{$scale} {
+    padding-bottom: #{$size} !important;
+  }
+  .pl-#{$scale} {
+    padding-left: #{$size} !important;
+  }
+
+  .px-#{$scale} {
+    padding-right: #{$size} !important;
+    padding-left: #{$size} !important;
+  }
+
+  .py-#{$scale} {
+    padding-top: #{$size} !important;
+    padding-bottom: #{$size} !important;
+  }
+}
+
+@each $media-query in map-keys($media-queries) {
+  @include mq($media-query) {
+    @for $i from 1 through length($spacers) {
+      $size: #{map-get($spacers, sp-#{$i - 1})};
+      $scale: #{$i - 1};
+
+      // .p-sm-0, .p-md-1, .p-lg-2...
+      .p-#{$media-query}-#{$scale} {
+        padding: #{$size} !important;
+      }
+      .pt-#{$media-query}-#{$scale} {
+        padding-top: #{$size} !important;
+      }
+      .pr-#{$media-query}-#{$scale} {
+        padding-right: #{$size} !important;
+      }
+      .pb-#{$media-query}-#{$scale} {
+        padding-bottom: #{$size} !important;
+      }
+      .pl-#{$media-query}-#{$scale} {
+        padding-left: #{$size} !important;
+      }
+
+      .px-#{$media-query}-#{$scale} {
+        padding-right: #{$size} !important;
+        padding-left: #{$size} !important;
+      }
+
+      .py-#{$media-query}-#{$scale} {
+        padding-top: #{$size} !important;
+        padding-bottom: #{$size} !important;
+      }
+    }
+  }
+}
diff --git a/_sass/vendor/utilities/_typography.scss b/_sass/vendor/utilities/_typography.scss
new file mode 100644
index 00000000..2397acbc
--- /dev/null
+++ b/_sass/vendor/utilities/_typography.scss
@@ -0,0 +1,91 @@
+//
+// Utility classes for typography
+//
+
+// stylelint-disable primer/selector-no-utility, primer/no-override
+
+.fs-1 {
+  @include fs-1;
+}
+
+.fs-2 {
+  @include fs-2;
+}
+
+.fs-3 {
+  @include fs-3;
+}
+
+.fs-4 {
+  @include fs-4;
+}
+
+.fs-5 {
+  @include fs-5;
+}
+
+.fs-6 {
+  @include fs-6;
+}
+
+.fs-7 {
+  @include fs-7;
+}
+
+.fs-8 {
+  @include fs-8;
+}
+
+.fs-9 {
+  @include fs-9;
+}
+
+.fs-10 {
+  @include fs-10;
+}
+
+.fw-300 {
+  font-weight: 300 !important;
+}
+
+.fw-400 {
+  font-weight: 400 !important;
+}
+
+.fw-500 {
+  font-weight: 500 !important;
+}
+
+.fw-700 {
+  font-weight: 700 !important;
+}
+
+.lh-0 {
+  line-height: 0 !important;
+}
+
+.lh-default {
+  line-height: $body-line-height;
+}
+
+.lh-tight {
+  line-height: $body-heading-line-height;
+}
+
+.ls-5 {
+  letter-spacing: 0.05em !important;
+}
+
+.ls-10 {
+  letter-spacing: 0.1em !important;
+}
+
+.ls-0 {
+  letter-spacing: 0 !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
+// stylelint-enable primer/selector-no-utility
diff --git a/_sass/vendor/utilities/utilities.scss b/_sass/vendor/utilities/utilities.scss
new file mode 100644
index 00000000..6c25bdfa
--- /dev/null
+++ b/_sass/vendor/utilities/utilities.scss
@@ -0,0 +1,5 @@
+@import "./colors";
+@import "./layout";
+@import "./typography";
+@import "./lists";
+@import "./spacing";