diff --git a/blocks/header/header.css b/blocks/header/header.css
index 09bdfecc75..488880e1aa 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -157,7 +157,6 @@ header nav .nav-sections {
   flex: 1 1 auto;
   display: none;
   visibility: hidden;
-  background-color: var(--overlay-color);
 }
 
 header nav[aria-expanded='true'] .nav-sections {
diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
index 1a377ac18e..4c6bf72e32 100644
--- a/blocks/hero/hero.css
+++ b/blocks/hero/hero.css
@@ -16,7 +16,7 @@ main .hero-container {
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
-  color: white;
+  color: var(--background-color);
 }
 
 .hero picture {
diff --git a/styles/styles.css b/styles/styles.css
index 66b7f61e10..accc88227b 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -12,12 +12,12 @@
 
 :root {
   /* colors */
-  --link-color: #035fe6;
-  --link-hover-color: #136ff6;
   --background-color: white;
-  --light-color: #eee;
-  --dark-color: #ccc;
-  --text-color: black;
+  --light-color: #f8f8f8;
+  --dark-color: #e9e9e9;
+  --text-color: #131313;
+  --link-color: #3a63fb;
+  --link-hover-color: #264dea;
 
   /* fonts */
   --body-font-family: roboto, roboto-fallback, sans-serif;
@@ -71,13 +71,13 @@
 }
 
 body {
+  display: none;
   margin: 0;
+  background-color: var(--background-color);
+  color: var(--text-color);
   font-family: var(--body-font-family);
   font-size: var(--body-font-size-m);
   line-height: 1.5;
-  color: var(--text-color);
-  background-color: var(--background-color);
-  display: none;
 }
 
 body.appear {
@@ -149,8 +149,8 @@ a:any-link {
 }
 
 a:hover {
-  text-decoration: underline;
   color: var(--link-hover-color);
+  text-decoration: underline;
 }
 
 /* buttons */
@@ -165,8 +165,8 @@ button {
   font-weight: 500;
   font-style: normal;
   cursor: pointer;
-  color: var(--background-color);
   background-color: var(--link-color);
+  color: var(--background-color);
   margin: 16px 0;
   white-space: nowrap;
   overflow: hidden;