diff --git a/ui/helpers/utils/settings-search.js b/ui/helpers/utils/settings-search.js
index da81fd20d99b..97c78295975f 100644
--- a/ui/helpers/utils/settings-search.js
+++ b/ui/helpers/utils/settings-search.js
@@ -51,12 +51,12 @@ function colorText(menuElement, regex) {
     let elemText = menuElement.innerHTML;
     elemText = elemText.replace('&', '&');
     elemText = elemText.replace(
-      /(<span style="background:#ffd33d">|<\/span>)/gim,
+      /(<span style="background:var(--brand-colors-yellow-yellow500)">|<\/span>)/gim,
       '',
     );
     menuElement.innerHTML = elemText.replace(
       regex,
-      '<span style="background:#ffd33d">$&</span>',
+      '<span style="background:var(--brand-colors-yellow-yellow500)">$&</span>',
     );
   }
 }
diff --git a/ui/pages/confirm-add-suggested-nft/__snapshots__/confirm-add-suggested-nft.test.js.snap b/ui/pages/confirm-add-suggested-nft/__snapshots__/confirm-add-suggested-nft.test.js.snap
index e807bd5915fc..3742d85cf9f7 100644
--- a/ui/pages/confirm-add-suggested-nft/__snapshots__/confirm-add-suggested-nft.test.js.snap
+++ b/ui/pages/confirm-add-suggested-nft/__snapshots__/confirm-add-suggested-nft.test.js.snap
@@ -185,7 +185,7 @@ exports[`ConfirmAddSuggestedNFT Component should match snapshot 1`] = `
                       CryptoKitty
                     </p>
                     <p
-                      class="mm-box mm-text confirm-add-suggested-nft__nft-tokenId mm-text--body-md mm-box--color-text-default"
+                      class="mm-box mm-text confirm-add-suggested-nft__nft-tokenId mm-text--body-md mm-box--color-text-alternative"
                     >
                       #
                       15
@@ -395,7 +395,7 @@ exports[`ConfirmAddSuggestedNFT Component should match snapshot 1`] = `
                     CryptoKitty
                   </p>
                   <p
-                    class="mm-box mm-text confirm-add-suggested-nft__nft-tokenId mm-text--body-md mm-box--color-text-default"
+                    class="mm-box mm-text confirm-add-suggested-nft__nft-tokenId mm-text--body-md mm-box--color-text-alternative"
                   >
                     #
                     15
diff --git a/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js b/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js
index 2d74cac235f1..14b28d0f6ef8 100644
--- a/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js
+++ b/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js
@@ -50,6 +50,7 @@ import {
   TextAlign,
   TextVariant,
   BlockSize,
+  TextColor,
 } from '../../helpers/constants/design-system';
 import NetworkAccountBalanceHeader from '../../components/app/network-account-balance-header/network-account-balance-header';
 import { NETWORK_TO_NAME_MAP } from '../../../shared/constants/network';
@@ -294,6 +295,7 @@ const ConfirmAddSuggestedNFT = () => {
                           )}
                           <Text
                             variant={TextVariant.bodyMd}
+                            color={TextColor.textAlternative}
                             className="confirm-add-suggested-nft__nft-tokenId"
                           >
                             #{tokenId}
@@ -359,6 +361,7 @@ const ConfirmAddSuggestedNFT = () => {
                         )}
                         <Text
                           variant={TextVariant.bodySm}
+                          color={TextColor.textAlternative}
                           className="confirm-add-suggested-nft__nft-tokenId"
                         >
                           #{tokenId}
