diff --git a/ui/components/app/modals/edit-approval-permission/index.scss b/ui/components/app/modals/edit-approval-permission/index.scss
index d604b3ec3..11e91e3fa 100644
--- a/ui/components/app/modals/edit-approval-permission/index.scss
+++ b/ui/components/app/modals/edit-approval-permission/index.scss
@@ -99,7 +99,7 @@
     }
 
     &__option-label--selected {
-      color: var(--primary-blue);
+      color: var(--color-primary-default);
     }
 
     &__option-description {
@@ -136,7 +136,7 @@
     }
 
     &__radio-button-outline--selected {
-      background: var(--primary-blue);
+      background: var(--color-primary-default);
     }
 
     &__radio-button-fill {
@@ -150,7 +150,7 @@
     &__radio-button-dot {
       width: 8px;
       height: 8px;
-      background: var(--primary-blue);
+      background: var(--color-primary-default);
       border-radius: 4px;
       position: absolute;
     }
diff --git a/ui/components/app/permissions-connect-footer/index.scss b/ui/components/app/permissions-connect-footer/index.scss
index 56ffbc3fe..8d720d259 100644
--- a/ui/components/app/permissions-connect-footer/index.scss
+++ b/ui/components/app/permissions-connect-footer/index.scss
@@ -12,7 +12,7 @@
     margin-top: 10px;
 
     &--link {
-      color: var(--primary-blue);
+      color: var(--color-primary-default);
       margin-left: 4px;
       cursor: pointer;
     }
diff --git a/ui/components/app/signature-request-original/index.scss b/ui/components/app/signature-request-original/index.scss
index 6b7703074..2e2aca65f 100644
--- a/ui/components/app/signature-request-original/index.scss
+++ b/ui/components/app/signature-request-original/index.scss
@@ -228,7 +228,7 @@
   &__help-link {
     cursor: pointer;
     text-decoration: underline;
-    color: var(--primary-blue);
+    color: var(--color-primary-default);
     margin-inline-start: 3px;
   }
 
diff --git a/ui/components/app/token-cell/token-cell.scss b/ui/components/app/token-cell/token-cell.scss
index d2087afda..15ddbdea4 100644
--- a/ui/components/app/token-cell/token-cell.scss
+++ b/ui/components/app/token-cell/token-cell.scss
@@ -1,5 +1,5 @@
 .token-cell {
   &--outdated .list-item__heading {
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
   }
 }
diff --git a/ui/components/app/transaction-activity-log/index.scss b/ui/components/app/transaction-activity-log/index.scss
index 4e4b7339a..6b558b7eb 100644
--- a/ui/components/app/transaction-activity-log/index.scss
+++ b/ui/components/app/transaction-activity-log/index.scss
@@ -77,7 +77,7 @@
     @include H7;
 
     cursor: pointer;
-    color: var(--primary-blue);
+    color: var(--color-primary-default);
   }
 
   b {
diff --git a/ui/components/app/transaction-decoding/components/ui/copy-raw-data/index.scss b/ui/components/app/transaction-decoding/components/ui/copy-raw-data/index.scss
index d9f9e6719..0742b7bfb 100644
--- a/ui/components/app/transaction-decoding/components/ui/copy-raw-data/index.scss
+++ b/ui/components/app/transaction-decoding/components/ui/copy-raw-data/index.scss
@@ -12,11 +12,11 @@
     background-color: transparent;
 
     &:hover {
-      background-color: var(--Grey-000);
+      background-color: var(--color-background-alternative);
     }
 
     &:active {
-      background-color: #ededed;
+      background-color: var(--color-background-alternative);
     }
   }
 
diff --git a/ui/components/app/transaction-icon/transaction-icon.scss b/ui/components/app/transaction-icon/transaction-icon.scss
index cc50190b1..050d14714 100644
--- a/ui/components/app/transaction-icon/transaction-icon.scss
+++ b/ui/components/app/transaction-icon/transaction-icon.scss
@@ -3,6 +3,6 @@
     height: 28px;
     width: 28px;
     border-radius: 14px;
-    background: var(--Grey-100);
+    background: var(--color-background-alternative);
   }
 }
