diff --git a/assets/css/base.scss b/assets/css/base.scss
new file mode 100644
index 00000000..a7d42824
--- /dev/null
+++ b/assets/css/base.scss
@@ -0,0 +1,416 @@
+@charset 'utf-8';
+@import url('https://use.typekit.net/qlo3dpu.css');
+
+@import '~prism-themes/themes/prism-a11y-dark';
+
+pre[class*='language-'] {
+  font-size: 1rem;
+}
+
+code {
+  background-color: #333333;
+  border: 1px solid black;
+  color: white;
+  padding: 0.15em;
+  border-radius: 0.25em;
+  font-size: 95%;
+
+  pre & {
+    border: none;
+    padding: 0;
+    border-radius: 0;
+    font-size: inherit;
+  }
+}
+
+// COLORS //
+
+:root {
+  --auto-grid-min-size: 17rem;
+}
+
+$primary-color: #0e4bff; //cobalt blue is so pretty//
+$secondary-color: #f3f315; //
+
+$black: #222222;
+$white: #ffffff;
+$pistachio: #e5ffe5;
+$yellow: #ffff00;
+
+$dark-grey: #4f4f4f;
+$mid-grey: #767676; // the lightest shade of grey you can get away with, #a11y
+$light-grey: #eeeeee; // for backgrounds only
+
+// TYPOGRAPHY //
+$sans-serif: monotype-grotesque, 'Lucida Sans', sans-serif;
+$serif: orpheuspro, Palatino, Times, serif;
+$ext-sans: monotype-grotesque-extended, Arial Black, sans-serif;
+$con-sans: monotype-grotesque-condensed, Arial Narrow, sans-serif;
+
+$thin: 200;
+$light: 300;
+$regular: 400;
+$medium: 500;
+$bold: 700;
+
+//MIXINS
+
+@mixin icon__avoid() {
+  content: '🚨';
+}
+
+@mixin icon__alt() {
+  content: '👍';
+}
+
+@mixin icon__tool() {
+  content: '🧰';
+}
+
+@mixin icon__hanging() {
+  margin-left: -2.15rem;
+}
+
+@mixin icon__embed() {
+  margin-right: 0.35rem;
+}
+
+body {
+  border-top: 1rem solid red;
+  font-family: $sans-serif;
+  font-size: 20px;
+  padding: 2rem;
+  margin: 0;
+}
+
+h1 {
+  font-family: $ext-sans;
+  font-weight: $bold;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+p {
+  margin: 0.75rem 0;
+  font-size: 1.25rem;
+  line-height: 1.25;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+  border-bottom: darkgrey solid 0.1em;
+  font-family: $ext-sans;
+  margin: 1rem 0;
+
+  &:hover {
+    border-bottom: red solid 0.1rem;
+  }
+}
+
+.subtitle {
+  font-family: $ext-sans;
+  font-weight: $regular;
+  letter-spacing: 0.1;
+  grid-column: span 2;
+}
+
+ul[class] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.summary {
+  grid-column: span 2;
+}
+
+.small {
+  font-size: 0.75em;
+}
+
+.title__thicc {
+  font-size: 8vh;
+  line-height: 0.75;
+  padding: 0;
+  margin: 0.5rem 0rem;
+  grid-column: span 2;
+  // transform: rotateZ(90deg);
+  // margin: 13rem -7rem;
+}
+
+.help {
+  margin: 1rem 0;
+  li {
+    margin: 0.75rem 0;
+  }
+}
+
+th {
+  text-align: left;
+}
+// GRID //
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, [col] 1fr [col]);
+  grid-template-rows: fit-content, fit-content, auto;
+  grid-row-gap: 10rem;
+  grid-column-gap: 4rem;
+}
+
+.auto-grid {
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(var(--auto-grid-min-size), 1fr)
+  );
+  grid-gap: 1rem;
+}
+
+.small-left-grid {
+  display: grid;
+  grid-gap: 1rem;
+
+  @media (min-width: 800px) {
+    grid-template-columns: 10rem 60ch;
+  }
+}
+
+.page {
+  align-items: start;
+  display: grid;
+  grid-template-columns: 1fr;
+
+  & > * {
+    grid-column: 1;
+  }
+}
+
+.box {
+  background: black;
+  color: white;
+  padding: 1rem;
+  margin: 1rem 0.5rem;
+  height: auto;
+
+  a {
+    color: white;
+  }
+}
+
+.sub-headline {
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+
+.list {
+  ol {
+    padding: 0 0 0 1em;
+    margin: 0;
+  }
+
+  li {
+    list-style: none;
+    padding-bottom: 0.5em;
+
+    &.subterm {
+      padding-left: 10px;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+
+    &.subterm:before {
+      content: '\21B3';
+      padding-right: 5px;
+    }
+  }
+}
+
+.style__italics {
+  font-style: italic;
+}
+
+.word {
+  --word-signal-color: currentColor;
+
+  &__title {
+    font-family: $serif;
+    font-weight: 900;
+    font-size: 2.5rem;
+    line-height: 1.25;
+    margin-bottom: 1rem;
+    margin-top: 0;
+  }
+
+  &__content {
+    align-items: stretch;
+
+    @supports (display: grid) {
+      // align-items: flex-start;
+      display: grid;
+      grid-template-columns: 1fr 4fr;
+      grid-gap: 1rem;
+
+      & > * {
+        margin: 0;
+      }
+    }
+
+    & > p {
+      grid-column: 1 / -1;
+      font-family: $sans-serif;
+      font-size: 1.5rem;
+    }
+
+    & h4 {
+      grid-column: 1;
+      font-family: $con-sans;
+      font-size: 0.85rem;
+      font-weight: normal;
+      flex: 0 1 auto;
+      text-transform: uppercase;
+      transform: translateY(0.4em);
+
+      @supports (display: grid) {
+        text-align: right;
+      }
+    }
+
+    & h4,
+    & h4 + * {
+      margin-top: 1rem;
+    }
+
+    & h4 ~ p,
+    & h4 ~ ul {
+      // border-left: 0.1rem solid lightgrey;
+      // padding-left: 1rem;
+      grid-column: 2;
+      font-size: inherit;
+    }
+  }
+
+  &__speech {
+    font-size: 0.5em;
+    font-family: $sans-serif;
+  }
+
+  &__signal {
+    border-top: 1px solid var(--word-signal-color);
+    color: var(--word-signal-color);
+    display: inline-block;
+    font-family: $ext-sans;
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    letter-spacing: 0.15rem;
+    padding: 0.5rem 0.75rem;
+
+    &--avoid {
+      --word-signal-color: red;
+
+      &:before {
+        @include icon__avoid();
+        @include icon__hanging();
+      }
+    }
+
+    &--better {
+      --word-signal-color: green;
+
+      &:before {
+        @include icon__alt();
+        @include icon__hanging();
+      }
+    }
+
+    &--tool {
+      &:before {
+        @include icon__tool();
+        @include icon__hanging();
+      }
+    }
+  }
+}
+
+.block__dictionary {
+  max-width: 50rem;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 1rem;
+}
+
+.block__word {
+  grid-column: span 2;
+  display: flex;
+  flex-direction: column;
+  margin: 1rem;
+}
+
+.block__type {
+  display: grid;
+  grid-template-columns: 1fr 4fr;
+  align-items: flex-start;
+}
+
+.word__type {
+  text-align: right;
+  padding-right: 1rem;
+  font-family: $con-sans;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+}
+
+.word__link {
+  text-decoration: none;
+  color: black;
+  border-bottom: darkgrey solid 0.1em;
+  font-family: $ext-sans;
+}
+
+.word__breakdown {
+  font-family: $sans-serif;
+  border-left: 0.1rem solid lightgrey;
+  padding-left: 1rem;
+}
+
+.flag__red {
+  background-color: rgb(255, 192, 203);
+  font-size: 0.9rem;
+  font-weight: bold;
+  border-radius: 1rem;
+  padding: 0.45rem 0.65rem;
+  margin: 0.25rem 0.75rem;
+  text-transform: lowercase;
+
+  &:before {
+    @include icon__avoid();
+    @include icon__embed();
+  }
+}
+
+.list-semicolon {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  & > li {
+    display: inline;
+
+    &:not(:last-child)::after {
+      content: '; ';
+    }
+  }
+}
+
+.site-footer {
+  margin-top: 3rem;
+}