diff --git a/package-lock.json b/package-lock.json
index 7d1a21f5e0..f1cfe38870 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20915,14 +20915,6 @@
         }
       }
     },
-    "react-day-picker": {
-      "version": "7.4.8",
-      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-7.4.8.tgz",
-      "integrity": "sha512-pp0hnxFVoRuBQcRdR1Hofw4CQtOCGVmzCNrscyvS0Q8NEc+UiYLEDqE5dk37bf0leSnBW4lheIt0CKKhuKzDVw==",
-      "requires": {
-        "prop-types": "^15.6.2"
-      }
-    },
     "react-dom": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
diff --git a/package.json b/package.json
index 80514cfc5a..31d9e4c01b 100644
--- a/package.json
+++ b/package.json
@@ -131,7 +131,6 @@
     "prismjs": "^1.20.0",
     "react": "^16.13.1",
     "react-beautiful-dnd": "^13.0.0",
-    "react-day-picker": "^7.4.8",
     "react-dom": "^16.13.1",
     "react-grid-layout": "^1.2.0",
     "react-hot-toast": "^1.0.1",
diff --git a/ppl/css/_load-files-input.scss b/ppl/css/_load-files-input.scss
index 58383c6343..7bc4a3c5da 100644
--- a/ppl/css/_load-files-input.scss
+++ b/ppl/css/_load-files-input.scss
@@ -20,7 +20,7 @@
   min-width: 360px;
   position: relative;
   border-radius: 16px;
-  border: 2px dashed $brand-orange;
+  border: 2px dashed var(--orange);
   box-shadow: inset 0 0 2px 0px rgba(0, 0, 0, 0.3);
   background: white;
   width: 100%;
@@ -50,7 +50,7 @@
     }
     p {
       @include label-small;
-      color: $slate;
+      color: var(--slate);
     }
   }
 
