diff --git a/ui/components/app/flask/snap-settings-card/snap-settings-card.js b/ui/components/app/flask/snap-settings-card/snap-settings-card.js
index 95afbc810..1cfde078b 100644
--- a/ui/components/app/flask/snap-settings-card/snap-settings-card.js
+++ b/ui/components/app/flask/snap-settings-card/snap-settings-card.js
@@ -33,10 +33,10 @@ const STATUSES = {
 };
 
 const STATUS_COLORS = {
-  [STATUSES.INSTALLING]: COLORS.ALERT1,
-  [STATUSES.RUNNING]: COLORS.SUCCESS1,
-  [STATUSES.STOPPED]: COLORS.UI4,
-  [STATUSES.CRASHED]: COLORS.ERROR1,
+  [STATUSES.INSTALLING]: COLORS.WARNING_DEFAULT,
+  [STATUSES.RUNNING]: COLORS.SUCCESS_DEFAULT,
+  [STATUSES.STOPPED]: COLORS.ICON_MUTED,
+  [STATUSES.CRASHED]: COLORS.ERROR_DEFAULT,
 };
 
 const SnapSettingsCard = ({
@@ -81,7 +81,7 @@ const SnapSettingsCard = ({
             marginTop: 0,
             marginBottom: 0,
           }}
-          color={COLORS.BLACK}
+          color={COLORS.TEXT_DEFAULT}
           variant={TYPOGRAPHY.H4}
           fontWeight={FONT_WEIGHT.BOLD}
           className="snap-settings-card__title"
@@ -101,7 +101,7 @@ const SnapSettingsCard = ({
       </Box>
       <Typography
         variant={TYPOGRAPHY.Paragraph}
-        color={COLORS.UI4}
+        color={COLORS.TEXT_ALTERNATIVE}
         fontWeight={FONT_WEIGHT.NORMAL}
         className="snap-settings-card__body"
         boxProps={{
@@ -141,10 +141,10 @@ const SnapSettingsCard = ({
                 }
                 label={status}
                 labelProps={{
-                  color: COLORS.UI4,
+                  color: COLORS.TEXT_ALTERNATIVE,
                   margin: [0, 1],
                 }}
-                backgroundColor={COLORS.UI1}
+                backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
                 className="snap-settings-card__chip"
                 {...chipProps}
               />
@@ -158,7 +158,7 @@ const SnapSettingsCard = ({
                 boxProps={{
                   margin: [0, 0],
                 }}
-                color={COLORS.UI3}
+                color={COLORS.TEXT_MUTED}
                 variant={TYPOGRAPHY.H8}
                 fontWeight={FONT_WEIGHT.NORMAL}
                 tag="span"
@@ -173,7 +173,7 @@ const SnapSettingsCard = ({
                   paddingLeft: 2,
                   margin: [0, 0],
                 }}
-                color={COLORS.UI4}
+                color={COLORS.TEXT_MUTED}
                 variant={TYPOGRAPHY.H7}
                 fontWeight={FONT_WEIGHT.NORMAL}
                 align={TEXT_ALIGN.CENTER}
diff --git a/ui/components/app/flask/snaps-authorship-pill/index.scss b/ui/components/app/flask/snaps-authorship-pill/index.scss
index 6a9b0c15e..a67d876d7 100644
--- a/ui/components/app/flask/snaps-authorship-pill/index.scss
+++ b/ui/components/app/flask/snaps-authorship-pill/index.scss
@@ -6,11 +6,11 @@
   &:hover,
   &:focus {
     .chip {
-      background-color: var(--ui-1);
+      background-color: var(--color-background-alternative);
     }
   }
 }
 
 .snaps-authorship-icon {
-  color: var(--ui-4);
+  color: var(--color-icon-default);
 }
diff --git a/ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.js b/ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.js
index 584c3c686..6625694b7 100644
--- a/ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.js
+++ b/ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.js
@@ -23,13 +23,13 @@ const SnapsAuthorshipPill = ({ packageName, className, url }) => {
             <i className="fab fa-npm fa-lg snaps-authorship-icon" />
           </Box>
         }
-        backgroundColor={COLORS.WHITE}
+        backgroundColor={COLORS.BACKGROUND_DEFAULT}
       >
         <Typography
           className="chip__label"
           variant={TYPOGRAPHY.H7}
           tag="span"
-          color={COLORS.UI4}
+          color={COLORS.TEXT_ALTERNATIVE}
         >
           {packageName}
         </Typography>
diff --git a/ui/components/ui/box/box.js b/ui/components/ui/box/box.js
index 91d0e8817..73dbb37fe 100644
--- a/ui/components/ui/box/box.js
+++ b/ui/components/ui/box/box.js
@@ -30,6 +30,80 @@ const ValidSize = PropTypes.oneOf([
   12,
   'auto',
 ]);
+
+export const ValidBackgroundColors = [
+  COLORS.BACKGROUND_DEFAULT,
+  COLORS.BACKGROUND_ALTERNATIVE,
+  COLORS.OVERLAY_DEFAULT,
+  COLORS.PRIMARY_DEFAULT,
+  COLORS.PRIMARY_ALTERNATIVE,
+  COLORS.PRIMARY_MUTED,
+  COLORS.PRIMARY_DISABLED,
+  COLORS.SECONDARY_DEFAULT,
+  COLORS.SECONDARY_ALTERNATIVE,
+  COLORS.SECONDARY_MUTED,
+  COLORS.SECONDARY_DISABLED,
+  COLORS.ERROR_DEFAULT,
+  COLORS.ERROR_ALTERNATIVE,
+  COLORS.ERROR_MUTED,
+  COLORS.ERROR_DISABLED,
+  COLORS.WARNING_DEFAULT,
+  COLORS.WARNING_ALTERNATIVE,
+  COLORS.WARNING_MUTED,
+  COLORS.WARNING_DISABLED,
+  COLORS.SUCCESS_DEFAULT,
+  COLORS.SUCCESS_ALTERNATIVE,
+  COLORS.SUCCESS_MUTED,
+  COLORS.SUCCESS_DISABLED,
+  COLORS.INFO_DEFAULT,
+  COLORS.INFO_ALTERNATIVE,
+  COLORS.INFO_MUTED,
+  COLORS.INFO_DISABLED,
+  COLORS.MAINNET,
+  COLORS.ROPSTEN,
+  COLORS.KOVAN,
+  COLORS.RINKEBY,
+  COLORS.GOERLI,
+  COLORS.TRANSPARENT,
+  COLORS.LOCALHOST,
+];
+
+export const ValidBorderColors = [
+  COLORS.BORDER_DEFAULT,
+  COLORS.BORDER_MUTED,
+  COLORS.PRIMARY_DEFAULT,
+  COLORS.PRIMARY_ALTERNATIVE,
+  COLORS.PRIMARY_MUTED,
+  COLORS.PRIMARY_DISABLED,
+  COLORS.SECONDARY_DEFAULT,
+  COLORS.SECONDARY_ALTERNATIVE,
+  COLORS.SECONDARY_MUTED,
+  COLORS.SECONDARY_DISABLED,
+  COLORS.ERROR_DEFAULT,
+  COLORS.ERROR_ALTERNATIVE,
+  COLORS.ERROR_MUTED,
+  COLORS.ERROR_DISABLED,
+  COLORS.WARNING_DEFAULT,
+  COLORS.WARNING_ALTERNATIVE,
+  COLORS.WARNING_MUTED,
+  COLORS.WARNING_DISABLED,
+  COLORS.SUCCESS_DEFAULT,
+  COLORS.SUCCESS_ALTERNATIVE,
+  COLORS.SUCCESS_MUTED,
+  COLORS.SUCCESS_DISABLED,
+  COLORS.INFO_DEFAULT,
+  COLORS.INFO_ALTERNATIVE,
+  COLORS.INFO_MUTED,
+  COLORS.INFO_DISABLED,
+  COLORS.MAINNET,
+  COLORS.ROPSTEN,
+  COLORS.KOVAN,
+  COLORS.RINKEBY,
+  COLORS.GOERLI,
+  COLORS.TRANSPARENT,
+  COLORS.LOCALHOST,
+];
+
 const ArrayOfValidSizes = PropTypes.arrayOf(ValidSize);
 export const MultipleSizes = PropTypes.oneOfType([
   ValidSize,
@@ -180,7 +254,7 @@ Box.propTypes = {
   paddingBottom: ValidSize,
   paddingRight: ValidSize,
   paddingLeft: ValidSize,
-  borderColor: PropTypes.oneOf(Object.values(COLORS)),
+  borderColor: PropTypes.oneOf(Object.values(ValidBorderColors)),
   borderWidth: PropTypes.number,
   borderRadius: PropTypes.oneOf(Object.values(SIZES)),
   borderStyle: PropTypes.oneOf(Object.values(BORDER_STYLE)),
@@ -190,6 +264,6 @@ Box.propTypes = {
   display: PropTypes.oneOf(Object.values(DISPLAY)),
   width: PropTypes.oneOf(Object.values(BLOCK_SIZES)),
   height: PropTypes.oneOf(Object.values(BLOCK_SIZES)),
-  backgroundColor: PropTypes.oneOf(Object.values(COLORS)),
+  backgroundColor: PropTypes.oneOf(Object.values(ValidBackgroundColors)),
   className: PropTypes.string,
 };
diff --git a/ui/components/ui/box/box.stories.js b/ui/components/ui/box/box.stories.js
index a342ecd4d..7044e48e7 100644
--- a/ui/components/ui/box/box.stories.js
+++ b/ui/components/ui/box/box.stories.js
@@ -10,9 +10,11 @@ import {
 } from '../../../helpers/constants/design-system';
 
 import Typography from '../typography';
+
 import Box from './box';
 
 import README from './README.mdx';
+import { ValidBackgroundColors, ValidBorderColors } from '.';
 
 const sizeKnobOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 const marginSizeKnobOptions = [...sizeKnobOptions, 'auto'];
@@ -56,14 +58,14 @@ export default {
       table: { category: 'display' },
     },
     backgroundColor: {
-      options: Object.values(COLORS),
+      options: ValidBackgroundColors,
       control: 'select',
       table: {
         category: 'background',
       },
     },
     borderColor: {
-      options: Object.values(COLORS),
+      options: ValidBorderColors,
       control: 'select',
       defaultValue: COLORS.BORDER_DEFAULT,
       table: { category: 'border' },
diff --git a/ui/components/ui/box/index.js b/ui/components/ui/box/index.js
index c95505f0b..e599a9a98 100644
--- a/ui/components/ui/box/index.js
+++ b/ui/components/ui/box/index.js
@@ -1 +1,6 @@
-export { default, MultipleSizes } from './box';
+export {
+  default,
+  MultipleSizes,
+  ValidBackgroundColors,
+  ValidBorderColors,
+} from './box';
diff --git a/ui/components/ui/callout/callout.js b/ui/components/ui/callout/callout.js
index bba3efdf6..a04a4d30b 100644
--- a/ui/components/ui/callout/callout.js
+++ b/ui/components/ui/callout/callout.js
@@ -2,8 +2,9 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import InfoIconInverted from '../icon/info-icon-inverted.component';
-import { SEVERITIES } from '../../../helpers/constants/design-system';
+import { SEVERITIES, COLORS } from '../../../helpers/constants/design-system';
 import { MILLISECOND } from '../../../../shared/constants/time';
+import Typography from '../typography';
 
 export default function Callout({
   severity,
@@ -36,7 +37,9 @@ export default function Callout({
   return (
     <div className={calloutClassName}>
       <InfoIconInverted severity={severity} />
-      <div className="callout__content">{children}</div>
+      <Typography color={COLORS.TEXT_DEFAULT} className="callout__content">
+        {children}
+      </Typography>
       {dismiss && (
         <i
           onClick={() => {
diff --git a/ui/components/ui/callout/callout.scss b/ui/components/ui/callout/callout.scss
index c73ed31ad..ae19d8304 100644
--- a/ui/components/ui/callout/callout.scss
+++ b/ui/components/ui/callout/callout.scss
@@ -10,12 +10,12 @@
   transition: opacity 0.75s 0s;
 
   a {
-    color: var(--primary-1);
+    color: var(--color-primary-default);
   }
 
   &--dismissible {
     &#{$self}--first {
-      box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.18);
+      box-shadow: 0 -5px 5px -5px var(--color-overlay-default);
     }
   }
 
@@ -37,19 +37,19 @@
   }
 
   &--warning {
-    border-left: 2px solid var(--alert-1);
+    border-left: 2px solid var(--color-warning-default);
   }
 
   &--danger {
-    border-left: 2px solid var(--error-1);
+    border-left: 2px solid var(--color-error-default);
   }
 
   &--info {
-    border-left: 2px solid var(--primary-1);
+    border-left: 2px solid var(--color-info-default);
   }
 
   &--success {
-    border-left: 2px solid var(--success-1);
+    border-left: 2px solid var(--color-success-default);
   }
 
   & .info-icon {
diff --git a/ui/components/ui/callout/callout.stories.js b/ui/components/ui/callout/callout.stories.js
index 8ee2eaadc..94ec67d92 100644
--- a/ui/components/ui/callout/callout.stories.js
+++ b/ui/components/ui/callout/callout.stories.js
@@ -22,7 +22,7 @@ export default {
 };
 
 export const PersistentCallout = (args) => (
-  <Box borderColor={COLORS.UI2} padding={[8, 0, 0, 0]}>
+  <Box borderColor={COLORS.BORDER_DEFAULT} padding={[8, 0, 0, 0]}>
     <Box margin={2}>
       <Typography variant={TYPOGRAPHY.H4}>This is your private key:</Typography>
       <Typography variant={TYPOGRAPHY.H6}>
@@ -36,7 +36,7 @@ export const PersistentCallout = (args) => (
 export const DismissibleCallout = (args) => {
   const [dismissed, setDismissed] = useState(false);
   return (
-    <Box borderColor={COLORS.UI2} padding={[8, 0, 0, 0]}>
+    <Box borderColor={COLORS.BORDER_DEFAULT} padding={[8, 0, 0, 0]}>
       <Box margin={2}>
         <Typography variant={TYPOGRAPHY.H4}>
           This is your private key:
@@ -81,7 +81,7 @@ export const MultipleDismissibleCallouts = () => {
   };
 
   return (
-    <Box borderColor={COLORS.UI2} padding={[8, 0, 0, 0]}>
+    <Box borderColor={COLORS.BORDER_DEFAULT} padding={[8, 0, 0, 0]}>
       <Box margin={2}>
         <Typography variant={TYPOGRAPHY.H4}>
           This is your private key:
diff --git a/ui/components/ui/card/README.mdx b/ui/components/ui/card/README.mdx
index 88110ef1d..ddbe0eba2 100644
--- a/ui/components/ui/card/README.mdx
+++ b/ui/components/ui/card/README.mdx
@@ -38,5 +38,5 @@ import { COLORS } from '../../../helpers/constants/design-system';
 // All padding related props of the Box component will work
 
 // To change the background color
-<Card backgroundColor={COLORS.UI4} />
+<Card backgroundColor={COLORS.BACKGROUND_ALTERNATIVE} />
 ```
diff --git a/ui/components/ui/card/card.js b/ui/components/ui/card/card.js
index fc1beafaf..e4ecce4b0 100644
--- a/ui/components/ui/card/card.js
+++ b/ui/components/ui/card/card.js
@@ -11,12 +11,12 @@ import {
 const Card = ({
   border = true,
   padding = 4,
-  backgroundColor = COLORS.WHITE,
+  backgroundColor = COLORS.BACKGROUND_DEFAULT,
   children,
   ...props
 }) => {
   const defaultBorderProps = {
-    borderColor: border && COLORS.UI2,
+    borderColor: border && COLORS.BORDER_MUTED,
     borderRadius: border && SIZES.MD,
     borderStyle: border && BORDER_STYLE.SOLID,
   };
diff --git a/ui/components/ui/chip/chip-with-input.js b/ui/components/ui/chip/chip-with-input.js
index 8a5e30cc9..d50c0a4bd 100644
--- a/ui/components/ui/chip/chip-with-input.js
+++ b/ui/components/ui/chip/chip-with-input.js
@@ -7,7 +7,7 @@ import Chip from '.';
 export function ChipWithInput({
   dataTestId,
   className,
-  borderColor = COLORS.UI1,
+  borderColor = COLORS.BORDER_DEFAULT,
   inputValue,
   setInputValue,
 }) {
diff --git a/ui/components/ui/chip/chip.js b/ui/components/ui/chip/chip.js
index f84534535..21b4fe13f 100644
--- a/ui/components/ui/chip/chip.js
+++ b/ui/components/ui/chip/chip.js
@@ -9,7 +9,7 @@ export default function Chip({
   dataTestId,
   className,
   children,
-  borderColor = COLORS.UI1,
+  borderColor = COLORS.BORDER_DEFAULT,
   backgroundColor,
   label,
   labelProps = {},
@@ -47,7 +47,7 @@ export default function Chip({
           className="chip__label"
           variant={TYPOGRAPHY.H6}
           tag="span"
-          color={COLORS.UI4}
+          color={COLORS.TEXT_ALTERNATIVE}
           {...labelProps}
         >
           {label}
diff --git a/ui/components/ui/chip/chip.scss b/ui/components/ui/chip/chip.scss
index 5951a0fa2..7eba44619 100644
--- a/ui/components/ui/chip/chip.scss
+++ b/ui/components/ui/chip/chip.scss
@@ -4,7 +4,7 @@
   $self: &;
 
   border-radius: 100px;
-  border: 1px solid var(--ui-1);
+  border: 1px solid var(--color-border-default);
   padding: 8px 16px;
   margin: 0 4px;
   display: flex;
@@ -46,6 +46,7 @@
     text-align: center;
     width: 100%;
     font-size: design-system.$font-size-h5;
+    color: var(--color-text-default);
 
     &:focus {
       text-align: left;
diff --git a/ui/components/ui/chip/chip.stories.js b/ui/components/ui/chip/chip.stories.js
index fd6f960c5..e2afd944a 100644
--- a/ui/components/ui/chip/chip.stories.js
+++ b/ui/components/ui/chip/chip.stories.js
@@ -1,8 +1,13 @@
 import React, { useState } from 'react';
 
-import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
+import {
+  COLORS,
+  TYPOGRAPHY,
+  SEVERITIES,
+} from '../../../helpers/constants/design-system';
 
 import ApproveIcon from '../icon/approve-icon.component';
+import InfoIcon from '../icon/info-icon.component';
 import Identicon from '../identicon/identicon.component';
 import { ChipWithInput } from './chip-with-input';
 
@@ -26,7 +31,9 @@ export default {
       },
       options: ['ApproveIcon'],
       mapping: {
-        ApproveIcon: <ApproveIcon size={24} color="#4cd964" />,
+        ApproveIcon: (
+          <ApproveIcon size={24} color="var(--color-success-default)" />
+        ),
       },
     },
     rightIcon: {
@@ -86,10 +93,10 @@ DefaultStory.storyName = 'Default';
 
 DefaultStory.args = {
   label: 'Chip',
-  borderColor: COLORS.UI3,
-  backgroundColor: COLORS.UI1,
+  borderColor: COLORS.BORDER_DEFAULT,
+  backgroundColor: COLORS.BACKGROUND_ALTERNATIVE,
   labelProps: {
-    color: COLORS.BLACK,
+    color: COLORS.TEXT_DEFAULT,
     variant: TYPOGRAPHY.H6,
   },
 };
@@ -97,15 +104,15 @@ DefaultStory.args = {
 export const WithLeftIcon = () => (
   <Chip
     label="Done!"
-    borderColor={COLORS.SUCCESS3}
-    leftIcon={<ApproveIcon size={24} color="#4cd964" />}
+    borderColor={COLORS.SUCCESS_DEFAULT}
+    leftIcon={<ApproveIcon size={24} color="var(--color-success-default)" />}
   />
 );
 
 export const WithRightIcon = () => (
   <Chip
     label="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
-    borderColor={COLORS.UI4}
+    borderColor={COLORS.BORDER_DEFAULT}
     rightIcon={
       <Identicon
         address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
@@ -118,21 +125,8 @@ export const WithRightIcon = () => (
 export const WithBothIcons = () => (
   <Chip
     label="Account 1"
-    borderColor={COLORS.UI4}
-    rightIcon={
-      <svg
-        width="10"
-        height="6"
-        viewBox="0 0 10 6"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M9.45759 0.857142C9.45759 0.785714 9.42188 0.705357 9.3683 0.651785L8.92188 0.205357C8.8683 0.151785 8.78795 0.116071 8.71652 0.116071C8.64509 0.116071 8.56473 0.151785 8.51116 0.205357L5.00223 3.71429L1.4933 0.205357C1.43973 0.151785 1.35938 0.116071 1.28795 0.116071C1.20759 0.116071 1.13616 0.151785 1.08259 0.205357L0.636161 0.651785C0.582589 0.705357 0.546875 0.785714 0.546875 0.857142C0.546875 0.928571 0.582589 1.00893 0.636161 1.0625L4.79688 5.22321C4.85045 5.27679 4.9308 5.3125 5.00223 5.3125C5.07366 5.3125 5.15402 5.27679 5.20759 5.22321L9.3683 1.0625C9.42188 1.00893 9.45759 0.928571 9.45759 0.857142Z"
-          fill="#24292E"
-        />
-      </svg>
-    }
+    borderColor={COLORS.BORDER_DEFAULT}
+    rightIcon={<InfoIcon size={24} severity={SEVERITIES.INFO} />}
     leftIcon={
       <Identicon
         address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
@@ -153,5 +147,5 @@ export const WithInput = (args) => {
 };
 
 WithInput.args = {
-  borderColor: COLORS.UI3,
+  borderColor: COLORS.BORDER_DEFAULT,
 };
diff --git a/ui/components/ui/icon/index.scss b/ui/components/ui/icon/index.scss
index d05d6a433..1cdc11f90 100644
--- a/ui/components/ui/icon/index.scss
+++ b/ui/components/ui/icon/index.scss
@@ -2,18 +2,18 @@
   margin: 0 4px;
 
   &--success {
-    fill: var(--success-1);
+    fill: var(--color-success-default);
   }
 
   &--info {
-    fill: var(--primary-1);
+    fill: var(--color-primary-default);
   }
 
   &--warning {
-    fill: var(--alert-3);
+    fill: var(--color-warning-default);
   }
 
   &--danger {
-    fill: var(--error-1);
+    fill: var(--color-error-default);
   }
 }
diff --git a/ui/components/ui/textarea/index.scss b/ui/components/ui/textarea/index.scss
index 1d84362be..7e9c97925 100644
--- a/ui/components/ui/textarea/index.scss
+++ b/ui/components/ui/textarea/index.scss
@@ -3,7 +3,7 @@
 .textarea {
   display: block;
   box-shadow: none;
-  color: var(--black);
+  color: var(--color-text-default);
 
   @include design-system.H6;
 
diff --git a/ui/components/ui/textarea/textarea.js b/ui/components/ui/textarea/textarea.js
index e51f715a0..e20f45052 100644
--- a/ui/components/ui/textarea/textarea.js
+++ b/ui/components/ui/textarea/textarea.js
@@ -34,7 +34,8 @@ const TextArea = ({
   );
   return (
     <Box
-      borderColor={COLORS.UI3}
+      backgroundColor={COLORS.BACKGROUND_DEFAULT}
+      borderColor={COLORS.BORDER_DEFAULT}
       borderRadius={SIZES.SM}
       borderStyle={BORDER_STYLE.SOLID}
       padding={[4, 4]}
diff --git a/ui/components/ui/truncated-definition-list/truncated-definition-list.js b/ui/components/ui/truncated-definition-list/truncated-definition-list.js
index f7354cffd..78b5c3f48 100644
--- a/ui/components/ui/truncated-definition-list/truncated-definition-list.js
+++ b/ui/components/ui/truncated-definition-list/truncated-definition-list.js
@@ -24,7 +24,7 @@ export default function TruncatedDefinitionList({
         padding={4}
         paddingBottom={3}
         borderRadius={SIZES.LG}
-        borderColor={COLORS.UI2}
+        borderColor={COLORS.BORDER_MUTED}
       >
         <DefinitionList
           dictionary={pick(dictionary, prefaceKeys)}
diff --git a/ui/components/ui/typography/typography.js b/ui/components/ui/typography/typography.js
index 8c9e4e272..c04666aa6 100644
--- a/ui/components/ui/typography/typography.js
+++ b/ui/components/ui/typography/typography.js
@@ -16,7 +16,7 @@ const { H6, H7, H8, H9 } = TYPOGRAPHY;
 export default function Typography({
   variant = TYPOGRAPHY.Paragraph,
   className,
-  color = COLORS.BLACK,
+  color = COLORS.TEXT_DEFAULT,
   tag,
   children,
   fontWeight = 'normal',
diff --git a/ui/pages/first-time-flow/seed-phrase/seed-phrase-intro/seed-phrase-intro.component.js b/ui/pages/first-time-flow/seed-phrase/seed-phrase-intro/seed-phrase-intro.component.js
index 0930eb995..9fbdc0115 100644
--- a/ui/pages/first-time-flow/seed-phrase/seed-phrase-intro/seed-phrase-intro.component.js
+++ b/ui/pages/first-time-flow/seed-phrase/seed-phrase-intro/seed-phrase-intro.component.js
@@ -87,7 +87,7 @@ export default function SeedPhraseIntro() {
             padding={4}
             borderWidth={1}
             borderRadius={SIZES.MD}
-            borderColor={COLORS.UI2}
+            borderColor={COLORS.BORDER_MUTED}
             borderStyle={BORDER_STYLE.SOLID}
           >
             <Box marginBottom={4}>
diff --git a/ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js b/ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js
index 558becb5a..96ccc9379 100644
--- a/ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js
+++ b/ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js
@@ -26,7 +26,7 @@ export default function RecoveryPhraseChips({
   const hideSeedPhrase = phraseRevealed === false;
   return (
     <Box
-      borderColor={COLORS.UI2}
+      borderColor={COLORS.BORDER_MUTED}
       borderStyle={BORDER_STYLE.SOLID}
       padding={4}
       borderWidth={1}
@@ -54,7 +54,7 @@ export default function RecoveryPhraseChips({
                 </div>
                 <ChipWithInput
                   dataTestId={`recovery-phrase-input-${index}`}
-                  borderColor={COLORS.PRIMARY1}
+                  borderColor={COLORS.PRIMARY_DEFAULT}
                   className="recovery-phrase__chip--with-input"
                   inputValue={inputValue[index]}
                   setInputValue={(value) => {
@@ -72,7 +72,7 @@ export default function RecoveryPhraseChips({
               <Chip
                 dataTestId={`recovery-phrase-chip-${index}`}
                 className="recovery-phrase__chip"
-                borderColor={COLORS.UI3}
+                borderColor={COLORS.BORDER_DEFAULT}
               >
                 {word}
               </Chip>