diff --git a/ui/components/app/confirm-page-container/snaps/snap-insight.js b/ui/components/app/confirm-page-container/snaps/snap-insight.js
index 703bcff67..d7fc925d7 100644
--- a/ui/components/app/confirm-page-container/snaps/snap-insight.js
+++ b/ui/components/app/confirm-page-container/snaps/snap-insight.js
@@ -8,7 +8,7 @@ import {
   AlignItems,
   FLEX_DIRECTION,
   JustifyContent,
-  TEXT_ALIGN,
+  TextAlign,
   TextColor,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
@@ -53,7 +53,7 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
       marginBottom={hasNoData && 12}
       alignItems={hasNoData && AlignItems.center}
       justifyContent={hasNoData && JustifyContent.center}
-      textAlign={hasNoData && TEXT_ALIGN.CENTER}
+      textAlign={hasNoData && TextAlign.Center}
       className="snap-insight"
     >
       {!loading && !error && (
diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.js b/ui/components/app/custom-spending-cap/custom-spending-cap.js
index 0614b0f36..d2da1adfe 100644
--- a/ui/components/app/custom-spending-cap/custom-spending-cap.js
+++ b/ui/components/app/custom-spending-cap/custom-spending-cap.js
@@ -13,7 +13,7 @@ import {
   AlignItems,
   DISPLAY,
   FLEX_DIRECTION,
-  TEXT_ALIGN,
+  TextAlign,
   TextVariant,
   JustifyContent,
   Size,
@@ -273,7 +273,7 @@ export default function CustomSpendingCap({
               marginLeft="auto"
               paddingRight={4}
               paddingBottom={2}
-              textAlign={TEXT_ALIGN.END}
+              textAlign={TextAlign.End}
               className={classnames('custom-spending-cap__max', {
                 'custom-spending-cap__max--with-error-message': error,
               })}
diff --git a/ui/components/app/import-token-link/import-token-link.component.js b/ui/components/app/import-token-link/import-token-link.component.js
index cf7ebae1f..98744b048 100644
--- a/ui/components/app/import-token-link/import-token-link.component.js
+++ b/ui/components/app/import-token-link/import-token-link.component.js
@@ -5,7 +5,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes';
 import Button from '../../ui/button';
 import Box from '../../ui/box/box';
-import { TEXT_ALIGN } from '../../../helpers/constants/design-system';
+import { TextAlign } from '../../../helpers/constants/design-system';
 import { detectNewTokens } from '../../../store/actions';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
@@ -33,7 +33,7 @@ export default function ImportTokenLink() {
     Boolean(process.env.IN_TEST);
 
   return (
-    <Box className="import-token-link" textAlign={TEXT_ALIGN.CENTER}>
+    <Box className="import-token-link" textAlign={TextAlign.Center}>
       {isTokenDetectionAvailable && (
         <>
           <Button
diff --git a/ui/components/app/ledger-instruction-field/ledger-instruction-field.js b/ui/components/app/ledger-instruction-field/ledger-instruction-field.js
index 272c1aa59..5de3aa97a 100644
--- a/ui/components/app/ledger-instruction-field/ledger-instruction-field.js
+++ b/ui/components/app/ledger-instruction-field/ledger-instruction-field.js
@@ -23,7 +23,7 @@ import { BannerAlert, ButtonLink, Text } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
   SEVERITIES,
-  TEXT_ALIGN,
+  TextAlign,
   TextColor,
 } from '../../../helpers/constants/design-system';
 import {
@@ -150,7 +150,7 @@ export default function LedgerInstructionField({ showDataInstruction }) {
             {renderInstructionStep(
               <span>
                 <ButtonLink
-                  textAlign={TEXT_ALIGN.LEFT}
+                  textAlign={TextAlign.Left}
                   onClick={async () => {
                     if (environmentTypeIsFullScreen) {
                       window.location.reload();
@@ -167,7 +167,7 @@ export default function LedgerInstructionField({ showDataInstruction }) {
             {renderInstructionStep(
               <span>
                 <ButtonLink
-                  textAlign={TEXT_ALIGN.LEFT}
+                  textAlign={TextAlign.Left}
                   onClick={async () => {
                     if (environmentTypeIsFullScreen) {
                       const connectedDevices =
diff --git a/ui/components/app/nfts-tab/nfts-tab.js b/ui/components/app/nfts-tab/nfts-tab.js
index 15a42814b..7e3393c98 100644
--- a/ui/components/app/nfts-tab/nfts-tab.js
+++ b/ui/components/app/nfts-tab/nfts-tab.js
@@ -9,10 +9,10 @@ import NftsDetectionNotice from '../nfts-detection-notice';
 import NftsItems from '../nfts-items';
 import {
   TypographyVariant,
-  TEXT_ALIGN,
+  TextAlign,
   JustifyContent,
   FLEX_DIRECTION,
-  FONT_WEIGHT,
+  FontWeight,
   AlignItems,
   TextColor,
 } from '../../../helpers/constants/design-system';
@@ -76,8 +76,8 @@ export default function NftsTab({ onAddNFT }) {
               <Typography
                 color={TextColor.textMuted}
                 variant={TypographyVariant.H4}
-                align={TEXT_ALIGN.CENTER}
-                fontWeight={FONT_WEIGHT.BOLD}
+                align={TextAlign.Center}
+                fontWeight={FontWeight.Bold}
               >
                 {t('noNFTs')}
               </Typography>
@@ -101,7 +101,7 @@ export default function NftsTab({ onAddNFT }) {
         <Typography
           color={TextColor.textMuted}
           variant={TypographyVariant.H5}
-          align={TEXT_ALIGN.CENTER}
+          align={TextAlign.Center}
         >
           {t('missingNFT')}
         </Typography>
@@ -128,7 +128,7 @@ export default function NftsTab({ onAddNFT }) {
               <Typography
                 color={TextColor.textMuted}
                 variant={TypographyVariant.H6}
-                align={TEXT_ALIGN.CENTER}
+                align={TextAlign.Center}
               >
                 {t('or')}
               </Typography>
diff --git a/ui/components/app/signature-request-original/signature-request-original.component.js b/ui/components/app/signature-request-original/signature-request-original.component.js
index c60ed16a8..cc8883cd0 100644
--- a/ui/components/app/signature-request-original/signature-request-original.component.js
+++ b/ui/components/app/signature-request-original/signature-request-original.component.js
@@ -20,8 +20,8 @@ import Typography from '../../ui/typography/typography';
 import { PageContainerFooter } from '../../ui/page-container';
 import {
   TypographyVariant,
-  FONT_WEIGHT,
-  TEXT_ALIGN,
+  FontWeight,
+  TextAlign,
   TextColor,
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
   IconColor,
@@ -210,7 +210,7 @@ export default class SignatureRequestOriginal extends Component {
         <Typography
           className="request-signature__content__title"
           variant={TypographyVariant.H3}
-          fontWeight={FONT_WEIGHT.BOLD}
+          fontWeight={FontWeight.Bold}
         >
           {this.context.t('sigRequest')}
         </Typography>
@@ -218,7 +218,7 @@ export default class SignatureRequestOriginal extends Component {
           className="request-signature__content__subtitle"
           variant={TypographyVariant.H7}
           color={TextColor.textAlternative}
-          align={TEXT_ALIGN.CENTER}
+          align={TextAlign.Center}
           margin={12}
           marginTop={3}
         >
diff --git a/ui/components/app/signature-request/signature-request.component.js b/ui/components/app/signature-request/signature-request.component.js
index cc426ab0f..14dc7541a 100644
--- a/ui/components/app/signature-request/signature-request.component.js
+++ b/ui/components/app/signature-request/signature-request.component.js
@@ -17,8 +17,8 @@ import Typography from '../../ui/typography/typography';
 import ContractDetailsModal from '../modals/contract-details-modal/contract-details-modal';
 import {
   TypographyVariant,
-  FONT_WEIGHT,
-  TEXT_ALIGN,
+  FontWeight,
+  TextAlign,
   TextColor,
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
   IconColor,
@@ -306,7 +306,7 @@ export default class SignatureRequest extends PureComponent {
           <Typography
             className="signature-request__content__title"
             variant={TypographyVariant.H3}
-            fontWeight={FONT_WEIGHT.BOLD}
+            fontWeight={FontWeight.Bold}
             boxProps={{
               marginTop: 4,
             }}
@@ -317,7 +317,7 @@ export default class SignatureRequest extends PureComponent {
             className="request-signature__content__subtitle"
             variant={TypographyVariant.H7}
             color={TextColor.textAlternative}
-            align={TEXT_ALIGN.CENTER}
+            align={TextAlign.Center}
             margin={12}
             marginTop={3}
           >
diff --git a/ui/components/app/snaps/snap-install-warning/snap-install-warning.js b/ui/components/app/snaps/snap-install-warning/snap-install-warning.js
index 94e8c091c..c289be56f 100644
--- a/ui/components/app/snaps/snap-install-warning/snap-install-warning.js
+++ b/ui/components/app/snaps/snap-install-warning/snap-install-warning.js
@@ -9,7 +9,7 @@ import {
   BackgroundColor,
   IconColor,
   TextVariant,
-  TEXT_ALIGN,
+  TextAlign,
   Size,
   JustifyContent,
 } from '../../../../helpers/constants/design-system';
@@ -86,13 +86,13 @@ export default function SnapInstallWarning({ onCancel, onSubmit, warnings }) {
       </Box>
       <Text
         paddingBottom={6}
-        textAlign={TEXT_ALIGN.CENTER}
+        textAlign={TextAlign.Center}
         variant={TextVariant.headingSm}
         as="h2"
       >
         {t('snapInstallWarningHeading')}
       </Text>
-      <Text paddingBottom={6} textAlign={TEXT_ALIGN.CENTER}>
+      <Text paddingBottom={6} textAlign={TextAlign.Center}>
         {warnings.length > 1
           ? t('snapInstallWarningCheckPlural')
           : t('snapInstallWarningCheck')}
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 0564930b6..a90bad16a 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
@@ -5,12 +5,12 @@ import classnames from 'classnames';
 import Typography from '../../ui/typography/typography';
 import {
   Color,
-  FONT_WEIGHT,
+  FontWeight,
   TypographyVariant,
   DISPLAY,
   FLEX_WRAP,
   AlignItems,
-  TEXT_ALIGN,
+  TextAlign,
 } from '../../../helpers/constants/design-system';
 
 export default function TransactionDetailItem({
@@ -28,7 +28,7 @@ export default function TransactionDetailItem({
       <div className="transaction-detail-item__row">
         <Typography
           color={detailTitleColor}
-          fontWeight={boldHeadings ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL}
+          fontWeight={boldHeadings ? FontWeight.Bold : FontWeight.Normal}
           variant={TypographyVariant.H6}
           boxProps={{
             display: DISPLAY.FLEX,
@@ -54,12 +54,12 @@ export default function TransactionDetailItem({
           )}
           <Typography
             color={Color.textDefault}
-            fontWeight={boldHeadings ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL}
+            fontWeight={boldHeadings ? FontWeight.Bold : FontWeight.Normal}
             variant={TypographyVariant.H6}
             marginTop={1}
             marginBottom={1}
             marginLeft={1}
-            boxProps={{ textAlign: TEXT_ALIGN.RIGHT }}
+            boxProps={{ textAlign: TextAlign.Right }}
           >
             {detailTotal}
           </Typography>
diff --git a/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.js b/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.js
index b59f12538..f8dd64715 100644
--- a/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.js
+++ b/ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.js
@@ -11,7 +11,7 @@ import Box from '../../ui/box';
 import {
   BorderRadius,
   DISPLAY,
-  TEXT_ALIGN,
+  TextAlign,
   TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
@@ -102,7 +102,7 @@ const ConfirmRemoveJWT = ({
       )}
       <Text
         as="h6"
-        textAlign={TEXT_ALIGN.CENTER}
+        textAlign={TextAlign.Center}
         variant={TextVariant.bodySm}
         marginTop={2}
       >
diff --git a/ui/components/institutional/transaction-failed-modal/transaction-failed.js b/ui/components/institutional/transaction-failed-modal/transaction-failed.js
index 24f566fed..c594c8097 100644
--- a/ui/components/institutional/transaction-failed-modal/transaction-failed.js
+++ b/ui/components/institutional/transaction-failed-modal/transaction-failed.js
@@ -9,8 +9,8 @@ import {
   BorderRadius,
   DISPLAY,
   FLEX_DIRECTION,
-  FONT_WEIGHT,
-  TEXT_ALIGN,
+  FontWeight,
+  TextAlign,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { Text, Icon, IconName, IconSize } from '../../component-library';
@@ -43,8 +43,8 @@ const TransactionFailedModal = ({
         <Text
           as="h1"
           variant={TextVariant.displayMd}
-          textAlign={TEXT_ALIGN.CENTER}
-          fontWeight={FONT_WEIGHT.BOLD}
+          textAlign={TextAlign.Center}
+          fontWeight={FontWeight.Bold}
           paddingTop={4}
           paddingBottom={4}
         >
@@ -53,7 +53,7 @@ const TransactionFailedModal = ({
             : `${t('transactionFailed')}!`}
         </Text>
         <Text
-          textAlign={TEXT_ALIGN.CENTER}
+          textAlign={TextAlign.Center}
           variant={TextVariant.bodySm}
           paddingTop={4}
           paddingBottom={4}