diff --git a/packages/css-theme/src/_components.scss b/packages/css-theme/src/_components.scss
index 52246f1167d..faf73a5500c 100644
--- a/packages/css-theme/src/_components.scss
+++ b/packages/css-theme/src/_components.scss
@@ -1,12 +1,11 @@
-@import 'components/navbar';
 @import 'components/draft';
 @import 'components/draft-configurator';
 @import 'components/draft-design';
-@import 'components/topicstoc';
 @import 'components/breadcrumbs';
 @import 'components/event';
 @import 'components/example';
 @import 'components/fab';
+@import 'components/main-menu';
 @import 'components/spinner';
 @import 'components/linedrawing';
 @import 'components/modelgraph';
diff --git a/packages/css-theme/src/_elements.scss b/packages/css-theme/src/_elements.scss
index ae6fc5d05d0..ddf9d9fcb12 100644
--- a/packages/css-theme/src/_elements.scss
+++ b/packages/css-theme/src/_elements.scss
@@ -1,9 +1,9 @@
-@import "elements/a";
-@import "elements/footer";
-@import "elements/ul";
-@import "elements/code";
-@import "elements/blockquote";
-@import "elements/figure";
-@import "elements/table";
-@import "elements/button";
-@import "elements/jargon";
+@import 'elements/a';
+@import 'elements/ul';
+@import 'elements/code';
+@import 'elements/blockquote';
+@import 'elements/figure';
+@import 'elements/table';
+@import 'elements/button';
+@import 'elements/jargon';
+@import 'elements/mark';
diff --git a/packages/css-theme/src/_layout.scss b/packages/css-theme/src/_layout.scss
deleted file mode 100644
index a247f4309d9..00000000000
--- a/packages/css-theme/src/_layout.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "layout/section-aside";
-@import "layout/menu-toc";
-
diff --git a/packages/css-theme/src/_mixins.scss b/packages/css-theme/src/_mixins.scss
index 70830755456..6c1bfd3e8b7 100644
--- a/packages/css-theme/src/_mixins.scss
+++ b/packages/css-theme/src/_mixins.scss
@@ -15,18 +15,28 @@
 }
 
 @mixin body-font {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  font-family: Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  font-weight: 300;
 }
 @mixin title-font {
-  font-family: 'Raleway', sans-serif;
+  font-family: 'Ubuntu', sans-serif;
+  font-weight: 700;
 }
 @mixin button-font {
-  font-family: 'Roboto Condensed', sans-serif;
+  font-family: 'Ubuntu', sans-serif;
+  font-weight: 700;
 }
 @mixin fixed-font {
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-family: 'Roboto mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
+    monospace;
 }
 @mixin scribble-font {
   font-family: 'Permanent Marker', cursive;
 }
