diff --git a/ui/components/app/connected-status-indicator/connected-status-indicator.js b/ui/components/app/connected-status-indicator/connected-status-indicator.js
index 5a45880b0..e005cb840 100644
--- a/ui/components/app/connected-status-indicator/connected-status-indicator.js
+++ b/ui/components/app/connected-status-indicator/connected-status-indicator.js
@@ -37,7 +37,7 @@ export default function ConnectedStatusIndicator({ onClick }) {
   }
 
   let indicatorType = ColorIndicator.TYPES.OUTLINE;
-  let indicatorColor = COLORS.INFO_DEFAULT;
+  let indicatorColor = COLORS.ICON_DEFAULT;
 
   if (status === STATUS_CONNECTED) {
     indicatorColor = COLORS.SUCCESS_DEFAULT;
diff --git a/ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js b/ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js
index 9abcb9707..9e1aec0b0 100644
--- a/ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js
+++ b/ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js
@@ -22,7 +22,7 @@ const SECTIONS = {
       key: 'A Test String',
       children: 'A Test String',
       props: {
-        color: COLORS.UI3,
+        color: COLORS.TEXT_MUTED,
         variant: TYPOGRAPHY.H2,
       },
     },
@@ -31,7 +31,7 @@ const SECTIONS = {
       key: 'Some more text',
       children: 'Some more text as a paragraph',
       props: {
-        color: COLORS.UI4,
+        color: COLORS.TEXT_ALTERNATIVE,
         variant: TYPOGRAPHY.Paragraph,
       },
     },
diff --git a/ui/components/app/network-display/network-display.js b/ui/components/app/network-display/network-display.js
index 29e90ff3d..c158250dc 100644
--- a/ui/components/app/network-display/network-display.js
+++ b/ui/components/app/network-display/network-display.js
@@ -40,7 +40,7 @@ export default function NetworkDisplay({
 
   return (
     <Chip
-      borderColor={outline ? COLORS.UI3 : COLORS.TRANSPARENT}
+      borderColor={outline ? COLORS.BORDER_MUTED : COLORS.TRANSPARENT}
       onClick={onClick}
       leftIcon={
         <LoadingIndicator
@@ -49,7 +49,11 @@ export default function NetworkDisplay({
           isLoading={networkIsLoading}
         >
           <ColorIndicator
-            color={networkType === NETWORK_TYPE_RPC ? COLORS.UI4 : networkType}
+            color={
+              networkType === NETWORK_TYPE_RPC
+                ? COLORS.ICON_DEFAULT
+                : networkType
+            }
             size={indicatorSize}
             type={ColorIndicator.TYPES.FILLED}
             iconClassName={
diff --git a/ui/components/ui/box/README.mdx b/ui/components/ui/box/README.mdx
index caaa787cb..ec188ab49 100644
--- a/ui/components/ui/box/README.mdx
+++ b/ui/components/ui/box/README.mdx
@@ -98,13 +98,6 @@ List of deprecated background and border color props that are not theme compatib
 
 ```js
 /** !!! DEPRECATED DO NOT USE!!! */
-UI1: 'ui-1',
-UI2: 'ui-2',
-UI3: 'ui-3',
-UI4: 'ui-4',
-GREY: 'grey',
-NEUTRAL_GREY: 'neutral-grey',
-WHITE: 'white',
 PRIMARY1: 'primary-1',
 PRIMARY3: 'primary-3',
 SECONDARY1: 'secondary-1',
diff --git a/ui/components/ui/card/card.js b/ui/components/ui/card/card.js
index e4ecce4b0..d77d92081 100644
--- a/ui/components/ui/card/card.js
+++ b/ui/components/ui/card/card.js
@@ -48,7 +48,7 @@ Card.propTypes = {
   padding: Box.propTypes.padding,
   /**
    * The background color of the card
-   * Defaults to COLORS.WHITE
+   * Defaults to COLORS.BACKGROUND_DEFAULT
    */
   backgroundColor: Box.propTypes.backgroundColor,
   /**
diff --git a/ui/components/ui/card/card.stories.js b/ui/components/ui/card/card.stories.js
index 3fe77495c..06ca63cde 100644
--- a/ui/components/ui/card/card.stories.js
+++ b/ui/components/ui/card/card.stories.js
@@ -162,8 +162,8 @@ DefaultStory.args = {
   padding: 4,
   border: true,
   borderWidth: 1,
-  borderColor: COLORS.UI2,
+  borderColor: COLORS.BORDER_DEFAULT,
   borderStyle: BORDER_STYLE.SOLID,
-  backgroundColor: COLORS.WHITE,
+  backgroundColor: COLORS.BACKGROUND_DEFAULT,
   display: DISPLAY.BLOCK,
 };
diff --git a/ui/components/ui/color-indicator/color-indicator.js b/ui/components/ui/color-indicator/color-indicator.js
index 71e15706f..00cf3932d 100644
--- a/ui/components/ui/color-indicator/color-indicator.js
+++ b/ui/components/ui/color-indicator/color-indicator.js
@@ -6,7 +6,7 @@ import { COLORS, SIZES } from '../../../helpers/constants/design-system';
 export default function ColorIndicator({
   size = SIZES.SM,
   type = 'outlined',
-  color = COLORS.UI4,
+  color = COLORS.ICON_DEFAULT,
   borderColor,
   iconClassName,
 }) {
diff --git a/ui/components/ui/textarea/textarea.stories.js b/ui/components/ui/textarea/textarea.stories.js
index 1637c0c55..271549816 100644
--- a/ui/components/ui/textarea/textarea.stories.js
+++ b/ui/components/ui/textarea/textarea.stories.js
@@ -73,7 +73,7 @@ DefaultStory.args = {
   resize: RESIZE.BOTH,
   scrollable: false,
   boxProps: {
-    borderColor: COLORS.UI3,
+    borderColor: COLORS.BORDER_MUTED,
     borderRadius: SIZES.SM,
     borderStyle: BORDER_STYLE.SOLID,
     padding: [2, 4],
diff --git a/ui/components/ui/textarea/textarea.test.js b/ui/components/ui/textarea/textarea.test.js
index e1e5b61d5..2f6198e14 100644
--- a/ui/components/ui/textarea/textarea.test.js
+++ b/ui/components/ui/textarea/textarea.test.js
@@ -20,7 +20,7 @@ describe('TextArea', () => {
       resize: RESIZE.BOTH,
       scrollable: false,
       boxProps: {
-        borderColor: COLORS.UI3,
+        borderColor: COLORS.BORDER_MUTED,
         borderRadius: SIZES.SM,
         borderStyle: BORDER_STYLE.SOLID,
         padding: [2, 4],
diff --git a/ui/components/ui/typography/README.mdx b/ui/components/ui/typography/README.mdx
index 3677acef5..afdc9eff1 100644
--- a/ui/components/ui/typography/README.mdx
+++ b/ui/components/ui/typography/README.mdx
@@ -114,13 +114,6 @@ List of deprecated color props that are not theme compatible and should not be u
 
 ```js
 /** !!! DEPRECATED DO NOT USE!!! */
-UI1: 'ui-1',
-UI2: 'ui-2',
-UI3: 'ui-3',
-UI4: 'ui-4',
-GREY: 'grey',
-NEUTRAL_GREY: 'neutral-grey',
-WHITE: 'white',
 PRIMARY1: 'primary-1',
 PRIMARY3: 'primary-3',
 SECONDARY1: 'secondary-1',
diff --git a/ui/components/ui/typography/typography.js b/ui/components/ui/typography/typography.js
index c597bad6d..8c5792e0e 100644
--- a/ui/components/ui/typography/typography.js
+++ b/ui/components/ui/typography/typography.js
@@ -32,13 +32,6 @@ export const ValidColors = [
   /**
    * COLORS BELOW HAVE BEEN DEPRECATED
    */
-  COLORS.UI1,
-  COLORS.UI2,
-  COLORS.UI3,
-  COLORS.UI4,
-  COLORS.GREY,
-  COLORS.NEUTRAL_GREY,
-  COLORS.WHITE,
   COLORS.PRIMARY1,
   COLORS.PRIMARY3,
   COLORS.SECONDARY1,
diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js
index e00343df0..b6a094542 100644
--- a/ui/helpers/constants/design-system.js
+++ b/ui/helpers/constants/design-system.js
@@ -56,13 +56,6 @@ export const COLORS = {
   /**
    * !!! DEPRECATED DO NOT USE!!!
    */
-  UI1: 'ui-1',
-  UI2: 'ui-2',
-  UI3: 'ui-3',
-  UI4: 'ui-4',
-  GREY: 'grey',
-  NEUTRAL_GREY: 'neutral-grey',
-  WHITE: 'white',
   PRIMARY1: 'primary-1',
   PRIMARY3: 'primary-3',
   SECONDARY1: 'secondary-1',