diff --git a/app/styles/about.scss b/app/styles/about.scss
index e24e39086..53541b57b 100644
--- a/app/styles/about.scss
+++ b/app/styles/about.scss
@@ -1377,16 +1377,14 @@ $small-breakpoint: 960px;
       }
 
       .nav-button {
-        background: var(--brand-color);
+        background: var(--accent-color);
         color: #fff;
-        filter: var(--accent-filter);
         transition: 0.2s;
 
         &:hover,
         &:focus,
         &:active {
-          background: var(--brand-color);
-          filter: var(--accent-filter--hover);
+          background: var(--accent-color--bright);
         }
       }
     }
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index cd83fa15c..42f367df7 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -399,8 +399,7 @@
       display: block;
       position: absolute;
       width: 100%;
-      background-color: var(--brand-color--faint);
-      filter: var(--accent-filter);
+      background-color: var(--accent-color--faint);
       border-radius: 10px;
       transition: 0.2s;
       opacity: 0;
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index a91977992..645b34041 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -117,15 +117,13 @@
     height: 34px;
     margin-left: 20px;
     border-radius: 6px;
-    background-color: var(--brand-color);
+    background-color: var(--accent-color);
     font-weight: bold;
     font-size: 16px;
     transition: 0.2s;
-    filter: var(--accent-filter);
 
     &:hover {
-      background-color: var(--brand-color);
-      filter: var(--accent-filter--hover);
+      background-color: var(--accent-color--bright);
     }
 
   }
@@ -204,7 +202,7 @@
   &::before {
     content: "";
     display: block;
-    background: var(--brand-color);
+    background: var(--accent-color);
     position: absolute;
     transition: 0.2s;
     left: 0;
@@ -215,7 +213,6 @@
     z-index: -1;
     width: calc(100% + 20px);
     margin-left: -12px;
-    filter: var(--accent-filter);
 
     @media screen and (max-width: 895px) {
       height: 0;
diff --git a/app/styles/themes.scss b/app/styles/themes.scss
index 963befd4f..9a7930c44 100644
--- a/app/styles/themes.scss
+++ b/app/styles/themes.scss
@@ -5,8 +5,8 @@ Primary variables are fully-formed CSS properties.
 Form: --{primary-name}
 Examples:
   --brand-color
+  --accent-color
   --primary-text-color
-  --accent-filter
 
 Meta-variables are combined to make primary variables.
 Form: --{primary-name}_{property}
@@ -27,19 +27,28 @@ Examples:
 body {
   // Primary variables
   --brand-color: hsl(var(--brand-color_hsl));
-  --accent-filter: saturate(1.3) hue-rotate(-20deg) brightness(1.2);
+  --accent-color: hsl(var(--accent-color_hsl));
   --primary-text-color: hsl(var(--primary-text-color_hsl));
   --background-color: hsl(var(--background-color_hsl));
 
   // Meta-variables
   --brand-color_hsl: var(--brand-color_h), var(--brand-color_s), var(--brand-color_l);
+  --accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l);
   --primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l);
   --background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
+  --accent-color_h: calc(var(--brand-color_h) - 20);
+  --accent-color_s: calc(var(--brand-color_s) + 10%);
+  --accent-color_l: calc(var(--brand-color_l) + 5%);
 
   // Modifiers
   --brand-color--faint: hsla(var(--brand-color_hsl), 0.1);
   --brand-color--med: hsla(var(--brand-color_hsl), 0.2);
-  --accent-filter--hover: saturate(1.3) hue-rotate(-20deg) brightness(1.3);
+  --accent-color--faint: hsla(var(--accent-color_hsl), 0.1);
+  --accent-color--bright: hsl(
+    var(--accent-color_h),
+    var(--accent-color_s),
+    calc(var(--accent-color_l) + 3%)
+  );
   --primary-text-color--faint: hsla(var(--primary-text-color_hsl), 0.6);
 }
 
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index c1715ae3e..b613802ed 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -413,8 +413,7 @@
     border-radius: 8px;
     text-align: center;
     color: #fff;
-    background: var(--brand-color);
-    filter: var(--accent-filter);
+    background: var(--accent-color);
 
     @media screen and (max-width: 895px) {
       top: 0;