diff --git a/ui/components/app/transaction-status/index.scss b/ui/components/app/transaction-status/index.scss
index 6c66a9a17..2f2ffacb3 100644
--- a/ui/components/app/transaction-status/index.scss
+++ b/ui/components/app/transaction-status/index.scss
@@ -2,34 +2,34 @@
   display: inline;
 
   &--confirmed {
-    color: var(--success-3);
+    color: var(--color-success-default);
   }
 
   &--unapproved {
-    color: var(--Orange-500);
+    color: var(--color-secondary-default);
   }
 
   &--failed {
-    color: var(--Red-500);
+    color: var(--color-error-default);
   }
 
   &--cancelled {
-    color: var(--Red-500);
+    color: var(--color-error-default);
   }
 
   &--dropped {
-    color: var(--Red-500);
+    color: var(--color-error-default);
   }
 
   &--rejected {
-    color: var(--Red-500);
+    color: var(--color-error-default);
   }
 
   &--pending {
-    color: var(--Orange-500);
+    color: var(--color-secondary-default);
   }
 
   &--queued {
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
   }
 }
diff --git a/ui/components/app/whats-new-popup/index.scss b/ui/components/app/whats-new-popup/index.scss
index 920375571..ba588d00e 100644
--- a/ui/components/app/whats-new-popup/index.scss
+++ b/ui/components/app/whats-new-popup/index.scss
@@ -9,7 +9,7 @@
     display: flex;
     flex-direction: column;
     margin: 0 24px 24px 24px;
-    border-bottom: 1px solid var(--Grey-100);
+    border-bottom: 1px solid var(--color-border-muted);
     position: relative;
   }
 
@@ -41,7 +41,7 @@
   }
 
   &__notification-date {
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
   }
 
   &__button {
@@ -56,7 +56,7 @@
   &__link {
     @include H6;
 
-    color: var(--Blue-500);
+    color: var(--color-primary-default);
     cursor: pointer;
   }
 
diff --git a/ui/components/ui/confusable/index.scss b/ui/components/ui/confusable/index.scss
index 09c751e57..06552627d 100644
--- a/ui/components/ui/confusable/index.scss
+++ b/ui/components/ui/confusable/index.scss
@@ -1,5 +1,5 @@
 .confusable {
   &__point {
-    color: var(--Red-500);
+    color: var(--color-error-default);
   }
 }
diff --git a/ui/components/ui/icon-button/icon-button.scss b/ui/components/ui/icon-button/icon-button.scss
index 5468822e2..ef9cfea7e 100644
--- a/ui/components/ui/icon-button/icon-button.scss
+++ b/ui/components/ui/icon-button/icon-button.scss
@@ -9,7 +9,7 @@
 
   font-size: 13px;
   cursor: pointer;
-  color: var(--Blue-500);
+  color: var(--color-primary-default);
 
   &__circle {
     display: flex;
diff --git a/ui/components/ui/icon-with-label/index.scss b/ui/components/ui/icon-with-label/index.scss
index 4b842cb7f..12934ba5e 100644
--- a/ui/components/ui/icon-with-label/index.scss
+++ b/ui/components/ui/icon-with-label/index.scss
@@ -6,6 +6,6 @@
     @include H8;
 
     margin-left: 4px;
-    color: var(--Grey-500);
+    color: var(--color-text-alternative);
   }
 }
