diff --git a/ui/components/app/add-network/add-network.js b/ui/components/app/add-network/add-network.js
index 801539068..0bc911fed 100644
--- a/ui/components/app/add-network/add-network.js
+++ b/ui/components/app/add-network/add-network.js
@@ -42,7 +42,7 @@ const AddNetwork = ({
           onClick={onBackClick}
           className="add-network__header__back-icon"
         />
-        <Typography variant={TYPOGRAPHY.H3} color={COLORS.BLACK}>
+        <Typography variant={TYPOGRAPHY.H3} color={COLORS.TEXT_DEFAULT}>
           {t('addNetwork')}
         </Typography>
       </Box>
@@ -53,14 +53,14 @@ const AddNetwork = ({
       >
         <Typography
           variant={TYPOGRAPHY.H6}
-          color={COLORS.UI4}
+          color={COLORS.TEXT_ALTERNATIVE}
           margin={[4, 0, 0, 0]}
         >
           {t('addFromAListOfPopularNetworks')}
         </Typography>
         <Typography
           variant={TYPOGRAPHY.H7}
-          color={COLORS.UI3}
+          color={COLORS.TEXT_MUTED}
           margin={[4, 0, 3, 0]}
         >
           {t('customNetworks')}
@@ -77,7 +77,7 @@ const AddNetwork = ({
               src={item?.rpcPrefs?.imageUrl}
               alt={t('logo', [item.ticker])}
             />
-            <Typography variant={TYPOGRAPHY.H7} color={COLORS.BLACK}>
+            <Typography variant={TYPOGRAPHY.H7} color={COLORS.TEXT_DEFAULT}>
               {item.ticker}
             </Typography>
             <img
@@ -95,7 +95,7 @@ const AddNetwork = ({
         className="add-network__footer"
       >
         <Button type="link" onClick={onAddNetworkManuallyClick}>
-          <Typography variant={TYPOGRAPHY.H6} color={COLORS.PRIMARY1}>
+          <Typography variant={TYPOGRAPHY.H6} color={COLORS.PRIMARY_DEFAULT}>
             {t('addANetworkManually')}
           </Typography>
         </Button>
diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
index cd21dd340..beefff4fa 100644
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js
@@ -88,7 +88,11 @@ const AdvancedGasFeeDefaults = () => {
           onClick={handleUpdateDefaultSettings}
           disabled={gasErrors.maxFeePerGas || gasErrors.maxPriorityFeePerGas}
         />
-        <Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4} margin={0}>
+        <Typography
+          variant={TYPOGRAPHY.H7}
+          color={COLORS.TEXT_ALTERNATIVE}
+          margin={0}
+        >
           {isDefaultSettingsSelected
             ? t('advancedGasFeeDefaultOptOut')
             : t('advancedGasFeeDefaultOptIn', [
diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js
index 193b22619..c0b1347d0 100644
--- a/ui/components/app/asset-list/asset-list.js
+++ b/ui/components/app/asset-list/asset-list.js
@@ -100,7 +100,7 @@ const AssetList = ({ onClickAsset }) => {
       <Box marginTop={4}>
         <Box justifyContent={JUSTIFY_CONTENT.CENTER}>
           <Typography
-            color={COLORS.UI4}
+            color={COLORS.TEXT_ALTERNATIVE}
             variant={TYPOGRAPHY.H6}
             fontWeight={FONT_WEIGHT.NORMAL}
           >
diff --git a/ui/components/app/collectible-details/collectible-details.js b/ui/components/app/collectible-details/collectible-details.js
index 9217a61e4..be538d852 100644
--- a/ui/components/app/collectible-details/collectible-details.js
+++ b/ui/components/app/collectible-details/collectible-details.js
@@ -184,7 +184,7 @@ export default function CollectibleDetails({ collectible }) {
           >
             <div>
               <Typography
-                color={COLORS.BLACK}
+                color={COLORS.TEXT_DEFAULT}
                 variant={TYPOGRAPHY.H4}
                 fontWeight={FONT_WEIGHT.BOLD}
                 boxProps={{ margin: 0, marginBottom: 2 }}
@@ -192,7 +192,7 @@ export default function CollectibleDetails({ collectible }) {
                 {name}
               </Typography>
               <Typography
-                color={COLORS.UI3}
+                color={COLORS.TEXT_MUTED}
                 variant={TYPOGRAPHY.H5}
                 boxProps={{ margin: 0, marginBottom: 4 }}
                 overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
@@ -203,7 +203,7 @@ export default function CollectibleDetails({ collectible }) {
             {description ? (
               <div>
                 <Typography
-                  color={COLORS.BLACK}
+                  color={COLORS.TEXT_DEFAULT}
                   variant={TYPOGRAPHY.H6}
                   fontWeight={FONT_WEIGHT.BOLD}
                   className="collectible-details__description"
@@ -212,7 +212,7 @@ export default function CollectibleDetails({ collectible }) {
                   {t('description')}
                 </Typography>
                 <Typography
-                  color={COLORS.UI4}
+                  color={COLORS.TEXT_ALTERNATIVE}
                   variant={TYPOGRAPHY.H6}
                   boxProps={{ margin: 0, marginBottom: 4 }}
                 >
@@ -226,7 +226,7 @@ export default function CollectibleDetails({ collectible }) {
         <Box marginBottom={2}>
           <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
             <Typography
-              color={COLORS.BLACK}
+              color={COLORS.TEXT_DEFAULT}
               variant={TYPOGRAPHY.H6}
               fontWeight={FONT_WEIGHT.BOLD}
               boxProps={{
@@ -239,7 +239,7 @@ export default function CollectibleDetails({ collectible }) {
               {t('source')}
             </Typography>
             <Typography
-              color={COLORS.PRIMARY1}
+              color={COLORS.PRIMARY_DEFAULT}
               variant={TYPOGRAPHY.H6}
               boxProps={{
                 margin: 0,
@@ -259,7 +259,7 @@ export default function CollectibleDetails({ collectible }) {
           </Box>
           <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
             <Typography
-              color={COLORS.BLACK}
+              color={COLORS.TEXT_DEFAULT}
               variant={TYPOGRAPHY.H6}
               fontWeight={FONT_WEIGHT.BOLD}
               boxProps={{
@@ -277,7 +277,7 @@ export default function CollectibleDetails({ collectible }) {
               className="collectible-details__contract-wrapper"
             >
               <Typography
-                color={COLORS.PRIMARY1}
+                color={COLORS.PRIMARY_DEFAULT}
                 variant={TYPOGRAPHY.H6}
                 overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
                 boxProps={{
diff --git a/ui/components/app/collectibles-detection-notice/collectibles-detection-notice.js b/ui/components/app/collectibles-detection-notice/collectibles-detection-notice.js
index db7095409..d2fd732e0 100644
--- a/ui/components/app/collectibles-detection-notice/collectibles-detection-notice.js
+++ b/ui/components/app/collectibles-detection-notice/collectibles-detection-notice.js
@@ -33,7 +33,7 @@ export default function CollectiblesDetectionNotice() {
           </Box>
           <Box paddingLeft={4}>
             <Typography
-              color={COLORS.BLACK}
+              color={COLORS.TEXT_DEFAULT}
               align={TEXT_ALIGN.LEFT}
               variant={TYPOGRAPHY.H6}
               fontWeight={FONT_WEIGHT.BOLD}
@@ -41,7 +41,7 @@ export default function CollectiblesDetectionNotice() {
               {t('newNFTsDetected')}
             </Typography>
             <Typography
-              color={COLORS.BLACK}
+              color={COLORS.TEXT_DEFAULT}
               align={TEXT_ALIGN.LEFT}
               variant={TYPOGRAPHY.H6}
               boxProps={{ marginBottom: 4 }}
diff --git a/ui/components/app/collectibles-items/collectibles-items.js b/ui/components/app/collectibles-items/collectibles-items.js
index 149e65055..1027cda9f 100644
--- a/ui/components/app/collectibles-items/collectibles-items.js
+++ b/ui/components/app/collectibles-items/collectibles-items.js
@@ -160,7 +160,7 @@ export default function CollectiblesItems({
                 collectionName,
               )}
               <Typography
-                color={COLORS.BLACK}
+                color={COLORS.TEXT_DEFAULT}
                 variant={TYPOGRAPHY.H5}
                 margin={[0, 0, 0, 2]}
               >
diff --git a/ui/components/app/collectibles-tab/collectibles-tab.js b/ui/components/app/collectibles-tab/collectibles-tab.js
index 5f2703dd2..4252ba1f0 100644
--- a/ui/components/app/collectibles-tab/collectibles-tab.js
+++ b/ui/components/app/collectibles-tab/collectibles-tab.js
@@ -83,7 +83,7 @@ export default function CollectiblesTab({ onAddNFT }) {
             className="collectibles-tab__link"
           >
             <Typography
-              color={COLORS.UI3}
+              color={COLORS.TEXT_MUTED}
               variant={TYPOGRAPHY.H4}
               align={TEXT_ALIGN.CENTER}
               fontWeight={FONT_WEIGHT.BOLD}
@@ -107,7 +107,7 @@ export default function CollectiblesTab({ onAddNFT }) {
         flexDirection={FLEX_DIRECTION.COLUMN}
       >
         <Typography
-          color={COLORS.UI3}
+          color={COLORS.TEXT_MUTED}
           variant={TYPOGRAPHY.H5}
           align={TEXT_ALIGN.CENTER}
         >
@@ -134,7 +134,7 @@ export default function CollectiblesTab({ onAddNFT }) {
                 )}
               </Box>
               <Typography
-                color={COLORS.UI3}
+                color={COLORS.TEXT_MUTED}
                 variant={TYPOGRAPHY.H6}
                 align={TEXT_ALIGN.CENTER}
               >
diff --git a/ui/components/app/confirm-page-container/enableEIP1559V2-notice/enableEIP1559V2-notice.js b/ui/components/app/confirm-page-container/enableEIP1559V2-notice/enableEIP1559V2-notice.js
index f0b92ff03..b9019424e 100644
--- a/ui/components/app/confirm-page-container/enableEIP1559V2-notice/enableEIP1559V2-notice.js
+++ b/ui/components/app/confirm-page-container/enableEIP1559V2-notice/enableEIP1559V2-notice.js
@@ -50,7 +50,7 @@ export default function EnableEIP1559V2Notice({ isFirstAlert }) {
           </Box>
           <Box paddingLeft={4}>
             <Typography
-              color={COLORS.BLACK}
+              color={COLORS.TEXT_DEFAULT}
               align={TEXT_ALIGN.LEFT}
               variant={TYPOGRAPHY.H7}
               fontWeight={FONT_WEIGHT.BOLD}
@@ -58,7 +58,7 @@ export default function EnableEIP1559V2Notice({ isFirstAlert }) {
               {t('enableEIP1559V2Header')}
             </Typography>
             <Typography
-              color={COLORS.BLACK}
+              color={COLORS.TEXT_DEFAULT}
               align={TEXT_ALIGN.LEFT}
               variant={TYPOGRAPHY.H7}
               boxProps={{ marginBottom: 2 }}
diff --git a/ui/components/app/edit-gas-display-education/edit-gas-display-education.component.js b/ui/components/app/edit-gas-display-education/edit-gas-display-education.component.js
index 32d655168..0433f9a10 100644
--- a/ui/components/app/edit-gas-display-education/edit-gas-display-education.component.js
+++ b/ui/components/app/edit-gas-display-education/edit-gas-display-education.component.js
@@ -14,37 +14,53 @@ export default function EditGasDisplayEducation() {
 
   return (
     <div className="edit-gas-display-education">
-      <Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
+      <Typography
+        tag="p"
+        color={COLORS.TEXT_ALTERNATIVE}
+        variant={TYPOGRAPHY.H6}
+      >
         {t('editGasEducationModalIntro')}
       </Typography>
       <Typography
-        color={COLORS.BLACK}
+        color={COLORS.TEXT_DEFAULT}
         variant={TYPOGRAPHY.h6}
         fontWeight={FONT_WEIGHT.BOLD}
       >
         {t('editGasHigh')}
       </Typography>
-      <Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
+      <Typography
+        tag="p"
+        color={COLORS.TEXT_ALTERNATIVE}
+        variant={TYPOGRAPHY.H6}
+      >
         {t('editGasEducationHighExplanation')}
       </Typography>
       <Typography
-        color={COLORS.BLACK}
+        color={COLORS.TEXT_DEFAULT}
         variant={TYPOGRAPHY.h6}
         fontWeight={FONT_WEIGHT.BOLD}
       >
         {t('editGasMedium')}
       </Typography>
-      <Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
+      <Typography
+        tag="p"
+        color={COLORS.TEXT_ALTERNATIVE}
+        variant={TYPOGRAPHY.H6}
+      >
         {t('editGasEducationMediumExplanation')}
       </Typography>
       <Typography
-        color={COLORS.BLACK}
+        color={COLORS.TEXT_DEFAULT}
         variant={TYPOGRAPHY.h6}
         fontWeight={FONT_WEIGHT.BOLD}
       >
         {t('editGasLow')}
       </Typography>
-      <Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
+      <Typography
+        tag="p"
+        color={COLORS.TEXT_ALTERNATIVE}
+        variant={TYPOGRAPHY.H6}
+      >
         {t('editGasEducationLowExplanation')}
       </Typography>
     </div>
diff --git a/ui/components/app/edit-gas-display/edit-gas-display.component.js b/ui/components/app/edit-gas-display/edit-gas-display.component.js
index 4e0aa83cb..f7fc433c9 100644
--- a/ui/components/app/edit-gas-display/edit-gas-display.component.js
+++ b/ui/components/app/edit-gas-display/edit-gas-display.component.js
@@ -182,7 +182,7 @@ export default function EditGasDisplay({
         {mode === EDIT_GAS_MODES.SPEED_UP && (
           <div className="edit-gas-display__top-tooltip">
             <Typography
-              color={COLORS.BLACK}
+              color={COLORS.TEXT_DEFAULT}
               variant={TYPOGRAPHY.H8}
               fontWeight={FONT_WEIGHT.BOLD}
             >
diff --git a/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js b/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js
index b3610c2b6..7f73181c9 100644
--- a/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js
+++ b/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js
@@ -80,7 +80,10 @@ export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
         <InfoTooltip
           contentText={
             <div className="edit-gas-fee-button__tooltip">
-              <Typography variant={TYPOGRAPHY.H7} color={COLORS.NEUTRAL_GREY}>
+              <Typography
+                variant={TYPOGRAPHY.H7}
+                color={COLORS.TEXT_ALTERNATIVE}
+              >
                 {t('dappSuggestedTooltip', [transaction.origin])}
               </Typography>
               <Typography variant={TYPOGRAPHY.H7}>
diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js
index cb11ed53b..850eb17ed 100644
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js
@@ -91,7 +91,7 @@ const EditGasFeePopover = () => {
               <Typography
                 className="edit-gas-fee-popover__know-more"
                 align="center"
-                color={COLORS.UI4}
+                color={COLORS.TEXT_ALTERNATIVE}
                 tag={TYPOGRAPHY.Paragraph}
                 variant={TYPOGRAPHY.H7}
               >
diff --git a/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js
index 0447513a2..b049a1bc4 100644
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js
@@ -124,7 +124,7 @@ const EditGasToolTip = ({
             {maxFeePerGas && (
               <Typography
                 variant={TYPOGRAPHY.H7}
-                color={COLORS.NEUTRAL_GREY}
+                color={COLORS.TEXT_ALTERNATIVE}
                 className="edit-gas-tooltip__container__value"
               >
                 {roundToDecimalPlacesRemovingExtraZeroes(maxFeePerGas, 4)}
@@ -142,7 +142,7 @@ const EditGasToolTip = ({
             {maxPriorityFeePerGas && (
               <Typography
                 variant={TYPOGRAPHY.H7}
-                color={COLORS.NEUTRAL_GREY}
+                color={COLORS.TEXT_ALTERNATIVE}
                 className="edit-gas-tooltip__container__value"
               >
                 {roundToDecimalPlacesRemovingExtraZeroes(
@@ -163,7 +163,7 @@ const EditGasToolTip = ({
             {gasLimit && (
               <Typography
                 variant={TYPOGRAPHY.H7}
-                color={COLORS.NEUTRAL_GREY}
+                color={COLORS.TEXT_ALTERNATIVE}
                 className="edit-gas-tooltip__container__value"
               >
                 {roundToDecimalPlacesRemovingExtraZeroes(gasLimit, 4)}
diff --git a/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js b/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
index 9e2f730c5..011a28534 100644
--- a/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
+++ b/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
@@ -20,7 +20,7 @@ const NetworkStatistics = () => {
   return (
     <div className="network-statistics">
       <Typography
-        color={COLORS.UI4}
+        color={COLORS.TEXT_ALTERNATIVE}
         fontWeight={FONT_WEIGHT.BOLD}
         margin={[3, 0]}
         variant={TYPOGRAPHY.H8}
diff --git a/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js b/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js
index 23dd36442..46778932f 100644
--- a/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js
+++ b/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js
@@ -31,7 +31,7 @@ export default function RecoveryPhraseReminder({ onConfirm, hasBackedUp }) {
     <Popover centerTitle title={t('recoveryPhraseReminderTitle')}>
       <Box padding={[0, 4, 6, 4]} className="recovery-phrase-reminder">
         <Typography
-          color={COLORS.BLACK}
+          color={COLORS.TEXT_DEFAULT}
           align={TEXT_ALIGN.CENTER}
           variant={TYPOGRAPHY.Paragraph}
           boxProps={{ marginTop: 0, marginBottom: 4 }}
@@ -43,7 +43,7 @@ export default function RecoveryPhraseReminder({ onConfirm, hasBackedUp }) {
             <li>
               <Typography
                 tag="span"
-                color={COLORS.BLACK}
+                color={COLORS.TEXT_DEFAULT}
                 fontWeight={FONT_WEIGHT.BOLD}
               >
                 {t('recoveryPhraseReminderItemOne')}
diff --git a/ui/components/app/srp-input/srp-input.js b/ui/components/app/srp-input/srp-input.js
index 2369cfa98..0192ba1b8 100644
--- a/ui/components/app/srp-input/srp-input.js
+++ b/ui/components/app/srp-input/srp-input.js
@@ -72,7 +72,7 @@ export default function SrpInput({ onChange }) {
       )}
       {srpError ? (
         <Typography
-          color={COLORS.ERROR1}
+          color={COLORS.ERROR_DEFAULT}
           tag="span"
           className="import-srp__srp-error"
         >
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 b27cf87e7..8601185a9 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
@@ -44,12 +44,12 @@ export default function TransactionDetailItem({
           })}
         >
           {detailText && (
-            <Typography variant={TYPOGRAPHY.H6} color={COLORS.UI4}>
+            <Typography variant={TYPOGRAPHY.H6} color={COLORS.TEXT_ALTERNATIVE}>
               {detailText}
             </Typography>
           )}
           <Typography
-            color={COLORS.BLACK}
+            color={COLORS.TEXT_DEFAULT}
             fontWeight={boldHeadings ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL}
             variant={TYPOGRAPHY.H6}
             margin={[1, 0, 1, 1]}
@@ -63,14 +63,14 @@ export default function TransactionDetailItem({
         {React.isValidElement(subTitle) ? (
           <div>{subTitle}</div>
         ) : (
-          <Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4}>
+          <Typography variant={TYPOGRAPHY.H7} color={COLORS.TEXT_ALTERNATIVE}>
             {subTitle}
           </Typography>
         )}
 
         <Typography
           variant={TYPOGRAPHY.H7}
-          color={COLORS.UI4}
+          color={COLORS.TEXT_ALTERNATIVE}
           align="end"
           className="transaction-detail-item__row-subText"
         >
diff --git a/ui/components/app/transaction-total-banner/transaction-total-banner.component.js b/ui/components/app/transaction-total-banner/transaction-total-banner.component.js
index 481f79c16..47961f021 100644
--- a/ui/components/app/transaction-total-banner/transaction-total-banner.component.js
+++ b/ui/components/app/transaction-total-banner/transaction-total-banner.component.js
@@ -11,12 +11,12 @@ export default function TransactionTotalBanner({
 }) {
   return (
     <div className="transaction-total-banner">
-      <Typography color={COLORS.BLACK} variant={TYPOGRAPHY.H1}>
+      <Typography color={COLORS.TEXT_DEFAULT} variant={TYPOGRAPHY.H1}>
         {total}
       </Typography>
       {detail && (
         <Typography
-          color={COLORS.BLACK}
+          color={COLORS.TEXT_DEFAULT}
           variant={TYPOGRAPHY.H6}
           className="transaction-total-banner__detail"
         >
diff --git a/ui/components/ui/definition-list/definition-list.js b/ui/components/ui/definition-list/definition-list.js
index 50a11b7a1..05ca7b912 100644
--- a/ui/components/ui/definition-list/definition-list.js
+++ b/ui/components/ui/definition-list/definition-list.js
@@ -53,7 +53,7 @@ export default function DefinitionList({
           </Typography>
           <Typography
             variant={TYPOGRAPHY.H6}
-            color={COLORS.UI4}
+            color={COLORS.TEXT_ALTERNATIVE}
             {...definitionTypography}
             boxProps={{
               marginTop: 0,
diff --git a/ui/components/ui/form-field/form-field.js b/ui/components/ui/form-field/form-field.js
index 43788d828..08e1a5c0b 100644
--- a/ui/components/ui/form-field/form-field.js
+++ b/ui/components/ui/form-field/form-field.js
@@ -58,7 +58,7 @@ export default function FormField({
               <Typography
                 tag={TYPOGRAPHY.H6}
                 variant={TYPOGRAPHY.H6}
-                color={COLORS.UI4}
+                color={COLORS.TEXT_ALTERNATIVE}
                 boxProps={{ display: DISPLAY.INLINE_BLOCK }}
               >
                 {titleUnit}
@@ -108,7 +108,7 @@ export default function FormField({
         )}
         {error && (
           <Typography
-            color={COLORS.ERROR1}
+            color={COLORS.ERROR_DEFAULT}
             variant={TYPOGRAPHY.H7}
             className="form-field__error"
           >
@@ -117,7 +117,7 @@ export default function FormField({
         )}
         {warning && (
           <Typography
-            color={COLORS.UI4}
+            color={COLORS.TEXT_ALTERNATIVE}
             variant={TYPOGRAPHY.H7}
             className="form-field__warning"
           >
@@ -126,7 +126,7 @@ export default function FormField({
         )}
         {passwordStrength && (
           <Typography
-            color={COLORS.BLACK}
+            color={COLORS.TEXT_DEFAULT}
             variant={TYPOGRAPHY.H7}
             className="form-field__password-strength"
           >
@@ -135,7 +135,7 @@ export default function FormField({
         )}
         {passwordStrengthText && (
           <Typography
-            color={COLORS.UI4}
+            color={COLORS.TEXT_ALTERNATIVE}
             variant={TYPOGRAPHY.H8}
             className="form-field__password-strength-text"
           >
diff --git a/ui/components/ui/numeric-input/numeric-input.component.js b/ui/components/ui/numeric-input/numeric-input.component.js
index 33b82da32..a072b288c 100644
--- a/ui/components/ui/numeric-input/numeric-input.component.js
+++ b/ui/components/ui/numeric-input/numeric-input.component.js
@@ -44,7 +44,11 @@ export default function NumericInput({
         placeholder={placeholder}
       />
       {detailText && (
-        <Typography color={COLORS.UI4} variant={TYPOGRAPHY.H7} tag="span">
+        <Typography
+          color={COLORS.TEXT_ALTERNATIVE}
+          variant={TYPOGRAPHY.H7}
+          tag="span"
+        >
           {detailText}
         </Typography>
       )}
diff --git a/ui/components/ui/radio-group/radio-group.component.js b/ui/components/ui/radio-group/radio-group.component.js
index a0501b4fc..0704de2a2 100644
--- a/ui/components/ui/radio-group/radio-group.component.js
+++ b/ui/components/ui/radio-group/radio-group.component.js
@@ -48,7 +48,7 @@ export default function RadioGroup({ options, name, selectedValue, onChange }) {
             <label className="radio-group__column-inner">
               {hasRecommendation && (
                 <Typography
-                  color={COLORS.SUCCESS3}
+                  color={COLORS.SUCCESS_DEFAULT}
                   className="radio-group__column-recommended"
                   variant={TYPOGRAPHY.H7}
                 >
diff --git a/ui/components/ui/slider/slider.component.js b/ui/components/ui/slider/slider.component.js
index 63be28236..69c05ba26 100644
--- a/ui/components/ui/slider/slider.component.js
+++ b/ui/components/ui/slider/slider.component.js
@@ -80,14 +80,20 @@ const Slider = ({
           <InfoTooltip position="top" contentText={tooltipText} />
         )}
         {valueText && (
-          <Typography tag={TYPOGRAPHY.Paragraph} color={COLORS.UI4}>
+          <Typography
+            tag={TYPOGRAPHY.Paragraph}
+            color={COLORS.TEXT_ALTERNATIVE}
+          >
             {valueText}
           </Typography>
         )}
       </div>
       {titleDetail && (
         <div className="slider__heading-detail">
-          <Typography tag={TYPOGRAPHY.Paragraph} color={COLORS.UI4}>
+          <Typography
+            tag={TYPOGRAPHY.Paragraph}
+            color={COLORS.TEXT_ALTERNATIVE}
+          >
             {titleDetail}
           </Typography>
         </div>
@@ -97,7 +103,10 @@ const Slider = ({
     <div className="slider__footer">
       <div className="slider__footer-info">
         {infoText && (
-          <Typography tag={TYPOGRAPHY.Paragraph} color={COLORS.UI4}>
+          <Typography
+            tag={TYPOGRAPHY.Paragraph}
+            color={COLORS.TEXT_ALTERNATIVE}
+          >
             {infoText}
           </Typography>
         )}
diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
index 5fe8c59db..1f349d6ad 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
+++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
@@ -488,7 +488,7 @@ export default class ConfirmApproveContent extends Component {
             <Typography
               variant={TYPOGRAPHY.H6}
               fontWeight={FONT_WEIGHT.NORMAL}
-              color={COLORS.UI4}
+              color={COLORS.TEXT_ALTERNATIVE}
               boxProps={{ marginLeft: 1, marginTop: 2 }}
             >
               {getURLHostName(origin)}
@@ -519,7 +519,7 @@ export default class ConfirmApproveContent extends Component {
             <Typography
               variant={TYPOGRAPHY.H6}
               fontWeight={FONT_WEIGHT.NORMAL}
-              color={COLORS.UI4}
+              color={COLORS.TEXT_ALTERNATIVE}
               boxProps={{ marginBottom: 0 }}
             >
               {ellipsify(toAddress)}
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 2fae7c16f..adbb684c7 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -541,7 +541,7 @@ export default class ConfirmTransactionBase extends Component {
                 <Typography
                   variant={TYPOGRAPHY.H7}
                   fontStyle={FONT_STYLE.ITALIC}
-                  color={COLORS.UI4}
+                  color={COLORS.TEXT_ALTERNATIVE}
                 >
                   {t('transactionDetailDappGasMoreInfo')}
                 </Typography>
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 9fbdc0115..f410ed305 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
@@ -42,14 +42,14 @@ export default function SeedPhraseIntro() {
       <div className="seed-phrase-intro__sections">
         <div className="seed-phrase-intro__left">
           <Typography
-            color={COLORS.BLACK}
+            color={COLORS.TEXT_DEFAULT}
             variant={TYPOGRAPHY.H1}
             boxProps={{ marginTop: 0, marginBottom: 4 }}
           >
             {t('seedPhraseIntroTitle')}
           </Typography>
           <Typography
-            color={COLORS.BLACK}
+            color={COLORS.TEXT_DEFAULT}
             boxProps={{ marginBottom: 4 }}
             variant={TYPOGRAPHY.Paragraph}
             className="seed-phrase-intro__copy"
@@ -93,7 +93,7 @@ export default function SeedPhraseIntro() {
             <Box marginBottom={4}>
               <Typography
                 tag="span"
-                color={COLORS.BLACK}
+                color={COLORS.TEXT_DEFAULT}
                 fontWeight={FONT_WEIGHT.BOLD}
                 boxProps={{ display: 'block' }}
               >
@@ -104,7 +104,7 @@ export default function SeedPhraseIntro() {
             <Box marginBottom={4}>
               <Typography
                 tag="span"
-                color={COLORS.BLACK}
+                color={COLORS.TEXT_DEFAULT}
                 fontWeight={FONT_WEIGHT.BOLD}
                 boxProps={{ display: 'block' }}
               >
@@ -120,7 +120,7 @@ export default function SeedPhraseIntro() {
             <Box marginBottom={4}>
               <Typography
                 tag="span"
-                color={COLORS.BLACK}
+                color={COLORS.TEXT_DEFAULT}
                 fontWeight={FONT_WEIGHT.BOLD}
                 boxProps={{ display: 'block' }}
               >
diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js
index 46627c77f..891a17d10 100644
--- a/ui/pages/home/home.component.js
+++ b/ui/pages/home/home.component.js
@@ -277,14 +277,14 @@ export default class Home extends PureComponent {
                     descriptionText={
                       <>
                         <Typography
-                          color={COLORS.UI1}
+                          color={COLORS.TEXT_MUTED}
                           variant={TYPOGRAPHY.H5}
                           fontWeight={FONT_WEIGHT.NORMAL}
                         >
                           {t('somethingWentWrong')}
                         </Typography>
                         <Typography
-                          color={COLORS.UI1}
+                          color={COLORS.TEXT_MUTED}
                           variant={TYPOGRAPHY.H7}
                           fontWeight={FONT_WEIGHT.NORMAL}
                         >
diff --git a/ui/pages/keychains/restore-vault.js b/ui/pages/keychains/restore-vault.js
index a931a5ac8..52f216818 100644
--- a/ui/pages/keychains/restore-vault.js
+++ b/ui/pages/keychains/restore-vault.js
@@ -70,13 +70,13 @@ class RestoreVaultPage extends Component {
             >
               {`< ${t('back')}`}
             </a>
-            <Typography variant={TYPOGRAPHY.H1} color={COLORS.BLACK}>
+            <Typography variant={TYPOGRAPHY.H1} color={COLORS.TEXT_DEFAULT}>
               {t('resetWallet')}
             </Typography>
-            <Typography color={COLORS.BLACK}>
+            <Typography color={COLORS.TEXT_DEFAULT}>
               {t('resetWalletSubHeader')}
             </Typography>
-            <Typography color={COLORS.BLACK} margin={[4, 0]}>
+            <Typography color={COLORS.TEXT_DEFAULT} margin={[4, 0]}>
               {t('resetWalletUsingSRP', [
                 <Button
                   type="link"
@@ -110,7 +110,7 @@ class RestoreVaultPage extends Component {
                 </Button>,
               ])}
             </Typography>
-            <Typography color={COLORS.BLACK} margin={[0, 0, 4]}>
+            <Typography color={COLORS.TEXT_DEFAULT} margin={[0, 0, 4]}>
               {t('resetWalletWarning')}
             </Typography>
             <CreateNewVault
diff --git a/ui/pages/onboarding-flow/metametrics/metametrics.js b/ui/pages/onboarding-flow/metametrics/metametrics.js
index 38672c431..2577b66f0 100644
--- a/ui/pages/onboarding-flow/metametrics/metametrics.js
+++ b/ui/pages/onboarding-flow/metametrics/metametrics.js
@@ -123,7 +123,7 @@ export default function OnboardingMetametrics() {
         </li>
       </ul>
       <Typography
-        color={COLORS.UI4}
+        color={COLORS.TEXT_ALTERNATIVE}
         align={TEXT_ALIGN.CENTER}
         variant={TYPOGRAPHY.H6}
         className="onboarding-metametrics__terms"
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 97346245d..f56bf1a61 100644
--- a/ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js
+++ b/ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js
@@ -89,7 +89,7 @@ export default function RecoveryPhraseChips({
               <i className="far fa-eye" color="white" />
               <Typography
                 variant={TYPOGRAPHY.H6}
-                color={COLORS.WHITE}
+                color={COLORS.OVERLAY_INVERSE}
                 className="recovery-phrase__secret-blocker--text"
               >
                 {t('makeSureNoOneWatching')}
diff --git a/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js b/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js
index 7f5736504..a4178c538 100644
--- a/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js
+++ b/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js
@@ -45,7 +45,7 @@ const SnapListTab = () => {
             </Typography>
             <Typography
               variant={TYPOGRAPHY.H6}
-              color={COLORS.UI4}
+              color={COLORS.TEXT_ALTERNATIVE}
               marginBottom={2}
             >
               {t('manageSnaps')}
@@ -82,7 +82,7 @@ const SnapListTab = () => {
           justifyContent={JUSTIFY_CONTENT.CENTER}
           alignItems={ALIGN_ITEMS.CENTER}
         >
-          <Typography variant={TYPOGRAPHY.H4} color={COLORS.UI4}>
+          <Typography variant={TYPOGRAPHY.H4} color={COLORS.TEXT_ALTERNATIVE}>
             <span>{t('noSnaps')}</span>
           </Typography>
         </Box>
diff --git a/ui/pages/settings/flask/view-snap/view-snap.js b/ui/pages/settings/flask/view-snap/view-snap.js
index 5986b7b5b..f8fab7d5f 100644
--- a/ui/pages/settings/flask/view-snap/view-snap.js
+++ b/ui/pages/settings/flask/view-snap/view-snap.js
@@ -104,7 +104,7 @@ function ViewSnap() {
           <div className="view-snap__section">
             <Typography
               variant={TYPOGRAPHY.H6}
-              color={COLORS.UI4}
+              color={COLORS.TEXT_ALTERNATIVE}
               boxProps={{ marginTop: 5 }}
             >
               {snap.manifest.description}
@@ -112,7 +112,7 @@ function ViewSnap() {
           </div>
           <div className="view-snap__section view-snap__permission-list">
             <Typography variant={TYPOGRAPHY.H4}>{t('permissions')}</Typography>
-            <Typography variant={TYPOGRAPHY.H6} color={COLORS.UI4}>
+            <Typography variant={TYPOGRAPHY.H6} color={COLORS.TEXT_ALTERNATIVE}>
               {t('snapAccess', [snap.manifest.proposedName])}
             </Typography>
             <Box width={FRACTIONS.TEN_TWELFTHS}>
@@ -126,7 +126,10 @@ function ViewSnap() {
               <Typography variant={TYPOGRAPHY.H4}>
                 {t('connectedSites')}
               </Typography>
-              <Typography variant={TYPOGRAPHY.H6} color={COLORS.UI4}>
+              <Typography
+                variant={TYPOGRAPHY.H6}
+                color={COLORS.TEXT_ALTERNATIVE}
+              >
                 {t('connectedSnapSites', [snap.manifest.proposedName])}
               </Typography>
               <ConnectedSitesList
@@ -141,7 +144,7 @@ function ViewSnap() {
             <Typography variant={TYPOGRAPHY.H4}>{t('removeSnap')}</Typography>
             <Typography
               variant={TYPOGRAPHY.H6}
-              color={COLORS.UI4}
+              color={COLORS.TEXT_ALTERNATIVE}
               boxProps={{ paddingBottom: 3 }}
             >
               {t('removeSnapDescription')}
diff --git a/ui/pages/settings/settings-tab/settings-tab.component.js b/ui/pages/settings/settings-tab/settings-tab.component.js
index 5dca12135..8a2654cc2 100644
--- a/ui/pages/settings/settings-tab/settings-tab.component.js
+++ b/ui/pages/settings/settings-tab/settings-tab.component.js
@@ -193,7 +193,7 @@ export default class SettingsTab extends PureComponent {
         id="blockie-optin"
       >
         <div className="settings-page__content-item">
-          <Typography variant={TYPOGRAPHY.H5} color={COLORS.BLACK}>
+          <Typography variant={TYPOGRAPHY.H5} color={COLORS.TEXT_DEFAULT}>
             {t('accountIdenticon')}
           </Typography>
           <span className="settings-page__content-item__description">
@@ -221,7 +221,7 @@ export default class SettingsTab extends PureComponent {
                 />
               </div>
               <Typography
-                color={COLORS.BLACK}
+                color={COLORS.TEXT_DEFAULT}
                 variant={TYPOGRAPHY.H7}
                 margin={[0, 12, 0, 3]}
               >
@@ -247,7 +247,7 @@ export default class SettingsTab extends PureComponent {
                 />
               </div>
               <Typography
-                color={COLORS.BLACK}
+                color={COLORS.TEXT_DEFAULT}
                 variant={TYPOGRAPHY.H7}
                 margin={[0, 0, 0, 3]}
               >
diff --git a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js
index 24cc9ab32..a03db90a0 100644
--- a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js
+++ b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js
@@ -89,7 +89,7 @@ export default function AwaitingSignatures() {
         <Box marginTop={3} marginBottom={4}>
           <PulseLoader />
         </Box>
-        <Typography color={COLORS.BLACK} variant={TYPOGRAPHY.H3}>
+        <Typography color={COLORS.TEXT_DEFAULT} variant={TYPOGRAPHY.H3}>
           {headerText}
         </Typography>
         {needsTwoConfirmations && (
diff --git a/ui/pages/swaps/build-quote/build-quote.js b/ui/pages/swaps/build-quote/build-quote.js
index b3526b5dd..df7945a4d 100644
--- a/ui/pages/swaps/build-quote/build-quote.js
+++ b/ui/pages/swaps/build-quote/build-quote.js
@@ -622,7 +622,7 @@ export default function BuildQuote({
               </Typography>
               <Typography
                 variant={TYPOGRAPHY.H8}
-                color={COLORS.UI4}
+                color={COLORS.TEXT_ALTERNATIVE}
                 boxProps={{ marginTop: 3 }}
               >
                 {t('stxSubDescription')}&nbsp;
@@ -630,7 +630,7 @@ export default function BuildQuote({
                   tag="span"
                   fontWeight={FONT_WEIGHT.BOLD}
                   variant={TYPOGRAPHY.H8}
-                  color={COLORS.UI4}
+                  color={COLORS.TEXT_ALTERNATIVE}
                 >
                   {t('stxYouCanOptOut')}&nbsp;
                 </Typography>
diff --git a/ui/pages/swaps/fee-card/fee-card.js b/ui/pages/swaps/fee-card/fee-card.js
index 625ea6cbd..ddb1cc4c6 100644
--- a/ui/pages/swaps/fee-card/fee-card.js
+++ b/ui/pages/swaps/fee-card/fee-card.js
@@ -133,7 +133,7 @@ export default function FeeCard({
                     <Typography
                       tag="span"
                       fontWeight={FONT_WEIGHT.BOLD}
-                      color={COLORS.UI4}
+                      color={COLORS.TEXT_ALTERNATIVE}
                       variant={TYPOGRAPHY.H7}
                     >
                       {t('maxFee')}
diff --git a/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js b/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js
index 8087020b2..0f12bf3ba 100644
--- a/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js
+++ b/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js
@@ -263,11 +263,11 @@ export default function SmartTransactionStatus() {
           justifyContent={JUSTIFY_CONTENT.CENTER}
           alignItems={ALIGN_ITEMS.CENTER}
         >
-          <Typography color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
+          <Typography color={COLORS.TEXT_ALTERNATIVE} variant={TYPOGRAPHY.H6}>
             {`${fetchParams?.value && Number(fetchParams.value).toFixed(5)} `}
           </Typography>
           <Typography
-            color={COLORS.UI4}
+            color={COLORS.TEXT_ALTERNATIVE}
             variant={TYPOGRAPHY.H6}
             fontWeight={FONT_WEIGHT.BOLD}
             boxProps={{ marginLeft: 1, marginRight: 2 }}
@@ -290,14 +290,14 @@ export default function SmartTransactionStatus() {
             fallbackClassName="main-quote-summary__icon-fallback"
           />
           <Typography
-            color={COLORS.UI4}
+            color={COLORS.TEXT_ALTERNATIVE}
             variant={TYPOGRAPHY.H6}
             boxProps={{ marginLeft: 2 }}
           >
             {`~${destinationValue && Number(destinationValue).toFixed(5)} `}
           </Typography>
           <Typography
-            color={COLORS.UI4}
+            color={COLORS.TEXT_ALTERNATIVE}
             variant={TYPOGRAPHY.H6}
             fontWeight={FONT_WEIGHT.BOLD}
             boxProps={{ marginLeft: 1 }}
@@ -324,14 +324,14 @@ export default function SmartTransactionStatus() {
           >
             <TimerIcon />
             <Typography
-              color={COLORS.UI4}
+              color={COLORS.TEXT_ALTERNATIVE}
               variant={TYPOGRAPHY.H6}
               boxProps={{ marginLeft: 1 }}
             >
               {`${t('swapCompleteIn')} `}
             </Typography>
             <Typography
-              color={COLORS.UI4}
+              color={COLORS.TEXT_ALTERNATIVE}
               variant={TYPOGRAPHY.H6}
               fontWeight={FONT_WEIGHT.BOLD}
               boxProps={{ marginLeft: 1 }}
@@ -342,7 +342,7 @@ export default function SmartTransactionStatus() {
           </Box>
         )}
         <Typography
-          color={COLORS.BLACK}
+          color={COLORS.TEXT_DEFAULT}
           variant={TYPOGRAPHY.H4}
           fontWeight={FONT_WEIGHT.BOLD}
         >
@@ -366,7 +366,7 @@ export default function SmartTransactionStatus() {
           <Typography
             variant={TYPOGRAPHY.H6}
             boxProps={{ marginTop: 0 }}
-            color={COLORS.UI4}
+            color={COLORS.TEXT_ALTERNATIVE}
           >
             {description}
           </Typography>
@@ -379,7 +379,7 @@ export default function SmartTransactionStatus() {
           <Typography
             variant={TYPOGRAPHY.H7}
             boxProps={{ marginTop: 8 }}
-            color={COLORS.UI4}
+            color={COLORS.TEXT_ALTERNATIVE}
           >
             {subDescription}
           </Typography>
diff --git a/ui/pages/token-details/token-details-page.js b/ui/pages/token-details/token-details-page.js
index e7e7fb763..592a93691 100644
--- a/ui/pages/token-details/token-details-page.js
+++ b/ui/pages/token-details/token-details-page.js
@@ -74,7 +74,7 @@ export default function TokenDetailsPage() {
           fontWeight={FONT_WEIGHT.BOLD}
           margin={[4, 0, 0, 0]}
           variant={TYPOGRAPHY.H6}
-          color={COLORS.BLACK}
+          color={COLORS.TEXT_DEFAULT}
           className="token-details__title"
         >
           {t('tokenDetails')}
@@ -90,7 +90,7 @@ export default function TokenDetailsPage() {
             fontWeight={FONT_WEIGHT.BOLD}
             margin={[0, 5, 0, 0]}
             variant={TYPOGRAPHY.H4}
-            color={COLORS.BLACK}
+            color={COLORS.TEXT_DEFAULT}
             className="token-details__token-value"
           >
             {tokenBalance || ''}
@@ -106,14 +106,14 @@ export default function TokenDetailsPage() {
         <Typography
           margin={[4, 0, 0, 0]}
           variant={TYPOGRAPHY.H7}
-          color={COLORS.UI4}
+          color={COLORS.TEXT_ALTERNATIVE}
         >
           {tokenCurrencyBalance || ''}
         </Typography>
         <Typography
           margin={[6, 0, 0, 0]}
           variant={TYPOGRAPHY.H9}
-          color={COLORS.UI4}
+          color={COLORS.TEXT_ALTERNATIVE}
           fontWeight={FONT_WEIGHT.BOLD}
         >
           {t('tokenContractAddress')}
@@ -122,7 +122,7 @@ export default function TokenDetailsPage() {
           <Typography
             variant={TYPOGRAPHY.H7}
             margin={[2, 0, 0, 0]}
-            color={COLORS.BLACK}
+            color={COLORS.TEXT_DEFAULT}
             overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
             className="token-details__token-address"
           >
@@ -147,7 +147,7 @@ export default function TokenDetailsPage() {
         <Typography
           variant={TYPOGRAPHY.H9}
           margin={[4, 0, 0, 0]}
-          color={COLORS.UI4}
+          color={COLORS.TEXT_ALTERNATIVE}
           fontWeight={FONT_WEIGHT.BOLD}
         >
           {t('tokenDecimalTitle')}
@@ -155,14 +155,14 @@ export default function TokenDetailsPage() {
         <Typography
           variant={TYPOGRAPHY.H7}
           margin={[1, 0, 0, 0]}
-          color={COLORS.BLACK}
+          color={COLORS.TEXT_DEFAULT}
         >
           {token.decimals}
         </Typography>
         <Typography
           variant={TYPOGRAPHY.H9}
           margin={[4, 0, 0, 0]}
-          color={COLORS.UI4}
+          color={COLORS.TEXT_ALTERNATIVE}
           fontWeight={FONT_WEIGHT.BOLD}
         >
           {t('network')}
@@ -170,7 +170,7 @@ export default function TokenDetailsPage() {
         <Typography
           variant={TYPOGRAPHY.H7}
           margin={[1, 0, 0, 0]}
-          color={COLORS.BLACK}
+          color={COLORS.TEXT_DEFAULT}
         >
           {networkType === NETWORK_TYPE_RPC
             ? networkNickname ?? t('privateNetwork')
@@ -185,7 +185,7 @@ export default function TokenDetailsPage() {
             );
           }}
         >
-          <Typography variant={TYPOGRAPHY.H6} color={COLORS.PRIMARY1}>
+          <Typography variant={TYPOGRAPHY.H6} color={COLORS.PRIMARY_DEFAULT}>
             {t('hideToken')}
           </Typography>
         </Button>