diff --git a/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap b/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
index 753646819..b35c12b39 100644
--- a/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
+++ b/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
@@ -15,7 +15,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
           class="customize-nonce-modal__main-header"
         >
           <h4
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography customize-nonce-modal__main-title typography--h4 typography--weight-bold typography--style-normal typography--color-text-default"
+            class="box mm-text customize-nonce-modal__main-title mm-text--heading-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
           >
             Edit nonce
           </h4>
@@ -33,7 +33,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
           class="box box--margin-top-2 box--display-inline-flex box--flex-direction-row box--align-items-center"
         >
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
+            class="box mm-text mm-text--body-sm mm-text--font-weight-normal box--flex-direction-row box--color-text-default"
           >
             This is an advanced feature, use cautiously.
             <a
@@ -53,7 +53,8 @@ exports[`Customize Nonce should match snapshot 1`] = `
             class="box box--display-flex box--flex-direction-row box--align-items-center"
           >
             <h6
-              class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row box--width-5/6 typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+              boxprops="[object Object]"
+              class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
             >
               Edit nonce
             </h6>
diff --git a/ui/components/app/modals/customize-nonce/customize-nonce.component.js b/ui/components/app/modals/customize-nonce/customize-nonce.component.js
index 8653cc0ab..4f6fba4b0 100644
--- a/ui/components/app/modals/customize-nonce/customize-nonce.component.js
+++ b/ui/components/app/modals/customize-nonce/customize-nonce.component.js
@@ -3,10 +3,9 @@ import PropTypes from 'prop-types';
 import Modal from '../../modal';
 import TextField from '../../../ui/text-field';
 import Button from '../../../ui/button';
-import Typography from '../../../ui/typography';
 import {
-  TypographyVariant,
-  FONT_WEIGHT,
+  TextVariant,
+  FontWeight,
   AlignItems,
   BLOCK_SIZES,
   DISPLAY,
@@ -19,6 +18,7 @@ import {
   ButtonIcon,
   ButtonIconSize,
   IconName,
+  Text,
 } from '../../../component-library';
 
 const CustomizeNonce = ({
@@ -50,13 +50,14 @@ const CustomizeNonce = ({
     >
       <div className="customize-nonce-modal">
         <div className="customize-nonce-modal__main-header">
-          <Typography
+          <Text
             className="customize-nonce-modal__main-title"
-            variant={TypographyVariant.H4}
-            fontWeight={FONT_WEIGHT.BOLD}
+            variant={TextVariant.headingSm}
+            as="h4"
+            fontWeight={FontWeight.Bold}
           >
             {t('editNonceField')}
-          </Typography>
+          </Text>
           <ButtonIcon
             iconName={IconName.Close}
             className="customize-nonce-modal__close"
@@ -70,9 +71,10 @@ const CustomizeNonce = ({
           display={DISPLAY.INLINE_FLEX}
           alignItems={AlignItems.center}
         >
-          <Typography
-            variant={TypographyVariant.H6}
-            fontWeight={FONT_WEIGHT.NORMAL}
+          <Text
+            variant={TextVariant.bodySm}
+            as="h6"
+            fontWeight={FontWeight.Normal}
           >
             {t('editNonceMessage')}
             <Button
@@ -84,17 +86,18 @@ const CustomizeNonce = ({
             >
               {t('learnMoreUpperCase')}
             </Button>
-          </Typography>
+          </Text>
         </Box>
         <Box marginTop={3}>
           <Box alignItems={AlignItems.center} display={DISPLAY.FLEX}>
-            <Typography
-              variant={TypographyVariant.H6}
-              fontWeight={FONT_WEIGHT.BOLD}
+            <Text
+              variant={TextVariant.bodySm}
+              as="h6"
+              fontWeight={FontWeight.Bold}
               boxProps={{ width: BLOCK_SIZES.FIVE_SIXTHS }}
             >
               {t('editNonceField')}
-            </Typography>
+            </Text>
             <Box width={BLOCK_SIZES.ONE_SIXTH}>
               <Button
                 type="link"
diff --git a/ui/components/app/network-account-balance-header/network-account-balance-header.js b/ui/components/app/network-account-balance-header/network-account-balance-header.js
index 66987d793..79953f3d6 100644
--- a/ui/components/app/network-account-balance-header/network-account-balance-header.js
+++ b/ui/components/app/network-account-balance-header/network-account-balance-header.js
@@ -5,17 +5,17 @@ import Identicon from '../../ui/identicon';
 import {
   DISPLAY,
   FLEX_DIRECTION,
-  TypographyVariant,
-  FONT_WEIGHT,
+  TextVariant,
+  FontWeight,
   AlignItems,
   JustifyContent,
-  TEXT_ALIGN,
+  TextAlign,
   TextColor,
 } from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
 import { I18nContext } from '../../../contexts/i18n';
-import Typography from '../../ui/typography';
 import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../shared/constants/network';
+import { Text } from '../../component-library';
 
 export default function NetworkAccountBalanceHeader({
   networkName,
@@ -64,22 +64,24 @@ export default function NetworkAccountBalanceHeader({
           alignItems={AlignItems.flexStart}
           flexDirection={FLEX_DIRECTION.COLUMN}
         >
-          <Typography
-            variant={TypographyVariant.H6}
+          <Text
+            variant={TextVariant.bodySm}
+            as="h6"
             color={TextColor.textAlternative}
             marginBottom={0}
           >
             {networkName}
-          </Typography>
+          </Text>
 
-          <Typography
-            variant={TypographyVariant.H6}
+          <Text
+            variant={TextVariant.bodySm}
+            as="h6"
             color={TextColor.textDefault}
-            fontWeight={FONT_WEIGHT.BOLD}
+            fontWeight={FontWeight.Bold}
             marginTop={0}
           >
             {accountName}
-          </Typography>
+          </Text>
         </Box>
       </Box>
       <Box
@@ -87,23 +89,25 @@ export default function NetworkAccountBalanceHeader({
         alignItems={AlignItems.flexEnd}
         flexDirection={FLEX_DIRECTION.COLUMN}
       >
-        <Typography
-          variant={TypographyVariant.H6}
+        <Text
+          variant={TextVariant.bodySm}
+          as="h6"
           color={TextColor.textAlternative}
           marginBottom={0}
         >
           {t('balance')}
-        </Typography>
+        </Text>
 
-        <Typography
-          variant={TypographyVariant.H6}
+        <Text
+          variant={TextVariant.bodySm}
+          as="h6"
           color={TextColor.textDefault}
-          fontWeight={FONT_WEIGHT.BOLD}
+          fontWeight={FontWeight.Bold}
           marginTop={0}
-          align={TEXT_ALIGN.END}
+          align={TextAlign.End}
         >
           {accountBalance} {tokenName}
-        </Typography>
+        </Text>
       </Box>
     </Box>
   );
diff --git a/ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap b/ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap
index 17b2c4670..368ebeec2 100644
--- a/ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap
+++ b/ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap
@@ -145,12 +145,12 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
             class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
           >
             <h6
-              class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
+              class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
             >
               Unknown private network
             </h6>
             <h6
-              class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+              class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
             >
               Test Account
             </h6>
@@ -160,12 +160,13 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
           class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
         >
           <h6
-            class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
+            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
           >
             Balance
           </h6>
           <h6
-            class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--align-end typography--color-text-default"
+            align="end"
+            class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
           >
             966.987986
              
diff --git a/ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap b/ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap
index 1892c6ec4..73294848d 100644
--- a/ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap
+++ b/ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap
@@ -142,12 +142,12 @@ exports[`Signature Request Component render should match snapshot when we are us
             class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
           >
             <h6
