diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
index 8601185a9..e82c78f1a 100644
--- a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
+++ b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
@@ -16,7 +16,7 @@ import {
 export default function TransactionDetailItem({
   detailTitle = '',
   detailText = '',
-  detailTitleColor = COLORS.BLACK,
+  detailTitleColor = COLORS.TEXT_DEFAULT,
   detailTotal = '',
   subTitle = '',
   subText = '',
diff --git a/ui/pages/swaps/awaiting-swap/index.scss b/ui/pages/swaps/awaiting-swap/index.scss
index 9ed729b9c..bae40017d 100644
--- a/ui/pages/swaps/awaiting-swap/index.scss
+++ b/ui/pages/swaps/awaiting-swap/index.scss
@@ -21,7 +21,7 @@
   }
 
   a {
-    color: var(--Blue-500);
+    color: var(--text-primary-color);
   }
 
   &__status-image {
@@ -32,13 +32,13 @@
   &__header {
     @include H3;
 
-    color: var(--Black-100);
+    color: var(--color-text-default);
   }
 
   &__main-description {
     @include H6;
 
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
     margin-top: 16px;
     width: 100%;
   }
@@ -46,7 +46,7 @@
   &__time-estimate {
     @include H7;
 
-    color: var(--Black-100);
+    color: var(--color-text-default);
     margin-top: 20px;
     font-style: italic;
 
@@ -66,7 +66,7 @@
 
   &__view-on-etherscan,
   &__support-link {
-    color: var(--Blue-500);
+    color: var(--text-primary-color);
     margin-top: 24px;
     cursor: pointer;
   }
@@ -90,7 +90,7 @@
   }
 
   &__amount-and-symbol {
-    color: var(--Black-100);
+    color: var(--color-text-default);
     font-weight: bold;
   }
 }
diff --git a/ui/pages/swaps/build-quote/index.scss b/ui/pages/swaps/build-quote/index.scss
index b53754263..725550113 100644
--- a/ui/pages/swaps/build-quote/index.scss
+++ b/ui/pages/swaps/build-quote/index.scss
@@ -42,7 +42,7 @@
     @include H5;
 
     font-weight: bold;
-    color: var(--Black-100);
+    color: var(--color-text-default);
     margin-top: 3px;
   }
 
@@ -67,7 +67,7 @@
   &__max-button {
     @include H7;
 
-    color: var(--Blue-500);
+    color: var(--text-primary-color);
     cursor: pointer;
   }
 
@@ -75,7 +75,7 @@
     @include H7;
 
     width: 100%;
-    color: var(--Grey-500);
+    color: var(--color-text-muted);
     margin-top: 4px;
     display: flex;
     flex-flow: column;
@@ -84,17 +84,17 @@
     &--error {
       div:first-of-type {
         font-weight: bold;
-        color: var(--Black-100);
+        color: var(--color-text-default);
       }
 
       .build-quote__form-error:first-of-type {
         font-weight: bold;
-        color: var(--Red-500);
+        color: var(--color-error-default);
       }
 
       div:last-of-type {
         font-weight: normal;
-        color: var(--Grey-500);
+        color: var(--color-text-alternative);
       }
     }
   }
@@ -142,7 +142,7 @@
     @include H7;
 
     width: 100%;
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
     margin-top: 4px;
 
     .info-tooltip {
@@ -151,7 +151,7 @@
   }
 
   &__token-etherscan-link {
-    color: var(--Blue-500);
+    color: var(--color-primary-default);
     cursor: pointer;
   }
 
@@ -190,7 +190,7 @@
     }
 
     a {
-      color: var(--Blue-500);
+      color: var(--color-primary-default);
       cursor: pointer;
     }
   }
