diff --git a/css/src/base/base.css b/css/src/base/base.css
index f58246d..70a919b 100644
--- a/css/src/base/base.css
+++ b/css/src/base/base.css
@@ -22,7 +22,7 @@ html {
 body {
   margin: 0;
   color: var(--color--gray-10);
-  background-color: #f7f9fa;
+  background-color: var(--color--gray-95);
   background-image: url("../../../images/background.svg");
   background-position: top left;
 
diff --git a/css/src/components/_debug.css b/css/src/components/_debug.css
index 4177f2e..b9e8233 100644
--- a/css/src/components/_debug.css
+++ b/css/src/components/_debug.css
@@ -14,7 +14,7 @@
   max-height: 30%;
   padding: var(--sp) var(--sp1-5);
   user-select: none;
-  color: white;
+  color: var(--color--white);
   border: solid 1px transparent;
   background-color: rgba(0, 0, 0, 0.5);
 
diff --git a/css/src/components/header-navigation.css b/css/src/components/header-navigation.css
index 324f191..b549166 100644
--- a/css/src/components/header-navigation.css
+++ b/css/src/components/header-navigation.css
@@ -22,8 +22,8 @@
   padding: 0 var(--sp) var(--sp);
   transition: all 0.2s;
   transform: translateX(101%);
-  border-top: solid white var(--sp3); /* Create room for the "close" button. */
-  background-color: white;
+  border-top: solid var(--color--white) var(--sp3); /* Create room for the "close" button. */
+  background-color: var(--color--white);
   box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);
 
   /* Toolbar is fixed, and tray is vertical. */
diff --git a/css/src/components/header-search-narrow.css b/css/src/components/header-search-narrow.css
index 355c3ca..de04046 100644
--- a/css/src/components/header-search-narrow.css
+++ b/css/src/components/header-search-narrow.css
@@ -29,7 +29,7 @@
     height: calc(3 * var(--sp));
     padding: 0 var(--sp);
     transition: background-size 0.4s;
-    color: white;
+    color: var(--color--white);
     border: solid 1px transparent;
     background-color: transparent;
     background-image: linear-gradient(var(--color--blue-50), var(--color--blue-50)); /* Two values are needed for IE11 support. */
diff --git a/css/src/components/header-search-wide.css b/css/src/components/header-search-wide.css
index b19a98f..8237f5c 100644
--- a/css/src/components/header-search-wide.css
+++ b/css/src/components/header-search-wide.css
@@ -49,7 +49,7 @@
     height: var(--sp8);
     padding: 0 0 0 var(--sp12);
     transition: background-size 0.4s;
-    color: white;
+    color: var(--color--white);
     border: solid 1px transparent;
     background-color: transparent;
     background-image: linear-gradient(var(--color--blue-50), var(--color--blue-50)); /* Two values are needed for IE11 support. */
@@ -238,7 +238,7 @@
         width: var(--sp1-5);
         height: 0;
         content: "";
-        border-top: solid 2px white;
+        border-top: solid 2px var(--color--white);
       }
 
       &:before {
diff --git a/css/src/components/header-site-branding.css b/css/src/components/header-site-branding.css
index d679161..96f873b 100644
--- a/css/src/components/header-site-branding.css
+++ b/css/src/components/header-site-branding.css
@@ -14,7 +14,7 @@
   margin-right: var(--sp);
   margin-left: calc(-1 * var(--container-padding));
   padding: 0 var(--container-padding) var(--sp0-5);
-  background-image: linear-gradient(160deg, var(--color--blue-50) 0%, #0d7ab8 78.66%);
+  background-image: linear-gradient(160deg, var(--color--blue-50) 0%, var(--color--blue-20) 78.66%);
 
   @media (--sm) {
     height: var(--sp4);
diff --git a/css/src/components/header.css b/css/src/components/header.css
index 82e32a6..6dda3df 100644
--- a/css/src/components/header.css
+++ b/css/src/components/header.css
@@ -61,7 +61,7 @@
   flex-grow: 1;
   width: calc(100vw - var(--content-left));
   transition: all 0.3s;
-  background: white;
+  background: var(--color--white);
 
   .site-header__fixable.js-fixed & {
     @media (--nav) {
diff --git a/css/src/components/nav-button-wide.css b/css/src/components/nav-button-wide.css
index 8480037..bb11140 100644
--- a/css/src/components/nav-button-wide.css
+++ b/css/src/components/nav-button-wide.css
@@ -68,7 +68,7 @@
 
   > div {
     height: 0;
-    border-top: solid 3px white;
+    border-top: solid 3px var(--color--white);
 
     &:nth-child(1) {
       position: absolute;
@@ -77,7 +77,7 @@
       width: 100%;
       height: 0;
       transition: all 0.2s;
-      background-color: white;
+      background-color: var(--color--white);
     }
 
     &:nth-child(2) {
@@ -87,7 +87,7 @@
       width: 100%;
       height: 0;
       transition: opacity 0.2s;
-      background-color: white;
+      background-color: var(--color--white);
     }
 
     &:nth-child(3) {
@@ -98,7 +98,7 @@
       width: 100%;
       height: 0;
       transition: all 0.2s;
-      background-color: white;
+      background-color: var(--color--white);
     }
   }
 }
diff --git a/css/src/components/nav-primary-button.css b/css/src/components/nav-primary-button.css
index e03cee7..b7bcac3 100644
--- a/css/src/components/nav-primary-button.css
+++ b/css/src/components/nav-primary-button.css
@@ -113,7 +113,7 @@
           background-color: var(--color--blue-50);
 
           &:after {
-            border-color: white;
+            border-color: var(--color--white);
           }
         }
       }
diff --git a/css/src/components/nav-primary.css b/css/src/components/nav-primary.css
index 502820b..04bb9c2 100644
--- a/css/src/components/nav-primary.css
+++ b/css/src/components/nav-primary.css
@@ -297,7 +297,7 @@
       border-bottom: solid 1px transparent;
       border-left: solid 1px transparent;
       border-radius: 0 0 2px 2px;
-      background: white;
+      background: var(--color--white);
       box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08);
 
       /* Arrow */
diff --git a/css/src/components/node-preview-container.css b/css/src/components/node-preview-container.css
index d7647b8..9d50c3d 100644
--- a/css/src/components/node-preview-container.css
+++ b/css/src/components/node-preview-container.css
@@ -7,7 +7,7 @@
 
 .node-preview-container {
   padding: 0 var(--sp0-5);
-  background: white;
+  background: var(--color--white);
   box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08);
 
   body.toolbar-vertical.toolbar-tray-open & {
diff --git a/css/src/layout/layout.css b/css/src/layout/layout.css
index 3060ede..e89a7ec 100644
--- a/css/src/layout/layout.css
+++ b/css/src/layout/layout.css
@@ -19,7 +19,7 @@
 
 .page-wrapper {
   max-width: var(--max-bg-color);
-  background: white;
+  background: var(--color--white);
 }
 
 /* Contains the social sidebar, and the primary content area. */