diff --git a/app/styles/soapbox-light/diff.scss b/app/styles/soapbox-light/diff.scss
index 8368e2a14..4a476af88 100644
--- a/app/styles/soapbox-light/diff.scss
+++ b/app/styles/soapbox-light/diff.scss
@@ -52,13 +52,13 @@ body {
     &:focus,
     &:active,
     &.selected {
-      background: lighten($ui-base-color, 4%);
+      background: var(--brand-color-faint);
     }
   }
 }
 
 .emoji-mart-bar {
-  border-color: lighten($ui-base-color, 4%);
+  border-color: var(--brand-color-faint);
 
   &:first-child {
     background: darken($ui-base-color, 6%);
@@ -72,11 +72,11 @@ body {
 
 // Change the background colors of statuses
 .focusable:focus {
-  background: $ui-base-color;
+  background: var(--brand-color-faint);
 }
 
 .status.status-direct {
-  background: lighten($ui-base-color, 4%);
+  background: var(--brand-color-faint);
 }
 
 .focusable:focus .status.status-direct {
diff --git a/app/styles/soapbox/about.scss b/app/styles/soapbox/about.scss
index 5d328940e..2bcf4bc2f 100644
--- a/app/styles/soapbox/about.scss
+++ b/app/styles/soapbox/about.scss
@@ -235,7 +235,7 @@ $small-breakpoint: 960px;
       color: $darker-text-color;
       padding-bottom: 5px;
       margin-bottom: 15px;
-      border-bottom: 1px solid lighten($ui-base-color, 4%);
+      border-bottom: 1px solid var(--brand-color-faint);
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
diff --git a/app/styles/soapbox/accounts.scss b/app/styles/soapbox/accounts.scss
index 5f063eb8c..546f264f9 100644
--- a/app/styles/soapbox/accounts.scss
+++ b/app/styles/soapbox/accounts.scss
@@ -48,7 +48,7 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    background: lighten($ui-base-color, 4%);
+    background: var(--brand-color-faint);
     border-radius: 0 0 4px 4px;
 
     @media screen and (max-width: $no-gap-breakpoint) {
diff --git a/app/styles/soapbox/basics.scss b/app/styles/soapbox/basics.scss
index 5f66c2d92..d9d797852 100644
--- a/app/styles/soapbox/basics.scss
+++ b/app/styles/soapbox/basics.scss
@@ -72,7 +72,7 @@ body {
   }
 
   &.embed {
-    background: lighten($ui-base-color, 4%);
+    background: var(--brand-color-faint);
     margin: 0;
     padding-bottom: 0;
 
diff --git a/app/styles/soapbox/components.scss b/app/styles/soapbox/components.scss
index 2bfd6287e..3e8b071aa 100644
--- a/app/styles/soapbox/components.scss
+++ b/app/styles/soapbox/components.scss
@@ -502,7 +502,7 @@
 .focusable {
   &:focus {
     outline: 0;
-    background: lighten($ui-base-color, 4%);
+    background: var(--brand-color-faint);
 
     .status.status-direct {
       background: lighten($ui-base-color, 12%);
@@ -1768,7 +1768,7 @@ a.account__display-name {
 }
 
 .column-back-button {
-  background: lighten($ui-base-color, 4%);
+  background: var(--brand-color-faint);
   color: var(--highlight-text-color);
   cursor: pointer;
   flex: 0 0 auto;
@@ -1787,7 +1787,7 @@ a.account__display-name {
 }
 
 .column-header__back-button {
-  background: lighten($ui-base-color, 4%);
+  background: var(--brand-color-faint);
   border: 0;
   font-family: inherit;
   color: var(--highlight-text-color);
@@ -2261,7 +2261,7 @@ a.status-card {
 }
 
 .status-card.compact {
-  border-color: lighten($ui-base-color, 4%);
+  border-color: var(--brand-color-faint);
 
   &.interactive {
     border: 0;
@@ -2282,7 +2282,7 @@ a.status-card {
 }
 
 a.status-card.compact:hover {
-  background-color: lighten($ui-base-color, 4%);
+  background-color: var(--brand-color-faint);
 }
 
 .status-card__image-image {
@@ -2760,7 +2760,7 @@ a.status-card.compact:hover {
 }
 
 .account--panel {
-  background: lighten($ui-base-color, 4%);
+  background: var(--brand-color-faint);
   border-top: 1px solid lighten($ui-base-color, 8%);
   border-bottom: 1px solid lighten($ui-base-color, 8%);
   display: flex;
@@ -3518,7 +3518,7 @@ a.status-card.compact:hover {
   border-radius: 4px;
   position: relative;
   width: 100%;
-  background-color: lighten($ui-base-color, 8%);
+  background-color: var(--brand-color-faint);
 }
 
 .media-gallery__item {
@@ -4258,7 +4258,7 @@ noscript {
       }
 
       &:focus {
-        background: lighten($ui-base-color, 4%);
+        background: var(--brand-color-faint);
       }
 
       @media screen and (max-width: 600px) {
@@ -4282,7 +4282,7 @@ noscript {
 .account__moved-note {
   padding: 14px 10px;
   padding-bottom: 16px;
-  background: lighten($ui-base-color, 4%);
+  background: var(--brand-color-faint);
   border-top: 1px solid lighten($ui-base-color, 8%);
   border-bottom: 1px solid lighten($ui-base-color, 8%);
 
@@ -4322,7 +4322,7 @@ noscript {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  background: lighten($ui-base-color, 4%);
+  background: var(--brand-color-faint);
 
   label {
     flex: 1 1 auto;
diff --git a/app/styles/soapbox/components/account-header.scss b/app/styles/soapbox/components/account-header.scss
index 8874df4fd..3ecc8f2cf 100644
--- a/app/styles/soapbox/components/account-header.scss
+++ b/app/styles/soapbox/components/account-header.scss
@@ -36,14 +36,14 @@
     min-height: 74px;
     width: 100%;
     position: relative;
-    background: lighten($ui-base-color, 4%);
+    background: var(--brand-color-faint);
     @media (min-width: 895px) {height: 74px;}
   }
 
   &__avatar {
     display: block;
     position: absolute;
-    border: 5px solid lighten($ui-base-color, 4%);
+    border: 5px solid var(--brand-color-faint);
     left: 0;
     top: -90px;
     border-radius: 50%;
@@ -156,7 +156,7 @@
   @media screen and (max-width: 895px) {
     .account-mobile-container {
       display: block;
-      background: lighten($ui-base-color, 4%);
+      background: var(--brand-color-faint);
       margin-top: 10px;
       position: relative;
       padding: 10px 10px 0;
diff --git a/app/styles/soapbox/components/detailed-status.scss b/app/styles/soapbox/components/detailed-status.scss
index 9009a8202..2f92fb90d 100644
--- a/app/styles/soapbox/components/detailed-status.scss
+++ b/app/styles/soapbox/components/detailed-status.scss
@@ -7,7 +7,7 @@
 }
 
 .detailed-status {
-  background: lighten($ui-base-color, 4%);
+  background: var(--brand-color-faint);
   padding: 14px 10px;
 
   &--flex {
@@ -52,7 +52,7 @@
 }
 
 .detailed-status__action-bar {
-  background: lighten($ui-base-color, 4%);
+  background: var(--brand-color-faint);
   border-top: 1px solid lighten($ui-base-color, 8%);
   border-bottom: 1px solid lighten($ui-base-color, 8%);
   display: flex;
diff --git a/app/styles/soapbox/containers.scss b/app/styles/soapbox/containers.scss
index 03bf01c3f..a695ed792 100644
--- a/app/styles/soapbox/containers.scss
+++ b/app/styles/soapbox/containers.scss
@@ -499,7 +499,7 @@
       &::before {
         content: "";
         display: block;
-        background: lighten($ui-base-color, 4%);
+        background: var(--brand-color-faint);
         position: absolute;
         bottom: 0;
         left: 0;
@@ -522,14 +522,14 @@
           height: 100%;
           margin: 0;
           border-radius: 50%;
-          border: 4px solid lighten($ui-base-color, 4%);
+          border: 4px solid var(--brand-color-faint);
           background: darken($ui-base-color, 8%);
         }
       }
 
       @media screen and (max-width: 600px) {
         margin-top: 0;
-        background: lighten($ui-base-color, 4%);
+        background: var(--brand-color-faint);
         border-radius: 0 0 4px 4px;
         padding: 5px;
 
@@ -638,7 +638,7 @@
           flex: 0 0 auto;
           color: $darker-text-color;
           padding: 10px;
-          border-right: 1px solid lighten($ui-base-color, 4%);
+          border-right: 1px solid var(--brand-color-faint);
           cursor: default;
           text-align: center;
           position: relative;
@@ -869,7 +869,7 @@
           &:hover,
           &:active,
           &:focus {
-            background: lighten($ui-base-color, 4%);
+            background: var(--brand-color-faint);
           }
         }
       }
diff --git a/app/styles/soapbox/dashboard.scss b/app/styles/soapbox/dashboard.scss
index eced8b126..0b30ea84d 100644
--- a/app/styles/soapbox/dashboard.scss
+++ b/app/styles/soapbox/dashboard.scss
@@ -13,7 +13,7 @@
     & > div,
     & > a {
       padding: 20px;
-      background: lighten($ui-base-color, 4%);
+      background: var(--brand-color-faint);
       border-radius: 4px;
     }
 
diff --git a/app/styles/soapbox/forms.scss b/app/styles/soapbox/forms.scss
index cc1d57be2..7d6982602 100644
--- a/app/styles/soapbox/forms.scss
+++ b/app/styles/soapbox/forms.scss
@@ -583,7 +583,7 @@ code {
     }
 
     &:focus {
-      background: lighten($ui-base-color, 4%);
+      background: var(--brand-color-faint);
     }
   }
 
diff --git a/app/styles/soapbox/widgets.scss b/app/styles/soapbox/widgets.scss
index 89505584e..3b2343104 100644
--- a/app/styles/soapbox/widgets.scss
+++ b/app/styles/soapbox/widgets.scss
@@ -251,7 +251,7 @@
 
   @media screen and (max-width: $no-gap-breakpoint) {
     margin-top: 0;
-    background: lighten($ui-base-color, 4%);
+    background: var(--brand-color-faint);
 
     h1 {
       font-size: 24px;