diff --git a/ui/pages/confirm-add-suggested-nft/index.scss b/ui/pages/confirm-add-suggested-nft/index.scss
index 494a4c792edd..a847098e2444 100644
--- a/ui/pages/confirm-add-suggested-nft/index.scss
+++ b/ui/pages/confirm-add-suggested-nft/index.scss
@@ -56,8 +56,6 @@
 
   &__nft-tokenid {
     @include H7;
-
-    color: #606060;
   }
 
   &__nft-remove-tooltip {
diff --git a/ui/pages/institutional/connect-custody/index.scss b/ui/pages/institutional/connect-custody/index.scss
index b80e6a68b861..c60c4d287440 100644
--- a/ui/pages/institutional/connect-custody/index.scss
+++ b/ui/pages/institutional/connect-custody/index.scss
@@ -3,7 +3,7 @@
   overflow: auto;
 
   &__item {
-    border-bottom: 1px solid #d2d8dd;
+    border-bottom: 1px solid var(--color-border-muted);
 
     input {
       margin: 12px 0 0 4px;
@@ -27,7 +27,7 @@
   }
 
   &__item:first-child {
-    border-top: 1px solid #d2d8dd;
+    border-top: 1px solid var(--color-border-muted);
   }
 
   &__item:last-child {
@@ -39,7 +39,7 @@
   }
 
   &__buttons {
-    border-top: 1px solid #d2d8dd;
+    border-top: 1px solid var(--color-border-muted);
   }
 
   &__button:not(:last-child) {
diff --git a/ui/pages/swaps/smart-transaction-status/__snapshots__/arrow-icon.test.js.snap b/ui/pages/swaps/smart-transaction-status/__snapshots__/arrow-icon.test.js.snap
index fc7245b88c13..94ea4169b2cf 100644
--- a/ui/pages/swaps/smart-transaction-status/__snapshots__/arrow-icon.test.js.snap
+++ b/ui/pages/swaps/smart-transaction-status/__snapshots__/arrow-icon.test.js.snap
@@ -11,7 +11,7 @@ exports[`ArrowIcon renders the ArrowIcon component 1`] = `
   >
     <path
       d="M14.4946 6.14779C14.4863 5.93594 14.3991 5.69108 14.2539 5.53666L9.51334 0.49958C9.1921 0.21091 8.57613 0.0917437 8.21709 0.425509C7.86344 0.754237 7.87396 1.39178 8.22627 1.72181L11.5595 5.25889L1.1618 5.25889C0.670919 5.25889 0.272949 5.65687 0.272949 6.14779C0.272949 6.6387 0.670919 7.03668 1.1618 7.03668L11.5595 7.03668L8.22627 10.5738C7.92297 10.8776 7.86691 11.5376 8.21709 11.8701C8.56718 12.2025 9.20529 12.0963 9.51334 11.796L14.2539 6.75891C14.4161 6.58653 14.4952 6.38428 14.4946 6.14779Z"
-      fill="#D6D9DC"
+      fill="var(--color-text-muted)"
     />
   </svg>
 </div>
diff --git a/ui/pages/swaps/smart-transaction-status/__snapshots__/reverted-icon.test.js.snap b/ui/pages/swaps/smart-transaction-status/__snapshots__/reverted-icon.test.js.snap
index bb26107a3957..fda252807661 100644
--- a/ui/pages/swaps/smart-transaction-status/__snapshots__/reverted-icon.test.js.snap
+++ b/ui/pages/swaps/smart-transaction-status/__snapshots__/reverted-icon.test.js.snap
@@ -11,11 +11,11 @@ exports[`RevertedIcon renders the RevertedIcon component 1`] = `
   >
     <path
       d="M34.6806 6.55143C36.2395 8.11033 37.4995 9.91222 38.4238 11.8681C38.8067 12.6782 39.1319 13.5148 39.3969 14.3714L39.4243 14.4606C39.5817 14.9785 39.7172 15.5037 39.8301 16.0347C40.7512 20.3654 40.1336 24.9029 38.0512 28.8509C35.7002 33.308 31.675 36.6487 26.861 38.138C24.4773 38.8754 21.9718 39.1361 19.4874 38.9052C17.003 38.6743 14.5884 37.9563 12.3814 36.7922C10.3609 35.7264 8.62055 34.3588 7.18343 32.7636C5.71254 31.1448 4.53064 29.2824 3.69188 27.2574C3.42339 26.6092 2.99695 25.2767 2.99695 25.2767H6.99592C7.78677 27.4068 9.06042 29.362 10.7289 30.9609L10.7319 30.96C11.6097 31.8005 12.6011 32.5516 13.6951 33.1786C15.9743 34.483 18.5737 35.1864 21.2456 35.1864C25.2769 35.1864 29.143 33.585 31.9936 30.7345C34.8441 27.8839 36.4456 24.0177 36.4456 19.9865C36.4456 18.7267 36.2892 17.483 35.9872 16.2814C35.9207 16.017 35.8471 15.7546 35.7667 15.4945C34.5753 11.6432 31.9028 8.42306 28.3371 6.54231C24.7714 4.66156 20.6046 4.27429 16.7534 5.46571C12.9838 6.63189 9.81878 9.21706 7.92263 12.6699L12.9962 15.307L3.3834 18.3447L0.345703 8.73191L4.55015 10.9171C6.91547 6.56278 10.8906 3.30177 15.6304 1.83546C17.4659 1.26761 19.3588 0.986653 21.2456 0.986694C26.2847 0.986694 31.1174 2.98824 34.6806 6.55143Z"
-      fill="#D73A49"
+      fill="var(--color-error-default)"
     />
     <path
       d="M18.5849 19.9869L15.1454 23.4264L17.9845 26.2655L21.424 22.826L24.8635 26.2655L27.7026 23.4264L24.2631 19.9869L27.7026 16.5473L24.8635 13.7082L21.424 17.1478L17.9845 13.7082L15.1454 16.5473L18.5849 19.9869Z"
-      fill="#D73A49"
+      fill="var(--color-error-default)"
     />
   </svg>
 </div>
diff --git a/ui/pages/swaps/smart-transaction-status/__snapshots__/success-icon.test.js.snap b/ui/pages/swaps/smart-transaction-status/__snapshots__/success-icon.test.js.snap
index 9df4a837ad47..c42c5b700a21 100644
--- a/ui/pages/swaps/smart-transaction-status/__snapshots__/success-icon.test.js.snap
+++ b/ui/pages/swaps/smart-transaction-status/__snapshots__/success-icon.test.js.snap
@@ -11,7 +11,7 @@ exports[`SuccessIcon renders the SuccessIcon component 1`] = `
   >
     <path
       d="M34.5457 19.8983C34.5457 23.9296 32.9443 27.7958 30.0937 30.6463C27.2432 33.4969 23.377 35.0983 19.3457 35.0983C15.3144 35.0983 11.4482 33.4969 8.59768 30.6463C5.74713 27.7958 4.1457 23.9296 4.1457 19.8983C4.1457 15.867 5.74713 12.0008 8.59768 9.15029C11.4482 6.29974 15.3144 4.69832 19.3457 4.69832C20.7897 4.69832 22.1957 4.90732 23.5257 5.28732L26.5087 2.30432C24.3047 1.39232 21.8917 0.898315 19.3457 0.898315C16.8506 0.898315 14.3799 1.38977 12.0747 2.3446C9.76953 3.29944 7.67499 4.69897 5.91067 6.46329C2.34748 10.0265 0.345703 14.8592 0.345703 19.8983C0.345703 24.9374 2.34748 29.7702 5.91067 33.3333C7.67499 35.0977 9.76953 36.4972 12.0747 37.452C14.3799 38.4069 16.8506 38.8983 19.3457 38.8983C24.3848 38.8983 29.2175 36.8965 32.7807 33.3333C36.3439 29.7702 38.3457 24.9374 38.3457 19.8983H34.5457ZM11.5747 16.2503L8.8957 18.9483L17.4457 27.4983L36.4457 8.49832L33.7667 5.80032L17.4457 22.1213L11.5747 16.2503Z"
-      fill="#28A745"
+      fill="var(--color-success-default)"
     />
   </svg>
 </div>
diff --git a/ui/pages/swaps/smart-transaction-status/arrow-icon.js b/ui/pages/swaps/smart-transaction-status/arrow-icon.js
index 54526c62b56c..ea9f7d1a80a5 100644
--- a/ui/pages/swaps/smart-transaction-status/arrow-icon.js
+++ b/ui/pages/swaps/smart-transaction-status/arrow-icon.js
@@ -11,7 +11,7 @@ export default function ArrowIcon() {
     >
       <path
         d="M14.4946 6.14779C14.4863 5.93594 14.3991 5.69108 14.2539 5.53666L9.51334 0.49958C9.1921 0.21091 8.57613 0.0917437 8.21709 0.425509C7.86344 0.754237 7.87396 1.39178 8.22627 1.72181L11.5595 5.25889L1.1618 5.25889C0.670919 5.25889 0.272949 5.65687 0.272949 6.14779C0.272949 6.6387 0.670919 7.03668 1.1618 7.03668L11.5595 7.03668L8.22627 10.5738C7.92297 10.8776 7.86691 11.5376 8.21709 11.8701C8.56718 12.2025 9.20529 12.0963 9.51334 11.796L14.2539 6.75891C14.4161 6.58653 14.4952 6.38428 14.4946 6.14779Z"
-        fill="#D6D9DC"
+        fill="var(--color-text-muted)"
       />
     </svg>
   );
diff --git a/ui/pages/swaps/smart-transaction-status/reverted-icon.js b/ui/pages/swaps/smart-transaction-status/reverted-icon.js
index 57b6bfb3fdd8..7d0299cd8b8a 100644
--- a/ui/pages/swaps/smart-transaction-status/reverted-icon.js
+++ b/ui/pages/swaps/smart-transaction-status/reverted-icon.js
@@ -11,11 +11,11 @@ export default function RevertedIcon() {
     >
       <path
         d="M34.6806 6.55143C36.2395 8.11033 37.4995 9.91222 38.4238 11.8681C38.8067 12.6782 39.1319 13.5148 39.3969 14.3714L39.4243 14.4606C39.5817 14.9785 39.7172 15.5037 39.8301 16.0347C40.7512 20.3654 40.1336 24.9029 38.0512 28.8509C35.7002 33.308 31.675 36.6487 26.861 38.138C24.4773 38.8754 21.9718 39.1361 19.4874 38.9052C17.003 38.6743 14.5884 37.9563 12.3814 36.7922C10.3609 35.7264 8.62055 34.3588 7.18343 32.7636C5.71254 31.1448 4.53064 29.2824 3.69188 27.2574C3.42339 26.6092 2.99695 25.2767 2.99695 25.2767H6.99592C7.78677 27.4068 9.06042 29.362 10.7289 30.9609L10.7319 30.96C11.6097 31.8005 12.6011 32.5516 13.6951 33.1786C15.9743 34.483 18.5737 35.1864 21.2456 35.1864C25.2769 35.1864 29.143 33.585 31.9936 30.7345C34.8441 27.8839 36.4456 24.0177 36.4456 19.9865C36.4456 18.7267 36.2892 17.483 35.9872 16.2814C35.9207 16.017 35.8471 15.7546 35.7667 15.4945C34.5753 11.6432 31.9028 8.42306 28.3371 6.54231C24.7714 4.66156 20.6046 4.27429 16.7534 5.46571C12.9838 6.63189 9.81878 9.21706 7.92263 12.6699L12.9962 15.307L3.3834 18.3447L0.345703 8.73191L4.55015 10.9171C6.91547 6.56278 10.8906 3.30177 15.6304 1.83546C17.4659 1.26761 19.3588 0.986653 21.2456 0.986694C26.2847 0.986694 31.1174 2.98824 34.6806 6.55143Z"
-        fill="#D73A49"
+        fill="var(--color-error-default)"
       />
       <path
         d="M18.5849 19.9869L15.1454 23.4264L17.9845 26.2655L21.424 22.826L24.8635 26.2655L27.7026 23.4264L24.2631 19.9869L27.7026 16.5473L24.8635 13.7082L21.424 17.1478L17.9845 13.7082L15.1454 16.5473L18.5849 19.9869Z"
-        fill="#D73A49"
+        fill="var(--color-error-default)"
       />
     </svg>
   );
diff --git a/ui/pages/swaps/smart-transaction-status/success-icon.js b/ui/pages/swaps/smart-transaction-status/success-icon.js
index fd6496b6612b..123ce944aa6e 100644
--- a/ui/pages/swaps/smart-transaction-status/success-icon.js
+++ b/ui/pages/swaps/smart-transaction-status/success-icon.js
@@ -11,7 +11,7 @@ export default function SuccessIcon() {
     >
       <path
         d="M34.5457 19.8983C34.5457 23.9296 32.9443 27.7958 30.0937 30.6463C27.2432 33.4969 23.377 35.0983 19.3457 35.0983C15.3144 35.0983 11.4482 33.4969 8.59768 30.6463C5.74713 27.7958 4.1457 23.9296 4.1457 19.8983C4.1457 15.867 5.74713 12.0008 8.59768 9.15029C11.4482 6.29974 15.3144 4.69832 19.3457 4.69832C20.7897 4.69832 22.1957 4.90732 23.5257 5.28732L26.5087 2.30432C24.3047 1.39232 21.8917 0.898315 19.3457 0.898315C16.8506 0.898315 14.3799 1.38977 12.0747 2.3446C9.76953 3.29944 7.67499 4.69897 5.91067 6.46329C2.34748 10.0265 0.345703 14.8592 0.345703 19.8983C0.345703 24.9374 2.34748 29.7702 5.91067 33.3333C7.67499 35.0977 9.76953 36.4972 12.0747 37.452C14.3799 38.4069 16.8506 38.8983 19.3457 38.8983C24.3848 38.8983 29.2175 36.8965 32.7807 33.3333C36.3439 29.7702 38.3457 24.9374 38.3457 19.8983H34.5457ZM11.5747 16.2503L8.8957 18.9483L17.4457 27.4983L36.4457 8.49832L33.7667 5.80032L17.4457 22.1213L11.5747 16.2503Z"
-        fill="#28A745"
+        fill="var(--color-success-default)"
       />
     </svg>
   );