diff --git a/app/components/header.module.css b/app/components/header.module.css
index a4be591e06b..b37d50a7fd0 100644
--- a/app/components/header.module.css
+++ b/app/components/header.module.css
@@ -62,7 +62,7 @@ input.search {
 
     &:focus {
         outline: none;
-        box-shadow: 0 0 0 4px var(--yellow);
+        box-shadow: 0 0 0 4px var(--yellow500);
     }
 }
 
diff --git a/app/components/progress-bar.module.css b/app/components/progress-bar.module.css
index 532e17e488c..cd1c11c4a5b 100644
--- a/app/components/progress-bar.module.css
+++ b/app/components/progress-bar.module.css
@@ -4,5 +4,5 @@
     top: 0;
     height: 3px;
     box-shadow: 0 0 10px rgba(0, 13, 41, 0.6);
-    background: var(--yellow) !important;
+    background: var(--yellow500) !important;
 }
diff --git a/app/styles/application.module.css b/app/styles/application.module.css
index 8805d6ae507..da8b1c37c11 100644
--- a/app/styles/application.module.css
+++ b/app/styles/application.module.css
@@ -1,11 +1,11 @@
 :root {
-    --violet: #2e2359;
-    --dark-grey: #2a3439;
-    --dark-green: #3b6837;
-    --yellow: #ffc833;
+    --violet800: hsl(252, 44%, 24%);
+    --grey900: hsl(200, 15%, 19%);
+    --green800: hsl(115, 31%, 31%);
+    --yellow500: hsl(44, 100%, 60%);
 
-    --header-bg-color: var(--dark-green);
-    --footer-bg-color: var(--dark-green);
+    --header-bg-color: var(--green800);
+    --footer-bg-color: var(--green800);
 
     --font-family: "Fira Sans", sans-serif;
 
@@ -20,9 +20,9 @@
 }
 
 :global(.new-design) {
-    --header-bg-color: var(--violet);
+    --header-bg-color: var(--violet800);
     --main-bg: white;
-    --footer-bg-color: var(--dark-grey);
+    --footer-bg-color: var(--grey900);
 }
 
 * {