diff --git a/gallery/package.json b/gallery/package.json
index 36bb1b9d26..c03675f40b 100644
--- a/gallery/package.json
+++ b/gallery/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sonatype/react-shared-components-gallery",
-  "version": "3.3.4",
+  "version": "3.3.5",
   "description": "Gallery application to demonstrate usage and look of Sonatype shared UI components",
   "main": "src/main.ts",
   "scripts": {
diff --git a/gallery/src/PageHeader.tsx b/gallery/src/PageHeader.tsx
index 21f63c2cfb..150b0aa045 100644
--- a/gallery/src/PageHeader.tsx
+++ b/gallery/src/PageHeader.tsx
@@ -4,8 +4,8 @@
  * the terms of the Eclipse Public License 2.0 which accompanies this
  * distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
  */
-import React from 'react';
-import { NxPageHeader } from '@sonatype/react-shared-components';
+import React, { useEffect, useState } from 'react';
+import { NxPageHeader, NxToggle } from '@sonatype/react-shared-components';
 
 import packageJson from '../package.json';
 
@@ -15,7 +15,18 @@ function PageHeader() {
     version: packageJson.version
   };
 
-  return <NxPageHeader homeLink="#" productInfo={productInfo} />;
+  const [darkMode, setDarkMode] = useState(window.localStorage.getItem('darkMode') === 'true');
+
+  useEffect(function() {
+    document.body.classList.toggle('nx-dark-theme', darkMode);
+    window.localStorage.setItem('darkMode', darkMode.toString());
+  }, [darkMode]);
+
+  return (
+    <NxPageHeader homeLink="#" productInfo={productInfo}>
+      <NxToggle isChecked={darkMode} onChange={() => setDarkMode(!darkMode)}>Dark Mode</NxToggle>
+    </NxPageHeader>
+  );
 }
 
 export default PageHeader;