-              class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
+              class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
             >
               Unknown private network
             </h6>
             <h6
-              class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+              class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
             >
               Antonio
             </h6>
@@ -157,12 +157,13 @@ exports[`Signature Request Component render should match snapshot when we are us
           class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
         >
           <h6
-            class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
+            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
           >
             Balance
           </h6>
           <h6
-            class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--align-end typography--color-text-default"
+            align="end"
+            class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
           >
             966.987986
              
@@ -917,12 +918,12 @@ exports[`Signature Request Component render should match snapshot when we want t
             class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
           >
             <h6
-              class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
+              class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
             >
               Unknown private network
             </h6>
             <h6
-              class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+              class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
             >
               Antonio
             </h6>
@@ -932,12 +933,13 @@ exports[`Signature Request Component render should match snapshot when we want t
           class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
         >
           <h6
-            class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
+            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
           >
             Balance
           </h6>
           <h6
-            class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--align-end typography--color-text-default"
+            align="end"
+            class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
           >
             1515270.174798
              
diff --git a/ui/components/ui/callout/callout.stories.js b/ui/components/ui/callout/callout.stories.js
index 0865c568f..505533bc3 100644
--- a/ui/components/ui/callout/callout.stories.js
+++ b/ui/components/ui/callout/callout.stories.js
@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 import {
   BorderColor,
   SEVERITIES,
-  TypographyVariant,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
 import Box from '../box';
-import Typography from '../typography';
+import { Text } from '../../component-library';
 import Callout from './callout';
 
 export default {
@@ -24,12 +24,12 @@ export default {
 export const PersistentCallout = (args) => (
   <Box borderColor={BorderColor.borderDefault} paddingTop={8}>
     <Box margin={2}>
-      <Typography variant={TypographyVariant.H4}>
+      <Text variant={TextVariant.headingSm} as="h4">
         This is your private key:
-      </Typography>
-      <Typography variant={TypographyVariant.H6}>
+      </Text>
+      <Text variant={TextVariant.bodySm} as="h6">
         some seed words that are super important and probably deserve a callout
-      </Typography>
+      </Text>
     </Box>
     <Callout {...args}>Always back up your private key!</Callout>
   </Box>
@@ -40,13 +40,13 @@ export const DismissibleCallout = (args) => {
   return (
     <Box borderColor={BorderColor.borderDefault} paddingTop={8}>
       <Box margin={2}>
-        <Typography variant={TypographyVariant.H4}>
+        <Text variant={TextVariant.headingSm} as="h4">
           This is your private key:
-        </Typography>
-        <Typography variant={TypographyVariant.H6}>
+        </Text>
+        <Text variant={TextVariant.bodySm} as="h6">
           some seed words that are super important and probably deserve a
           callout
-        </Typography>
+        </Text>
       </Box>
       {!dismissed && (
         <Callout {...args} dismiss={() => setDismissed(true)}>
@@ -85,13 +85,13 @@ export const MultipleDismissibleCallouts = () => {
   return (
     <Box borderColor={BorderColor.borderDefault} paddingTop={8}>
       <Box margin={2}>
-        <Typography variant={TypographyVariant.H4}>
+        <Text variant={TextVariant.headingSm} as="h4">
           This is your private key:
-        </Typography>
-        <Typography variant={TypographyVariant.H6}>
+        </Text>
+        <Text variant={TextVariant.bodySm} as="h6">
           some seed words that are super important and probably deserve a
           callout
-        </Typography>
+        </Text>
       </Box>
       {Object.entries(calloutState)
         .filter(([_, callout]) => callout.dismissed === false)
diff --git a/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap b/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
index ab888b4cf..22eaa593d 100644
--- a/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
+++ b/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
@@ -142,12 +142,12 @@ exports[`Signature Request Component render should match snapshot 1`] = `
             class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
           >
             <h6
-              class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
+              class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
             >
               Goerli test network
             </h6>
             <h6
-              class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+              class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
             >
               Account 1
             </h6>
@@ -157,12 +157,13 @@ exports[`Signature Request Component render should match snapshot 1`] = `
           class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
         >
           <h6
-            class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
+            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
           >
             Balance
           </h6>
           <h6
-            class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--align-end typography--color-text-default"
+            align="end"
+            class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
           >
             9.107408