diff --git a/app/styles/contrast/diff.scss b/app/styles/contrast/diff.scss
index aeb82c698..96b113f98 100644
--- a/app/styles/contrast/diff.scss
+++ b/app/styles/contrast/diff.scss
@@ -77,5 +77,5 @@
 }
 
 .public-layout .public-account-header__tabs__tabs .counter.active::after {
-  border-bottom: 4px solid $ui-highlight-color;
+  border-bottom: 4px solid var(--brand-color);
 }
diff --git a/app/styles/soapbox/components.scss b/app/styles/soapbox/components.scss
index 6a7d38ed0..ad5bb6d82 100644
--- a/app/styles/soapbox/components.scss
+++ b/app/styles/soapbox/components.scss
@@ -937,7 +937,7 @@ a .account__avatar {
   border-bottom: 4px solid transparent;
 
   &.active {
-    border-bottom: 4px solid $ui-highlight-color;
+    border-bottom: 4px solid var(--brand-color);
   }
 
   & > span {
@@ -1967,7 +1967,7 @@ a.account__display-name {
     }
 
     &.active {
-      color: $ui-highlight-color;
+      color: var(--brand-color);
     }
   }
 }
@@ -3164,7 +3164,7 @@ a.status-card.compact:hover {
   left: 0;
   top: 0;
   height: 6px;
-  background: $ui-highlight-color;
+  background: var(--brand-color);
   border-radius: 6px;
 }
 
@@ -3233,7 +3233,7 @@ a.status-card.compact:hover {
 
   &:hover,
   &.active {
-    background: $ui-highlight-color;
+    background: var(--brand-color);
     color: $primary-text-color;
     outline: 0;
 
@@ -3286,7 +3286,7 @@ a.status-card.compact:hover {
     }
 
     &.active {
-      background: $ui-highlight-color;
+      background: var(--brand-color);
 
       .icon-button {
         color: $primary-text-color;
@@ -4665,7 +4665,7 @@ noscript {
   }
 
   &__active {
-    color: $ui-highlight-color;
+    color: var(--brand-color);
     position: absolute;
     top: 50%;
     left: 50%;
diff --git a/app/styles/soapbox/components/dropdown-menu.scss b/app/styles/soapbox/components/dropdown-menu.scss
index 20156a193..d90118e40 100644
--- a/app/styles/soapbox/components/dropdown-menu.scss
+++ b/app/styles/soapbox/components/dropdown-menu.scss
@@ -145,7 +145,7 @@
     }
 
     &:hover {
-      background: $ui-highlight-color;
+      background: var(--brand-color);
       color: $secondary-text-color;
     }
   }
diff --git a/app/styles/soapbox/donations.scss b/app/styles/soapbox/donations.scss
index 45bece23c..56a6dc6dc 100644
--- a/app/styles/soapbox/donations.scss
+++ b/app/styles/soapbox/donations.scss
@@ -19,7 +19,7 @@
     }
 
     &--active {
-      background-color: $ui-highlight-color;
+      background-color: var(--brand-color);
       color: $primary-text-color;
     }
   }
diff --git a/app/styles/soapbox/forms.scss b/app/styles/soapbox/forms.scss
index 19742f9d4..2df8f5570 100644
--- a/app/styles/soapbox/forms.scss
+++ b/app/styles/soapbox/forms.scss
@@ -389,7 +389,7 @@ code {
     width: 100%;
     border: 0;
     border-radius: 4px;
-    background: $ui-highlight-color;
+    background: var(--brand-color);
     color: $primary-text-color;
     font-size: 18px;
     line-height: inherit;
diff --git a/app/styles/soapbox/introduction.scss b/app/styles/soapbox/introduction.scss
index aaa86ffa9..161238937 100644
--- a/app/styles/soapbox/introduction.scss
+++ b/app/styles/soapbox/introduction.scss
@@ -126,7 +126,7 @@
     width: 14px;
     height: 14px;
     border-radius: 14px;
-    border: 1px solid $ui-highlight-color;
+    border: 1px solid var(--brand-color);
     background: transparent;
     margin: 0 3px;
     cursor: pointer;
@@ -137,7 +137,7 @@
 
     &.active {
       cursor: default;
-      background: $ui-highlight-color;
+      background: var(--brand-color);
     }
   }
 
diff --git a/app/styles/soapbox/stream_entries.scss b/app/styles/soapbox/stream_entries.scss
index 6f3ad94fb..d49702477 100644
--- a/app/styles/soapbox/stream_entries.scss
+++ b/app/styles/soapbox/stream_entries.scss
@@ -76,7 +76,7 @@
 .button.logo-button {
   flex: 0 auto;
   font-size: 14px;
-  background: $ui-highlight-color;
+  background: var(--brand-color);
   color: $primary-text-color;
   text-transform: none;
   line-height: 36px;
diff --git a/app/styles/soapbox/widgets.scss b/app/styles/soapbox/widgets.scss
index f0cc02332..9954af002 100644
--- a/app/styles/soapbox/widgets.scss
+++ b/app/styles/soapbox/widgets.scss
@@ -290,7 +290,7 @@
     }
 
     &.active > a {
-      background: $ui-highlight-color;
+      background: var(--brand-color);
       cursor: default;
     }
 
@@ -335,7 +335,7 @@
     }
 
     &.active .avatar-stack .account__avatar {
-      border-color: $ui-highlight-color;
+      border-color: var(--brand-color);
     }
   }
 }
@@ -523,7 +523,7 @@ $fluid-breakpoint: $maximum-width + 20px;
     line-height: 20px;
     text-decoration: none;
     font-weight: 500;
-    color: $ui-highlight-color;
+    color: var(--brand-color);
 
     &:hover,
     &:focus,