diff --git a/ui/pages/swaps/dropdown-input-pair/index.scss b/ui/pages/swaps/dropdown-input-pair/index.scss
index 7428130ba..234280dac 100644
--- a/ui/pages/swaps/dropdown-input-pair/index.scss
+++ b/ui/pages/swaps/dropdown-input-pair/index.scss
@@ -14,7 +14,7 @@
     }
 
     div {
-      border: 1px solid var(--Grey-100);
+      border: 1px solid var(--color-background-alternative);
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
       border-left-color: transparent;
@@ -47,7 +47,7 @@
     height: 100%;
     display: flex;
     align-items: center;
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
 
     &--two-lines {
       right: inherit;
diff --git a/ui/pages/swaps/dropdown-search-list/index.scss b/ui/pages/swaps/dropdown-search-list/index.scss
index 2d4127c1e..711fd3f31 100644
--- a/ui/pages/swaps/dropdown-search-list/index.scss
+++ b/ui/pages/swaps/dropdown-search-list/index.scss
@@ -10,7 +10,7 @@
   &__token-container {
     margin: 0;
     min-height: auto;
-    border: 1px solid #d6d9dc;
+    border: 1px solid var(--color-border-default);
     box-sizing: border-box;
     box-shadow: none;
     border-radius: 6px;
@@ -18,8 +18,8 @@
   }
 
   &--open {
-    box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
-    border: 1px solid var(--Grey-100);
+    box-shadow: 0 0 14px rgba(0, 0, 0, 0.18); /* TODO! */
+    border: 1px solid var(--color-border-default);
   }
 
   &__close-area {
@@ -40,18 +40,18 @@
     transition: 200ms ease-in-out;
     border-radius: 6px;
     box-shadow: none;
-    border: 1px solid #d6d9dc;
+    border: 1px solid var(--color-border-default);
     height: 60px;
 
     &:hover {
-      background: var(--Grey-000);
+      background: var(--color-background-alternative);
     }
   }
 
   &__caret {
     position: absolute;
     right: 16px;
-    color: var(--Grey-200);
+    color: var(--color-icon-muted);
   }
 
   &__selector-closed {
@@ -83,7 +83,7 @@
   &__closed-primary-label {
     @include H4;
 
-    color: var(--Black-100);
+    color: var(--color-text-default);
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -92,14 +92,14 @@
 
   &__search-list--open {
     box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
-    border: 1px solid var(--Grey-100);
+    border: 1px solid var(--color-border-muted);
   }
 
   &__default-dropdown-icon {
     width: 34px;
     height: 34px;
     border-radius: 50%;
-    background: var(--Grey-200);
+    background: var(--color-background-alternative);
     flex: 0 1 auto;
   }
 
@@ -118,18 +118,18 @@
   }
 
   &__select-default {
-    color: var(--Grey-200);
+    color: var(--color-text-muted);
   }
 
   &__placeholder {
     @include H6;
 
     padding: 16px;
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
     min-height: 300px;
     position: relative;
     z-index: 1002;
-    background: white;
+    background: var(--color-background-default);
     border-radius: 6px;
     min-height: 194px;
     overflow: hidden;
@@ -149,10 +149,10 @@
     padding: 16px 12px;
     box-sizing: border-box;
     cursor: pointer;
-    border-top: 1px solid var(--Grey-100);
+    border-top: 1px solid var(--color-border-muted);
     position: relative;
     z-index: 1;
-    background: var(--white);
+    background: var(--color-background-default);
   }
 
   &__loading-item-text-container {
diff --git a/ui/pages/swaps/exchange-rate-display/index.scss b/ui/pages/swaps/exchange-rate-display/index.scss
index 64dfafb82..2d68dca24 100644
--- a/ui/pages/swaps/exchange-rate-display/index.scss
+++ b/ui/pages/swaps/exchange-rate-display/index.scss
@@ -4,7 +4,7 @@
   display: flex;
   align-items: flex-end;
   justify-content: center;
-  color: var(--Black-100);
+  color: var(--color-text-default);
   width: 100%;
   flex-wrap: wrap;
 
diff --git a/ui/pages/swaps/fee-card/index.scss b/ui/pages/swaps/fee-card/index.scss
index 022fc25f9..4820f6a58 100644
--- a/ui/pages/swaps/fee-card/index.scss
+++ b/ui/pages/swaps/fee-card/index.scss
@@ -23,7 +23,7 @@
     @include H6;
 
     font-weight: bold;
-    color: var(--Blue-500);
+    color: var(--color-primary-default);
   }
 
   &__quote-link-container {
@@ -35,13 +35,13 @@
   &__quote-link-text {
     @include H7;
 
-    color: var(--Blue-500);
+    color: var(--color-primary-default);
     cursor: pointer;
     padding-right: 4px;
   }
 
   &__caret-right {
-    color: var(--Blue-500);
+    color: var(--color-primary-default);
     width: 6px;
     height: 6px;
     display: flex;
@@ -84,7 +84,7 @@
   }
 
   &__row-header-text--bold {
-    color: var(--Black-100);
+    color: var(--color-text-default);
   }
 
   &__row-header-text {
@@ -147,18 +147,18 @@
 
   &__link,
   &__link:hover {
-    color: var(--Blue-500);
+    color: var(--color-primary-default);
     cursor: pointer;
   }
 
   &__edit-link {
-    color: var(--Blue-500);
+    ccolor: var(--color-primary-default);
     cursor: pointer;
     padding-left: 6px;
   }
 
   &__total-box {
-    border-top: 1px solid var(--Grey-100);
+    border-top: 1px solid var(--color-border-muted);
     padding: 12px 16px 16px 16px;
   }
 
@@ -174,13 +174,13 @@
     display: flex;
     justify-content: flex-end;
     font-weight: bold;
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
     margin-top: 4px;
   }
 
   &__row-header-secondary,
   &__row-header-secondary--bold {
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
   }
 
   &__row-header-secondary,
@@ -189,11 +189,11 @@
   }
 
   &__row-header-primary {
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
   }
 
   &__row-header-primary--bold {
-    color: var(--Black-100);
+    color: var(--color-text-default);
   }
 
   &__row-header-text--bold,
diff --git a/ui/pages/swaps/import-token/index.scss b/ui/pages/swaps/import-token/index.scss
index d7b12960a..578e3dfb6 100644
--- a/ui/pages/swaps/import-token/index.scss
+++ b/ui/pages/swaps/import-token/index.scss
@@ -10,7 +10,7 @@
     }
 
     &__message {
-      color: var(--Black-100);
+      color: var(--color-text-default);
       text-align: left;
     }
   }
diff --git a/ui/pages/swaps/index.scss b/ui/pages/swaps/index.scss
index fb428a52d..ef601851c 100644
--- a/ui/pages/swaps/index.scss
+++ b/ui/pages/swaps/index.scss
@@ -46,8 +46,8 @@
 
     @media screen and (min-width: $break-large) {
       width: 460px;
-      background: white;
-      border: 1px solid var(--Grey-100);
+      background: var(--color-background-default);
+      border: 1px solid var(--color-border-muted);
       box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
       border-radius: 8px;
       height: 620px;
@@ -77,7 +77,7 @@
     @include H5;
 
     font-weight: bold;
-    color: var(--Black-100);
+    color: var(--color-text-default);
     margin-top: -5px;
     flex: 1;
     text-align: center;
@@ -90,7 +90,7 @@
     align-items: center;
     padding-top: 0;
     padding-bottom: 16px;
-    background: var(--Grey-000);
+    background: var(--color-background-alternative);
     width: 100%;
     position: relative;
     flex-direction: row;
@@ -105,7 +105,7 @@
   &__header-cancel {
     @include H7;
 
-    color: var(--Blue-500);
+    color: var(--color-primary-default);
     cursor: pointer;
     padding-right: 24px;
     flex: 1;
@@ -115,7 +115,7 @@
   &__header-edit {
     @include H7;
 
-    color: var(--Blue-500);
+    color: var(--color-primary-default);
     cursor: pointer;
     padding-left: 24px;
     flex: 1;
diff --git a/ui/pages/swaps/loading-swaps-quotes/index.scss b/ui/pages/swaps/loading-swaps-quotes/index.scss
index 60b0d46dd..1494ee8ed 100644
--- a/ui/pages/swaps/loading-swaps-quotes/index.scss
+++ b/ui/pages/swaps/loading-swaps-quotes/index.scss
@@ -17,7 +17,7 @@
   &__quote-counter {
     @include H7;
 
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
     margin-top: 3px;
     display: flex;
     justify-content: center;
@@ -29,7 +29,7 @@
     @include H4;
 
     font-weight: bold;
-    color: var(--Black-100);
+    color: var(--color-text-default);
     display: flex;
     justify-content: center;
     width: 100%;
@@ -123,14 +123,14 @@
   &__loading-bar-container {
     width: 248px;
     height: 3px;
-    background: var(--Grey-100);
+    background: var(--color-background-alternative);
     display: flex;
     margin-top: 16px;
   }
 
   &__loading-bar {
     height: 3px;
-    background: var(--Blue-500);
+    background: var(--color-primary-default);
     -webkit-transition: width 0.5s linear;
     -moz-transition: width 0.5s linear;
     -o-transition: width 0.5s linear;
diff --git a/ui/pages/swaps/main-quote-summary/index.scss b/ui/pages/swaps/main-quote-summary/index.scss
index 87c714d8d..290c894c0 100644
--- a/ui/pages/swaps/main-quote-summary/index.scss
+++ b/ui/pages/swaps/main-quote-summary/index.scss
@@ -5,7 +5,7 @@
   align-items: center;
   position: relative;
   width: 100%;
-  color: var(--Black-100);
+  color: var(--color-text-default);
   margin-top: 28px;
   margin-bottom: 56px;
 
@@ -18,7 +18,7 @@
 
     @include H6;
 
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
   }
 
   &__source-row {
@@ -53,7 +53,7 @@
 
   &__destination-row-symbol {
     margin-left: 5px;
-    color: var(--Black-100);
+    color: var(--color-text-default);
   }
 
   &__icon,
@@ -117,6 +117,6 @@
   }
 
   &__exchange-rate-display {
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
   }
 }
diff --git a/ui/pages/swaps/searchable-item-list/index.scss b/ui/pages/swaps/searchable-item-list/index.scss
index f656928c2..1c9a6ae3f 100644
--- a/ui/pages/swaps/searchable-item-list/index.scss
+++ b/ui/pages/swaps/searchable-item-list/index.scss
@@ -1,12 +1,12 @@
 .searchable-item-list {
-  background: var(--white);
+  background: var(--color-background-default);
   width: 100%;
   position: relative;
 
   &__search {
     > div {
       border: none;
-      border-bottom: 1px solid var(--Grey-100);
+      border-bottom: 1px solid var(--color-border-muted);
       border-radius: 0;
       height: 55px;
       font-size: 12px;
@@ -14,26 +14,26 @@
       input {
         @include H6;
 
-        color: var(--Grey-500);
+        color: var(--color-text-default);
         line-height: 100%;
 
         &::-webkit-input-placeholder {
-          color: var(--Grey-500);
+          color: var(--color-text-muted);
           opacity: 1;
         }
 
         &:-moz-placeholder {
-          color: var(--Grey-500);
+          color: var(--color-text-muted);
           opacity: 1;
         }
 
         &::-moz-placeholder {
-          color: var(--Grey-500);
+          color: var(--color-text-muted);
           opacity: 1;
         }
 
         &::placeholder {
-          color: var(--Grey-500);
+          color: var(--color-text-muted);
           opacity: 1;
         }
       }
@@ -54,7 +54,7 @@
     padding: 8px 12px;
     box-sizing: border-box;
     cursor: pointer;
-    border-top: 1px solid var(--Grey-100);
+    border-top: 1px solid var(--color-border-muted);
     position: relative;
     min-height: 50px;
 
@@ -68,11 +68,11 @@
 
     &:hover,
     &:focus {
-      background: var(--Grey-000);
+      background: var(--color-background-alternative);
     }
 
     &--selected {
-      border: 1px solid var(--malibu-blue) !important;
+      border: 1px solid var(--color-primary-default) !important;
     }
 
     &--disabled {
@@ -94,12 +94,12 @@
 
         &__message {
           text-align: left;
-          color: var(--Black-100);
+          color: var(--color-text-default);
         }
 
         a {
           pointer-events: auto;
-          color: #037dd6;
+          color: var(--color-primary-default);
           cursor: pointer;
         }
       }
@@ -170,7 +170,7 @@
     @include H7;
 
     line-height: 100%;
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -185,7 +185,7 @@
     @include H7;
 
     line-height: 100%;
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
     opacity: 0.5;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -194,7 +194,7 @@
 
   &__list-container {
     z-index: 1002;
-    background: white;
+    background: var(--color-background-default);
   }
 
   &__search {
diff --git a/ui/pages/swaps/select-quote-popover/index.scss b/ui/pages/swaps/select-quote-popover/index.scss
index 07bc9c209..d40da99c2 100644
--- a/ui/pages/swaps/select-quote-popover/index.scss
+++ b/ui/pages/swaps/select-quote-popover/index.scss
@@ -28,7 +28,7 @@
   &__popover-bg {
     height: 100%;
     width: 100%;
-    background: var(--Grey-100);
+    background: var(--color-background-alternative);
     opacity: 1;
 
     @media screen and (min-width: $break-large) {
@@ -58,7 +58,7 @@
     @include H8;
 
     font-weight: bold;
-    color: var(--Black-100);
+    color: var(--color-text-default);
     height: 43px;
     margin-bottom: 4px;
   }
@@ -74,7 +74,7 @@
     cursor: pointer;
     color: var(--black);
     height: 49px;
-    border-bottom: 1px solid var(--Grey-100);
+    border-bottom: 1px solid var(--color-background-alternative);
     margin-bottom: 8px;
     border-radius: 8px;
     background: var(--Grey-000);
@@ -82,7 +82,7 @@
     border: none;
 
     &:hover {
-      border: 1px solid var(--Blue-500);
+      border: 1px solid var(--color-primary-default);
       width: 101%;
       padding-right: 11px;
       padding-left: 19.5px;
@@ -90,7 +90,7 @@
 
     &--no-hover {
       &:hover {
-        border: 1px solid var(--Grey-100);
+        border: 1px solid var(--color-background-alternative);
         width: 100%;
         padding-right: 12px;
         padding-left: 20px;
@@ -99,7 +99,7 @@
 
     &--selected {
       color: var(--white);
-      background: linear-gradient(90deg, var(--Blue-500) 0%, var(--Blue-400) 101.32%);
+      background: linear-gradient(90deg, var(--color-primary-default) 0%, var(--primary-alternative) 101.32%);
       box-shadow: 0 10px 39px rgba(3, 125, 214, 0.15);
       border-radius: 8px;
       border-bottom: none;
@@ -107,7 +107,7 @@
       height: 64px;
 
       &:hover {
-        background: linear-gradient(90deg, var(--Blue-500) 0%, var(--Blue-400) 101.32%);
+        background: linear-gradient(90deg, var(--color-primary-default) 0%, var(--color-primary-alternative) 101.32%);
         width: 100%;
         padding-left: 20px;
         padding-right: 12px;
@@ -118,7 +118,7 @@
         color: var(--white);
 
         &:hover {
-          color: var(--Grey-500);
+          color: var(--color-text-alternative);
         }
       }
 
@@ -146,7 +146,7 @@
   }
 
   &__caret-right {
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
     width: 32px;
     height: 32px;
     display: flex;
@@ -160,7 +160,7 @@
     &:hover {
       border-radius: 8px;
       background: white;
-      border: 1px solid var(--Blue-500);
+      border: 1px solid var(--color-primary-default);
     }
   }
 
@@ -211,7 +211,7 @@
 
 
   &__receiving-symbol {
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
 
     > div {
       width: 12px;
diff --git a/ui/pages/swaps/select-quote-popover/quote-details/index.scss b/ui/pages/swaps/select-quote-popover/quote-details/index.scss
index 31039fa62..b020b55c1 100644
--- a/ui/pages/swaps/select-quote-popover/quote-details/index.scss
+++ b/ui/pages/swaps/select-quote-popover/quote-details/index.scss
@@ -15,7 +15,7 @@
   &__detail-content {
     @include H6;
 
-    color: var(--Black-100);
+    color: var(--color-text-default);
 
     > div {
       justify-content: flex-start;
@@ -23,17 +23,17 @@
   }
 
   &__conversion-rate {
-    color: var(--Black-100);
+    color: var(--color-text-default);
     justify-content: flex-start;
     align-items: center;
     height: inherit;
 
     .view-quote__conversion-rate-eth-label {
-      color: var(--Black-100);
+      color: var(--color-text-default);
     }
 
     i {
-      color: var(--Blue-500);
+      color: var(--color-primary-default);
     }
 
     * {
@@ -62,7 +62,7 @@
     display: flex;
     flex-flow: column;
     justify-content: center;
-    border-top: 1px solid var(--Grey-100);
+    border-top: 1px solid var(--color-background-alternative);
 
     &--high {
       min-height: 60px;
@@ -73,7 +73,7 @@
   .view-quote__conversion-rate-token-label {
     @include H6;
 
-    color: var(--Black-100);
+    color: var(--color-text-default);
     font-weight: bold;
     margin-left: 2px;
   }
diff --git a/ui/pages/swaps/slippage-buttons/index.scss b/ui/pages/swaps/slippage-buttons/index.scss
index dfc34ab2c..644cb1610 100644
--- a/ui/pages/swaps/slippage-buttons/index.scss
+++ b/ui/pages/swaps/slippage-buttons/index.scss
@@ -7,7 +7,7 @@
   &__header {
     display: flex;
     align-items: center;
-    color: var(--Blue-500);
+    color: var(--color-primary-default);
     margin-bottom: 0;
     margin-left: auto;
     margin-right: auto;
@@ -22,7 +22,7 @@
     @include H6;
 
     margin-right: 6px;
-    color: var(--Blue-500);
+    color: var(--color-primary-default);
     font-weight: 900;
   }
 
@@ -45,14 +45,14 @@
     @include H6;
 
     margin-right: 4px;
-    color: black;
+    color: var(--color-text-default);
     font-weight: 900;
   }
 
   &__error-text {
     @include H7;
 
-    color: var(--Red-500);
+    color: var(--color-error-default);
     margin-top: 8px;
   }
 
@@ -76,34 +76,34 @@
       border: none;
       width: 64px;
       text-align: center;
-      background: var(--Blue-500);
-      color: white;
+      background: var(--color-primary-default);
+      color: var(--color-primary-inverse);
       font-weight: inherit;
 
       &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
-        color: white;
+        color: var(--color-primary-inverse);
       }
 
       &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-        color: white;
+        color: var(--color-primary-inverse);
         opacity: 1;
       }
 
       &::-moz-placeholder { /* Mozilla Firefox 19+ */
-        color: white;
+        color: var(--color-primary-inverse);
         opacity: 1;
       }
 
       &:-ms-input-placeholder { /* Internet Explorer 10-11 */
-        color: white;
+        color: var(--color-primary-inverse);
       }
 
       &::-ms-input-placeholder { /* Microsoft Edge */
-        color: white;
+        color: var(--color-primary-inverse);
       }
 
       &::placeholder { /* Most modern browsers support this now. */
-        color: white;
+        color: var(--color-primary-inverse);
       }
     }
 
diff --git a/ui/pages/swaps/smart-transaction-status/index.scss b/ui/pages/swaps/smart-transaction-status/index.scss
index 07399de61..d077f0d24 100644
--- a/ui/pages/swaps/smart-transaction-status/index.scss
+++ b/ui/pages/swaps/smart-transaction-status/index.scss
@@ -13,7 +13,7 @@
 
   &__loading-bar-container {
     height: 3px;
-    background: var(--Grey-100);
+    background: var(--color-background-alternative);
     display: flex;
     margin-top: 12px;
     margin-bottom: 28px;
@@ -21,7 +21,7 @@
 
   &__loading-bar {
     height: 3px;
-    background: var(--Blue-500);
+    background: var(--color-primary-default);
     transition: width 0.5s linear;
   }
 
@@ -58,11 +58,11 @@
   }
 
   a {
-    color: var(--Blue-500);
+    color: var(--color-primary-default);
   }
 
   &__support-link {
-    color: var(--Blue-500);
+    color: var(--color-primary-default);
     margin-top: 24px;
     cursor: pointer;
   }
diff --git a/ui/pages/swaps/swaps-footer/index.scss b/ui/pages/swaps/swaps-footer/index.scss
index a360a9ae7..4bd417389 100644
--- a/ui/pages/swaps/swaps-footer/index.scss
+++ b/ui/pages/swaps/swaps-footer/index.scss
@@ -38,7 +38,7 @@
   &__bottom-text {
     @include H7;
 
-    color: var(--Blue-500);
+    color: var(--color-primary-default);
     margin-bottom: 16px;
     cursor: pointer;
     display: flex;
diff --git a/ui/pages/swaps/view-quote/index.scss b/ui/pages/swaps/view-quote/index.scss
index b50f0b9ef..2db5e250e 100644
--- a/ui/pages/swaps/view-quote/index.scss
+++ b/ui/pages/swaps/view-quote/index.scss
@@ -73,7 +73,7 @@
     cursor: pointer;
     border-radius: 28px;
     padding: 5px 18px;
-    background: linear-gradient(90deg, var(--Blue-500) 0%, var(--Blue-400) 101.32%);
+    background: linear-gradient(90deg, var(--color-primary-default) 0%, var(--color-primary-alternative) 101.32%);
 
 
     @media screen and (min-width: $break-large) {
@@ -122,7 +122,7 @@
       &.low {
         .actionable-message {
           button {
-            background: var(--Blue-500);
+            background: var(--color-primary-default);
             color: #fff;
           }
         }
@@ -217,7 +217,7 @@
   &__metamask-rate-text {
     @include H7;
 
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
   }
 
   &__metamask-rate-info-icon {