diff --git a/ppl/css/_zeek-colors.scss b/ppl/css/_zeek-colors.scss
index 08ee8108d8..51f1e4fb72 100644
--- a/ppl/css/_zeek-colors.scss
+++ b/ppl/css/_zeek-colors.scss
@@ -13,9 +13,9 @@ $unknown-type-color: #afafaf;
 
 @include zeek-bg-color("conn", #86c8b7);
 @include zeek-bg-color("dhcp", #00578a);
-@include zeek-bg-color("dns", $blue);
+@include zeek-bg-color("dns", #1ca0f2);
 @include zeek-bg-color("ftp", #392277);
-@include zeek-bg-color("http", $yellow-dark);
+@include zeek-bg-color("http", hsl(49, 93%, 58%));
 @include zeek-bg-color("files", #ad3f95);
 @include zeek-bg-color("mysql", #d28204);
 @include zeek-bg-color("irc", #00d1a6);
@@ -23,8 +23,8 @@ $unknown-type-color: #afafaf;
 @include zeek-bg-color("kerberos", #fbf758);
 @include zeek-bg-color("sip", #006c7b);
 @include zeek-bg-color("smtp", #e2e317);
-@include zeek-bg-color("ssl", $gray-9);
-@include zeek-bg-color("ssh", $gray-5);
+@include zeek-bg-color("ssl", hsl(0, 0%, 3%));
+@include zeek-bg-color("ssh", #535765);
 @include zeek-bg-color("syslog", #ddb81d);
 @include zeek-bg-color("tunnel", #007249);
 @include zeek-bg-color("dce_rpc", #929292);
@@ -32,16 +32,16 @@ $unknown-type-color: #afafaf;
 @include zeek-bg-color("rdp", #081d5b);
 @include zeek-bg-color("smb_files", #27eeff);
 @include zeek-bg-color("smb_mapping", #0511d4);
-@include zeek-bg-color("weird", $gray-4);
-@include zeek-bg-color("x509", $orange);
-@include zeek-bg-color("pe", $red);
-@include zeek-bg-color("dpd", $green-dark);
+@include zeek-bg-color("weird", #5e6373);
+@include zeek-bg-color("x509", #eeb457);
+@include zeek-bg-color("pe", #e65835);
+@include zeek-bg-color("dpd", #256453);
 @include zeek-bg-color("notice", red);
 @include zeek-bg-color("capture_loss", purple);
-@include zeek-bg-color("software", $blue-light);
-@include zeek-bg-color("stats", $green-light);
-@include zeek-bg-color("known_hosts", $orange);
-@include zeek-bg-color("known_services", darken($orange, 10%));
+@include zeek-bg-color("software", hsl(203, 89%, 68%));
+@include zeek-bg-color("stats", #5ec4a8);
+@include zeek-bg-color("known_hosts", #eeb457);
+@include zeek-bg-color("known_services", darken(#eeb457, 10%));
 @include zeek-bg-color("alert-1", var(--alert-1));
 @include zeek-bg-color("alert-2", var(--alert-2));
 @include zeek-bg-color("alert-3", var(--alert-3));
diff --git a/src/css/_about-window.scss b/src/css/_about-window.scss
index 015c1e310f..89316f17e8 100644
--- a/src/css/_about-window.scss
+++ b/src/css/_about-window.scss
@@ -25,7 +25,7 @@
     }
 
     a {
-      color: $blue;
+      color: var(--havelock);
       cursor: pointer;
     }
 
@@ -42,7 +42,7 @@
 
     hr {
       border: none;
-      box-shadow: 0 0 0 0.5px $chrome-border;
+      box-shadow: 0 0 0 0.5px var(--pane-border);
       margin: 18px 0 12px 0;
     }
     footer {
diff --git a/src/css/_buttons.scss b/src/css/_buttons.scss
index cc7a40c449..04ab336698 100644
--- a/src/css/_buttons.scss
+++ b/src/css/_buttons.scss
@@ -1,86 +1,3 @@
-@mixin button-reset {
-  border: none;
-  font-family: $body-font;
-}
-
-@mixin button-shadow {
-  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.25);
-}
-
-.button-group {
-  display: flex;
-  align-items: center;
-}
-
-.button {
-  @include button-reset;
-  color: white;
-  background: $blue;
-  text-transform: uppercase;
-  font-weight: bold;
-  height: 24px;
-  line-height: 24px;
-  border-radius: 3px;
-  padding: 0 12px;
-  display: inline-block;
-  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.25);
-  transition: all 100ms;
-  cursor: pointer;
-
-  svg {
-    fill: white;
-    display: block;
-    margin: 0 auto;
-  }
-}
-
-.button:hover {
-  background: $blue-dark;
-  transform: scale(1.03);
-}
-
-.button:focus {
-  outline: none;
-}
-
-.button:active {
-  background: $blue-dark;
-  box-shadow: none;
-  outline: none;
-  transform: scale(1);
-}
-
-.button-circle {
-  background: $green;
-  fill: white;
-  stroke: white;
-  height: 36px;
-  width: 36px;
-  border: none;
-  box-shadow: $high-box-shadow;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  transition: all 150ms;
-  outline: none;
-
-  svg {
-    height: 17px;
-    width: 17px;
-    stroke-width: 0;
-  }
-
-  &:hover {
-    transform: scale(1.08);
-  }
-
-  &:active {
-    transform: scale(1);
-  }
-}
-
 .panel-button {
   display: flex;
   align-items: center;
@@ -91,11 +8,9 @@
   background: none;
   border: none;
   border-radius: 3px;
-  cursor: pointer;
 
   svg {
-    fill: $gray-4;
-    stroke: $gray-4;
+    fill: var(--slate);
     height: 100%;
     width: 100%;
   }
@@ -112,8 +27,7 @@
 
   &:disabled {
     svg {
-      fill: lighten($gray-4, 35%);
-      stroke: lighten($gray-4, 35%);
+      fill: var(--cloudy);
     }
     &:hover {
       background: none;
@@ -129,47 +43,6 @@
   }
 }
 
-.thin-button {
-  @include button-reset;
-  font-family: $data-font;
-  height: 14px;
-  background: #dcdcdc;
-  border-radius: 3px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 10px;
-  font-size: 11px;
-  line-height: 12px;
-  font-weight: bold;
-  cursor: pointer;
-
-  ˜ &:hover {
-    background: darken(#dcdcdc, 5%);
-  }
-
-  &:active,
-  .active {
-    background: darken(#dcdcdc, 10%);
-  }
-}
-
-.thin-picker {
-  width: 22px;
-  padding: 0 !important;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: all 100ms;
-
-  svg {
-    fill: #4a4a4a;
-    width: 8px;
-    padding: 0;
-    margin: 0;
-  }
-}
-
 .close-button {
   width: 30px;
   height: 30px;
@@ -186,19 +59,19 @@
     height: 10px;
     width: 10px;
     stroke: none;
-    fill: lighten($gray-5, 30%);
+    fill: var(--slate);
     transition: fill 50ms;
   }
 
   &:hover {
     svg {
-      fill: $gray-5;
+      fill: var(--aqua);
     }
   }
 
   &:active {
     svg {
-      fill: $gray-9;
+      fill: var(--slate);
     }
   }
 }
diff --git a/src/css/_chart-elements.scss b/src/css/_chart-elements.scss
index ab815405c4..d2d6f66450 100644
--- a/src/css/_chart-elements.scss
+++ b/src/css/_chart-elements.scss
@@ -1,3 +1,3 @@
 .hover-line {
-  fill: $white-9;
+  fill: var(--slate);
 }
diff --git a/src/css/_chart.scss b/src/css/_chart.scss
index b7df544a37..0ca8501c42 100644
--- a/src/css/_chart.scss
+++ b/src/css/_chart.scss
@@ -3,8 +3,8 @@
   position: relative;
 
   .selection {
-    fill: $yellow;
-    stroke: $yellow-dark;
+    fill: var(--havelock);
+    stroke: var(--havelock);
     stroke-dasharray: 3px;
   }
 
@@ -19,10 +19,10 @@
     left: 50%;
     top: 47%;
     transform: translate(-50%, -50%);
-    color: $white-9;
+    color: var(--lead);
 
     .burst {
-      background-color: $white-9;
+      background-color: var(--lead);
     }
   }
 
@@ -64,7 +64,7 @@
   display: block;
 
   .tick line {
-    stroke: $white-5;
+    stroke: var(--cloudy);
   }
 
   .tick text {
@@ -77,28 +77,14 @@
   }
 
   .domain {
-    stroke: $white-5;
+    stroke: var(--cloudy);
   }
 
   text {
     font-family: $data-font;
-    fill: $gray-1;
+    fill: var(--lead);
     font-size: 9px;
   }
-
-  .y-axis-single-tick {
-    // transform: translateX(12px);
-    .tick,
-    .domain {
-      // display: none;
-    }
-    .tick:last-child {
-      // display: block;
-    }
-    .tick line {
-      display: none;
-    }
-  }
 }
 
 .chart-tooltip {
diff --git a/src/css/_circle-chevron.scss b/src/css/_circle-chevron.scss
index 767d6fcc32..2f2ba7fca5 100644
--- a/src/css/_circle-chevron.scss
+++ b/src/css/_circle-chevron.scss
@@ -39,41 +39,20 @@
     }
   }
 
-  // &.dark (default)
   .circle {
-    background-color: $gray-5;
+    background-color: white;
 
     &:hover {
-      background-color: lighten($gray-5, 2%);
+      background-color: darken(white, 3%);
     }
 
     &:active {
-      background-color: $gray-9;
-    }
-
-    svg {
-      fill: white;
-      stroke: white;
-    }
-  }
-
-  &.light {
-    .circle {
       background-color: white;
-
-      &:hover {
-        background-color: darken(white, 3%);
-      }
-
-      &:active {
-        background-color: white;
-      }
     }
+  }
 
-    svg {
-      fill: $gray-5;
-      stroke: $gray-5;
-    }
+  svg {
+    fill: var(--slate);
   }
 
   &.left {
diff --git a/src/css/_click-feedback.scss b/src/css/_click-feedback.scss
index 0c7cbb61cf..a42c9560c8 100644
--- a/src/css/_click-feedback.scss
+++ b/src/css/_click-feedback.scss
@@ -1,5 +1,5 @@
 .click-feedback {
-  background: $blue-light;
+  background: var(--havelock);
   color: white;
   font-size: $font-size-2;
   border-radius: 5px;
@@ -9,7 +9,7 @@
 
   &:before {
     content: "";
-    background: $blue-light;
+    background: var(--havelock);
     position: absolute;
     top: calc(100% - 2px);
     left: calc(50% - 2px);
diff --git a/src/css/_column-chooser.scss b/src/css/_column-chooser.scss
index 88be01b03a..fc4d217f04 100644
--- a/src/css/_column-chooser.scss
+++ b/src/css/_column-chooser.scss
@@ -38,7 +38,7 @@
     left: 24px;
     width: 24px;
     height: 24px;
-    background-color: $blue;
+    background-color: var(--havelock);
     color: white;
     border-radius: 50%;
     position: absolute;
diff --git a/src/css/_column-description.scss b/src/css/_column-description.scss
index 6be325f291..6712799340 100644
--- a/src/css/_column-description.scss
+++ b/src/css/_column-description.scss
@@ -1,5 +1,4 @@
 .column-description {
-  background: transparentize($gray-9, 0.1);
   width: 180px;
   color: white;
   font-size: 11px;
@@ -12,7 +11,6 @@
     justify-content: space-between;
     height: 22px;
     line-height: 22px;
-    background: $gray-9;
     border-radius: 8px 8px 0 0;
     padding: 0 10px;
     text-align: center;
@@ -48,7 +46,7 @@
     a {
       text-decoration: underline;
       cursor: pointer;
-      color: $blue-light;
+      color: var(--havelock);
     }
   }
 }
diff --git a/src/css/_conn-versation.scss b/src/css/_conn-versation.scss
index 711de98964..1667d410ee 100644
--- a/src/css/_conn-versation.scss
+++ b/src/css/_conn-versation.scss
@@ -10,7 +10,7 @@
   }
 
   .host {
-    border: 1px solid $white-5;
+    border: 1px solid var(--cloudy);
     border-radius: 3px;
   }
 
@@ -23,7 +23,7 @@
   .port {
     margin: 0;
     color: white;
-    background: $blue;
+    background: var(--havelock);
     font-size: 12px;
     text-align: center;
     line-height: 20px;
@@ -36,15 +36,15 @@
   }
 
   .port {
-    background: $blue-light;
+    background: #65bef6;
   }
 
   .responder {
     .ip {
-      background: $green;
+      background: var(--green);
     }
     .port {
-      background: $green-light;
+      background: #5ec4a8;
     }
   }
 
@@ -70,13 +70,13 @@
     hr {
       flex: 1;
       border: none;
-      border-bottom: 1px solid $yellow;
+      border-bottom: 1px solid var(--yellow);
       margin: 0;
     }
 
     .triangle {
-      fill: $yellow;
-      stroke: $yellow;
+      fill: var(--yellow);
+      stroke: var(--yellow);
       width: 10px;
     }
   }
diff --git a/src/css/_context-menu.scss b/src/css/_context-menu.scss
deleted file mode 100644
index 28a8f99ea8..0000000000
--- a/src/css/_context-menu.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-$context-menu-padding: $space-s;
-$br: 8px;
-
-.context-menu-overlay {
-  position: fixed;
-  background: transparent;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 2;
-}
-
-.context-menu {
-  padding: 0;
-  margin: 0;
-  text-align: left;
-  background-color: white;
-  box-shadow: $high-box-shadow;
-  max-width: 300px;
-  z-index: 1;
-  padding: 8px 0;
-
-  a,
-  li {
-    font-size: 14px;
-    font-family: $body-font;
-    padding: 8px 36px;
-    color: $gray-7;
-    list-style-type: none;
-    display: block;
-    white-space: nowrap;
-    cursor: pointer;
-
-    &:hover {
-      background-color: $white-2;
-    }
-  }
-
-  hr {
-    border: none;
-    border-top: 1px solid $white-5;
-    margin: 8px 0;
-  }
-}
diff --git a/src/css/_day-picker.scss b/src/css/_day-picker.scss
deleted file mode 100644
index 3539e63f01..0000000000
--- a/src/css/_day-picker.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.DayPickerInput {
-  font-size: 14px;
-  input {
-    outline: none;
-    border: none;
-  }
-
-  .DayPicker-Day {
-    font-weight: normal;
-    height: 30px;
-    width: 30px;
-  }
-
-  .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
-    &.DayPicker-Day--selected {
-      border-radius: 0;
-      color: inherit;
-      background: transparentize($blue, 0.9);
-    }
-
-    &.DayPicker-Day--from {
-      background: $blue;
-      border-radius: 50% 0 0 50%;
-      color: white;
-    }
-
-    &.DayPicker-Day--to {
-      background: $blue;
-      border-radius: 0 50% 50% 0;
-      color: white;
-    }
-
-    &.DayPicker-Day--to.DayPicker-Day--from {
-      border-radius: 50%;
-    }
-  }
-}
-
-.DayPickerInput-OverlayWrapper {
-  top: $space-s;
-}
-
-.DayPickerInput-Overlay {
-  box-shadow: $box-shadow;
-  left: auto;
-  right: 0;
-}
-
-.DayPicker-Footer {
-  text-align: center;
-}
-
-.DayPicker-TodayButton {
-  @extend .menu-bar-button;
-  font-family: $body-font;
-  margin: 0 auto;
-  padding: 3px 6px;
-}
diff --git a/src/css/_download-progress.scss b/src/css/_download-progress.scss
index 876b060529..c7db8722b2 100644
--- a/src/css/_download-progress.scss
+++ b/src/css/_download-progress.scss
@@ -1,10 +1,9 @@
 .download-progress {
   position: relative;
-  background: $gray-7;
-  border-top: 2px solid $gray-8;
+  background: var(--cello);
 
   &.complete .progress-value {
-    background-color: $green;
+    background-color: var(--green);
   }
 
   .progress-bar {
@@ -13,7 +12,7 @@
   }
 
   .progress-value {
-    background-color: $yellow;
+    background-color: var(--yellow);
     height: 100%;
     border-radius: 0 8px 8px 0;
     width: 0%;
@@ -24,12 +23,6 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-
-    &.progress {
-    }
-
-    &.complete {
-    }
   }
 
   .message {
@@ -38,21 +31,4 @@
     white-space: nowrap;
     color: white;
   }
-
-  .panel-button {
-    color: white;
-    margin-right: 12px;
-
-    &.open {
-      background: $green;
-    }
-
-    &.open:hover {
-      background: $gray-8;
-    }
-
-    &.cancel:hover {
-      background: $red;
-    }
-  }
 }
diff --git a/src/css/_error-boundary.scss b/src/css/_error-boundary.scss
index c08e7b3ad1..1e5f7d11a8 100644
--- a/src/css/_error-boundary.scss
+++ b/src/css/_error-boundary.scss
@@ -1,17 +1,18 @@
 .error-boundary {
-  overflow: scroll;
+  overflow: auto;
   height: 100%;
-  background-color: $gray-7;
-  color: white;
+  background-color: var(--ivory);
+  padding: 24px;
+  line-height: 1.5;
 
   h1 {
     padding-top: $space-l;
     display: flex;
     align-items: center;
-    color: $red;
+    color: var(--red);
 
     svg {
-      fill: $red;
+      fill: var(--red);
       margin: 0;
       height: 30px * 1.5;
       width: 30px * 1.5;
@@ -22,6 +23,7 @@
   pre,
   li,
   code {
-    font-size: 12px;
+    overflow: auto;
+    font-size: 11px;
   }
 }
diff --git a/src/css/_field-cell.scss b/src/css/_field-cell.scss
index 7243c25a2c..8704362300 100644
--- a/src/css/_field-cell.scss
+++ b/src/css/_field-cell.scss
@@ -20,8 +20,4 @@
   &.event_type {
     @include path-tag;
   }
-
-  &.null {
-    color: $white-6;
-  }
 }
diff --git a/src/css/_filter-node.scss b/src/css/_filter-node.scss
index 4bfdd39aeb..79df4a2ea2 100644
--- a/src/css/_filter-node.scss
+++ b/src/css/_filter-node.scss
@@ -1,7 +1,7 @@
 .filter-node {
   display: inline-flex;
   align-items: center;
-  background: $filter-node-background;
+  background: var(--green);
   border-radius: 3px;
   margin-bottom: 3px;
   position: relative;
@@ -11,7 +11,7 @@
 
   p {
     font-family: $mono-font;
-    color: $filter-node-foreground;
+    color: white;
     font-size: 9px;
     line-height: 13px;
     padding: 0 4px;
@@ -26,7 +26,7 @@
   &:hover .remove-button {
     display: flex;
     .circle {
-      fill: $wet-cement;
+      fill: var(--wet-cement);
       opacity: 0.5;
     }
     &:hover .circle {
@@ -38,7 +38,7 @@
   }
 
   &.focused {
-    border: 1px solid $yellow;
-    background: $green-light;
+    border: 1px solid var(--yellow);
+    background: #5ec4a8;
   }
 }
diff --git a/src/css/_filter-tree.scss b/src/css/_filter-tree.scss
index 0233afbea7..71c8c85461 100644
--- a/src/css/_filter-tree.scss
+++ b/src/css/_filter-tree.scss
@@ -1,22 +1,11 @@
-$filter-tree-line-color: $gray-5;
+$filter-tree-line-color: var(--cloudy);
 
 .filter-tree {
   height: 100%;
-  color: $white-1;
+  color: white;
   margin-top: 10px;
   user-select: none;
 
-  .warning-body {
-    display: flex;
-    align-items: center;
-    svg {
-      fill: $yellow;
-      height: 11px;
-      width: 11px;
-      margin-right: 12px;
-      margin-bottom: 3px;
-    }
-  }
   .filter-tree-parent {
     display: flex;
     align-items: center;
@@ -26,7 +15,7 @@ $filter-tree-line-color: $gray-5;
 }
 
 .filter-tree-parent:hover {
-  background: $white-3;
+  background: var(--hover-light-bg);
 }
 
 .filter-tree-node {
@@ -72,7 +61,7 @@ $filter-tree-line-color: $gray-5;
     p {
       @include label-small;
       line-height: 16px;
-      color: $aqua;
+      color: var(--aqua);
       padding: 2px;
       margin: 0 2px;
       overflow-x: hidden;
@@ -91,16 +80,16 @@ $filter-tree-line-color: $gray-5;
   }
 
   &.pinned > .filter-tree-parent > .filter-node {
-    background: $filter-node-background;
+    background: var(--green);
     p {
-      color: $filter-node-foreground;
+      color: white;
     }
   }
 
   &.active > .filter-tree-parent > .filter-node {
-    background: $gray-4;
+    background: var(--slate);
     p {
-      color: $filter-node-foreground;
+      color: white;
     }
   }
 }
diff --git a/src/css/_finding-card.scss b/src/css/_finding-card.scss
index da61cb032e..e048eafa85 100644
--- a/src/css/_finding-card.scss
+++ b/src/css/_finding-card.scss
@@ -7,7 +7,7 @@
   overflow: hidden;
 
   &:hover {
-    background-color: $coconut;
+    background-color: var(--coconut);
   }
 
   &:active {
@@ -17,7 +17,7 @@
 
 .finding-card {
   flex: 1;
-  color: $aqua;
+  color: var(--aqua);
   user-select: none;
   transition: background 150ms;
   display: flex;
@@ -28,7 +28,7 @@
     display: flex;
     align-items: center;
     margin-left: 6px;
-    color: $aqua;
+    color: var(--aqua);
     overflow-x: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -47,22 +47,9 @@
   }
 
   p.pin {
-    color: $white-1;
-    background: $green;
+    color: white;
+    background: var(--green);
     border-radius: 3px;
     flex-shrink: 0;
   }
-
-  .warning-body {
-    display: flex;
-    align-items: center;
-
-    svg {
-      fill: $yellow;
-      height: 11px;
-      width: 11px;
-      margin-right: 12px;
-      margin-bottom: 3px;
-    }
-  }
 }
diff --git a/src/css/_finding-detail.scss b/src/css/_finding-detail.scss
deleted file mode 100644
index f4fa46cabc..0000000000
--- a/src/css/_finding-detail.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.finding-detail {
-  transition: opacity 150ms;
-  // padding-top: $space-xs;
-  margin: $space-xs;
-  margin-left: 0;
-  border-top: 1px solid $gray-4;
-
-  .vertical-table td {
-    font-size: 9px;
-  }
-
-  .vertical-table {
-    margin-top: $space-s;
-    margin-left: $space-xs;
-  }
-
-  .finding-histogram {
-    margin-top: $space-s;
-    margin-left: $space-xs;
-    height: 100px;
-    width: 100%;
-
-    .tick line,
-    .domain {
-      stroke: $gray-4;
-    }
-  }
-}
diff --git a/src/css/_finding-span-card.scss b/src/css/_finding-span-card.scss
deleted file mode 100644
index 42185f66d2..0000000000
--- a/src/css/_finding-span-card.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.finding-span-card {
-  display: flex;
-  align-items: center;
-  padding: $space-xs 0;
-  white-space: nowrap;
-  color: $gray-9;
-
-  .span-duration span {
-    color: $white-6;
-    font-size: 9px;
-  }
-
-  &:hover {
-    .thin-button {
-      background-color: $white-7;
-    }
-  }
-
-  &:active {
-    transform: translateY(1px);
-    .thin-button {
-      background-color: $white-9;
-    }
-  }
-
-  .day,
-  .time {
-    font-size: 9px;
-  }
-
-  .day {
-    margin-right: $space-xs;
-  }
-
-  .time {
-    font-weight: 400;
-  }
-}
diff --git a/src/css/_form-inputs.scss b/src/css/_form-inputs.scss
deleted file mode 100644
index c144f268ea..0000000000
--- a/src/css/_form-inputs.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.text-input-wrapper {
-  position: relative;
-
-  input {
-    color: $gray-7;
-    font-size: 14px;
-    border: none;
-    color: $gray-7;
-    font-size: 14px;
-    font-family: $mono-font;
-    outline: none;
-    width: 100%;
-    padding: 8px;
-    box-shadow: $box-shadow;
-    border-radius: 3px;
-
-    &::placeholder {
-      color: $white-9;
-    }
-  }
-}
-
-.checkbox {
-  -webkit-appearance: none;
-  background-color: white;
-  border: 1px solid #dfe0e6;
-  border-radius: 3px;
-  width: 24px;
-  height: 24px;
-  position: relative;
-  margin-right: 12px;
-
-  &:before {
-    content: "";
-    width: 12px;
-    height: 5px;
-    position: absolute;
-    top: 5px;
-    left: 4px;
-    border: 3px solid $blue;
-    border-top: none;
-    border-right: none;
-    background: transparent;
-    opacity: 0;
-    transform: rotate(-45deg);
-  }
-
-  &:checked:before {
-    opacity: 1;
-  }
-}
-
-.label-wrapper {
-  display: flex;
-  align-items: center;
-}
diff --git a/src/css/_form.scss b/src/css/_form.scss
deleted file mode 100644
index 7b171fef09..0000000000
--- a/src/css/_form.scss
+++ /dev/null
@@ -1,139 +0,0 @@
-.form > * {
-  margin-bottom: $space-xs;
-}
-
-.input {
-  label {
-    @extend .label;
-    position: relative;
-    transform: translateY(6px);
-    padding: 0 1px;
-    margin-left: 5px;
-    display: inline-block;
-    font-weight: bold;
-    transition: transform 200ms, background-color 200ms;
-    font-size: $font-size-1;
-    color: $gray-1;
-    z-index: 1;
-
-    &::before {
-      content: " ";
-      z-index: -1;
-      background-color: white;
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 6px;
-    }
-  }
-
-  input {
-    border: 1px solid $white-4;
-    width: 100%;
-    padding: 0 6px;
-    line-height: 2.33;
-    font-size: $font-size-2;
-    font-family: $body-font;
-    border-radius: 3px;
-
-    &.mono {
-      font-family: $mono-font;
-    }
-  }
-
-  &.focus {
-    input {
-      outline: none;
-      border: 1px solid $gray-1;
-      background: $white-2;
-    }
-
-    label {
-      color: $gray-5;
-      background: none;
-      transform: translateY(0);
-
-      &::before {
-        display: none;
-      }
-    }
-  }
-}
-
-.input-checkbox {
-  padding-top: 8px;
-
-  label {
-    display: flex;
-    @extend .label;
-    font-weight: bold;
-    align-items: center;
-    font-size: $font-size-1;
-    color: $gray-1;
-  }
-
-  input {
-    margin: 0;
-    margin-right: $space-s;
-    -webkit-appearance: none;
-    width: 25px;
-    height: 25px;
-    border: 1px solid $white-4;
-    position: relative;
-    border-radius: 3px;
-
-    &:after {
-      content: "";
-      position: absolute;
-      top: 4px;
-      left: 4px;
-      right: 4px;
-      bottom: 4px;
-      background: linear-gradient($blue-light, $blue);
-      box-shadow: 0px 0 3px 0 rgba(0, 0, 0, 0.25);
-      border-radius: 8px;
-      transform: scale(0);
-      transition: transform 200ms;
-    }
-
-    &:checked:after {
-      transform: scale(1);
-    }
-  }
-
-  input:focus {
-    outline: none;
-    border: 1px solid $gray-1;
-    background: $white-2;
-  }
-}
-
-.input-submit {
-  input {
-    font-size: $font-size-1;
-    text-transform: uppercase;
-    color: $gray-4;
-    font-weight: bold;
-    background: linear-gradient($white-2, $white-3);
-    border-radius: 5px;
-    font-family: $body-font;
-    height: 24px;
-    min-width: 80px;
-
-    &:hover {
-      color: $gray-9;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:active {
-      border: 1px solid $white-6;
-      background: linear-gradient($white-3, $white-4);
-      color: $gray-7;
-      transform: translateY(1px);
-    }
-  }
-}
diff --git a/src/css/_global.scss b/src/css/_global.scss
index 7b28516acd..868f3eba99 100644
--- a/src/css/_global.scss
+++ b/src/css/_global.scss
@@ -5,7 +5,7 @@
 html,
 body {
   font-family: $body-font;
-  color: $aqua;
+  color: var(--aqua);
   margin: 0;
   height: 100%;
   width: 100%;
@@ -53,6 +53,6 @@ code {
 
 .using-keyboard {
   :focus {
-    outline: auto 5px $havelock;
+    outline: auto 5px var(--havelock);
   }
 }
diff --git a/src/css/_header-cell.scss b/src/css/_header-cell.scss
index a3669635a2..c1b2dc1870 100644
--- a/src/css/_header-cell.scss
+++ b/src/css/_header-cell.scss
@@ -2,7 +2,7 @@
   white-space: nowrap;
   height: $bro-log-row-height;
   display: flex;
-  background: linear-gradient(white, $white-2);
+  background: linear-gradient(white, var(--coconut));
   box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.7);
 }
 
@@ -11,7 +11,7 @@
   height: $bro-log-row-height;
   line-height: $bro-log-row-height;
   padding: 0 6px;
-  color: $gray-9;
+  color: var(--aqua);
   user-select: none;
   transition: border 150ms;
   position: relative;
@@ -30,7 +30,7 @@
     position: absolute;
     height: 60%;
     width: 1px;
-    background: $white-6;
+    background: var(--cloudy);
     top: 20%;
   }
 
@@ -52,7 +52,7 @@
 
   &:active,
   &.active {
-    background: $white-2;
+    background: var(--coconut);
   }
 
   &.sorted {
diff --git a/src/css/_header.scss b/src/css/_header.scss
deleted file mode 100644
index c4dbba9e4c..0000000000
--- a/src/css/_header.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.header-wrapper {
-  background: $white-3;
-  padding-top: $space-s;
-  padding-bottom: $space-s;
-  box-shadow: 0 3px 5px transparentize($gray-7, 0.7);
-  border-bottom: 3px solid $gray-7;
-
-  position: relative;
-
-  .collapse-button {
-    position: absolute;
-    z-index: 1;
-    display: inline-flex;
-    justify-content: center;
-    top: 100%;
-    left: 50%;
-    transform: translate(-50%);
-    background: $gray-7;
-    cursor: pointer;
-    transition: height 100ms 150ms;
-    height: 0px;
-    width: 20px * 2;
-    border-bottom-left-radius: 20px * 2;
-    border-bottom-right-radius: 20px * 2;
-    box-shadow: 0 3px 5px transparentize($gray-7, 0.7);
-
-    svg {
-      position: absolute;
-      top: 3px;
-      height: 9px;
-      width: 9px;
-      fill: white;
-      stroke: white;
-      opacity: 0;
-      transition: opacity 100ms;
-      transform-origin: center;
-    }
-
-    &.visible {
-      transition: height 100ms;
-      height: 20px;
-      svg {
-        transition: opacity 100ms 150ms;
-        opacity: 1;
-      }
-    }
-
-    &.expand {
-      svg {
-        transform: rotate(180deg);
-      }
-    }
-  }
-}
diff --git a/src/css/_histogram-tooltip.scss b/src/css/_histogram-tooltip.scss
index 6de1f69e55..a9c39cda4b 100644
--- a/src/css/_histogram-tooltip.scss
+++ b/src/css/_histogram-tooltip.scss
@@ -11,7 +11,7 @@
 .histogram-tooltip {
   pointer-events: none;
   color: white;
-  background: transparentize($gray-9, 0.1);
+  background: var(--cello-transparent);
   font-size: 11px;
   border-radius: 8px;
 
@@ -28,7 +28,7 @@
     white-space: nowrap;
     height: 22px;
     line-height: 22px;
-    background: $gray-9;
+    background: var(--cello);
     border-radius: 8px 8px 0 0;
     padding: 0 10px;
     text-align: center;
diff --git a/src/css/_history-pane.scss b/src/css/_history-pane.scss
index 2ef4cd6d95..dded81bf14 100644
--- a/src/css/_history-pane.scss
+++ b/src/css/_history-pane.scss
@@ -1,14 +1,4 @@
 .history-pane {
   background: var(--snow);
   overflow-x: unset;
-
-  .pane-header {
-    background: $white-3;
-    border-top: 1px solid $white-6;
-    border-bottom: 1px solid $white-6;
-
-    .pane-title {
-      @include label-bold;
-    }
-  }
 }
diff --git a/src/css/_icons.scss b/src/css/_icons.scss
index 8f435cca30..2b5720313c 100644
--- a/src/css/_icons.scss
+++ b/src/css/_icons.scss
@@ -1,5 +1,5 @@
 svg.icon {
   width: 1rem;
   height: 1rem;
-  fill: $gray-7;
+  fill: var(--slate);
 }
diff --git a/src/css/_info-notice.scss b/src/css/_info-notice.scss
index 0b3e199d23..abb43f1399 100644
--- a/src/css/_info-notice.scss
+++ b/src/css/_info-notice.scss
@@ -13,7 +13,7 @@
 .info-notice {
   white-space: nowrap;
   user-select: none;
-  background: $gray-5;
+  background: var(--cello);
   color: white;
   border-radius: 8px;
   height: 32px;
@@ -65,5 +65,5 @@
 }
 
 .bevel-button {
-  @include bevel-button($blue);
+  @include bevel-button(#1ca0f2);
 }
diff --git a/src/css/_inline-table-loading.scss b/src/css/_inline-table-loading.scss
index 443faef203..becf8bee8c 100644
--- a/src/css/_inline-table-loading.scss
+++ b/src/css/_inline-table-loading.scss
@@ -1,13 +1,4 @@
 .inline-table-loading {
-  thead {
-    th {
-      color: $gray-1;
-      font-weight: normal;
-      font-size: 12px;
-      text-align: center;
-    }
-  }
-
   tr {
     height: 20px;
     &:hover {
@@ -41,12 +32,12 @@
 
   50% {
     transform: scaleX(1);
-    background-color: $table-stripe-color;
+    background-color: var(--table-stripe-bg);
   }
 
   60% {
     transform: scaleX(0.85);
-    background-color: $table-stripe-hover;
+    background-color: var(--hover-light-bg);
   }
 
   70% {
diff --git a/src/css/_inline-table.scss b/src/css/_inline-table.scss
index 8760c5338a..ba0c391539 100644
--- a/src/css/_inline-table.scss
+++ b/src/css/_inline-table.scss
@@ -14,11 +14,11 @@
   }
 
   tbody tr:nth-child(odd) {
-    background: $table-stripe-color;
+    background: var(--table-stripe-bg);
   }
 
   tbody tr:hover {
-    background: $table-stripe-hover;
+    background: var(--hover-light-bg);
   }
 
   th,
@@ -34,7 +34,7 @@
     @extend .label;
     font-size: 9px;
     font-weight: bold;
-    color: $gray-6;
+    color: var(--slate);
   }
 
   td {
diff --git a/src/css/_input-suggestions.scss b/src/css/_input-suggestions.scss
index 19ccad2094..e596322fe4 100644
--- a/src/css/_input-suggestions.scss
+++ b/src/css/_input-suggestions.scss
@@ -18,7 +18,7 @@
     cursor: default;
 
     &:hover {
-      background: $white-3;
+      background: var(--hover-light-bg);
     }
 
     &.active,
@@ -29,12 +29,12 @@
       &:last-child {
         border-radius: 0 0 3px 3px;
       }
-      background: $blue;
+      background: var(--havelock);
       color: white;
     }
 
     &.error {
-      color: $white-9;
+      color: var(--lead);
     }
   }
 }
diff --git a/src/css/_investigation-header.scss b/src/css/_investigation-header.scss
deleted file mode 100644
index 4d3e2b925c..0000000000
--- a/src/css/_investigation-header.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.investigation-header {
-  padding: $space-m $space-m;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .link-button {
-    color: $gray-3;
-    width: 60px;
-  }
-
-  .link-button.selected {
-    font-weight: bold;
-    text-decoration: underline;
-    cursor: normal;
-
-    &:hover {
-      background: inherit;
-    }
-    &:active {
-      transform: translateY(0px);
-    }
-  }
-}
diff --git a/src/css/_latest-error.scss b/src/css/_latest-error.scss
index 88dcdcca76..74ad8b32b1 100644
--- a/src/css/_latest-error.scss
+++ b/src/css/_latest-error.scss
@@ -1,6 +1,5 @@
 .latest-error {
-  background-color: $white-3;
-  box-shadow: $high-box-shadow;
+  background-color: white;
   border-radius: 24px;
   padding: 24px;
   position: fixed;
diff --git a/src/css/_loading-burst.scss b/src/css/_loading-burst.scss
index 0e7519a446..562a0621b1 100644
--- a/src/css/_loading-burst.scss
+++ b/src/css/_loading-burst.scss
@@ -20,12 +20,12 @@
   }
 
   .burst-1 {
-    background: $green;
+    background: var(--green);
     animation: burst 1s infinite;
   }
 
   .burst-2 {
-    background: $green;
+    background: var(--green);
     animation: burst 1s 200ms infinite;
   }
 }
diff --git a/src/css/_log-cell.scss b/src/css/_log-cell.scss
index 1cbd8a6277..80c8c88cee 100644
--- a/src/css/_log-cell.scss
+++ b/src/css/_log-cell.scss
@@ -27,7 +27,7 @@
 
   &:hover {
     z-index: 1;
-    border: 1px dashed $gray-9;
+    border: 1px dashed var(--lead);
   }
 }
 
@@ -41,7 +41,7 @@
 .compound-field-extra {
   height: 25px;
   border: 1px solid transparent;
-  color: $white-7;
+  color: var(--lead);
 
   &.separator {
     margin-right: 6px;
diff --git a/src/css/_log-detail-pane.scss b/src/css/_log-detail-pane.scss
index ff4a99044e..af15f95b76 100644
--- a/src/css/_log-detail-pane.scss
+++ b/src/css/_log-detail-pane.scss
@@ -53,23 +53,8 @@
   }
 
   .pane-header {
-    background: $white-3;
-    border-bottom: 1px solid $white-5;
-  }
-
-  .star-button {
-    transition: background-color 0ms;
-    svg {
-      fill: none;
-    }
-  }
-
-  .star-button.starred {
-    background-color: $yellow;
-    svg {
-      stroke: $white-9;
-      fill: $yellow;
-    }
+    background: var(--ivory);
+    box-shadow: 0 0.5px 0px var(--cloudy);
   }
 
   .close-button {
diff --git a/src/css/_log-detail-window.scss b/src/css/_log-detail-window.scss
index 0966dd08ed..0861f673eb 100644
--- a/src/css/_log-detail-window.scss
+++ b/src/css/_log-detail-window.scss
@@ -17,7 +17,7 @@
 
   .packets-button .toolbar-button svg {
     stroke: none;
-    fill: $brand-blue-light;
+    fill: var(--havelock);
   }
 
   .detail-pane-content {
diff --git a/src/css/_log-detail.scss b/src/css/_log-detail.scss
index f9217a3a2b..5b7b877c24 100644
--- a/src/css/_log-detail.scss
+++ b/src/css/_log-detail.scss
@@ -13,7 +13,7 @@
 
   .empty-message {
     text-align: center;
-    color: $gray-7;
+    color: var(--slate);
     font-size: 12px;
   }
 }
diff --git a/src/css/_log-viewer.scss b/src/css/_log-viewer.scss
index 8d5b749890..62a6fb59ae 100644
--- a/src/css/_log-viewer.scss
+++ b/src/css/_log-viewer.scss
@@ -36,15 +36,15 @@
   opacity: 1;
 
   &.even {
-    background: $table-stripe-color;
+    background: var(--table-stripe-bg);
   }
 
   &:hover {
-    background: $table-stripe-hover;
+    background: var(--hover-light-bg);
   }
 
   &.highlight {
-    background: $havelock;
+    background: var(--havelock);
     .field-cell {
       color: white;
     }
@@ -54,7 +54,7 @@
 .viewer .end-message {
   text-align: center;
   font-size: 12px;
-  color: $white-9;
+  color: var(--lead);
   line-height: 100px;
 }
 
diff --git a/src/css/_mac-spinner.scss b/src/css/_mac-spinner.scss
index 0d5482f129..c4b0814bb6 100644
--- a/src/css/_mac-spinner.scss
+++ b/src/css/_mac-spinner.scss
@@ -1,5 +1,5 @@
 $mac-spinner-duration: 800ms;
-$mac-spinner-color: $aqua;
+$mac-spinner-color: var(--aqua);
 $mac-spinner-size: 24px;
 
 .mac-spinner {
diff --git a/src/css/_menu-bar-button.scss b/src/css/_menu-bar-button.scss
deleted file mode 100644
index b06472bc25..0000000000
--- a/src/css/_menu-bar-button.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.menu-bar-button {
-  -webkit-app-region: no-drag;
-  background: linear-gradient($white-1, $white-3);
-  border-radius: 3px;
-  border: none;
-  box-shadow: 0 0.5px 0.15px rgba(0, 0, 0, 0.25);
-  user-select: none;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-family: $mono-font;
-  font-weight: bold;
-  height: 16px;
-  line-height: 14px;
-  padding: 0 8px;
-  font-size: 11px;
-  color: $gray-9;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .dropdown-arrow {
-    margin-left: 6px;
-  }
-
-  &:active {
-    background: linear-gradient($white-2, $white-4);
-    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.4);
-    color: $gray-9;
-  }
-}
diff --git a/src/css/_menu-list.scss b/src/css/_menu-list.scss
deleted file mode 100644
index fbfd530b26..0000000000
--- a/src/css/_menu-list.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.menu-list {
-  padding: 0;
-  margin: 0;
-  text-align: left;
-  background-color: white;
-  box-shadow: $high-box-shadow;
-  max-width: 300px;
-  z-index: 1;
-  padding: 8px 0;
-
-  a,
-  li {
-    font-size: 14px;
-    font-family: $menu-font;
-    font-weight: 400;
-    padding: 8px 36px;
-    color: $gray-7;
-    list-style-type: none;
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    user-select: none;
-
-    &:hover {
-      background-color: $white-2;
-    }
-  }
-
-  hr {
-    border: none;
-    border-top: 1px solid $white-5;
-    margin: 8px 0;
-  }
-}
diff --git a/src/css/_modal.scss b/src/css/_modal.scss
index 83940c92f8..d41b35d5ea 100644
--- a/src/css/_modal.scss
+++ b/src/css/_modal.scss
@@ -18,7 +18,7 @@
 .modal-contents {
   -webkit-app-region: no-drag;
   background: white;
-  box-shadow: 12px 12px 48px transparentize($aqua, 0.45);
+  box-shadow: 12px 12px 48px rgba(0, 0, 0, 0.45);
   padding: 20px 20px 0 20px;
   border-radius: 5px;
   position: relative;
diff --git a/src/css/_no-events-found.scss b/src/css/_no-events-found.scss
deleted file mode 100644
index b8cd7e68ab..0000000000
--- a/src/css/_no-events-found.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.no-events-found-wrapper {
-  display: flex;
-  justify-content: center;
-  margin-top: $space-s * 8;
-}
-
-.no-events-found {
-  display: inline-block;
-  padding: 12px;
-  h3 {
-    text-align: center;
-    margin-bottom: 12px;
-  }
-
-  table {
-    font-size: 12px;
-    color: $white-9;
-    display: inline-block;
-  }
-
-  pre {
-    display: inline-block;
-    margin: 0;
-  }
-
-  td:first-child {
-    text-align: right;
-    padding-right: 12px;
-  }
-  td {
-    text-align: left;
-  }
-}
diff --git a/src/css/_notice-banner.scss b/src/css/_notice-banner.scss
index 6362370099..68a2cd3c2e 100644
--- a/src/css/_notice-banner.scss
+++ b/src/css/_notice-banner.scss
@@ -15,7 +15,7 @@
     user-select: none;
 
     &:hover {
-      color: $gray-6;
+      color: var(--slate);
     }
 
     &:active {
diff --git a/src/css/_packet-post-progress.scss b/src/css/_packet-post-progress.scss
index c5ae192d8d..7ed8ed4da8 100644
--- a/src/css/_packet-post-progress.scss
+++ b/src/css/_packet-post-progress.scss
@@ -52,10 +52,10 @@
   .warnings.disabled {
     pointer-events: none;
     svg {
-      fill: $white-6;
+      fill: var(--cloudy);
     }
     label {
-      color: $white-6;
+      color: var(--cloudy);
     }
   }
 }
diff --git a/src/css/_pane.scss b/src/css/_pane.scss
index 6bfa322345..e37bc0600d 100644
--- a/src/css/_pane.scss
+++ b/src/css/_pane.scss
@@ -1,11 +1,5 @@
-$pane-background-color: $white-3;
-$pane-border-color: $white-5;
-$pane-header-height: 42px;
-$pane-header-background-color: $white-5;
-
 .pane {
   position: relative;
-  background: $pane-background-color;
   display: flex;
   flex-direction: column;
 }
@@ -13,13 +7,10 @@ $pane-header-background-color: $white-5;
 .pane-header {
   user-select: none;
   position: relative;
-  border-bottom: 1px solid $pane-border-color;
   svg {
-    fill: $gray-7;
-    stroke: $gray-7;
+    fill: var(--slate);
   }
   flex-shrink: 0;
-  height: $pane-header-height;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -49,9 +40,9 @@ $pane-header-background-color: $white-5;
 }
 
 .pane-left {
-  border-right: 1px solid $pane-border-color;
+  border-right: 1px solid var(--pane-border);
 }
 
 .pane-right {
-  border-left: 1px solid $pane-border-color;
+  border-left: 1px solid var(--pane-border);
 }
diff --git a/src/css/_pins.scss b/src/css/_pins.scss
index b1555abead..ddf6a750b9 100644
--- a/src/css/_pins.scss
+++ b/src/css/_pins.scss
@@ -37,26 +37,20 @@
   }
 
   .pin-button {
-    @include button-reset;
-    background-color: $cloudy;
-    &:hover {
-      background: darken($cloudy, 5%);
-    }
-
-    &:active,
-    .active {
-      background: darken($cloudy, 10%);
-    }
+    border: none;
+    font-family: $body-font;
+    background-color: var(--cloudy);
     min-height: 17px;
     border-radius: 0px 3px 3px 0px;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    justify-content: center;
     align-self: flex-start;
 
     svg {
-      fill: lighten($aqua, 15%);
+      fill: var(--slate);
       stroke: none;
       width: 10px;
       height: 10px;
diff --git a/src/css/_pop-menu.scss b/src/css/_pop-menu.scss
index c49f44d203..5e007a87bf 100644
--- a/src/css/_pop-menu.scss
+++ b/src/css/_pop-menu.scss
@@ -15,7 +15,7 @@ $pop-menu-padding: $space-s;
   z-index: 1;
   margin: 0;
   text-align: left;
-  background-color: $white-1;
+  background-color: white;
   position: relative;
   border-radius: 5px;
   display: inline-block;
@@ -36,34 +36,30 @@ $pop-menu-padding: $space-s;
     user-select: none;
 
     &:hover {
-      background-color: $blue;
+      background-color: var(--havelock);
       color: white;
     }
-
-    &:active {
-      background-color: $blue-light;
-    }
   }
 
   .disabled {
     cursor: auto;
-    color: $white-9;
+    color: var(--lead);
     &:hover {
       background-color: inherit;
-      color: $white-9;
+      color: var(--lead);
     }
   }
 
   hr {
     border: none;
-    border-top: 1px solid $white-5;
+    border-top: 1px solid var(--cloudy);
     margin: 8px 0;
   }
 
   .pop-menu-pointer {
     margin: 0;
     padding: 0;
-    fill: $white-1;
+    fill: white;
     position: absolute;
     height: 16px;
   }
@@ -71,7 +67,7 @@ $pop-menu-padding: $space-s;
 
 .test-anchor {
   position: fixed;
-  background-color: $blue;
+  background-color: var(--havelock);
   height: 100px;
   width: 100px;
   border-radius: 50%;
diff --git a/src/css/_progress-indicator.scss b/src/css/_progress-indicator.scss
index 6ff486c681..6f67815ef7 100644
--- a/src/css/_progress-indicator.scss
+++ b/src/css/_progress-indicator.scss
@@ -26,7 +26,7 @@
 
 .progress-fill {
   width: 0%;
-  background: $blue;
+  background: var(--havelock);
   height: 100%;
   transition: width 1000ms;
 }
diff --git a/src/css/_saved-spaces-list.scss b/src/css/_saved-spaces-list.scss
index 23607acf18..d60e90f10e 100644
--- a/src/css/_saved-spaces-list.scss
+++ b/src/css/_saved-spaces-list.scss
@@ -28,7 +28,7 @@
     border-radius: 4px;
 
     &:hover {
-      background-color: $coconut;
+      background-color: var(--coconut);
     }
 
     &:active {
@@ -39,7 +39,7 @@
   .space-link {
     @include label-small;
     line-height: 18px;
-    color: $aqua;
+    color: var(--aqua);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -78,12 +78,12 @@
         background-color: rgba(0, 0, 0, 0.15);
       }
       .progress-fill {
-        background-color: $white-1;
+        background-color: white;
       }
     }
 
     &:hover {
-      background: $blue;
+      background: var(--havelock);
     }
   }
 
diff --git a/src/css/_search-page.scss b/src/css/_search-page.scss
index 04f2f1d9df..d8741dc4bc 100644
--- a/src/css/_search-page.scss
+++ b/src/css/_search-page.scss
@@ -1,6 +1,3 @@
-$page-background-color: $white-3;
-$page-border-color: $white-4;
-
 @keyframes fadein {
   from {
     opacity: 0;
diff --git a/src/css/_search-results.scss b/src/css/_search-results.scss
index 2d66f4a9e3..88b25ff1f0 100644
--- a/src/css/_search-results.scss
+++ b/src/css/_search-results.scss
@@ -9,11 +9,7 @@
 .no-results {
   text-align: center;
   margin-top: 100px;
-  color: $white-9;
+  color: var(--lead);
   display: inline-block;
   @include label-small;
-
-  circle {
-    fill: $white-9 !important;
-  }
 }
diff --git a/src/css/_settings-modal.scss b/src/css/_settings-modal.scss
index e99b4fead1..0444551a8b 100644
--- a/src/css/_settings-modal.scss
+++ b/src/css/_settings-modal.scss
@@ -2,7 +2,6 @@
   min-width: 500px;
 
   .settings-form {
-    border: 1px solid $white-3;
     border-radius: 3px;
 
     a {
@@ -22,7 +21,7 @@
       justify-content: space-between;
       padding: 0 12px;
       height: 48px;
-      border-bottom: 1px solid $white-3;
+      border-bottom: 1px solid var(--ivory);
       position: relative;
 
       &:last-child {
@@ -40,7 +39,7 @@
       line-height: 1.5;
     }
     a {
-      color: $red;
+      color: var(--red);
       cursor: pointer;
       text-decoration: underline;
     }
@@ -57,7 +56,7 @@
     margin: 0;
     @include label-small;
     line-height: 14px;
-    background: $blue;
+    background: var(--havelock);
     color: white;
     padding: 0 6px;
     border-radius: 4px;
diff --git a/src/css/_space-switcher.scss b/src/css/_space-switcher.scss
deleted file mode 100644
index b7ac724ef6..0000000000
--- a/src/css/_space-switcher.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.space-switcher {
-  margin: $space-s 0;
-  margin-top: $space-s * 3;
-
-  .current-space-name {
-    font-size: 14px;
-    font-weight: normal;
-    color: white;
-    cursor: pointer;
-    position: relative;
-    display: block;
-    padding: $space-s;
-    line-height: 1;
-    margin: 0;
-    margin-top: $space-s/2;
-
-    svg {
-      width: 8px;
-      height: 8px;
-      * {
-        fill: white;
-        stroke: white;
-      }
-      margin-left: $space-s;
-      margin-top: 2px;
-    }
-
-    &:hover {
-      background: $gray-5;
-    }
-  }
-}
diff --git a/src/css/_status-bar.scss b/src/css/_status-bar.scss
index f602a3eba2..32f254617e 100644
--- a/src/css/_status-bar.scss
+++ b/src/css/_status-bar.scss
@@ -1,7 +1,7 @@
 .status-bar {
   user-select: none;
-  background: $chrome-gradient;
-  border-top: 1px solid $chrome-border;
+  background: var(--ivory);
+  border-top: 1px solid var(--pane-border);
   position: relative;
   overflow: hidden;
   height: 26px;
diff --git a/src/css/_tab-bar.scss b/src/css/_tab-bar.scss
index 1638fd4e79..740e2f6632 100644
--- a/src/css/_tab-bar.scss
+++ b/src/css/_tab-bar.scss
@@ -1,5 +1,5 @@
 $tab-hover-color: rgba(255, 255, 255, 0.1);
-$tab-bg-color: $cello;
+$tab-bg-color: var(--cello);
 
 .tab-bar {
   display: flex;
@@ -11,7 +11,7 @@ $tab-bg-color: $cello;
   align-items: flex-end;
   overflow: hidden;
   position: relative;
-  border-bottom: 3px solid $snow;
+  border-bottom: 3px solid var(--snow);
   box-shadow: 0 1px 1px var(--lead);
   z-index: 2;
 
@@ -30,7 +30,7 @@ $tab-bg-color: $cello;
     line-height: 27px;
     text-align: center;
     align-items: center;
-    color: $white-4;
+    color: var(--cloudy);
     border-radius: 50%;
     margin-left: 8px;
     margin-right: 8px;
@@ -41,7 +41,7 @@ $tab-bg-color: $cello;
     transition: none;
     &:hover {
       transition: all 300ms;
-      color: $white-1;
+      color: white;
       background: rgba(255, 255, 255, 0.2);
     }
 
diff --git a/src/css/_tab-search-loading.scss b/src/css/_tab-search-loading.scss
index c29d38bd97..1d72ec7a42 100644
--- a/src/css/_tab-search-loading.scss
+++ b/src/css/_tab-search-loading.scss
@@ -1,6 +1,6 @@
 .tab-search-loading {
   animation: fadein 300ms;
-  background: $gray-to-white;
+  background: linear-gradient(#f0f0f0, white);
   flex: 1;
   display: flex;
   justify-content: center;
diff --git a/src/css/_tab-welcome.scss b/src/css/_tab-welcome.scss
index bb0440632f..e9717d7e60 100644
--- a/src/css/_tab-welcome.scss
+++ b/src/css/_tab-welcome.scss
@@ -1,6 +1,6 @@
 .tab-welcome {
   animation: fadein 300ms;
-  background: linear-gradient(to bottom, white 25%, $snow);
+  background: linear-gradient(to bottom, white 25%, var(--snow));
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -8,7 +8,7 @@
   padding: 0 70px;
 
   a {
-    color: $blue-dark;
+    color: var(--havelock);
     text-decoration: underline;
     cursor: pointer;
   }
diff --git a/src/css/_tab.scss b/src/css/_tab.scss
index 5ac89673a2..f633d1a247 100644
--- a/src/css/_tab.scss
+++ b/src/css/_tab.scss
@@ -1,8 +1,8 @@
-$tab-inactive-color: $cloudy;
+$tab-inactive-color: var(--cloudy);
 $tab-hover-color: white;
-$tab-active-color: $aqua;
+$tab-active-color: var(--aqua);
 $tab-hover-bg: rgba(255, 255, 255, 0.1);
-$tab-active-bg: $snow;
+$tab-active-bg: var(--snow);
 $tab-transition-duration: 200ms;
 $tab-border-radius-top: 8px;
 $tab-border-radius-bottom: 6px;
@@ -115,7 +115,7 @@ $tab-border-radius-bottom: 6px;
     }
     &:hover {
       svg {
-        fill: $white-1;
+        fill: white;
       }
       &:after {
         transition: transform 100ms;
diff --git a/src/css/_table.scss b/src/css/_table.scss
index 216bc9f646..0417a6a9f2 100644
--- a/src/css/_table.scss
+++ b/src/css/_table.scss
@@ -4,11 +4,11 @@
   font-family: $data-font;
 
   tbody tr:nth-child(odd) {
-    background: $table-stripe-color;
+    background: var(--table-stripe-bg);
   }
 
   tbody tr:hover {
-    background: $table-stripe-hover;
+    background: var(--hover-light-bg);
   }
 
   th,
diff --git a/src/css/_time-span-pickers.scss b/src/css/_time-span-pickers.scss
index 020a485161..21cb484393 100644
--- a/src/css/_time-span-pickers.scss
+++ b/src/css/_time-span-pickers.scss
@@ -63,7 +63,7 @@
     position: absolute;
     width: 8px;
     height: 8px;
-    background: $blue;
+    background: var(--havelock);
     top: calc(50% - 4px);
     left: -4px;
     border-radius: 50%;
diff --git a/src/css/_toggle.scss b/src/css/_toggle.scss
deleted file mode 100644
index a8f278f4d8..0000000000
--- a/src/css/_toggle.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-.toggle {
-  position: relative;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  height: 19px;
-  width: 42px;
-
-  &:active {
-    .knob:after {
-      transform: scale(2);
-    }
-  }
-
-  .bar {
-    position: relative;
-    width: 100%;
-    height: 7px;
-    background-color: $white-5;
-    border-radius: 4px;
-    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
-    overflow: hidden;
-
-    &:after {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 7px;
-      border-radius: 4px;
-      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
-      background-color: lighten($blue, 30%);
-      width: 0;
-      transition: width 150ms;
-    }
-  }
-
-  .knob {
-    top: 0;
-    left: 0;
-    position: absolute;
-    height: 19px;
-    width: 19px;
-    background-color: darken(white, 4%);
-    border-radius: 50%;
-    transition: transform 150ms, background-color 150ms;
-    z-index: 1;
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-      0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-
-    &:after {
-      content: "";
-      position: absolute;
-      border-radius: 50%;
-      transition: transform 100ms;
-      transform: scale(0);
-      width: 19px;
-      height: 19px;
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  &.checked {
-    .knob {
-      transform: translate(42px - 19px);
-      background-color: $blue;
-    }
-
-    .bar:after {
-      width: 100%;
-    }
-
-    .knob:after {
-      background-color: transparentize($blue, 0.8);
-    }
-  }
-}
diff --git a/src/css/_toolbar-button.scss b/src/css/_toolbar-button.scss
index dfd394abdb..57f8c162f8 100644
--- a/src/css/_toolbar-button.scss
+++ b/src/css/_toolbar-button.scss
@@ -18,7 +18,7 @@
     margin: 0 4px;
 
     svg {
-      fill: lighten($aqua, 15%);
+      fill: var(--slate);
       height: 16px;
       width: 16px;
     }
@@ -27,7 +27,7 @@
   .text {
     @include label-small;
     white-space: nowrap;
-    color: $aqua;
+    color: var(--aqua);
     display: flex;
     line-height: 16px;
     height: 16px;
@@ -38,7 +38,7 @@
   .dropdown-arrow {
     display: flex;
     height: 16px;
-    stroke: $gray-5;
+    stroke: var(--slate);
     stroke-width: 3px;
     transition: transform 500ms;
     margin: 0 4px;
@@ -58,7 +58,7 @@
   }
 
   &.dragging {
-    background: $blue;
+    background: var(--havelock);
     .text {
       color: white;
     }
@@ -74,6 +74,6 @@
     color: white;
   }
   &:active:not(:disabled) {
-    background: darken($havelock, 15%);
+    background: var(--azure);
   }
 }
diff --git a/src/css/_tooltip.scss b/src/css/_tooltip.scss
index b1c3c1bb62..b543b76fee 100644
--- a/src/css/_tooltip.scss
+++ b/src/css/_tooltip.scss
@@ -1,6 +1,6 @@
 .tool-tip {
   position: fixed;
-  background: $gray-9;
+  background: var(--cello-transparent);
   font-family: $data-font;
   color: white;
   font-size: 12px;
diff --git a/src/css/_uid-waterfall.scss b/src/css/_uid-waterfall.scss
deleted file mode 100644
index 861e5e171a..0000000000
--- a/src/css/_uid-waterfall.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-.uid-waterfall {
-  user-select: none;
-  width: 100%;
-  font-family: $data-font;
-
-  .waterfall-row {
-    display: flex;
-    align-items: center;
-    padding-bottom: 3px;
-  }
-
-  .data-label {
-    font-size: 9px;
-    color: $gray-6;
-    font-weight: bold;
-    padding: 3px 6px;
-
-    a {
-      text-decoration: underline;
-      color: $blue-light;
-      cursor: pointer;
-
-      &:active {
-        color: $blue;
-      }
-    }
-  }
-
-  .slider {
-    flex: 1;
-    position: relative;
-    padding-right: 58px; // size of the path-tags
-  }
-
-  .line {
-    display: block;
-    position: absolute;
-    border-top: 1px solid $table-stripe-hover;
-    width: 100%;
-    top: 50%;
-  }
-
-  .path-tag {
-    cursor: pointer;
-    position: relative;
-    left: 0%;
-    font-size: 12px;
-
-    &:active {
-      transform: translateY(2px);
-    }
-  }
-  .path-tag.conn-bg-color {
-    width: calc(100% + 58px);
-  }
-
-  .path-tag.current {
-    outline: 2px dotted $white-9;
-  }
-
-  .caption {
-    margin: $space-s 0 0 0;
-    padding: 0;
-    text-align: right;
-  }
-}
diff --git a/src/css/forms/_global.scss b/src/css/forms/_global.scss
index a9080a9adf..09396fbdee 100644
--- a/src/css/forms/_global.scss
+++ b/src/css/forms/_global.scss
@@ -1,3 +1,3 @@
 ::placeholder {
-  color: $lead;
+  color: var(--lead);
 }
diff --git a/src/css/forms/_mixins.scss b/src/css/forms/_mixins.scss
index 657a8fefbb..e5618f2d1e 100644
--- a/src/css/forms/_mixins.scss
+++ b/src/css/forms/_mixins.scss
@@ -2,11 +2,11 @@
   &:focus,
   &:active {
     z-index: 1;
-    box-shadow: 0 0 0 2px $havelock;
+    box-shadow: 0 0 0 2px var(--havelock);
     outline: none !important;
   }
 }
 
 @mixin input-border {
-  box-shadow: inset 0 0 0 0.5px $lead, inset 0 0 0 1px white;
+  box-shadow: inset 0 0 0 0.5px var(--lead), inset 0 0 0 1px white;
 }
diff --git a/src/css/forms/_select-input.scss b/src/css/forms/_select-input.scss
index 6122d572c6..bcc6de3541 100644
--- a/src/css/forms/_select-input.scss
+++ b/src/css/forms/_select-input.scss
@@ -4,7 +4,7 @@
   @include label-normal;
   @include input-border;
   @include input-focus;
-  color: $aqua;
-  background: $ivory;
+  color: var(--aqua);
+  background: var(--ivory);
   border: none;
 }
diff --git a/src/css/forms/_text-input.scss b/src/css/forms/_text-input.scss
index 9b112ae468..b74a1fbff4 100644
--- a/src/css/forms/_text-input.scss
+++ b/src/css/forms/_text-input.scss
@@ -3,8 +3,8 @@
   @include input-border;
   @include input-focus;
   width: 100%;
-  color: $aqua;
-  background: $ivory;
+  color: var(--aqua);
+  background: var(--ivory);
   padding: 3px 8px;
   border-radius: 4px;
   border: none;
diff --git a/src/css/main.scss b/src/css/main.scss
index 76c14ab6a1..6e29cea8f5 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -1,7 +1,6 @@
 /* This file is for your main application css. */
 
 /* Third-party libs */
-@import "react-day-picker";
 @import "../../node_modules/react-grid-layout/css/styles";
 @import "../../node_modules/react-resizable/css/styles";
 /* Settings */
@@ -30,19 +29,12 @@
 @import "layout";
 @import "modal";
 @import "conn-versation";
-@import "uid-waterfall";
-@import "context-menu";
 @import "chart";
-@import "no-events-found";
-@import "form-inputs";
-@import "day-picker";
 @import "filter-node";
 @import "filter-tree";
-@import "space-switcher";
 @import "arrows";
 @import "log-viewer";
 @import "log-detail";
-@import "header";
 @import "control-bar";
 @import "pins";
 @import "search-page";
@@ -63,7 +55,6 @@
 @import "whois-modal";
 @import "status-bar";
 @import "portal";
-@import "menu-list";
 @import "message-box";
 @import "notice-banner";
 @import "circle-chevron";
@@ -72,25 +63,19 @@
 @import "loading-message";
 @import "loading-burst";
 @import "curl-modal";
-@import "toggle";
 @import "inline-table";
 @import "hash-correlation";
 @import "inline-table-loading";
 @import "table";
 @import "latest-error";
-@import "investigation-header";
 @import "finding-card";
 @import "span-duration";
-@import "finding-span-card";
 @import "expand-button";
-@import "finding-detail";
-@import "form";
 @import "pop-menu";
 @import "button-row";
 @import "debug-modal";
 @import "click-feedback";
 @import "header-cell";
-@import "menu-bar-button";
 @import "field-cell";
 @import "time-span-pickers";
 @import "input-suggestions";
diff --git a/src/css/settings/_colors.scss b/src/css/settings/_colors.scss
index 3b36d946af..535afe028c 100644
--- a/src/css/settings/_colors.scss
+++ b/src/css/settings/_colors.scss
@@ -1,100 +1,25 @@
-$white-1: white;
-$white-2: darken(white, 2%);
-$white-3: darken(white, 6%);
-$white-4: darken(white, 10%);
-$white-5: darken(white, 14%);
-$white-6: darken(white, 18%);
-$white-7: darken(white, 22%);
-$white-8: darken(white, 26%);
-$white-9: darken(white, 30%);
-
-$gray-base: #545866;
-$gray-1: lighten($gray-base, 20%);
-$gray-2: lighten($gray-base, 15%);
-$gray-3: lighten($gray-base, 10%);
-$gray-4: lighten($gray-base, 5%);
-$gray-5: $gray-base;
-$gray-6: darken($gray-base, 5%);
-$gray-7: darken($gray-base, 10%);
-$gray-8: darken($gray-base, 15%);
-$gray-9: darken($gray-base, 20%);
-
-$brand-blue-light: #3a79c2;
-$brand-blue: #2f619c;
-$brand-orange: #ea6842;
-
-$blue-light: lighten(#1da0f2, 15%);
-$blue: #1da0f2;
-$blue-dark: darken(#1da0f2, 15%);
-
-$yellow-light: lighten(#ffdd66, 15%);
-$yellow: #ffdd66;
-$yellow-dark: darken(#ffdd66, 15%);
-
-$green-light: lighten(#399c81, 15%);
-$green: #399c81;
-$green-dark: darken(#399c81, 15%);
-
-$red: #e65835;
-
-$red-light: lighten($red, 15%);
-$red-dark: darken($red, 15%);
-
-$pink: #ad3f95;
-
-$purple: #544aa6;
-$orange: #eeb457;
-
-$azure: #2f629c;
-$cello: #324862;
-$havelock: #4b91e2;
-$pecan: #9c692f;
-
-$snow: #fdfcfb;
-$coconut: #f8f7f6;
-$ivory: #f2f1f0;
-$cloudy: #dedddc;
-$lead: #aeadac;
-$slate: #757371;
-$aqua: #262524;
-$wet-cement: #4c5661;
-$transparent-light: rgba(255, 255, 255, 0.2);
-
-// Color Uses
-
-$filter-node-background: $green;
-$filter-node-foreground: $white-1;
-$table-stripe-color: rgba(0, 0, 0, 0.02);
-$table-stripe-hover: rgba(0, 0, 0, 0.06);
-
-// Gradients
-
-$chrome-gradient: linear-gradient(to bottom, #f0f0f0, #eeedec);
-$gray-to-white: linear-gradient(#f0f0f0, white);
-$chrome-border: $white-5;
-
 :root {
   // colors
   --red: #cd1313;
   --green: #399c81;
   --green-bright: #4ef567;
+  --orange: #ea6842;
+  --yellow: #ffdd66;
   --azure: #2f629c;
-  --cello: #324862;
+  --cello: hsl(213, 32%, 29%);
+  --cello-transparent: hsla(213, 32%, 29%, 0.92);
   --havelock: #4b91e2;
   --pecan: #9c692f;
 
   // shades of gray
-  --snow: #fdfcfb;
-  --coconut: #f8f7f6;
-  --ivory: #f2f1f0;
-  --cloudy: #dedddc;
-  --lead: #aeadac;
-  --slate: #757371;
-  --aqua: #262524;
+  --snow: #fcfcfd;
+  --coconut: #f7f7f8;
+  --ivory: #f0f2f5;
+  --cloudy: #e2e6e9;
+  --lead: #abadaf;
+  --slate: #717375;
   --wet-cement: #4c5661;
-
-  --chrome-gradient: linear-gradient(to bottom, #f0f0f0, #eeedec);
-  --error-gradient: linear-gradient(to bottom right, #f8eee3, #fae1e0);
+  --aqua: #242526;
 
   // type colors
   --ip: #4a90e2;
@@ -107,4 +32,11 @@ $chrome-border: $white-5;
   --alert-3: #fbc00e;
   --alert-2: #f4912f;
   --alert-1: #d0250b;
+
+  // backgrounds
+  --hover-light-bg: rgba(0, 0, 0, 0.06);
+  --table-stripe-bg: rgba(0, 0, 0, 0.02);
+
+  // borders
+  --pane-border: var(--cloudy);
 }
diff --git a/src/css/shared/_effects.scss b/src/css/shared/_effects.scss
index 3059ad423e..a2e1b44e15 100644
--- a/src/css/shared/_effects.scss
+++ b/src/css/shared/_effects.scss
@@ -22,10 +22,10 @@
 @mixin error-bg {
   background: linear-gradient(
     to top,
-    lighten($yellow, 10%),
-    $yellow 2%,
-    $yellow-dark 98%,
-    lighten($yellow, 10%)
+    lighten(hsl(47, 100%, 70%), 10%),
+    hsl(47, 100%, 70%) 2%,
+    hsl(47, 100%, 50%) 98%,
+    lighten(hsl(47, 100%, 70%), 10%)
   );
   box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.4);
   border-radius: 3px;
diff --git a/src/css/shared/_type-colors.scss b/src/css/shared/_type-colors.scss
index f3b9050154..5e6528616c 100644
--- a/src/css/shared/_type-colors.scss
+++ b/src/css/shared/_type-colors.scss
@@ -23,4 +23,8 @@
   &.set\[bool\] {
     color: var(--blue);
   }
+
+  &.null {
+    color: var(--cloudy);
+  }
 }
diff --git a/src/css/shared/_typography.scss b/src/css/shared/_typography.scss
index e273067409..6eaa663b15 100644
--- a/src/css/shared/_typography.scss
+++ b/src/css/shared/_typography.scss
@@ -129,27 +129,7 @@
   margin: 0;
   text-decoration: underline;
   cursor: pointer;
-
-  color: $blue;
-
-  &:hover {
-    color: darken($blue, 20%);
-  }
-
-  &:active {
-    color: darken($blue, 30%);
-  }
-
-  &.yellow {
-    color: $yellow;
-
-    &:hover {
-      color: $yellow-dark;
-    }
-    &:active {
-      color: $yellow;
-    }
-  }
+  color: var(--havelock);
 }
 
 .bold {
@@ -181,58 +161,3 @@
     transform: translateY(2px);
   }
 }
-
-.white-1 {
-  color: $white-1;
-}
-.white-2 {
-  color: $white-2;
-}
-.white-3 {
-  color: $white-3;
-}
-.white-4 {
-  color: $white-4;
-}
-.white-5 {
-  color: $white-5;
-}
-.white-6 {
-  color: $white-6;
-}
-.white-7 {
-  color: $white-7;
-}
-.white-8 {
-  color: $white-8;
-}
-.white-9 {
-  color: $white-9;
-}
-.gray-1 {
-  color: $gray-1;
-}
-.gray-2 {
-  color: $gray-2;
-}
-.gray-3 {
-  color: $gray-3;
-}
-.gray-4 {
-  color: $gray-4;
-}
-.gray-5 {
-  color: $gray-5;
-}
-.gray-6 {
-  color: $gray-6;
-}
-.gray-7 {
-  color: $gray-7;
-}
-.gray-8 {
-  color: $gray-8;
-}
-.gray-9 {
-  color: $gray-9;
-}
diff --git a/src/js/components/AppErrorBoundary.tsx b/src/js/components/AppErrorBoundary.tsx
index 5ffbdfb453..c3e54f1dbb 100644
--- a/src/js/components/AppErrorBoundary.tsx
+++ b/src/js/components/AppErrorBoundary.tsx
@@ -31,15 +31,6 @@ export default class AppErrorBoundary extends React.Component<Props, State> {
             Error
           </h1>
           <pre>{error.stack}</pre>
-          <h5>Possible Solutions</h5>
-          <ul>
-            <li>
-              Reload the pane <code>View -&gt; Reload</code>
-            </li>
-            <li>
-              Reset the state <code>Window -&gt; Reset State</code>
-            </li>
-          </ul>
         </div>
       </div>
     )
diff --git a/src/js/components/ColumnChooserMenu.tsx b/src/js/components/ColumnChooserMenu.tsx
index 5cc687c7a5..8e2fe5d599 100644
--- a/src/js/components/ColumnChooserMenu.tsx
+++ b/src/js/components/ColumnChooserMenu.tsx
@@ -23,7 +23,7 @@ const ControlListItem = styled.li`
 
   p {
     text-decoration: underline;
-    color: ${(props) => props.theme.colors.havelock};
+    color: var(--havelock);
   }
 `
 
diff --git a/src/js/components/ConnectionError.tsx b/src/js/components/ConnectionError.tsx
index 9f5ef8e8d9..f0a115d82e 100644
--- a/src/js/components/ConnectionError.tsx
+++ b/src/js/components/ConnectionError.tsx
@@ -23,7 +23,7 @@ const StyledHeader = styled.h1`
 
 const StyledP = styled.p`
   margin: 18px 0 0 0;
-  color: ${(p) => p.theme.colors.aqua};
+  color: var(--aqua);
   ${(p) => p.theme.typography.labelNormal}
 `
 
diff --git a/src/js/components/DownloadProgress.tsx b/src/js/components/DownloadProgress.tsx
index 06c3a58e45..ea0fdf9921 100644
--- a/src/js/components/DownloadProgress.tsx
+++ b/src/js/components/DownloadProgress.tsx
@@ -16,7 +16,6 @@ export default class DownloadProgress extends React.Component<Props> {
   render() {
     const {downloads, downloadsIsOpen} = this.props
     if (!downloadsIsOpen || downloads.length === 0) return null
-
     const {percentComplete, error} = downloads[0]
     const complete = percentComplete >= 1
 
diff --git a/src/js/components/Investigation/FindingCard.tsx b/src/js/components/Investigation/FindingCard.tsx
index 729170a6af..f3f3a7a4bf 100644
--- a/src/js/components/Investigation/FindingCard.tsx
+++ b/src/js/components/Investigation/FindingCard.tsx
@@ -14,7 +14,7 @@ import usePopupMenu from "../hooks/usePopupMenu"
 import {remote} from "electron"
 
 const StyledMagnifyingGlass = styled(MagnifyingGlass)`
-    fill: ${(props) => props.theme.colors.lead};
+    fill: var(--lead);
     min-width: 13px;
     width: 13px;
     min-height: 13px;
diff --git a/src/js/components/SearchPageHeader.tsx b/src/js/components/SearchPageHeader.tsx
index bacd868feb..0c52cbdc5e 100644
--- a/src/js/components/SearchPageHeader.tsx
+++ b/src/js/components/SearchPageHeader.tsx
@@ -6,7 +6,7 @@ import {Toolbar} from "./Toolbar/mod"
 import SearchHeaderChart from "./SearchHeaderChart"
 
 const Wrap = styled.div`
-  background: var(--chrome-gradient);
+  background: var(--ivory);
   z-index: 1;
   padding: 12px;
   user-select: none;
diff --git a/src/js/components/StartupError.tsx b/src/js/components/StartupError.tsx
index 56e2f9e499..64d8ed75c3 100644
--- a/src/js/components/StartupError.tsx
+++ b/src/js/components/StartupError.tsx
@@ -8,7 +8,7 @@ const Wrap = styled.div`
   padding: 24px;
   padding-top: 54px;
   min-height: 100vh;
-  background: var(--error-gradient);
+  background: linear-gradient(to bottom right, #f8eee3, #fae1e0);
 `
 
 const WindowDragArea = styled.div`
diff --git a/src/js/components/WorkspaceModals/StatusLight.tsx b/src/js/components/WorkspaceModals/StatusLight.tsx
index f0f5b7c725..dba87532ae 100644
--- a/src/js/components/WorkspaceModals/StatusLight.tsx
+++ b/src/js/components/WorkspaceModals/StatusLight.tsx
@@ -19,11 +19,11 @@ export default styled(StatusLight)<{status: WorkspaceStatus}>`
   fill: ${(p) => {
     switch (p.status) {
       case "connected":
-        return p.theme.colors.green
+        return "var(--green)"
       case "disconnected":
-        return p.theme.colors.red
+        return "var(--red)"
       default:
-        return p.theme.colors.lead
+        return "var(--lead)"
     }
   }};
 `
diff --git a/src/js/components/WorkspacePicker.tsx b/src/js/components/WorkspacePicker.tsx
index 795aab93ea..2a11f89648 100644
--- a/src/js/components/WorkspacePicker.tsx
+++ b/src/js/components/WorkspacePicker.tsx
@@ -21,13 +21,13 @@ const WorkspacePickerWrapper = styled.div`
 
   label {
     ${(props) => props.theme.typography.labelBold};
-    color: ${(props) => props.theme.colors.aqua};
+    color: var(--aqua);
   }
 
   svg {
     height: 11px;
     width: 11px;
-    stroke: ${(props) => props.theme.colors.slate};
+    stroke: var(--slate);
     margin-left: 6px;
   }
 ` as ComponentType<any>
diff --git a/src/js/components/common/Checkbox.tsx b/src/js/components/common/Checkbox.tsx
index 21aa277d94..b912c2ad49 100644
--- a/src/js/components/common/Checkbox.tsx
+++ b/src/js/components/common/Checkbox.tsx
@@ -23,13 +23,13 @@ const CheckboxContainer = styled.div`
 
 const Icon = styled.svg`
   fill: none;
-  stroke: ${(props) => props.theme.colors.white};
+  stroke: white;
   stroke-width: 3px;
 `
 
 const Label = styled.label`
   margin-left: 7px;
-  color: ${(props) => props.theme.colors.slate};
+  color: var(--slate);
   ${(props) => props.theme.typography.labelSmall}
 `
 
@@ -37,13 +37,10 @@ const StyledCheckbox = styled.div<{checked: boolean}>`
   display: inline-block;
   width: 16px;
   height: 16px;
-  background: ${(props) =>
-    props.checked ? props.theme.colors.havelock : props.theme.colors.white};
+  background: ${(props) => (props.checked ? "var(--havelock)" : "white")};
   border-radius: 3px;
   transition: all 150ms;
-  border: 1px solid
-    ${(props) =>
-      props.checked ? props.theme.colors.white : props.theme.colors.lead};
+  border: 1px solid ${(props) => (props.checked ? "white" : "var(--lead)")};
 
   ${Icon} {
     visibility: ${(props) => (props.checked ? "visible" : "hidden")};
diff --git a/src/js/components/common/EmptySection.tsx b/src/js/components/common/EmptySection.tsx
index c7a57c5026..9178addf7e 100644
--- a/src/js/components/common/EmptySection.tsx
+++ b/src/js/components/common/EmptySection.tsx
@@ -10,12 +10,12 @@ const EmptyWrapper = styled.div`
   user-select: none;
 
   svg {
-    fill: ${(props) => props.theme.colors.cloudy};
+    fill: var(--cloudy);
   }
 
   p {
     ${(props) => props.theme.typography.labelSmall};
-    color: ${(props) => props.theme.colors.slate};
+    color: var(--slate);
     text-align: center;
     margin: 16px 14px 0;
   }
diff --git a/src/js/style-theme/index.ts b/src/js/style-theme/index.ts
index e2eec096e7..13d0624eb5 100644
--- a/src/js/style-theme/index.ts
+++ b/src/js/style-theme/index.ts
@@ -83,22 +83,6 @@ const typeStyles = css`
 `
 
 const theme = {
-  colors: {
-    white: "#FFFFFF",
-    snow: "#FDFCFB",
-    coconut: "#F8F7F6",
-    ivory: "#F2F1F0",
-    cloudy: "#DEDDDC",
-    lead: "#AEADAC",
-    slate: "#757371",
-    aqua: "#262524",
-    pecan: "#9C692F",
-    havelock: "#4B91E2",
-    azure: "#2F629C",
-    cello: "#324862",
-    green: "#4EF567",
-    red: "#CD1313"
-  },
   typography: {
     headingSection,
     headingList,