+@mixin title-color-light {
+  color: $oc-gray-7;
+}
+@mixin title-color-dark {
+  color: $oc-gray-4;
+}
diff --git a/packages/css-theme/src/_prism.css b/packages/css-theme/src/_prism.css
index adc514f6197..9c7483e6550 100644
--- a/packages/css-theme/src/_prism.css
+++ b/packages/css-theme/src/_prism.css
@@ -8,7 +8,7 @@ code[class*='language-'],
 pre[class*='language-'] {
   color: #c5c8c6;
   text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-  font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
+  font-family: 'Roboto mono', Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
   direction: ltr;
   text-align: left;
   white-space: pre;
diff --git a/packages/css-theme/src/_reset.scss b/packages/css-theme/src/_reset.scss
index f1ae38ca130..fa38f0ad45f 100644
--- a/packages/css-theme/src/_reset.scss
+++ b/packages/css-theme/src/_reset.scss
@@ -3,6 +3,8 @@ body {
   font-size: 18px;
   line-height: 1.5;
   scroll-behavior: smooth;
+  font-family: Ubuntu;
+  font-weight: 300;
 }
 img {
   max-width: 100%;
diff --git a/packages/css-theme/src/_typography.scss b/packages/css-theme/src/_typography.scss
index 5a2e0ac667f..ab110722dfd 100644
--- a/packages/css-theme/src/_typography.scss
+++ b/packages/css-theme/src/_typography.scss
@@ -7,46 +7,46 @@ h6,
 button {
   @include title-font;
 }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $oc-gray-7;
+}
 h1 {
   font-size: 3.5rem;
-  font-weight: 200;
+  font-weight: 700;
   margin: 1rem 0 2rem;
   line-height: 1.1;
 }
 h2 {
   font-size: 2.5rem;
-  border-top: 1px solid $oc-gray-4;
   margin: 3.5rem 0 1rem;
   padding: 1rem 0 1rem;
-  font-weight: 300;
+  font-weight: 700;
   line-height: 1.1;
 }
-.theme-wrapper.dark h2 {
-  border-color: $oc-gray-7;
-}
-h2.bare {
-  border: none;
-  margin: 0;
-}
 h3 {
   font-size: 2rem;
   margin: 1.75rem 0 1rem;
-  font-weight: 300;
+  font-weight: 700;
 }
 h4 {
   font-size: 1.75rem;
   margin: 1.5rem 0 0.75rem;
-  font-weight: 300;
+  font-weight: 500;
 }
 h5 {
   font-size: 1.5rem;
   margin: 1.25rem 0 0.5rem;
-  font-weight: 400;
+  font-weight: 500;
 }
 h6 {
   font-size: 1.25rem;
   margin: 1rem 0 0.25rem;
-  font-weight: 400;
+  font-weight: 500;
 }
 h2 a.anchor,
 h3 a.anchor,
@@ -56,6 +56,26 @@ h6 a.anchor {
   margin-left: -20px;
   margin-right: 4px;
 }
+.theme-wrapper.light {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @include title-color-light;
+  }
+}
+.theme-wrapper.dark {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @include title-color-dark;
+  }
+}
 
 @include sm-screen {
   h1 {
diff --git a/packages/css-theme/src/_utility.scss b/packages/css-theme/src/_utility.scss
index 6cbcced6d58..42053a9b364 100644
--- a/packages/css-theme/src/_utility.scss
+++ b/packages/css-theme/src/_utility.scss
@@ -44,3 +44,7 @@
 .poh:hover {
   cursor: pointer;
 }
+.scribble {
+  font-family: 'Permanent marker';
+  color: $oc-pink-5;
+}
diff --git a/packages/css-theme/src/_variables.scss b/packages/css-theme/src/_variables.scss
index b67207b3027..8a951680575 100644
--- a/packages/css-theme/src/_variables.scss
+++ b/packages/css-theme/src/_variables.scss
@@ -2,7 +2,7 @@ $fc-blue: '#74c0fc';
 $fc-text-light: $oc-gray-9;
 $fc-text-dark: $oc-gray-0;
 $fc-bg-light: $oc-gray-0;
-$fc-bg-dark: $oc-gray-9;
+$fc-bg-dark: darken($oc-gray-9, 3);
 $fc-altbg-light: $oc-gray-1;
 $fc-altbg-dark: $oc-gray-8;
 $fc-notice-light: $oc-yellow-7;
diff --git a/packages/css-theme/src/components/_breadcrumbs.scss b/packages/css-theme/src/components/_breadcrumbs.scss
index 2252cb6385d..055357682db 100644
--- a/packages/css-theme/src/components/_breadcrumbs.scss
+++ b/packages/css-theme/src/components/_breadcrumbs.scss
@@ -4,6 +4,9 @@ nav.breadcrumbs {
     margin-left: 0;
     padding-left: 0;
     font-size: 95%;
+    font-weight: 500;
+    @include title-color-light;
+    line-height: 1.1;
     li {
       list-style-type: none;
       display: inline-block;
@@ -14,8 +17,12 @@ nav.breadcrumbs {
     }
     li:before {
       content: '»';
-      padding: 0 0.25rem;
+      padding: 0 0.5rem;
       font-size: 125%;
+      font-weight: 700;
     }
   }
 }
+.theme-wrapper.dark nav.breadcrumbs ul {
+  @include title-color-dark;
+}
diff --git a/packages/css-theme/src/components/_main-menu.scss b/packages/css-theme/src/components/_main-menu.scss
new file mode 100644
index 00000000000..ab9356aeaa7
--- /dev/null
+++ b/packages/css-theme/src/components/_main-menu.scss
@@ -0,0 +1,158 @@
+ul#main-menu {
+  margin: 0;
+  padding: 2rem 0;
+  li {
+    display: block;
+    a {
+      display: block;
+      padding: 0.1rem 1rem;
+      text-transform: capitalize;
+    }
+    a:hover {
+      text-decoration: none;
+      background: $oc-gray-2;
+    }
+  }
+  > li {
+    font-size: 1.5rem;
+    font-weight: 500;
+    a {
+      color: $oc-gray-7;
+      svg {
+        padding-right: 0.5rem;
+        margin-bottom: -2px;
+        color: $oc-violet-5;
+      }
+    }
+    a.active {
+      border-left: 4px solid $oc-green-5;
+      svg {
+        color: $oc-gray-7;
+      }
+    }
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+    text-transform: none;
+  }
+  ul[class^='level-'] {
+    > li {
+      line-height: 1.5;
+      > a {
+        padding: 0;
+        font-weight: 300;
+        text-transform: none;
+      }
+      > a:before {
+        content: '';
+        background-color: currentColor;
+        border-radius: 50%;
+        width: 8px;
+        height: 8px;
+        display: inline-block;
+        margin-right: 0.5rem;
+        margin-bottom: 2px;
+      }
+      > a:hover:before {
+        color: $oc-violet-4;
+      }
+      > a.active {
+        font-weight: 500;
+        background-color: $oc-gray-3;
+        border-left: none;
+      }
+      > a.active:before {
+        background-color: $oc-green-5;
+      }
+    }
+  }
+  ul.level-1 > li {
+    > a {
+      padding: 0.1rem 0.5rem 0.1rem 1.5rem;
+      font-size: 1.25rem;
+    }
+    > a:before {
+      width: 7px;
+      height: 7px;
+    }
+  }
+  ul.level-2 > li {
+    > a {
+      padding: 0.3rem 0.5rem 0.3rem 3rem;
+      font-size: 1.15rem;
+      line-height: 1;
+    }
+    > a:before {
+      width: 7px;
+      height: 7px;
+    }
+  }
+  ul.level-3 > li {
+    > a {
+      padding-left: 4rem;
+      font-size: 1.1rem;
+    }
+    > a:before {
+      width: 6px;
+      height: 6px;
+    }
+  }
+  ul.level-4 > li {
+    > a {
+      padding-left: 5rem;
+      font-size: 1.1rem;
+    }
+    > a:before {
+      width: 5px;
+      height: 5px;
+      line-height: 4px;
+    }
+  }
+}
+@include sm-screen {
+  ul#main-menu {
+    padding: 1rem 0;
+    li a {
+      padding: 0.1rem 0.5rem;
+      font-size: 90%;
+    }
+  }
+}
+
+.theme-wrapper.dark ul#main-menu {
+  li {
+    a:hover {
+      background: $oc-gray-9;
+    }
+  }
+  > li {
+    a {
+      color: $oc-gray-4;
+      svg {
+        color: $oc-violet-3;
+      }
+    }
+    a.active {
+      border-left: 4px solid $oc-green-4;
+      svg {
+        color: $oc-gray-4;
+      }
+    }
+  }
+  ul[class^='level-'] {
+    > li {
+      > a:hover:before {
+        color: $oc-violet-3;
+      }
+      > a.active {
+        background-color: $oc-gray-8;
+        border-left: none;
+      }
+      > a.active:before {
+        background-color: $oc-green-4;
+      }
+    }
+  }
+}
diff --git a/packages/css-theme/src/components/_navbar.scss b/packages/css-theme/src/components/_navbar.scss
deleted file mode 100644
index 4e76b1c438e..00000000000
--- a/packages/css-theme/src/components/_navbar.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-header.navbar {
-  height: 64px;
-  width: calc(100% - 52px);
-  margin: 0;
-  padding: 0 26px;
-  background: $fc-bg-dark;
-  z-index: 15;
-  div {
-    align-items: center;
-  }
-
-  div.logo {
-    height: 64px;
-    padding: 0;
-    margin: 0;
-    margin-right: 13px;
-    display: flex;
-    align-items: center;
-    color: $oc-gray-2;
-    a {
-      text-decoration: none;
-      height: 42px;
-      width: 42px;
-    }
-  }
-  div.emblem {
-    margin-right: 26px;
-    a {
-      text-decoration: none !important;
-      @include button-font;
-      font-size: 26px;
-      span.lem {
-        color: $oc-gray-2;
-      }
-      span.emb {
-        color: $fc-link-dark;
-      }
-    }
-  }
-  div.spread {
-    flex-grow: 1;
-    display: flex;
-    align-items: center;
-  }
-  a.nav,
-  button {
-    @include button-font;
-    text-decoration: none !important;
-    margin: 0;
-    padding: 0 13px;
-    height: 60px;
-    color: $fc-text-dark !important;
-    border: 0;
-    line-height: 64px;
-    border-bottom: 4px solid $fc-bg-dark;
-    font-size: 18px;
-    text-decoration: none;
-    transition: color 0.2s ease, border-color 0.2s ease-in-out;
-    background: none;
-  }
-  button {
-    /* For buttons, border does not count for height */
-    height: 64px;
-  }
-  button:hover,
-  a.nav:hover {
-    cursor: pointer;
-  }
-  button:hover,
-  a.nav:hover,
-  button.active,
-  a.nav.active {
-    color: $fc-link-dark;
-    border-color: $fc-link-dark;
-  }
-  svg.nav-icon {
-    margin-right: 5px;
-    margin-bottom: -6px;
-  }
-  svg.nav-icon.moon {
-    transform: rotate(26deg);
-  }
-}
-
-header.navbar > div {
-  display: flex;
-  align-items: center;
-}
-
-@include xs-screen {
-  header.navbar {
-    display: none;
-  }
-}
-
-@include sm-screen {
-  header.navbar {
-    height: 54px;
-    width: calc(100% - 36px);
-    padding: 0 18px;
-    > div {
-      height: 54px;
-    }
-    div.logo,
-    div.emblem {
-      margin-right: 12px;
-    }
-    div.logo a {
-      height: 32px;
-      width: 32px;
-    }
-    div.emblem a {
-      font-size: 22px;
-    }
-    a.nav {
-      padding: 0 6px;
-      line-height: 54px;
-      height: 50px;
-    }
-    button {
-      padding: 0 6px;
-      height: 54px;
-      line-height: 54px;
-    }
-  }
-}
diff --git a/packages/css-theme/src/components/_topicstoc.scss b/packages/css-theme/src/components/_topicstoc.scss
deleted file mode 100644
index c911c668e56..00000000000
--- a/packages/css-theme/src/components/_topicstoc.scss
+++ /dev/null
@@ -1,127 +0,0 @@
-ul.topics {
-  margin: 0;
-  padding: 0;
-}
-ul.topics:first-child { padding-top: 1rem; }
-ul.topics:last-child { padding-bottom: 1rem; }
-ul.topics > li {
-  @include title-font;
-  list-style-type: none;
-  margin: 0;
-  a.topic {
-    display: block;
-    padding: 0.25rem 0.5rem;
-    border-left: 4px solid transparent;
-    color: $fc-text-light!important;
-  }
-  a.topic:hover {
-    background: $oc-gray-5;
-    text-decoration: none!important;
-  }
-}
-ul.topics > li.inactive {
-  font-weight: normal;
-}
-ul.topics > li.active {
-  font-weight: bold;
-  a.topic {
-    border-left: 4px solid $fc-text-light;
-  }
-}
-
-.theme-wrapper.light ul.topic-links a { color: $fc-text-light; }
-.theme-wrapper.dark ul.topic-links a { color: $fc-text-dark; }
-.theme-wrapper.light ul.topic-links ul.links a { color: $fc-link-light; }
-.theme-wrapper.dark ul.topic-links ul.links a { color: $fc-link-dark; }
-
-ul.topic-links {
-  margin: 0;
-  padding: 0;
-  li { list-style-type: none; }
-}
-ul.topic-links li {
-  padding-left: 1rem;
-}
-ul.topic-links.level-1 > li {
-  padding-left: 1.5rem;
-}
-
-ul.topic-links ul.links {
-  margin-left: 1rem;
-  padding: 0;
-  li {
-    padding-left: 0.5rem;
-    color: $fc-link-light;
-  }
-}
-
-ul.topic-links a {
-  color: $fc-text-light;
-  font-weight: normal;
-}
-ul.topic-links a.active {
-  font-weight: bold;
-}
-.theme-wrapper.dark ul.topic-links a {
-  color: $fc-text-dark;
-}
-
-.theme-wrapper.dark ul.topics > li.active a.topic {
-    border-color: $fc-text-dark;
-}
-ul.opics > li > ul.topics.l1 {
-  font-weight: normal;
-  a {
-    color: $fc-text-light!important;
-    padding-left: 2.5rem;
-    display: block;
-  }
-  a:hover {
-    background: $oc-gray-3;
-    text-decoration: none!important;
-  }
-  li.active a {
-    font-weight: bold;
-  }
-  ul.links {
-    margin-left: 1.5rem;
-    > li > a {
-      display: inline;
-      padding: 0;
-      color: $fc-link-light!important;
-      font-weight: normal;
-    }
-    > li > a:hover {
-      text-decoration: underline!important;
-      background: transparent;
-    }
-  }
-}
-
-.theme-wrapper.dark {
-  ul.topics > li {
-    a.topic {
-      color: $fc-text-dark!important;
-    }
-    a.topic:hover {
-      background: $oc-gray-6;
-    }
-  }
-  ul.topics > li > ul.topics.l1 {
-    a {
-      color: $fc-text-dark!important;
-    }
-    a:hover {
-      background: $oc-gray-7;
-    }
-    ul.links {
-      > li > a {
-        color: $fc-link-dark!important;
-      }
-      > li > a:hover {
-        text-decoration: underline!important;
-        background: transparent;
-      }
-    }
-  }
-}
diff --git a/packages/css-theme/src/elements/_blockquote.scss b/packages/css-theme/src/elements/_blockquote.scss
index 7b99f410808..14f0bdd5094 100644
--- a/packages/css-theme/src/elements/_blockquote.scss
+++ b/packages/css-theme/src/elements/_blockquote.scss
@@ -3,19 +3,18 @@ blockquote {
   border-radius: 4px;
   margin: 2rem auto;
   padding: 1.5rem;
-  background: $oc-gray-1;
-  border: 1px solid $oc-gray-2;
+  background: #fff;
+  border: 2px solid $oc-gray-2;
   position: relative;
   svg.icon {
-    color: $oc-gray-7;
+    color: $oc-gray-0;
     position: absolute;
     top: calc(50% - 18px);
     left: -18px;
     padding: 5px;
     background: inherit;
     border-radius: 50%;
-    border: 1px solid transparent;
-    border-color: inherit;
+    border: none;
   }
 }
 blockquote > :first-child {
@@ -26,33 +25,26 @@ blockquote > p:last-of-type {
 }
 
 blockquote.note {
-  background: lighten($oc-violet-0, 1);
-  border-color: $oc-violet-2;
+  border-color: $oc-indigo-2;
   svg.icon.note {
-    color: $oc-gray-0;
-    background: $oc-violet-6;
+    background-color: $oc-indigo-5;
   }
 }
 blockquote.tip {
-  background: lighten($oc-yellow-0, 1);
-  border-color: $oc-yellow-3;
+  border-color: $oc-green-2;
   svg.icon.tip {
-    color: $oc-gray-0;
-    background: $oc-yellow-6;
+    background-color: $oc-green-5;
   }
 }
 blockquote.warning {
-  background: $oc-red-0;
-  border-color: $oc-red-3;
+  border-color: $oc-orange-2;
   svg.icon.warning {
-    color: $oc-gray-0;
-    background: $oc-red-7;
+    background-color: $oc-orange-5;
   }
 }
 
 blockquote.fixme {
-  border: 1px $oc-orange-6 dashed;
-  background: transparent;
+  border: 2px $oc-yellow-3 dashed;
 }
 blockquote.fixme:after {
   @include title-font;
@@ -61,8 +53,8 @@ blockquote.fixme:after {
   position: absolute;
   bottom: -25px;
   left: 20px;
-  color: #fff;
-  background: $oc-orange-6;
+  color: $oc-gray-8;
+  background: $oc-yellow-3;
   padding: 4px 8px;
   font-size: 16px;
   line-height: 16px;
@@ -92,39 +84,34 @@ blockquote.fixme:after {
 
 .theme-wrapper.dark {
   blockquote {
-    background: $oc-gray-8;
+    background: $oc-gray-9;
     border-color: $oc-gray-7;
+    > svg.icon {
+      border: none;
+    }
   }
   blockquote.note {
-    background: darken($oc-violet-9, 30);
-    border-color: $oc-violet-9;
+    border-color: $oc-indigo-9;
     svg.icon.note {
-      color: $oc-gray-0;
-      background: $oc-violet-9;
+      background-color: $oc-indigo-9;
     }
   }
   blockquote.tip {
-    background: darken($oc-yellow-9, 35);
-    border-color: $oc-yellow-9;
+    border-color: $oc-green-9;
     svg.icon.tip {
-      color: $oc-gray-0;
-      background: $oc-yellow-9;
+      background-color: $oc-green-9;
     }
   }
   blockquote.warning {
-    background: darken($oc-red-9, 30);
-    border-color: $oc-red-9;
+    border-color: $oc-orange-9;
     svg.icon.warning {
-      color: $oc-gray-0;
-      background: $oc-red-9;
+      background-color: $oc-orange-9;
     }
   }
   blockquote.fixme {
-    border: 1px $oc-orange-6 dashed;
-    background: transparent;
+    border: 2px $oc-yellow-3 dashed;
   }
 }
-
 @include xs-screen {
   .theme-wrapper.dark blockquote.fixme {
     border-left: 0;
diff --git a/packages/css-theme/src/elements/_footer.scss b/packages/css-theme/src/elements/_footer.scss
deleted file mode 100644
index d664952be89..00000000000
--- a/packages/css-theme/src/elements/_footer.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-footer {
-  @include button-font;
-  font-size: 90%;
-  background: $fc-bg-dark;
-  color: $fc-text-dark;
-  margin: 0;
-  padding: 4rem 1rem;
-  text-align: center;
-  a {
-    color: $fc-text-dark !important;
-  }
-  a:hover {
-    color: $fc-link-dark !important;
-  }
-  a.discord:hover {
-    color: #2a5ee8 !important;
-  }
-  a.twitter:hover {
-    color: #1da1f2 !important;
-  }
-  a.github:hover {
-    color: #6cc644 !important;
-  }
-  a.instagram:hover {
-    color: #e1306c !important;
-  }
-  a.facebook:hover {
-    color: #3b5998 !important;
-  }
-  ul {
-    margin: 0;
-    padding: 0;
-  }
-  li {
-    list-style-type: none;
-  }
-  p.social {
-    margin: 0;
-  }
-}
diff --git a/packages/css-theme/src/elements/_jargon.scss b/packages/css-theme/src/elements/_jargon.scss
index 5e90ac8de28..5d22bf8c523 100644
--- a/packages/css-theme/src/elements/_jargon.scss
+++ b/packages/css-theme/src/elements/_jargon.scss
@@ -1,23 +1,17 @@
 .jargon-term {
-  text-decoration: underline dashed $fc-link-light;
+  background: $oc-cyan-0;
+  text-decoration: none;
 }
-.jargon-term::after {
-  content: "?";
-  font-weight: bold;
-  display: inline-block;
-  transform: translate(0, -0.5em);
-  font-size: 75%;
-  color: $fc-link-light;
-  margin-left: 3px;
+.jargon-term:after {
+  display: none;
 }
-
 .jargon-term:hover {
   position: relative;
   text-decoration: none;
   cursor: help;
 }
 .jargon-term .jargon-info {
-  display: none
+  display: none;
 }
 .jargon-term:hover .jargon-info {
   display: block;
@@ -26,7 +20,7 @@
   left: 0;
   background: $fc-bg-light;
   color: $fc-text-light;
-  border: 1px solid #DCDCDC;
+  border: 1px solid #dcdcdc;
   padding: 1rem;
   border-radius: 4px;
   font-size: 90%;
@@ -36,16 +30,12 @@
 }
 .theme-wrapper.dark {
   .jargon-term {
-    text-decoration: underline dashed $fc-link-dark;
-  }
-  .jargon-term::after {
-    color: $fc-link-dark;
+    background: $oc-cyan-9;
+    text-decoration: none;
   }
   .jargon-term:hover .jargon-info {
     background: $fc-bg-dark;
     color: $fc-text-dark;
-    border: 1px solid #5A5A5A;
+    border: 1px solid #5a5a5a;
   }
 }
-
-
diff --git a/packages/css-theme/src/elements/_mark.scss b/packages/css-theme/src/elements/_mark.scss
new file mode 100644
index 00000000000..597e579abfa
--- /dev/null
+++ b/packages/css-theme/src/elements/_mark.scss
@@ -0,0 +1,10 @@
+mark {
+  background: $oc-green-2 + aa;
+  color: inherit;
+}
+.theme-wrapper.dark {
+  mark {
+    background: #176226;
+    color: inherit;
+  }
+}
diff --git a/packages/css-theme/src/layout/_menu-toc.scss b/packages/css-theme/src/layout/_menu-toc.scss
deleted file mode 100644
index 3126154521a..00000000000
--- a/packages/css-theme/src/layout/_menu-toc.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@include xs-screen {
-  .theme-wrapper.light div.fs-sa aside,
-  .theme-wrapper.dark div.fs-sa aside,
-  .theme-wrapper.light div.draft-ui-menu,
-  .theme-wrapper.dark div.draft-ui-menu,
-  .theme-wrapper.light div.menu,
-  .theme-wrapper.dark div.menu {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    padding: 0 0 1rem;
-    max-width: 600px;
-    z-index: -10;
-    transition: opacity 0.5s ease 0s;
-    opacity: 0;
-    overflow: scroll;
-    > ul,
-    > div {
-      transform: translate(0px, 20px);
-      transition: transform 0.5s ease 0s;
-    }
-  }
-}
-.theme-wrapper.show-toc div.fs-sa aside {
-  opacity: 1;
-  z-index: 10;
-  > ul {
-    transform: translate(0px, 0px);
-  }
-}
-
-.theme-wrapper.light div.draft-ui-menu,
-.theme-wrapper.light div.menu {
-  background: $oc-gray-1;
-}
-.theme-wrapper.dark div.draft-ui-menu,
-.theme-wrapper.dark div.menu {
-  background: $oc-gray-8;
-}
-.theme-wrapper.show-menu div.menu {
-  opacity: 1;
-  z-index: 10;
-  > div {
-    transform: translate(0px, 0px);
-  }
-}
diff --git a/packages/css-theme/src/layout/_section-aside.scss b/packages/css-theme/src/layout/_section-aside.scss
deleted file mode 100644
index ef77d056ff8..00000000000
--- a/packages/css-theme/src/layout/_section-aside.scss
+++ /dev/null
@@ -1,312 +0,0 @@
-div.fs-sa {
-  display: flex;
-  width: 100%;
-  margin: auto;
-  padding: 0;
-  max-width: 1600px;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  > section {
-    width: calc(100% - 300px - 4rem);
-    padding: 1rem 1.5rem;
-  }
-  aside {
-    padding: 0;
-    width: 300px;
-  }
-  aside div.sticky {
-    position: sticky;
-    top: 0;
-    height: calc(100vh - 64px);
-    overflow-y: auto;
-    ul.links {
-      margin-top: 0;
-    }
-  }
-  aside div.aside-context {
-    padding: 0;
-    h5 {
-      padding: 1.5rem 1rem 0.5rem 1rem;
-      a {
-        margin-left: -1rem;
-        margin-right: -1rem;
-        padding: 0.25rem 0 0 1rem;
-      }
-    }
-    h6 {
-      padding: 0.25rem 0 0 1rem;
-      a {
-        margin-left: -1rem;
-        margin-right: 0;
-        padding: 0.25rem 0 0 1rem;
-        font-weight: bold;
-      }
-    }
-    h5,
-    h6 {
-      margin: 0;
-      color: $oc-gray-6;
-    }
-    ol,
-    ul {
-      margin: 0;
-      padding: 0;
-      list-style-type: none;
-    }
-    li > a {
-      padding: 0.25rem 1rem 0.25rem 1.5rem;
-    }
-    li > a.level-2 {
-      padding: 0.125rem 0.25rem 0.125rem 2.25rem;
-    }
-    li > a.level-3 {
-      padding: 0 0.25rem 0 3.75rem;
-    }
-  }
-  aside ul.aside-main-menu {
-    margin: 2rem 0 1rem;
-    list-style-type: none;
-    padding: 0;
-    li {
-      text-transform: uppercase;
-      font-family: 'Roboto condensed';
-      line-height: 2;
-      font-size: 1.25rem;
-      a {
-        font-weight: 900;
-        padding: 0.25rem 0;
-        display: block;
-        svg {
-          margin: 5px 1rem -5px;
-          line-height: 1;
-        }
-      }
-    }
-  }
-  section {
-    article > div.text-section {
-      /* I've got 99 problems but too long text lines ain't on */
-      max-width: 99ch;
-    }
-  }
-}
-
-.theme-wrapper.light > div.fs-sa > aside > div.sticky {
-  ul li {
-    a {
-      color: $oc-gray-7;
-      svg {
-        color: $oc-violet-5;
-      }
-    }
-    a:hover {
-      background-color: $oc-violet-0;
-      text-decoration: none;
-    }
-    a.active {
-      background-color: $oc-violet-0;
-      svg {
-        color: $oc-gray-7;
-      }
-    }
-  }
-  div.aside-context {
-    a {
-      color: $oc-gray-7 !important;
-      font-family: 'Roboto condensed';
-      display: block;
-    }
-    a:hover {
-      background-color: $oc-violet-0;
-      text-decoration: none;
-    }
-  }
-}
-
-.theme-wrapper.dark > div.fs-sa > aside > div.sticky {
-  ul li {
-    a {
-      color: $oc-gray-4;
-      svg {
-        color: $oc-violet-4;
-      }
-    }
-    a:hover {
-      background-color: $oc-gray-8;
-      text-decoration: none;
-    }
-    a.active {
-      background-color: $oc-gray-8;
-      svg {
-        color: $oc-gray-4;
-      }
-    }
-  }
-  div.aside-context {
-    a {
-      color: $oc-gray-4 !important;
-      font-family: 'Roboto condensed';
-      display: block;
-    }
-    a:hover {
-      background-color: $oc-gray-8;
-      text-decoration: none;
-    }
-  }
-}
-
-.theme-wrapper.dark {
-  div.fs-sa {
-    > section {
-      background: $oc-gray-9;
-    }
-  }
-}
-
-@include sm-screen {
-  div.fs-sa {
-    > section {
-      width: calc(100% - 200px - 3rem);
-      padding: 1rem;
-    }
-    aside {
-      padding: 0;
-      width: 200px;
-    }
-    aside div.aside-context {
-      h5 {
-        padding: 1rem 0.5rem 0.5rem 0.5rem;
-        a {
-          margin-left: -0.5rem;
-          margin-right: -0.5rem;
-          padding: 0.25rem 0 0 0.5rem;
-        }
-      }
-      h6 {
-        padding: 0.25rem 0 0 0.5rem;
-        a {
-          margin-left: -0.5rem;
-          margin-right: 0;
-          padding: 0.25rem 0 0 0.5rem;
-        }
-      }
-      li > a {
-        padding: 0 0.5rem;
-      }
-    }
-    aside ul.aside-main-menu {
-      margin: 1rem 0;
-      li {
-        font-family: 'Roboto condensed';
-        line-height: 2;
-        font-size: 1rem;
-        a {
-          padding: 0.15rem 0;
-          svg {
-            margin: 5px 0.5rem -5px;
-          }
-        }
-      }
-    }
-  }
-}
-
-@include xs-screen {
-  ul.aside-main-menu {
-    margin: 0 0 1rem;
-    list-style-type: none;
-    padding: 0;
-    li {
-      text-transform: uppercase;
-      font-family: 'Roboto condensed';
-      line-height: 2;
-      font-size: 1.25rem;
-      a {
-        font-weight: 900;
-        padding: 0.25rem 0;
-        display: block;
-        svg {
-          margin: 5px 1rem -5px;
-          line-height: 1;
-        }
-      }
-    }
-  }
-
-  .theme-wrapper.light ul.aside-main-menu {
-    li a {
-      color: $oc-gray-9 !important;
-    }
-  }
-  .theme-wrapper.dark ul.aside-main-menu {
-    li a {
-      color: $oc-gray-0 !important;
-    }
-  }
-
-  div.fs-sa {
-    > section {
-      width: calc(100% - 2rem);
-      padding: 1rem;
-    }
-    aside {
-      padding: 0;
-      width: 200px;
-    }
-    aside div.aside-context {
-      h5 {
-        padding: 1rem 0.5rem 0.5rem 0.5rem;
-        a {
-          margin-left: -0.5rem;
-          margin-right: -0.5rem;
-          padding: 0.25rem 0 0 0.5rem;
-        }
-      }
-      h6 {
-        padding: 0.25rem 0 0 0.5rem;
-        a {
-          margin-left: -0.5rem;
-          margin-right: 0;
-          padding: 0.25rem 0 0 0.5rem;
-        }
-      }
-      li > a {
-        padding: 0 0.5rem;
-      }
-    }
-  }
-  div.context-wrapper {
-    font-family: 'Roboto condensed';
-    padding: 1rem;
-    h5 {
-      padding: 1rem 0 0.5rem 0;
-      margin: 0;
-      line-height: 1.25;
-      a {
-        padding: 0.25rem 0 0 1rem;
-      }
-    }
-    h6 {
-      padding: 0.5rem 0 0.25rem 0;
-      margin: 0;
-      a {
-        padding: 0.25rem 0 0 1rem;
-      }
-    }
-    h5,
-    h6 {
-      margin: 0;
-      color: $oc-gray-6;
-    }
-    ol,
-    ul {
-      margin: 0;
-      padding: 0;
-      list-style-type: none;
-    }
-    li > a {
-      padding: 0.25rem 1rem 0.25rem 1rem;
-    }
-  }
-}
diff --git a/packages/css-theme/src/theme.scss b/packages/css-theme/src/theme.scss
index 8584b6d9dc9..4ee1effd9b7 100644
--- a/packages/css-theme/src/theme.scss
+++ b/packages/css-theme/src/theme.scss
@@ -1,13 +1,11 @@
-@import "reset";
+@import 'reset';
 @import '../../../node_modules/open-color/open-color.scss';
-@import "variables";
-@import "mixins";
-@import "prism";
-@import "theme-wrapper";
-@import "typography";
-@import "layout";
-@import "scroll";
-@import "components";
-@import "elements";
-@import "utility";
-
+@import 'variables';
+@import 'mixins';
+@import 'prism';
+@import 'theme-wrapper';
+@import 'typography';
+@import 'scroll';
+@import 'components';
+@import 'elements';
+@import 'utility';