diff --git a/ui/components/ui/pulse-loader/index.scss b/ui/components/ui/pulse-loader/index.scss
index 8f79d70fe..28da065ae 100644
--- a/ui/components/ui/pulse-loader/index.scss
+++ b/ui/components/ui/pulse-loader/index.scss
@@ -4,7 +4,7 @@
   &__loading-dot-one,
   &__loading-dot-two,
   &__loading-dot-three {
-    background: var(--Blue-500);
+    background: var(--color-primary-default);
     width: 9px;
     height: 9px;
     margin-right: 2px;
diff --git a/ui/components/ui/slider/index.scss b/ui/components/ui/slider/index.scss
index b4d89ae2a..bf2d17f95 100644
--- a/ui/components/ui/slider/index.scss
+++ b/ui/components/ui/slider/index.scss
@@ -35,7 +35,7 @@
     border: none;
     background: none;
     font-size: 12px;
-    color: var(--Blue-500);
+    color: var(--color-primary-default);
 
     &:focus {
       outline: none;
diff --git a/ui/css/utilities/colors.scss b/ui/css/utilities/colors.scss
index e16ac42d3..e87143d12 100644
--- a/ui/css/utilities/colors.scss
+++ b/ui/css/utilities/colors.scss
@@ -1,30 +1,5 @@
 :root {
-  // These are the colors of the MetaMask design system
-  // Only design system colors should be added, no superfluous variables
-  --Blue-300: #43aefc;
-  --Blue-400: #1098fc;
-  --Blue-500: #037dd6;
-  // Greys
-  --Grey-000: #f2f3f4;
-  --Grey-100: #d6d9dc;
-  --Grey-200: #bbc0c5;
-  --Grey-400: #848c96;
-  --Grey-500: #6a737d;
-  // Reds
-  --Red-000: #fcf2f3;
-  --Red-300: #e88f97;
-  --Red-500: #d73a49;
-  // Orange
-  --Orange-500: #f66a0a;
-  // Yellow
-  --Yellow-100: #fefcde;
-  --Yellow-500: #ffd33d;
-  // Black
-  --Black-100: #24292e;
-  // Primary colors
-  --primary-blue: var(--Blue-500);
   // Accents
-  --accent-red: var(--Red-500);
   // Everything below this line is part of the new color system
   --primary-1: #037dd6;
   --secondary-1: #f66a0a;
diff --git a/ui/pages/confirm-add-suggested-token/index.scss b/ui/pages/confirm-add-suggested-token/index.scss
index 714e47286..de04ed6bf 100644
--- a/ui/pages/confirm-add-suggested-token/index.scss
+++ b/ui/pages/confirm-add-suggested-token/index.scss
@@ -5,7 +5,7 @@
     @include H7;
 
     display: inline;
-    color: var(--primary-blue);
+    color: var(--color-primary-default);
     padding-left: 0;
   }
 
diff --git a/ui/pages/confirm-approve/confirm-approve-content/index.scss b/ui/pages/confirm-approve/confirm-approve-content/index.scss
index 7ae12ea06..547ad77f5 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/index.scss
+++ b/ui/pages/confirm-approve/confirm-approve-content/index.scss
@@ -204,7 +204,7 @@
       div {
         width: 22px;
         height: 2px;
-        background: var(--primary-blue);
+        background: var(--color-primary-default);
         position: absolute;
       }
 
@@ -220,7 +220,7 @@
     &__circle {
       width: 14px;
       height: 14px;
-      border: 2px solid var(--primary-blue);
+      border: 2px solid var(--color-primary-default);
       border-radius: 50%;
       background: white;
       position: absolute;
@@ -320,7 +320,7 @@
     @include H6;
 
     font-weight: 500;
-    color: var(--primary-blue);
+    color: var(--color-primary-default);
   }
 
   &__medium-text,
@@ -344,7 +344,7 @@
   }
 
   &__small-blue-text {
-    color: var(--primary-blue);
+    color: var(--color-primary-default);
   }
 
   &__info-row {
diff --git a/ui/pages/connected-accounts/index.scss b/ui/pages/connected-accounts/index.scss
index 764ac4d97..3d1d11308 100644
--- a/ui/pages/connected-accounts/index.scss
+++ b/ui/pages/connected-accounts/index.scss
@@ -4,7 +4,7 @@
     a:hover {
       @include H6;
 
-      color: var(--primary-blue);
+      color: var(--color-primary-default);
       cursor: pointer;
     }
   }
diff --git a/ui/pages/connected-sites/index.scss b/ui/pages/connected-sites/index.scss
index cb5cbf4d2..1c39ea83a 100644
--- a/ui/pages/connected-sites/index.scss
+++ b/ui/pages/connected-sites/index.scss
@@ -28,7 +28,7 @@
   a:hover {
     @include H6;
 
-    color: var(--primary-blue);
+    color: var(--color-primary-default);
     cursor: pointer;
   }
 }
diff --git a/ui/pages/create-account/import-account/index.scss b/ui/pages/create-account/import-account/index.scss
index 9015f1f35..a627cf355 100644
--- a/ui/pages/create-account/import-account/index.scss
+++ b/ui/pages/create-account/import-account/index.scss
@@ -1,7 +1,7 @@
 .new-account-info-link {
   cursor: pointer;
   text-decoration: underline;
-  color: var(--primary-blue);
+  color: var(--color-primary-default);
   margin-inline-start: 4px;
 }
 