diff --git a/lib/package.json b/lib/package.json
index 8685e06b02..4e8f82f0aa 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sonatype/react-shared-components",
-  "version": "3.3.4",
+  "version": "3.3.5",
   "description": "Sonatype shared UI components and utilities written in React",
   "main": "index.js",
   "repository": {
diff --git a/lib/src/assets/img/sonatype-logo-with-hexagon-light-text.png b/lib/src/assets/img/sonatype-logo-with-hexagon-light-text.png
new file mode 100644
index 0000000000..bb36464ee3
Binary files /dev/null and b/lib/src/assets/img/sonatype-logo-with-hexagon-light-text.png differ
diff --git a/lib/src/base-styles/_base.scss b/lib/src/base-styles/_base.scss
index 076ec2e6a9..b17704c790 100644
--- a/lib/src/base-styles/_base.scss
+++ b/lib/src/base-styles/_base.scss
@@ -16,6 +16,7 @@
 //@import '~normalize.css';
 
 @import 'nx-globals';
+@import 'nx-dark-theme';
 @import 'nx-typography';
 
 @import 'nx-page-header';
diff --git a/lib/src/base-styles/_nx-alert.scss b/lib/src/base-styles/_nx-alert.scss
index 160a2a7ee4..2a99cd46ff 100644
--- a/lib/src/base-styles/_nx-alert.scss
+++ b/lib/src/base-styles/_nx-alert.scss
@@ -14,9 +14,10 @@
 
   align-items: first baseline;
   background-color: $nx-off-white;
-  border: $nx-border-darker;
+  border: 1px solid var(--nx-border-color-starker);
   border-radius: $nx-border-radius;
   box-sizing: border-box;
+  color: $nx-text-color;
   display: flex;
   margin: 16px auto 24px auto;
   max-width: 950px;
diff --git a/lib/src/base-styles/_nx-btn.scss b/lib/src/base-styles/_nx-btn.scss
index 39487ab021..4ad621a456 100644
--- a/lib/src/base-styles/_nx-btn.scss
+++ b/lib/src/base-styles/_nx-btn.scss
@@ -8,9 +8,9 @@
 %nx-btn--disabled {
   &.disabled, &[disabled] {
     &, &:hover, &:focus {
-      background-color:$nx-disabled-background;
-      border-color: $nx-disabled-border;
-      color: $nx-text-color-disabled;
+      background-color: var(--nx-interactive-disabled-background-color);
+      border-color: var(--nx-interactive-disabled-border-color);
+      color: var(--nx-text-color-disabled);
       cursor: default;
     }
   }
@@ -38,7 +38,7 @@
   }
 
   &:focus {
-    border: 1px solid $nx-focus-border-color;
+    border: 1px solid var(--nx-interactive-focus-border-color);
     box-shadow: $nx-focus-box-shadow;
     outline: 0;
   }
@@ -73,7 +73,7 @@
 
   background-color: transparent;
   border-color: #d1d6f0;
-  color: $nx-text-color-dark;
+  color: var(--nx-text-color-stark);
 
   &:hover {
     background-color: transparent;
diff --git a/lib/src/base-styles/_nx-card.scss b/lib/src/base-styles/_nx-card.scss
index 9263bec63c..8df53ed2cc 100644
--- a/lib/src/base-styles/_nx-card.scss
+++ b/lib/src/base-styles/_nx-card.scss
@@ -10,7 +10,7 @@
 }
 
 .nx-card {
-  background-color: #fff;
+  background-color: var(--nx-component-background-color);
   border-radius: $nx-border-radius;
   box-sizing: border-box;
   margin-bottom: $nx-spacing-md;
diff --git a/lib/src/base-styles/_nx-counter.scss b/lib/src/base-styles/_nx-counter.scss
index a3c3faa190..8566317a3e 100644
--- a/lib/src/base-styles/_nx-counter.scss
+++ b/lib/src/base-styles/_nx-counter.scss
@@ -11,7 +11,7 @@
   background-color: #fff;
   border: 1px solid $nx-blue-1000;
   border-radius: 12px;
-  color: $nx-text-color-dark;
+  color: var(--nx-text-color-stark);
   display: inline-block;
   font-size: 14px;
   line-height: $nx-line-height;
diff --git a/lib/src/base-styles/_nx-dark-theme.scss b/lib/src/base-styles/_nx-dark-theme.scss
new file mode 100644
index 0000000000..268028415f
--- /dev/null
+++ b/lib/src/base-styles/_nx-dark-theme.scss
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2019-present Sonatype, Inc.
+ * This program and the accompanying materials are made available under
+ * the terms of the Eclipse Public License 2.0 which accompanies this
+ * distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
+ */
+@mixin dark-theme {
+  // global CSS variables/custom properties
+  --nx-site-background-color: #{invert($nx-site-background-color)};
+  --nx-component-background-color: #{invert($nx-white)};
+  --nx-form-field-background-color: var(--nx-component-background-color);
+
+  --nx-text-color: #{invert($nx-text-color)};
+  --nx-text-color-stark: #{invert($nx-text-color-dark)};
+  --nx-heading-color: var(--nx-text-color-stark);
+  --nx-text-color-disabled: #{invert($nx-text-color-disabled)};
+
+  --nx-interactive-selected-background-color: #{invert($nx-selected-background)};
+  --nx-interactive-active-background-color: #{invert($nx-active-background)};
+  --nx-interactive-hover-background-color: #{invert($nx-hover-background)};
+  --nx-interactive-disabled-background-color: #{invert($nx-disabled-background)};
+  --nx-interactive-disabled-border-color: #{invert($nx-disabled-border)};
+  --nx-interactive-focus-border-color: #{invert($nx-focus-border-color)};
+
+  --nx-border-color: #{invert($nx-grey-3)};
+  --nx-border-color-stark: #{invert($nx-grey-4)};
+  --nx-border-color-starker: #{invert($nx-slate)};
+  --nx-border-color-faded: #{invert($nx-grey-2)};
+  --nx-border-color-very-faded: #{invert($nx-grey-1)};
+
+  --nx-form-field-border-color: #{invert($nx-grey-1100)};
+
+  --nx-page-header-background-color: #{invert($nx-off-white)};
+  --nx-page-header-border-color: #{invert($nx-grey-100)};
+
+  --nx-code-background-color: #{invert($nx-grey-1)};
+
+  .nx-product__logo-image {
+    display: none;
+  }
+
+  .nx-product__logo-image--light-text {
+    display: revert;
+  }
+}
+
+.nx-dark-theme {
+  @include dark-theme;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include dark-theme;
+  }
+}
diff --git a/lib/src/base-styles/_nx-form-select.scss b/lib/src/base-styles/_nx-form-select.scss
index d7693675a2..8153449f58 100644
--- a/lib/src/base-styles/_nx-form-select.scss
+++ b/lib/src/base-styles/_nx-form-select.scss
@@ -19,25 +19,25 @@
   background-repeat: no-repeat;
   border: 1px solid #d1d6f0;
   border-radius: $nx-border-radius;
-  color: $nx-text-color;
+  color: var(--nx-text-color);
   font-size: $nx-font-size;
   line-height: $nx-line-height;
   padding: $nx-spacing-xs $nx-spacing-md;
   width: $nx-form-element-width-normal;
 
   &:hover {
-    border-color: $nx-form-element-border-color;
+    border-color: var(--nx-form-field-border-color);
   }
 
   &:focus {
     box-shadow: $nx-focus-box-shadow;
-    border-color: $nx-focus-border-color;
+    border-color: var(--nx-interactive-focus-border-color);
     outline: none;
   }
 
   &.disabled {
-    background-color:$nx-disabled-background;
-    border-color: $nx-disabled-border;
+    background-color: var(--nx-interactive-disabled-background-color);
+    border-color: var(--nx-interactive-disabled-border-color);
   }
 }
 
diff --git a/lib/src/base-styles/_nx-forms.scss b/lib/src/base-styles/_nx-forms.scss
index 22b9336a1c..e666e206ed 100644
--- a/lib/src/base-styles/_nx-forms.scss
+++ b/lib/src/base-styles/_nx-forms.scss
@@ -56,7 +56,7 @@
   @include bold();
   @include container-horizontal;
 
-  color: $nx-text-color-dark;
+  color: var(--nx-text-color-stark);
   cursor: default;
   display: block;
   margin-bottom: $nx-spacing-xs;
