diff --git a/app/styles/about.scss b/app/styles/about.scss
index f84578584..18c3566fd 100644
--- a/app/styles/about.scss
+++ b/app/styles/about.scss
@@ -18,7 +18,7 @@ $small-breakpoint: 960px;
     margin: 40px 0;
     background: var(--foreground-color);
     border-radius: 6px;
-    
+
     @media screen and (max-width: 520px) { margin: 40px 20px; }
 
     @media screen and (max-width: 767px) {
@@ -1377,13 +1377,16 @@ $small-breakpoint: 960px;
       }
 
       .nav-button {
-        background: var(--accent-color);
+        background: var(--brand-color);
         color: #fff;
+        filter: var(--accent-filter);
+        transition: 0.2s;
 
         &:hover,
         &:focus,
         &:active {
-          opacity: 0.9;
+          background: var(--brand-color);
+          filter: var(--accent-filter-hover);
         }
       }
     }
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index 2ed6bbc47..8aa920d8c 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -118,17 +118,15 @@
     height: 34px;
     margin-left: 20px;
     border-radius: 6px;
-    background-color: var(--accent-color);
+    background-color: var(--brand-color);
     font-weight: bold;
     font-size: 16px;
     transition: 0.2s;
+    filter: var(--accent-filter);
 
     &:hover {
-      background-color: rgb(
-        calc(var(--accent-color-r) + 10),
-        calc(var(--accent-color-g) + 10),
-        calc(var(--accent-color-b) + 10)
-      );
+      background-color: var(--brand-color);
+      filter: var(--accent-filter-hover);
     }
 
   }
@@ -207,7 +205,7 @@
   &::before {
     content: "";
     display: block;
-    background: var(--accent-color);
+    background: var(--brand-color);
     position: absolute;
     transition: 0.2s;
     left: 0;
@@ -218,6 +216,7 @@
     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 a5743eb5a..de9ba02db 100644
--- a/app/styles/themes.scss
+++ b/app/styles/themes.scss
@@ -3,11 +3,8 @@ body {
   --brand-color: rgb(var(--brand-color-rgb));
   --brand-color-faint: rgba(var(--brand-color-rgb), 0.1);
   --brand-color-med: rgba(var(--brand-color-rgb), 0.2);
-  --accent-color-r: calc(var(--brand-color-r) + 25);
-  --accent-color-g: calc(var(--brand-color-g) + 25);
-  --accent-color-b: calc(var(--brand-color-b) + 25);
-  --accent-color-rgb: var(--accent-color-r), var(--accent-color-g), var(--accent-color-b);
-  --accent-color: rgb(var(--accent-color-rgb));
+  --accent-filter: saturate(1.3) hue-rotate(-20deg) brightness(1.2);
+  --accent-filter-hover: saturate(1.3) hue-rotate(-20deg) brightness(1.3);
   --primary-text-color-rgb: var(--primary-text-color-r), var(--primary-text-color-g), var(--primary-text-color-b);
   --primary-text-color: rgb(var(--primary-text-color-rgb));
   --primary-text-color-faint: rgba(var(--primary-text-color-rgb), 0.6);
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index dffa9a291..17fbc0daf 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -413,7 +413,8 @@
     border-radius: 8px;
     text-align: center;
     color: #fff;
-    background: var(--accent-color);
+    background: var(--brand-color);
+    filter: var(--accent-filter);
 
     @media screen and (max-width: 895px) {
       top: 0;