@@ -57,7 +57,7 @@
   }
 
   &__help-link {
-    color: var(--primary-blue);
+    color: var(--color-primary-default);
   }
 
   &__input-password {
diff --git a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
index d79b3bf3d..6ecf96d4d 100644
--- a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
+++ b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
@@ -56,7 +56,7 @@
   }
 
   &__export-text {
-    color: var(--primary-blue);
+    color: var(--color-primary-default);
     cursor: pointer;
     font-weight: 500;
   }
diff --git a/ui/pages/import-token/index.scss b/ui/pages/import-token/index.scss
index 178334fda..a6e320750 100644
--- a/ui/pages/import-token/index.scss
+++ b/ui/pages/import-token/index.scss
@@ -41,7 +41,7 @@
     &__edit {
       flex: 1 1 auto;
       text-align: right;
-      color: var(--primary-blue);
+      color: var(--color-primary-default);
       padding-right: 4px;
       cursor: pointer;
     }
@@ -51,7 +51,7 @@
     @include H7;
 
     display: inline;
-    color: var(--primary-blue);
+    color: var(--color-primary-default);
     padding-left: 0;
   }
 
@@ -61,11 +61,11 @@
   }
 
   &__collectible-address-error-link {
-    color: var(--primary-blue);
+    color: var(--color-primary-default);
     cursor: pointer;
 
     &:hover {
-      color: var(--Blue-400);
+      color: var(--color-primary-default);
     }
   }
 }
diff --git a/ui/pages/onboarding-flow/privacy-settings/index.scss b/ui/pages/onboarding-flow/privacy-settings/index.scss
index 914616337..75d23b83d 100644
--- a/ui/pages/onboarding-flow/privacy-settings/index.scss
+++ b/ui/pages/onboarding-flow/privacy-settings/index.scss
@@ -26,7 +26,7 @@
 
       &:hover {
         cursor: pointer;
-        color: var(--Blue-300);
+        color: var(--color-primary-default);
       }
     }
   }
diff --git a/ui/pages/permissions-connect/flask/snap-install/index.scss b/ui/pages/permissions-connect/flask/snap-install/index.scss
index 711e900fc..c754c9f04 100644
--- a/ui/pages/permissions-connect/flask/snap-install/index.scss
+++ b/ui/pages/permissions-connect/flask/snap-install/index.scss
@@ -16,7 +16,7 @@
     color: var(--ui-4);
 
     .link {
-      color: var(--primary-blue);
+      color: var(--color-primary-default);
       margin-inline-start: 4px;
       cursor: pointer;
     }
diff --git a/ui/pages/permissions-connect/redirect/index.scss b/ui/pages/permissions-connect/redirect/index.scss
index edd0a15e8..84e9007f3 100644
--- a/ui/pages/permissions-connect/redirect/index.scss
+++ b/ui/pages/permissions-connect/redirect/index.scss
@@ -12,7 +12,7 @@
     justify-content: space-between;
     align-items: center;
     text-align: center;
-    color: var(--Black-100);
+    color: var(--color-text-default);
   }
 
   &__icons {
diff --git a/ui/pages/send/send.scss b/ui/pages/send/send.scss
index 95ac88442..3bceb1202 100644
--- a/ui/pages/send/send.scss
+++ b/ui/pages/send/send.scss
@@ -202,7 +202,7 @@
       background-color: var(--color-background-default);
 
       &::placeholder {
-        color: var(--Grey-200);
+        color: var(--color-text-muted);
       }
     }
 
