diff --git a/app/styles/soapbox-light/diff.scss b/app/styles/soapbox-light/diff.scss
index daa84f3f8..158291190 100644
--- a/app/styles/soapbox-light/diff.scss
+++ b/app/styles/soapbox-light/diff.scss
@@ -23,11 +23,11 @@ body {
 }
 
 .drawer__inner {
-  background: $ui-base-color;
+  background: var(--brand-color-med);
 }
 
 .drawer__inner__soapbox {
-  background: $ui-base-color url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($white)}"/></svg>') no-repeat bottom / 100% auto;
+  background: var(--brand-color-med) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($white)}"/></svg>') no-repeat bottom / 100% auto;
 }
 
 // Change the colors used in compose-form
@@ -63,7 +63,7 @@ body {
 
 .emoji-mart-search input {
   background: rgba($ui-base-color, 0.3);
-  border-color: $ui-base-color;
+  border-color: var(--brand-color-med);
 }
 
 // Change the background colors of statuses
@@ -92,7 +92,7 @@ body {
 // Change the background colors of media and video spoilers
 .media-spoiler,
 .video-player__spoiler {
-  background: $ui-base-color;
+  background: var(--brand-color-med);
 }
 
 // Change the colors used in the dropdown menu
@@ -124,7 +124,7 @@ body {
 }
 
 .dropdown-menu__separator {
-  border-bottom-color: lighten($ui-base-color, 12%);
+  border-bottom-color: var(--brand-color-med);
 }
 
 // Change the background colors of modals
@@ -135,7 +135,7 @@ body {
 .report-modal,
 .error-modal,
 .onboarding-modal {
-  background: $ui-base-color;
+  background: var(--brand-color-med);
 }
 
 .embed-modal {
@@ -283,7 +283,7 @@ body {
 
   .public-account-header {
     &__image {
-      background: lighten($ui-base-color, 12%);
+      background: var(--brand-color-med);
 
       &::after {
         box-shadow: none;
diff --git a/app/styles/soapbox/about.scss b/app/styles/soapbox/about.scss
index fa9e2d1a8..65e0f2205 100644
--- a/app/styles/soapbox/about.scss
+++ b/app/styles/soapbox/about.scss
@@ -549,7 +549,7 @@ $small-breakpoint: 960px;
   &__forms,
   #soapbox-timeline {
     box-sizing: border-box;
-    background: $ui-base-color;
+    background: var(--brand-color-med);
     border-radius: 4px;
     box-shadow: 0 0 6px rgba($black, 0.1);
   }
@@ -816,7 +816,7 @@ $small-breakpoint: 960px;
     }
 
     &__footer {
-      background: $ui-base-color;
+      background: var(--brand-color-med);
       padding: 10px;
       border-radius: 0 0 4px 4px;
       display: flex;
diff --git a/app/styles/soapbox/accounts.scss b/app/styles/soapbox/accounts.scss
index 90325f1e6..76432801e 100644
--- a/app/styles/soapbox/accounts.scss
+++ b/app/styles/soapbox/accounts.scss
@@ -173,7 +173,7 @@
 }
 
 .nothing-here {
-  background: $ui-base-color;
+  background: var(--brand-color-med);
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
   color: $gab-secondary-text;
   font-size: 14px;
@@ -226,14 +226,14 @@
   padding: 0;
   margin: 15px -15px -15px;
   border: 0 none;
-  border-top: 1px solid lighten($ui-base-color, 12%);
-  border-bottom: 1px solid lighten($ui-base-color, 12%);
+  border-top: 1px solid var(--brand-color-med);
+  border-bottom: 1px solid var(--brand-color-med);
   font-size: 14px;
   line-height: 20px;
 
   dl {
     display: flex;
-    border-bottom: 1px solid lighten($ui-base-color, 12%);
+    border-bottom: 1px solid var(--brand-color-med);
   }
 
   dt,
diff --git a/app/styles/soapbox/basics.scss b/app/styles/soapbox/basics.scss
index 54afa4566..766f70fcc 100644
--- a/app/styles/soapbox/basics.scss
+++ b/app/styles/soapbox/basics.scss
@@ -54,7 +54,7 @@ body {
   }
 
   &.lighter {
-    background: $ui-base-color;
+    background: var(--brand-color-med);
   }
 
   &.with-modals {
@@ -96,7 +96,7 @@ body {
     position: absolute;
     text-align: center;
     color: $darker-text-color;
-    background: $ui-base-color;
+    background: var(--brand-color-med);
     width: 100%;
     height: 100%;
     padding: 0;
@@ -186,7 +186,7 @@ button {
   }
 
   a {
-    color: var(--highlight-text-color);
+    color: var(--brand-color-hicontrast);
     text-decoration: none;
 
     &:hover {
diff --git a/app/styles/soapbox/components.scss b/app/styles/soapbox/components.scss
index ad5bb6d82..a7de62edd 100644
--- a/app/styles/soapbox/components.scss
+++ b/app/styles/soapbox/components.scss
@@ -79,12 +79,12 @@
   }
 
   &.button-alternative-2 {
-    background: $ui-base-lighter-color;
+    background: var(--brand-color-med);
 
     &:active,
     &:focus,
     &:hover {
-      background-color: lighten($ui-base-lighter-color, 4%);
+      background-color: var(--brand-color-faint);
     }
   }
 
@@ -127,6 +127,16 @@
   cursor: pointer;
   transition: color 100ms ease-in;
 
+  > div {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  i.fa {
+    margin: 0;
+  }
+
   &:hover,
   &:active,
   &:focus {
@@ -506,7 +516,7 @@
     background: var(--brand-color-faint);
 
     .status.status-direct {
-      background: lighten($ui-base-color, 12%);
+      background: var(--brand-color-med);
 
       &.muted {
         background: transparent;
@@ -1080,11 +1090,11 @@ a.account__display-name {
   }
 
   a.status__content__spoiler-link {
-    background: $ui-base-lighter-color;
+    background: var(--brand-color-med);
     color: $inverted-text-color;
 
     &:hover {
-      background: lighten($ui-base-lighter-color, 7%);
+      background: var(--brand-color-faint);
       text-decoration: none;
     }
   }
@@ -1710,7 +1720,7 @@ a.account__display-name {
   height: 100%;
 
   &.darker {
-    background: $ui-base-color;
+    background: var(--brand-color-med);
   }
 }
 
@@ -1865,7 +1875,7 @@ a.account__display-name {
   height: 24px;
   padding: 0;
   border-radius: 30px;
-  background-color: $ui-base-color;
+  background-color: var(--brand-color-med);
   transition: background-color 0.2s ease;
 }
 
@@ -1924,7 +1934,7 @@ a.account__display-name {
   left: 1px;
   width: 22px;
   height: 22px;
-  border: 1px solid $ui-base-color;
+  border: 1px solid var(--brand-color-med);
   border-radius: 50%;
   background-color: darken($simple-background-color, 2%);
   box-sizing: border-box;
@@ -1983,13 +1993,13 @@ a.account__display-name {
   font-size: 12px;
   line-height: 19px;
   font-weight: 500;
-  background: $ui-base-color;
+  background: var(--brand-color-med);
   padding: 4px 8px;
   margin: -6px 10px;
 }
 
 .column-subheading {
-  background: $ui-base-color;
+  background: var(--brand-color-med);
   color: $dark-text-color;
   padding: 8px 20px;
   font-size: 12px;
@@ -2001,7 +2011,7 @@ a.account__display-name {
 .getting-started__wrapper,
 .getting-started,
 .flex-spacer {
-  background: $ui-base-color;
+  background: var(--brand-color-med);
 }
 
 .getting-started__wrapper {
@@ -2053,7 +2063,7 @@ a.account__display-name {
   }
 
   &__trends {
-    background: $ui-base-color;
+    background: var(--brand-color-med);
     flex: 0 1 auto;
 
     @media screen and (max-height: 810px) {
@@ -2318,7 +2328,7 @@ a.status-card.compact:hover {
   text-decoration: none;
 
   &:hover {
-    background: lighten($ui-base-color, 2%);
+    background: var(--brand-color-faint);
   }
 }
 
@@ -2331,7 +2341,7 @@ a.status-card.compact:hover {
   font-size: 16px;
   font-weight: 500;
   color: $dark-text-color;
-  background: $ui-base-color;
+  background: var(--brand-color-med);
   cursor: default;
   display: flex;
   flex: 1 1 auto;
@@ -2364,7 +2374,7 @@ a.status-card.compact:hover {
   font-size: 16px;
   font-weight: 500;
   color: $dark-text-color;
-  background: $ui-base-color;
+  background: var(--brand-color-med);
   cursor: default;
   display: flex;
   flex: 1 1 auto;
@@ -2534,7 +2544,7 @@ a.status-card.compact:hover {
     height: 0;
     background: transparent;
     border: 0;
-    border-top: 1px solid lighten($ui-base-color, 12%);
+    border-top: 1px solid var(--brand-color-med);
     margin: 10px 0;
   }
 }
@@ -2822,7 +2832,7 @@ a.status-card.compact:hover {
         &:hover,
         &:active,
         &:focus {
-          background: lighten($ui-base-color, 12%);
+          background: var(--brand-color-med);
           color: lighten($darker-text-color, 4%);
         }
       }
@@ -2913,7 +2923,7 @@ a.status-card.compact:hover {
 .empty-column-indicator,
 .error-column {
   color: $dark-text-color;
-  background: $ui-base-color;
+  background: var(--brand-color-med);
   text-align: center;
   padding: 40px;
   font-size: 15px;
@@ -3111,7 +3121,7 @@ a.status-card.compact:hover {
   left: 0;
   z-index: -1;
   border-radius: 4px;
-  background: $ui-base-color;
+  background: var(--brand-color-med);
   box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
 }
 
@@ -3123,7 +3133,7 @@ a.status-card.compact:hover {
   color: $secondary-text-color;
   font-size: 18px;
   font-weight: 500;
-  border: 2px dashed $ui-base-lighter-color;
+  border: 2px dashed var(--brand-color-med);
   border-radius: 4px;
 }
 
@@ -3154,7 +3164,7 @@ a.status-card.compact:hover {
   width: 100%;
   height: 6px;
   border-radius: 6px;
-  background: $ui-base-lighter-color;
+  background: var(--brand-color-med);
   position: relative;
   margin-top: 5px;
 }
@@ -3355,7 +3365,7 @@ a.status-card.compact:hover {
 
 .search-results__header {
   color: $dark-text-color;
-  background: lighten($ui-base-color, 2%);
+  background: var(--brand-color-faint);
   padding: 15px;
   font-weight: 500;
   font-size: 16px;
@@ -3883,7 +3893,7 @@ a.status-card.compact:hover {
       border-radius: 4px;
       left: 70px;
       bottom: 20px;
-      background: lighten($ui-highlight-color, 8%);
+      background: var(--brand-color);
     }
 
     &__handle {
@@ -3895,7 +3905,7 @@ a.status-card.compact:hover {
       bottom: 16px;
       left: 70px;
       transition: opacity .1s ease;
-      background: lighten($ui-highlight-color, 8%);
+      background: var(--brand-color);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
       pointer-events: none;
     }
@@ -3941,7 +3951,7 @@ a.status-card.compact:hover {
       height: 4px;
       border-radius: 4px;
       top: 10px;
-      background: lighten($ui-highlight-color, 8%);
+      background: var(--brand-color);
     }
 
     &__buffer {
@@ -3958,7 +3968,7 @@ a.status-card.compact:hover {
       top: 6px;
       margin-left: -6px;
       transition: opacity .1s ease;
-      background: lighten($ui-highlight-color, 8%);
+      background: var(--brand-color);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
       pointer-events: none;
 
@@ -4082,7 +4092,7 @@ a.status-card.compact:hover {
 
       &::after {
         bottom: -1px;
-        border-color: transparent transparent $ui-base-color;
+        border-color: transparent transparent var(--brand-color-med);
       }
     }
   }
@@ -4251,7 +4261,7 @@ noscript {
       border-radius: 5px;
       padding: 10px;
       font-family: $font-monospace, monospace;
-      background: $ui-base-color;
+      background: var(--brand-color-med);
       color: $primary-text-color;
       font-size: 14px;
       margin: 0;
@@ -4554,7 +4564,7 @@ noscript {
 .trends {
   &__header {
     color: $dark-text-color;
-    background: lighten($ui-base-color, 2%);
+    background: var(--brand-color-faint);
     border-bottom: 1px solid var(--brand-color-med);
     font-weight: 500;
     padding: 15px;
@@ -4656,7 +4666,7 @@ noscript {
     height: auto;
 
     path:first-child {
-      fill: lighten($ui-base-color, 12%);
+      fill: var(--brand-color-med);
     }
 
     path:last-child {
@@ -4670,7 +4680,7 @@ noscript {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background: lighten($ui-base-color, 12%);
+    background: var(--brand-color-med);
     border-radius: 50%;
     padding: 0.35rem;
   }
@@ -5013,23 +5023,23 @@ noscript {
       line-height: 1.25;
 
       a {
-        color: lighten($ui-highlight-color, 8%);
+        color: var(--highlight-text-color);
       }
     }
 
     &__fields {
       display: flex;
       flex-direction: column;
-      border-top: 1px solid lighten($ui-base-color, 12%);
+      border-top: 1px solid var(--brand-color-med);
       padding: 10px 0;
       margin: 5px 0;
 
       @media screen and (max-width: 895px) {
-        border-bottom: 1px solid lighten($ui-base-color, 12%);
+        border-bottom: 1px solid var(--brand-color-med);
       }
 
       a {
-        color: lighten($ui-highlight-color, 8%);
+        color: var(--highlight-text-color);
       }
 
       dl:first-child .verified {
@@ -5137,7 +5147,7 @@ noscript {
   &__text-container {
     display: none;
     padding: 25px 0;
-    background-color: lighten($ui-base-color, 6%);
+    background-color: var(--brand-color-faint);
 
     @media (min-width: 895px) {
       display: block;
diff --git a/app/styles/soapbox/components/account-header.scss b/app/styles/soapbox/components/account-header.scss
index 9ff925681..77f3da9b2 100644
--- a/app/styles/soapbox/components/account-header.scss
+++ b/app/styles/soapbox/components/account-header.scss
@@ -99,12 +99,13 @@
       margin-left: auto;
 
       .icon-button {
-        border: 1px solid lighten($ui-base-color, 12%);
+        border: 1px solid var(--brand-color-med);
         border-radius: 4px;
         box-sizing: content-box;
         padding: 2px;
       }
-      .button {margin-right: 10px;}
+
+      .button { margin-right: 10px; }
     }
 
     &__links {
diff --git a/app/styles/soapbox/components/modal.scss b/app/styles/soapbox/components/modal.scss
index 00089f461..e9aa559df 100644
--- a/app/styles/soapbox/components/modal.scss
+++ b/app/styles/soapbox/components/modal.scss
@@ -289,7 +289,7 @@
   }
 
   &__case {
-    background: $ui-base-color;
+    background: var(--brand-color-med);
     color: $secondary-text-color;
     font-weight: 500;
     padding: 10px;
@@ -607,7 +607,7 @@
 }
 
 .modal-layout {
-  background: $ui-base-color url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}"/></svg>') repeat-x bottom fixed;
+  background: var(--brand-color-med) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}"/></svg>') repeat-x bottom fixed;
   display: flex;
   flex-direction: column;
   height: 100vh;
diff --git a/app/styles/soapbox/containers.scss b/app/styles/soapbox/containers.scss
index 2e3812582..a98f84f60 100644
--- a/app/styles/soapbox/containers.scss
+++ b/app/styles/soapbox/containers.scss
@@ -274,7 +274,7 @@
             a {
               padding: 4px;
               border-radius: 4px;
-              background-color: $ui-base-color;
+              background-color: var(--brand-color-med);
             }
           }
 
@@ -341,7 +341,7 @@
       }
 
       &--hollow {
-        background-color: $ui-base-color;
+        background-color: var(--brand-color-med);
 
         &:hover,
         &:focus,
@@ -722,7 +722,7 @@
         margin: 0 -5px;
 
         .account__header__fields {
-          border-top: 1px solid lighten($ui-base-color, 12%);
+          border-top: 1px solid var(--brand-color-med);
         }
 
         .roles {
@@ -864,7 +864,7 @@
         }
 
         .card__bar {
-          background: $ui-base-color;
+          background: var(--brand-color-med);
 
           &:hover,
           &:active,
diff --git a/app/styles/soapbox/forms.scss b/app/styles/soapbox/forms.scss
index 2df8f5570..3ecae3ccd 100644
--- a/app/styles/soapbox/forms.scss
+++ b/app/styles/soapbox/forms.scss
@@ -446,7 +446,7 @@ code {
     outline: 0;
     font-family: inherit;
     resize: vertical;
-    background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") no-repeat right 8px center / auto 16px;
+    background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(var(--brand-color-med))}'/></svg>") no-repeat right 8px center / auto 16px;
     border: 1px solid darken($ui-base-color, 14%);
     border-radius: 4px;
     padding-left: 10px;
@@ -567,7 +567,7 @@ code {
     border: 0;
     padding: 10px;
     font-family: $font-monospace, monospace;
-    background: $ui-base-color;
+    background: var(--brand-color-med);
     color: $primary-text-color;
     font-size: 14px;
     margin: 0;
diff --git a/app/styles/soapbox/rtl.scss b/app/styles/soapbox/rtl.scss
index 6201d3f4e..56f49e9dd 100644
--- a/app/styles/soapbox/rtl.scss
+++ b/app/styles/soapbox/rtl.scss
@@ -243,7 +243,7 @@ body.rtl {
   }
 
   .simple_form select {
-    background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") no-repeat left 8px center / auto 16px;
+    background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(var(--brand-color-med))}'/></svg>") no-repeat left 8px center / auto 16px;
   }
 
   .table th,
diff --git a/app/styles/soapbox/stream_entries.scss b/app/styles/soapbox/stream_entries.scss
index d49702477..9ec7d1bfe 100644
--- a/app/styles/soapbox/stream_entries.scss
+++ b/app/styles/soapbox/stream_entries.scss
@@ -26,7 +26,7 @@
   }
 
   .entry {
-    background: $ui-base-color;
+    background: var(--brand-color-med);
 
     .detailed-status,
     .status,
@@ -95,7 +95,7 @@
   &:active,
   &:focus,
   &:hover {
-    background: lighten($ui-highlight-color, 10%);
+    background: var(--brand-color-hicontrast);
   }
 
   &:disabled,
@@ -103,7 +103,7 @@
     &:active,
     &:focus,
     &:hover {
-      background: $ui-primary-color;
+      background: var(--brand-color-med);
     }
   }
 
diff --git a/app/styles/soapbox/tables.scss b/app/styles/soapbox/tables.scss
index 0c756c023..f46f89af7 100644
--- a/app/styles/soapbox/tables.scss
+++ b/app/styles/soapbox/tables.scss
@@ -9,14 +9,14 @@
     padding: 8px;
     line-height: 18px;
     vertical-align: top;
-    border-top: 1px solid $ui-base-color;
+    border-top: 1px solid var(--brand-color-med);
     text-align: left;
     background: var(--brand-color-med);
   }
 
   & > thead > tr > th {
     vertical-align: bottom;
-    border-bottom: 2px solid $ui-base-color;
+    border-bottom: 2px solid var(--brand-color-med);
     border-top: 0;
     font-weight: 500;
   }
@@ -27,7 +27,7 @@
 
   & > tbody > tr:nth-child(odd) > td,
   & > tbody > tr:nth-child(odd) > th {
-    background: $ui-base-color;
+    background: var(--brand-color-med);
   }
 
   a {
@@ -67,7 +67,7 @@
 
   &.batch-table {
     & > thead > tr > th {
-      background: $ui-base-color;
+      background: var(--brand-color-med);
       border-top: 1px solid darken($ui-base-color, 8%);
       border-bottom: 1px solid darken($ui-base-color, 8%);
 
@@ -165,7 +165,7 @@ a.table-action-link {
 
   &__toolbar {
     border: 1px solid darken($ui-base-color, 8%);
-    background: $ui-base-color;
+    background: var(--brand-color-med);
     border-radius: 4px 0 0;
     height: 47px;
     align-items: center;
@@ -196,10 +196,10 @@ a.table-action-link {
     }
 
     &:nth-child(even) {
-      background: $ui-base-color;
+      background: var(--brand-color-med);
 
       &:hover {
-        background: lighten($ui-base-color, 2%);
+        background: var(--brand-color-faint);
       }
     }
 
diff --git a/app/styles/soapbox/widgets.scss b/app/styles/soapbox/widgets.scss
index 9954af002..e504a5368 100644
--- a/app/styles/soapbox/widgets.scss
+++ b/app/styles/soapbox/widgets.scss
@@ -20,7 +20,7 @@
   }
 
   &__text {
-    background: $ui-base-color;
+    background: var(--brand-color-med);
     padding: 20px;
     border-radius: 0 0 4px 4px;
     font-size: 15px;
@@ -115,7 +115,7 @@
   padding: 20px;
   min-height: 100%;
   border-radius: 4px;
-  background: $ui-base-color;
+  background: var(--brand-color-med);
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 }
 
@@ -152,7 +152,7 @@
   padding: 15px;
   padding-bottom: 20px;
   border-radius: 4px;
-  background: $ui-base-color;
+  background: var(--brand-color-med);
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
   color: $secondary-text-color;
   font-weight: 400;
@@ -260,7 +260,7 @@
 }
 
 .directory {
-  background: $ui-base-color;
+  background: var(--brand-color-med);
   border-radius: 4px;
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 
@@ -273,7 +273,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      background: $ui-base-color;
+      background: var(--brand-color-med);
       border-radius: 4px;
       padding: 15px;
       text-decoration: none;
@@ -352,7 +352,7 @@
     position: relative;
     margin-left: -10px;
     background: darken($ui-base-color, 8%);
-    border: 2px solid $ui-base-color;
+    border: 2px solid var(--brand-color-med);
 
     &:nth-child(1) {
       z-index: 1;