@@ -66,7 +66,7 @@
   .nx-label__text::after, .nx-legend__text::after {
     @include regular();
 
-    color: $nx-text-color;
+    color: var(--nx-text-color);
     content: "Optional";
     font-size: $nx-font-size-xs;
     font-style: italic;
@@ -78,7 +78,7 @@
   @include container-horizontal;
   @include semi-bold();
 
-  color: $nx-text-color-dark;
+  color: var(--nx-text-color-stark);
   font-size: $nx-font-size-s;
   display: block;
   margin-bottom: $nx-spacing-md;
diff --git a/lib/src/base-styles/_nx-globals.scss b/lib/src/base-styles/_nx-globals.scss
index 0476e75c11..8ee0054b8e 100644
--- a/lib/src/base-styles/_nx-globals.scss
+++ b/lib/src/base-styles/_nx-globals.scss
@@ -75,3 +75,36 @@ $nx-scrollable-default-height: 400px;
 .nx-blockquote {
   @extend %nx-blockquote;
 }
+
+:root {
+  // global CSS variables/custom properties
+  --nx-site-background-color: #{$nx-site-background-color};
+  --nx-component-background-color: #{$nx-white};
+  --nx-form-field-background-color: var(--nx-component-background-color);
+
+  --nx-text-color: #{$nx-text-color};
+  --nx-text-color-stark: #{$nx-text-color-dark};
+  --nx-heading-color: var(--nx-text-color-stark);
+  --nx-text-color-disabled: #{$nx-text-color-disabled};
+
+  --nx-interactive-selected-background-color: #{$nx-selected-background};
+  --nx-interactive-active-background-color: #{$nx-active-background};
+  --nx-interactive-hover-background-color: #{$nx-hover-background};
+  --nx-interactive-disabled-background-color: #{$nx-disabled-background};
+  --nx-interactive-disabled-border-color: #{$nx-disabled-border};
+  --nx-interactive-focus-border-color: #{$nx-focus-border-color};
+  --nx-interactive-focus-shadow-color: #{transparentize($nx-focus-border-color, 0.7)};
+
+  --nx-border-color: #{$nx-grey-3};
+  --nx-border-color-stark: #{$nx-grey-4};
+  --nx-border-color-starker: #{$nx-slate};
+  --nx-border-color-faded: #{$nx-grey-2};
+  --nx-border-color-very-faded: #{$nx-grey-1};
+
+  --nx-form-field-border-color: #{$nx-grey-1100};
+
+  --nx-page-header-background-color: #{$nx-off-white};
+  --nx-page-header-border-color: #{$nx-grey-100};
+
+  --nx-code-background-color: #{$nx-grey-1};
+}
diff --git a/lib/src/base-styles/_nx-grid.scss b/lib/src/base-styles/_nx-grid.scss
index d27048c785..3eecb33a75 100644
--- a/lib/src/base-styles/_nx-grid.scss
+++ b/lib/src/base-styles/_nx-grid.scss
@@ -13,7 +13,7 @@
 .nx-grid-col {
   flex: 1 0;
 
-  border-left: $nx-border-light;
+  border-left: 1px solid var(--nx-border-color-faded);
   box-sizing: border-box;
   margin: 8px 0;
   overflow-x: hidden;
@@ -59,7 +59,7 @@
 
 .nx-grid-h-keyline {
   border: none;
-  border-top: $nx-border-light;
+  border-top: 1px solid var(--nx-border-color-faded);
   margin: 0;
 }
 
diff --git a/lib/src/base-styles/_nx-lists.scss b/lib/src/base-styles/_nx-lists.scss
index 698601698c..55f42534ae 100644
--- a/lib/src/base-styles/_nx-lists.scss
+++ b/lib/src/base-styles/_nx-lists.scss
@@ -44,7 +44,7 @@
   }
 
   &.disabled {
-    color: $nx-text-color-disabled;
+    color: var(--nx-text-color-disabled);
     cursor: default;
   }
 
@@ -163,33 +163,33 @@
   .nx-list__item {
     &.selected {
       &, &:hover {
-        background-color: $nx-selected-background;
+        background-color: var(--nx-interactive-selected-background-color);
       }
     }
 
     &:hover {
-      background-color: $nx-hover-background;
+      background-color: var(--nx-interactive-hover-background-color);
       cursor: pointer;
     }
 
     &:active {
-      background-color: $nx-active-background;
+      background-color: var(--nx-interactive-active-background-color);
     }
 
     &:focus {
       box-shadow: $nx-focus-box-shadow;
-      border-color: $nx-focus-border-color;
+      border-color: var(--nx-interactive-focus-border-color);
       outline: none;
     }
 
     &.nx-list__item--empty {
       @include regular();
 
-      color: $nx-text-color;
+      color: var(--nx-text-color);
     }
 
     &.disabled {
-      color: $nx-text-color-disabled;
+      color: var(--nx-text-color-disabled);
 
       &:hover {
         background-color: transparent;
@@ -204,7 +204,7 @@
     > .nx-chevron {
       align-self: center;
       -ms-grid-row-align: center;
-      color: $nx-text-color-dark;
+      color: var(--nx-text-color-stark);
       -ms-grid-row: 1;
       -ms-grid-row-span: 2;
       -ms-grid-column: 3;
diff --git a/lib/src/base-styles/_nx-page-header.scss b/lib/src/base-styles/_nx-page-header.scss
index 757fd23a8c..146aa781ac 100644
--- a/lib/src/base-styles/_nx-page-header.scss
+++ b/lib/src/base-styles/_nx-page-header.scss
@@ -5,7 +5,6 @@
  * distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
  */
 
-$main-header-background: $nx-off-white;
 $main-header-color: $nx-off-black;
 $main-header-product-height: 52px;
 $main-header-product-title-row-height: 2fr;
@@ -18,8 +17,8 @@ $main-header-product-version-row-height: 1fr;
 .nx-page-header {
   box-sizing: content-box;
 
-  background-color: $main-header-background;
-  border-bottom: 1px solid $nx-header-border;
+  background-color: var(--nx-page-header-background-color);
+  border-bottom: 1px solid var(--nx-page-header-border-color);
   flex-shrink: 0; // needed for IE11
   height: $nx-main-header-height;
   width: 100%;
@@ -46,7 +45,6 @@ $main-header-product-version-row-height: 1fr;
 .nx-page-header__link {
   border-bottom: 2px solid transparent;
 
-  color: #515151;
   display: inline-block;
   font-size: $nx-font-size-s;
   margin-right: $nx-spacing-l;
@@ -105,6 +103,10 @@ $main-header-product-version-row-height: 1fr;
   margin-top: 13px; // fix vertical centering
 }
 
+.nx-product__logo-image--light-text {
+  display: none;
+}
+
 .nx-product__name {
   display: inline-block;
   font-size: 26px;
diff --git a/lib/src/base-styles/_nx-page-layout.scss b/lib/src/base-styles/_nx-page-layout.scss
index ed02b72e07..0333363522 100644
--- a/lib/src/base-styles/_nx-page-layout.scss
+++ b/lib/src/base-styles/_nx-page-layout.scss
@@ -14,7 +14,7 @@
 }
 
 .nx-body {
-  background-color: $nx-site-background-color;
+  background-color: var(--nx-site-background-color);
   height: 100%;
   margin: 0;
   // prevents scrollbar flicker as tooltips appear in IE11
@@ -52,7 +52,6 @@
 .nx-page-sidebar {
   @include container-vertical;
 
-  background-color: $nx-sidebar-background-color;
   box-sizing: border-box;
   flex-basis: $nx-sidebar-width;
   overflow-x: hidden;
diff --git a/lib/src/base-styles/_nx-pagination.scss b/lib/src/base-styles/_nx-pagination.scss
index 4b63a12e83..8a260e78e5 100644
--- a/lib/src/base-styles/_nx-pagination.scss
+++ b/lib/src/base-styles/_nx-pagination.scss
@@ -27,7 +27,7 @@
 
   &:focus {
     box-shadow: $nx-focus-box-shadow;
-    outline: 1px solid $nx-focus-border-color;
+    outline: 1px solid var(--nx-interactive-focus-border-color);
     outline-offset: -1px;
   }
 }
@@ -36,7 +36,7 @@
   @include regular();
   background-color: transparent;
   border-color: transparent;
-  color: $nx-text-color;
+  color: var(--nx-text-color);
 
   &:hover {
     background-color: transparent;
@@ -47,13 +47,13 @@
     background-color: $nx-grey-100;
     border-color: $nx-grey-900;
     box-shadow: none;
-    color: $nx-text-color;
+    color: var(--nx-text-color);
   }
 
   &.selected {
     background-color: #232c50;
     border-color: #232c50;
-    color: #fff;
+    color: var(--nx-component-background-color);
     cursor: default;
   }
 }
diff --git a/lib/src/base-styles/_nx-radio-checkbox.scss b/lib/src/base-styles/_nx-radio-checkbox.scss
index 97fd237950..789befdc7e 100644
--- a/lib/src/base-styles/_nx-radio-checkbox.scss
+++ b/lib/src/base-styles/_nx-radio-checkbox.scss
@@ -30,21 +30,21 @@
     cursor: pointer;
 
     .nx-radio-checkbox__control {
-      border-color: $nx-form-element-border-color;
+      border-color: var(--nx-form-field-border-color);
       stroke: $nx-grey-1100;
     }
   }
 
   &:focus-within {
     .nx-radio-checkbox__control {
-      border-color: $nx-focus-border-color;
-      stroke: $nx-focus-border-color;
-      filter: drop-shadow(0 0 3px rgba($nx-focus-border-color, 0.4));
+      border-color: var(--nx-interactive-focus-border-color);
+      stroke: var(--nx-interactive-focus-border-color);
+      filter: drop-shadow(0 0 3px rgba(var(--nx-interactive-focus-border-color), 0.4));
     }
 
     &:hover {
       .nx-radio-checkbox__control {
-        border-color: $nx-form-element-border-color;
+        border-color: var(--nx-form-field-border-color);
         filter: none;
         stroke: $nx-grey-1100;
       }
@@ -69,8 +69,8 @@
 }
 
 .nx-radio-checkbox__control {
-  background-color: #fff;
-  border: 1px solid #d1d6f0;
+  background-color: var(--nx-form-field-background-color);
+  border: 1px solid var(--nx-form-field-border-color);
   flex-shrink: 0;
   margin-right: $nx-spacing-xs;
 }
@@ -78,8 +78,8 @@
 svg.nx-radio-checkbox__control {
   border-style: none;
   background: none;
-  fill: #fff;
-  stroke: #d1d6f0;
+  fill: var(--nx-form-field-background-color);
+  stroke: var(--nx-form-field-border-color);
 }
 
 .nx-radio-checkbox__content {
@@ -92,14 +92,14 @@ svg.nx-radio-checkbox__control {
     cursor: default;
 
     .nx-radio-checkbox__control {
-      background-color:$nx-disabled-background;
-      border-color: $nx-disabled-border;
+      background-color: var(--nx-interactive-disabled-background-color);
+      border-color: var(--nx-interactive-disabled-border-color);
     }
 
     svg.nx-radio-checkbox__control {
       background: none;
-      fill:$nx-disabled-background;
-      stroke: $nx-disabled-border;
+      fill: var(--nx-interactive-disabled-background-color);
+      stroke: var(--nx-interactive-disabled-border-color);
     }
   }
 }
@@ -113,7 +113,7 @@ svg.nx-radio-checkbox__control {
   &:focus {
     // less-nice IE11 focus style because IE11 doesn't support :focus-within
     margin-right: $nx-spacing-xxs;
-    outline: 1px solid $nx-focus-border-color;
+    outline: 1px solid var(--nx-interactive-focus-border-color);
     opacity: 1;
     position: static;
     vertical-align: 5px;
diff --git a/lib/src/base-styles/_nx-tables.scss b/lib/src/base-styles/_nx-tables.scss
index e3a1ce4437..238bf90080 100644
--- a/lib/src/base-styles/_nx-tables.scss
+++ b/lib/src/base-styles/_nx-tables.scss
@@ -71,13 +71,13 @@
     &.nx-clickable {
       &:hover {
         > .nx-cell {
-          background-color: $nx-hover-background;
+          background-color: var(--nx-interactive-hover-background-color);
         }
       }
 
       &.selected, &:active {
         > .nx-cell {
-          background-color: $nx-selected-background;
+          background-color: var(--nx-interactive-selected-background-color);
         }
       }
 
@@ -86,7 +86,7 @@
         outline: none;
 
         > .nx-cell {
-          border-color: $nx-focus-border-color;
+          border-color: var(--nx-interactive-focus-border-color);
         }
       }
     }
@@ -147,7 +147,7 @@
 .nx-table-container__footer {
   @include container-vertical;
 
-  background-color: #fff;
+  background-color: var(--nx-component-background-color);
   border-top: 1px solid #d1d6f0;
   margin-top: auto;
   padding: $nx-table-footer-vertical-padding;
@@ -192,7 +192,7 @@
   border-top: none;
   box-sizing: border-box;
 
-  color: $nx-text-color-dark;
+  color: var(--nx-text-color-stark);
   font-size: $nx-font-size-s;
   height: $nx-table-cell-header-height;
   text-align: left;
@@ -201,7 +201,7 @@
   vertical-align: middle;
 
   &:focus {
-    outline: 1px solid $nx-focus-border-color;
+    outline: 1px solid var(--nx-interactive-focus-border-color);
     outline-offset: -1px;
     box-shadow: $nx-focus-box-shadow;
   }
@@ -214,7 +214,7 @@
 
 
 .nx-cell--icon {
-  color: $nx-text-color-dark;
+  color: var(--nx-text-color-stark);
   text-align: center;
 }
 
@@ -234,7 +234,7 @@
 }
 
 .nx-table-row--filter-header > .nx-cell--header {
-  background-color: #ffffff;
+  background-color: var(--nx-component-background-color);
   border-bottom: 1px solid #d1d6f0;
 }
 
diff --git a/lib/src/base-styles/_nx-text-input.scss b/lib/src/base-styles/_nx-text-input.scss
index 97af956d7e..e54d0a5db9 100644
--- a/lib/src/base-styles/_nx-text-input.scss
+++ b/lib/src/base-styles/_nx-text-input.scss
@@ -22,7 +22,7 @@
 
     &:hover {
       .nx-text-input__box {
-        border-color: $nx-form-element-border-color;
+        border-color: var(--nx-form-field-border-color);
       }
     }
   }
@@ -46,8 +46,8 @@
   &.disabled {
     &, &.valid, &.invalid, &.pristine {
       .nx-text-input__box {
-        background-color:$nx-disabled-background;
-        border-color: $nx-disabled-border;
+        background-color: var(--nx-interactive-disabled-background-color);
+        border-color: var(--nx-interactive-disabled-border-color);
       }
 
       .nx-text-input__invalid-message {
@@ -65,8 +65,8 @@
   @include container-horizontal;
 
   align-items: center;
-  background-color: #fff;
-  border: 1px solid $nx-form-element-border-color;
+  background-color: var(--nx-form-field-background-color);
+  border: 1px solid var(--nx-form-field-border-color);
   border-radius: $nx-border-radius;
   display: flex;
   padding: $nx-spacing-xs $nx-spacing-md;
@@ -85,7 +85,7 @@
 .nx-text-input__input {
   background-color: transparent;
   border: none;
-  color: $nx-text-color;
+  color: var(--nx-text-color);
   flex-grow: 1;
   font-size: $nx-font-size;
   line-height: $nx-line-height;
diff --git a/lib/src/base-styles/_nx-tile.scss b/lib/src/base-styles/_nx-tile.scss
index 6661f8ef1e..be3a83556f 100644
--- a/lib/src/base-styles/_nx-tile.scss
+++ b/lib/src/base-styles/_nx-tile.scss
@@ -7,7 +7,6 @@
 
 $nx-tile-header-height: 24px; // Minimum height
 $nx-tile-header-height-actions: 43px; // Height with sub-title and/or right actions
-$nx-tile-background-color: $nx-white;
 
 // the "padding" around the inside edge of the nx-tile, which must be implemented using padding/margin
 // on children since nx-tile-content--accordion-container is supposed to go all the way to the edges
@@ -22,7 +21,7 @@ $nx-tile-padding: $nx-spacing-l;
 .nx-tile {
   @include container-vertical;
 
-  background-color: $nx-tile-background-color;
+  background-color: var(--nx-component-background-color);
   border-radius: $nx-border-radius;
   margin: $nx-spacing-xs 0 $nx-spacing-md 0;
 
@@ -69,7 +68,7 @@ $nx-tile-padding: $nx-spacing-l;
   grid-row-start: 2;
   grid-row-end: 2;
 
-  color: $nx-heading-color;
+  color: var(--nx-heading-color);
   font-size: $nx-font-size-heading-level-3;
   max-width: $nx-paragraph-width-maximum;
 }
diff --git a/lib/src/base-styles/_nx-typography.scss b/lib/src/base-styles/_nx-typography.scss
index 557d574c09..e43521559b 100644
--- a/lib/src/base-styles/_nx-typography.scss
+++ b/lib/src/base-styles/_nx-typography.scss
@@ -78,7 +78,7 @@
 .nx-body {
   @include regular();
 
-  color: $nx-text-color;
+  color: var(--nx-text-color);
   font-size: $nx-font-size;
   line-height: $nx-line-height;
 }
@@ -87,7 +87,7 @@
   @include bold();
   @include container-horizontal;
 
-  color: $nx-heading-color;
+  color: var(--nx-heading-color);
   font-size: $nx-font-size-heading-level-1;
   margin-bottom: $nx-spacing-l;
 }
@@ -96,7 +96,7 @@
   @include semi-bold();
   @include container-horizontal;
 
-  color: $nx-heading-color;
+  color: var(--nx-heading-color);
   font-size: $nx-font-size-heading-level-2;
   margin-bottom: $nx-spacing-md;
 }
@@ -105,7 +105,7 @@
   @include bold();
   @include container-horizontal;
 
-  color: $nx-heading-color;
+  color: var(--nx-heading-color);
   font-size: $nx-font-size-heading-level-3;
   margin-bottom: $nx-spacing-md;
 }
@@ -114,7 +114,7 @@
   @include bold();
   @include container-horizontal;
 
-  color: $nx-heading-color;
+  color: var(--nx-heading-color);
   font-size: $nx-font-size-heading-level-4;
   margin-bottom: $nx-spacing-xs;
   text-transform: uppercase;
diff --git a/lib/src/components/NxAccordion/NxAccordion.scss b/lib/src/components/NxAccordion/NxAccordion.scss
index afc49bb8a6..249e136a50 100644
--- a/lib/src/components/NxAccordion/NxAccordion.scss
+++ b/lib/src/components/NxAccordion/NxAccordion.scss
@@ -9,7 +9,7 @@
 @import '../../scss-shared/nx-text-helpers';
 
 .nx-accordion {
-  background: #fff;
+  background: var(--nx-component-background-color);
   border-radius: $nx-border-radius;
   margin: $nx-spacing-md 0;
 }
@@ -23,7 +23,7 @@
     @include container-horizontal;
     align-items: center;
     box-sizing: border-box;
-    color: $nx-text-color-dark;
+    color: var(--nx-text-color-stark);
     cursor: pointer;
     display: flex;
     font-weight: bold;
@@ -40,7 +40,7 @@
     outline: none;
 
     > .nx-accordion__summary-wrapper {
-      outline: 1px solid $nx-focus-border-color;
+      outline: 1px solid var(--nx-interactive-focus-border-color);
       outline-offset: -1px;
       box-shadow: $nx-focus-box-shadow;
     }
@@ -58,7 +58,7 @@
   @include bold();
   @include container-horizontal;
 
-  color: $nx-heading-color;
+  color: var(--nx-heading-color);
   font-size: $nx-font-size-heading-level-3;
   margin-bottom: $nx-spacing-md;
 }
diff --git a/lib/src/components/NxDropdown/NxDropdown.scss b/lib/src/components/NxDropdown/NxDropdown.scss
index 69c8875e7c..284dad4e68 100644
--- a/lib/src/components/NxDropdown/NxDropdown.scss
+++ b/lib/src/components/NxDropdown/NxDropdown.scss
@@ -17,7 +17,7 @@ $nx-dropdown-width: 250px;
 }
 
 .nx-dropdown__toggle {
-  color: $nx-text-color;
+  color: var(--nx-text-color);
   display: flex;
   margin: 0;
   outline: none;
@@ -40,7 +40,7 @@ $nx-dropdown-width: 250px;
 
   &.disabled {
     .nx-icon {
-      color: $nx-text-color-disabled;
+      color: var(--nx-text-color-disabled);
     }
   }
 
@@ -53,7 +53,7 @@ $nx-dropdown-width: 250px;
   @include container-vertical();
 
   background: $nx-off-white;
-  border: $nx-border-dark;
+  border: 1px solid var(--nx-border-color-stark);
   border-radius: $nx-border-radius;
   box-shadow: 0 2px 12px 0 rgba(74, 77, 113, 0.2),
               0 1px 2px 0 rgba(91, 95, 141, 0.2),
@@ -90,17 +90,17 @@ $nx-dropdown-width: 250px;
   background-color: transparent;
   border-radius: 0;
   box-sizing: border-box;
-  color: $nx-text-color;
+  color: var(--nx-text-color);
   outline: none;
   text-align: left;
   width: 100%;
 
   &:hover, &:focus {
-    background-color: $nx-hover-background;
+    background-color: var(--nx-interactive-hover-background-color);
   }
 
   &:active {
-    background-color:$nx-active-background;
+    background-color: var(--nx-interactive-active-background-color);
   }
 
   &.disabled {
diff --git a/lib/src/components/NxFilterInput/NxFilterInput.scss b/lib/src/components/NxFilterInput/NxFilterInput.scss
index 4be957b239..b8ad0dc0fd 100644
--- a/lib/src/components/NxFilterInput/NxFilterInput.scss
+++ b/lib/src/components/NxFilterInput/NxFilterInput.scss
@@ -21,7 +21,7 @@
 
   &.disabled {
     .nx-icon--filter-icons {
-      color: $nx-text-color-disabled;
+      color: var(--nx-text-color-disabled);
       display: inline-block;
     }
   }
diff --git a/lib/src/components/NxModal/NxModal.scss b/lib/src/components/NxModal/NxModal.scss
index 66d80057d5..c8ba4dfc40 100644
--- a/lib/src/components/NxModal/NxModal.scss
+++ b/lib/src/components/NxModal/NxModal.scss
@@ -17,7 +17,7 @@ $nx-modal-padding: $nx-spacing-l;
   @include container-vertical;
 
   border-radius: $nx-border-radius;
-  background-color: #ffffff;
+  background-color: var(--nx-component-background-color);
   margin: 100px 0;
   padding: $nx-spacing-l 0;
   width: 800px;
diff --git a/lib/src/components/NxNexusPageHeader/NxNexusPageHeader.scss b/lib/src/components/NxNexusPageHeader/NxNexusPageHeader.scss
index 59d86ab4f5..d8111ff001 100644
--- a/lib/src/components/NxNexusPageHeader/NxNexusPageHeader.scss
+++ b/lib/src/components/NxNexusPageHeader/NxNexusPageHeader.scss
@@ -55,7 +55,7 @@
   .nx-product__brand {
     @include bold();
 
-    color: $nx-text-color-dark;
+    color: var(--nx-text-color-stark);
   }
 
   .nx-product__name {
@@ -73,7 +73,7 @@
     align-self: start;
     grid-area: bottom-row;
 
-    color: $nx-text-color;
+    color: var(--nx-text-color);
     font-size: $nx-font-size-xs;
   }
 
@@ -91,7 +91,7 @@
   }
 
   .nx-page-header__link {
-    color: $nx-text-color-dark;
+    color: var(--nx-text-color-stark);
     padding-bottom: $nx-spacing-xs;
 
     &:active, &.nx-page-header__link--current {
diff --git a/lib/src/components/NxPageHeader/NxPageHeader.tsx b/lib/src/components/NxPageHeader/NxPageHeader.tsx
index e637eecf9c..f38d5e1a59 100644
--- a/lib/src/components/NxPageHeader/NxPageHeader.tsx
+++ b/lib/src/components/NxPageHeader/NxPageHeader.tsx
@@ -12,6 +12,7 @@ import { Props, ProductInfo, propTypes } from './types';
 export { Props };
 
 const logoImg = require('../../assets/img/sonatype-logo-with-hexagon.png');
+const logoImgLightText = require('../../assets/img/sonatype-logo-with-hexagon-light-text.png');
 
 function HeaderProductInfo({ name, version }: ProductInfo) {
   return (
@@ -23,7 +24,14 @@ function HeaderProductInfo({ name, version }: ProductInfo) {
 }
 
 export default function NxPageHeader({ productInfo, ...otherProps }: Props) {
-  const logo = <img src={logoImg} className="nx-product__logo-image" alt="Sonatype"/>,
+  const logo = (
+        <>
+          <img src={logoImg} className="nx-product__logo-image" alt="Sonatype"/>
+          <img src={logoImgLightText}
+               className="nx-product__logo-image nx-product__logo-image--light-text"
+               alt="Sonatype"/>
+        </>
+      ),
       productInfoContent = productInfo ? <HeaderProductInfo { ...productInfo } /> : null;
 
   return <AbstractNxPageHeader { ...otherProps } { ...{ logo, productInfoContent } } />;
diff --git a/lib/src/components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss b/lib/src/components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss
index 21977c01ce..f6921179be 100644
--- a/lib/src/components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss
+++ b/lib/src/components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss
@@ -42,7 +42,7 @@
     background-color: $nx-white;
     border: 2px solid;
     border-radius: $nx-border-radius;
-    color: $nx-text-color-dark;
+    color: var(--nx-text-color-stark);
     font-size: $nx-font-size-s;
     font-weight: bold;
     height: $thumb-size;
@@ -56,7 +56,7 @@
     }
 
     &:focus {
-      border-color: $nx-focus-border-color;
+      border-color: var(--nx-interactive-focus-border-color);
       box-shadow: $nx-focus-box-shadow;
     }
 
diff --git a/lib/src/components/NxSubmitMask/NxSubmitMask.scss b/lib/src/components/NxSubmitMask/NxSubmitMask.scss
index a35f2d59e7..96739247e1 100644
--- a/lib/src/components/NxSubmitMask/NxSubmitMask.scss
+++ b/lib/src/components/NxSubmitMask/NxSubmitMask.scss
@@ -40,7 +40,7 @@
   @include container-vertical;
   @include semi-bold();
 
-  background-color: #fff;
+  background-color: var(--nx-component-background-color);
   border-radius: $nx-border-radius;
   box-sizing: border-box;
   margin: 0;
diff --git a/lib/src/components/NxTabs/NxTabs.scss b/lib/src/components/NxTabs/NxTabs.scss
index d851b8ebad..e8005ed35c 100644
--- a/lib/src/components/NxTabs/NxTabs.scss
+++ b/lib/src/components/NxTabs/NxTabs.scss
@@ -57,7 +57,7 @@
     border-bottom-width: 1px;
     box-shadow: $nx-focus-box-shadow;
     margin-bottom: 0;
-    outline: solid 1px $nx-focus-border-color;
+    outline: solid 1px var(--nx-interactive-focus-border-color);
   }
 
   // a hidden copy of the text, always at semi-bold weight, to enfore consistent element width
diff --git a/lib/src/components/NxToggle/NxToggle.scss b/lib/src/components/NxToggle/NxToggle.scss
index 0c5ada5731..3746f4e6dd 100644
--- a/lib/src/components/NxToggle/NxToggle.scss
+++ b/lib/src/components/NxToggle/NxToggle.scss
@@ -15,23 +15,23 @@
 
   &.nx-toggle--disabled {
     &, &:hover {
-      color: $nx-text-color-disabled;
+      color: var(--nx-text-color-disabled);
       cursor: default;
 
       .nx-toggle__control {
-        background-color: $nx-grey-200;
-        border-color: $nx-grey-500;
+        background-color: var(--nx-interactive-disabled-background-color);
+        border-color: var(--nx-interactive-disabled-border-color);
       }
       .nx-toggle__indicator {
-        background-color: $nx-grey-500;
+        background-color: var(--nx-interactive-disabled-border-color);
       }
     }
   }
 
   &:focus-within {
     .nx-toggle__control {
-      border-color: $nx-focus-border-color;
-      filter: drop-shadow(0 0 3px rgba($nx-focus-border-color, 0.4));
+      border-color: var(--nx-interactive-focus-border-color);
+      filter: drop-shadow(0 0 3px rgba(var(--nx-interactive-focus-border-color), 0.4));
 
       &:hover {
         border-color: $nx-grey-1100;
@@ -59,7 +59,7 @@
       background-color: $nx-blue-600;
 
       .nx-toggle__indicator {
-        background-color: #fff;
+        background-color: var(--nx-form-field-background-color);
         margin-left: 20px;
       }
     }
@@ -71,7 +71,7 @@
 }
 
 .nx-toggle__control {
-  background-color: #fff;
+  background-color: var(--nx-form-field-background-color);
   border: 1px solid $nx-blue-600;
   border-radius: 12px;
   box-sizing: border-box;
diff --git a/lib/src/components/NxTreeView/NxTreeView.scss b/lib/src/components/NxTreeView/NxTreeView.scss
index 0401a3f104..3ac30e94a3 100644
--- a/lib/src/components/NxTreeView/NxTreeView.scss
+++ b/lib/src/components/NxTreeView/NxTreeView.scss
@@ -61,7 +61,7 @@ $twisty-proportion-difference: 2px;
   background: none;
   border: none;
   box-sizing: border-box;
-  color: $nx-text-color-dark;
+  color: var(--nx-text-color-stark);
   cursor: pointer;
   display: flex;
   font: inherit;
@@ -78,8 +78,8 @@ $twisty-proportion-difference: 2px;
     outline: none;
 
     .nx-tree-view__twisty {
-      filter: drop-shadow(0 0 3px transparentize($nx-focus-border-color, 0.7));
-      stroke: $nx-focus-border-color;
+      filter: drop-shadow(0 0 3px var(--nx-interactive-focus-shadow-color));
+      stroke: var(--nx-interactive-focus-border-color);
 
       // This is intepreted in the SVG's coordinate space. The svg has a viewbox height of 512 and an on-page
       // height of 22px so this computes to 1 on-page pixel
@@ -124,7 +124,7 @@ $twisty-proportion-difference: 2px;
   border: 1px solid transparent;
   border-radius: $nx-border-radius;
   box-sizing: border-box;
-  color: $nx-text-color;
+  color: var(--nx-text-color);
   display: block;
   overflow: hidden;
 
@@ -166,7 +166,7 @@ button, a {
     }
 
     &:focus {
-      border-color: $nx-focus-border-color;
+      border-color: var(--nx-interactive-focus-border-color);
       box-shadow: $nx-focus-box-shadow;
       outline: none;
     }
diff --git a/lib/src/scss-shared/_nx-text-helpers.scss b/lib/src/scss-shared/_nx-text-helpers.scss
index 24a0723275..47300347f9 100644
--- a/lib/src/scss-shared/_nx-text-helpers.scss
+++ b/lib/src/scss-shared/_nx-text-helpers.scss
@@ -74,8 +74,8 @@
 
 %nx-code {
   @include monospace();
-  background-color: $nx-grey-1;
-  border: $nx-border;
+  background-color: var(--nx-code-background-color);
+  border: 1px solid var(--nx-border-color);
   border-radius: $nx-border-radius;
   color: #cd0028;
   padding: 1px 4px;
diff --git a/lib/src/scss-shared/_nx-variables.scss b/lib/src/scss-shared/_nx-variables.scss
index e0d7b035a1..5949b24a61 100644
--- a/lib/src/scss-shared/_nx-variables.scss
+++ b/lib/src/scss-shared/_nx-variables.scss
@@ -59,7 +59,7 @@ $nx-form-element-width-wide: 624px;
 $nx-submit-mask-z-index: 10;
 $nx-modal-backdrop-z-index: 1050;
 
-$nx-focus-box-shadow: 0 0 3px 1px transparentize($nx-focus-border-color, 0.7);
+$nx-focus-box-shadow: 0 0 3px 1px var(--nx-interactive-focus-shadow-color);
 
 $nx-table-cell-header-height: 48px;
 $nx-table-cell-vertical-padding: $nx-spacing-sm;