diff --git a/ui/pages/settings/alerts-tab/alerts-tab.scss b/ui/pages/settings/alerts-tab/alerts-tab.scss
index f3873b43f..8266b885d 100644
--- a/ui/pages/settings/alerts-tab/alerts-tab.scss
+++ b/ui/pages/settings/alerts-tab/alerts-tab.scss
@@ -23,7 +23,7 @@
   }
 
   &__item {
-    border-bottom: 1px solid var(--Grey-100);
+    border-bottom: 1px solid var(--color-border-muted);
     padding: 16px 32px;
     display: flex;
     justify-content: space-between;
diff --git a/ui/pages/settings/flask/view-snap/index.scss b/ui/pages/settings/flask/view-snap/index.scss
index 4d672ef7a..172bb7114 100644
--- a/ui/pages/settings/flask/view-snap/index.scss
+++ b/ui/pages/settings/flask/view-snap/index.scss
@@ -72,7 +72,7 @@
     min-width: 0;
     display: flex;
     flex-direction: column;
-    border-bottom: 1px solid var(--Grey-100);
+    border-bottom: 1px solid var(--color-border-muted);
     padding-bottom: 16px;
     margin-bottom: 16px;
 
diff --git a/ui/pages/swaps/countdown-timer/index.scss b/ui/pages/swaps/countdown-timer/index.scss
index f6d31f58d..a936ad616 100644
--- a/ui/pages/swaps/countdown-timer/index.scss
+++ b/ui/pages/swaps/countdown-timer/index.scss
@@ -19,7 +19,7 @@
 
     &--warning {
       .countdown-timer__time {
-        color: var(--Red-500);
+        color: var(--color-error-default);
       }
     }
   }
diff --git a/ui/pages/swaps/searchable-item-list/index.scss b/ui/pages/swaps/searchable-item-list/index.scss
index 1c9a6ae3f..b65f221a8 100644
--- a/ui/pages/swaps/searchable-item-list/index.scss
+++ b/ui/pages/swaps/searchable-item-list/index.scss
@@ -202,7 +202,7 @@
   }
 
   &__item--highlighted {
-    background: var(--Grey-000);
+    background: var(--color-background-alternative);
   }
 
   &__identicon {
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 6adb8b0e8..a5b6d5cdf 100644
--- a/ui/pages/swaps/select-quote-popover/quote-details/index.scss
+++ b/ui/pages/swaps/select-quote-popover/quote-details/index.scss
@@ -7,7 +7,7 @@
   &__detail-header {
     @include H7;
 
-    color: var(--Grey-400);
+    color: var(--color-text-alternative);
     margin-bottom: 2px;
     display: flex;
   }
diff --git a/ui/pages/swaps/slippage-buttons/index.scss b/ui/pages/swaps/slippage-buttons/index.scss
index 644cb1610..ffedcfc11 100644
--- a/ui/pages/swaps/slippage-buttons/index.scss
+++ b/ui/pages/swaps/slippage-buttons/index.scss
@@ -120,7 +120,7 @@
 
     &--danger {
       input {
-        background: var(--Red-500);
+        background: var(--color-error-default);
       }
     }
   }
diff --git a/ui/pages/swaps/swaps-footer/index.scss b/ui/pages/swaps/swaps-footer/index.scss
index 4bd417389..6d5c72916 100644
--- a/ui/pages/swaps/swaps-footer/index.scss
+++ b/ui/pages/swaps/swaps-footer/index.scss
@@ -3,8 +3,8 @@
 
   &--warning {
     .btn-primary {
-      background: var(--Red-500);
-      border-color: var(--Red-500);
+      background: var(--color-error-default);
+      border-color: var(--color-error-default);
     }
   }
 
diff --git a/ui/pages/swaps/view-quote/index.scss b/ui/pages/swaps/view-quote/index.scss
index 5a4d1278f..80da6c9b5 100644
--- a/ui/pages/swaps/view-quote/index.scss
+++ b/ui/pages/swaps/view-quote/index.scss
@@ -45,7 +45,7 @@
 
     &--danger {
       span {
-        color: var(--Red-500);
+        color: var(--color-error-default);
       }
     }
   }
@@ -74,30 +74,30 @@
         .actionable-message {
           button {
             background: var(--color-primary-default);
-            color: #fff;
+            color: var(--color-primary-inverse);
           }
         }
       }
 
       &.medium {
         .actionable-message {
-          border-color: var(--Yellow-500);
-          background: var(--Yellow-100);
+          border-color: var(--color-warning-default);
+          background: var(--color-warning-muted);
 
           button {
-            background: var(--Yellow-500);
+            background: var(--color-warning-default);
           }
         }
       }
 
       &.high {
         .actionable-message {
-          border-color: var(--Red-300);
-          background: var(--Red-000);
+          border-color: var(--color-warning-default);
+          background: var(--color-warning-muted);
 
           button {
-            background: var(--Red-500);
-            color: #fff;
+            background: var(--color-warning-default);
+            color: var(--color-warning-inverse);
           }
         }
       }