diff --git a/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx b/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx
index 6e07e0534a6..c86db2e1074 100644
--- a/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx
+++ b/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx
@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useBackgroundClient } from '_src/ui/app/hooks/useBackgroundClient';
-import { Text } from '_src/ui/app/shared/text';
 import classNames from 'clsx';
 import { Form, Formik } from 'formik';
 import { toast } from 'react-hot-toast';
@@ -75,10 +74,10 @@ export function PasswordInputDialog({
                             errorMessage={errors.password}
                         />
                         <div className="mt-4 text-center">
-                            <Text variant="pBodySmall" color="steel-dark" weight="normal">
+                            <span className="text-body-md text-neutral-40">
                                 This is the password you currently use to lock and unlock your IOTA
                                 wallet.
-                            </Text>
+                            </span>
                         </div>
                     </div>
                     <div className="flex flex-nowrap gap-3.75 self-stretch">
diff --git a/apps/wallet/src/ui/app/components/accounts/AccountBalanceItem.tsx b/apps/wallet/src/ui/app/components/accounts/AccountBalanceItem.tsx
index fcae444a0ac..7c2b0603a3a 100644
--- a/apps/wallet/src/ui/app/components/accounts/AccountBalanceItem.tsx
+++ b/apps/wallet/src/ui/app/components/accounts/AccountBalanceItem.tsx
@@ -1,7 +1,6 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Text } from '_src/ui/app/shared/text';
 import { formatAddress } from '@iota/iota-sdk/utils';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
 import { IconButton } from '_components';
@@ -29,9 +28,7 @@ export function AccountBalanceItem({ account }: AccountBalanceItemProps): JSX.El
         <div className="border-hero/10 group flex cursor-pointer flex-col gap-3 rounded-xl border border-solid bg-white/40 px-4 py-3">
             <div className="flex w-full flex-row items-center justify-between">
                 <div className="text-steel-dark flex gap-1.5 leading-none">
-                    <Text variant="body" weight="semibold">
-                        {formatAddress(account.address)}
-                    </Text>
+                    <span className="text-body-md">{formatAddress(account.address)}</span>
                     <div className="flex gap-1 opacity-0 duration-100 group-hover:opacity-100">
                         <IconButton
                             variant="transparent"
@@ -41,9 +38,9 @@ export function AccountBalanceItem({ account }: AccountBalanceItemProps): JSX.El
                     </div>
                 </div>
 
-                <Text variant="bodySmall" weight="semibold" color="steel-darker">
+                <span className="text-body-sm">
                     {formatted} {symbol}
-                </Text>
+                </span>
             </div>
         </div>
     );
diff --git a/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx b/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx
index 12d98b7c5cc..ee69a96a670 100644
--- a/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx
+++ b/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx
@@ -6,9 +6,8 @@ import { ImageIcon, ImageIconSize } from '_app/shared/image-icon';
 import { ExternalLink } from '_components';
 import { ampli } from '_src/shared/analytics/ampli';
 import { getDAppUrl } from '_src/shared/utils';
-import { Text } from '_src/ui/app/shared/text';
 import { useState } from 'react';
-import { Card, CardImage, CardBody, ImageShape } from '@iota/apps-ui-kit';
+import { Card, CardImage, CardBody, ImageShape, Badge, BadgeType } from '@iota/apps-ui-kit';
 
 import DisconnectApp from './DisconnectApp';
 
@@ -55,26 +54,15 @@ interface ListViewProps {
 
 function ListView({ name, icon, description, tags }: ListViewProps) {
     return (
-        <div className="item-center hover:bg-iota/10 box-border flex gap-3 rounded bg-white px-1.25 py-3.5">
+        <div className="item-center box-border flex gap-sm rounded-2xl bg-neutral-100 p-sm hover:bg-shader-primary-dark-12">
             <ImageIcon src={icon || null} label={name} fallback={name} />
-            <div className="flex flex-col justify-center gap-1">
-                <Text variant="body" weight="semibold" color="iota-dark">
-                    {name}
-                </Text>
-                <Text variant="pSubtitle" weight="normal" color="steel-darker">
-                    {description}
-                </Text>
+            <div className="flex flex-col justify-center gap-sm">
+                <span className="text-label-md text-neutral-10">{name}</span>
+                <span className="text-body-sm text-neutral-40">{description}</span>
                 {tags?.length && (
-                    <div className="mt-0.5 flex flex-wrap gap-1">
+                    <div className="flex flex-wrap gap-xxs">
                         {tags?.map((tag) => (
-                            <div
-                                className="item-center border-steel flex justify-center rounded border border-solid px-1.5 py-0.5"
-                                key={tag}
-                            >
-                                <Text variant="captionSmall" weight="medium" color="steel-dark">
-                                    {tag}
-                                </Text>
-                            </div>
+                            <Badge key={tag} label={tag} type={BadgeType.Neutral} />
                         ))}
                     </div>
                 )}
diff --git a/apps/wallet/src/ui/app/components/iota-apps/IotaAppEmpty.tsx b/apps/wallet/src/ui/app/components/iota-apps/IotaAppEmpty.tsx
index 5f51bce1678..4dc7b6021d8 100644
--- a/apps/wallet/src/ui/app/components/iota-apps/IotaAppEmpty.tsx
+++ b/apps/wallet/src/ui/app/components/iota-apps/IotaAppEmpty.tsx
@@ -2,13 +2,14 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { Placeholder } from '@iota/apps-ui-kit';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-const appEmptyStyle = cva(['flex gap-3 p-3.75 h-28'], {
+const appEmptyStyle = cva(['flex gap-3 p-lg h-28'], {
     variants: {
         displayType: {
             full: 'w-full',
-            card: 'bg-white flex flex-col p-3.75 box-border w-full rounded-2xl h-32 box-border w-full rounded-2xl border border-solid border-gray-40',
+            card: 'bg-neutral-100 flex flex-col p-lg w-full rounded-2xl h-32 box-border w-full rounded-2xl border border-solid border-shader-primary-dark',
         },
     },
     defaultVariants: {
@@ -21,18 +22,18 @@ export interface IotaAppEmptyProps extends VariantProps<typeof appEmptyStyle> {}
 export function IotaAppEmpty({ ...styleProps }: IotaAppEmptyProps) {
     return (
         <div className={appEmptyStyle(styleProps)}>
-            <div className="bg-gray-40 h-10 w-10 rounded-full"></div>
+            <Placeholder width="w-10" height="h-10" />
             <div className="flex flex-1 flex-col gap-2.5">
                 {styleProps.displayType === 'full' ? (
                     <>
-                        <div className="bg-gray-40 h-3.5 w-2/5 rounded"></div>
-                        <div className="bg-gray-40 h-3.5 w-full rounded"></div>
-                        <div className="bg-gray-40 h-3.5 w-1/4 rounded"></div>
+                        {new Array(2).fill(0).map((_, index) => (
+                            <Placeholder />
+                        ))}
                     </>
                 ) : (
                     <div className="flex gap-2">
-                        <div className="bg-gray-40 h-3.5 w-1/4 rounded"></div>
-                        <div className="bg-gray-40 h-3.5 w-3/5 rounded"></div>
+                        <Placeholder width="w-1/4" height="h-3.5" />
+                        <Placeholder width="w-3/5" height="h-3.5" />
                     </div>
                 )}
             </div>
diff --git a/apps/wallet/src/ui/app/components/iota-apps/index.tsx b/apps/wallet/src/ui/app/components/iota-apps/index.tsx
index f27954c05ef..8633641c5ed 100644
--- a/apps/wallet/src/ui/app/components/iota-apps/index.tsx
+++ b/apps/wallet/src/ui/app/components/iota-apps/index.tsx
@@ -2,7 +2,6 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Text } from '_app/shared/text';
 import { useAppSelector } from '_hooks';
 import { Feature } from '@iota/core';
 import { prepareLinkToCompare } from '_src/shared/utils';
@@ -13,7 +12,8 @@ import { permissionsSelectors } from '../../redux/slices/permissions';
 import { AppsPageBanner } from './Banner';
 import { IotaApp, type DAppEntry } from './IotaApp';
 import { IotaAppEmpty } from './IotaAppEmpty';
-import { Header } from '@iota/apps-ui-kit';
+import { InfoBox, InfoBoxStyle, InfoBoxType, Header } from '@iota/apps-ui-kit';
+import { Info } from '@iota/ui-icons';
 
 export function AppsPlayGround() {
     const ecosystemApps = useFeature<DAppEntry[]>(Feature.WalletDapps).value;
@@ -46,16 +46,17 @@ export function AppsPlayGround() {
             <AppsPageBanner />
 
             {filteredEcosystemApps?.length ? (
-                <div className="bg-gray-40 rounded-xl p-4">
-                    <Text variant="pBodySmall" color="gray-75" weight="normal">
-                        Apps below are actively curated but do not indicate any endorsement or
-                        relationship with IOTA Wallet. Please DYOR.
-                    </Text>
-                </div>
+                <InfoBox
+                    type={InfoBoxType.Default}
+                    icon={<Info />}
+                    style={InfoBoxStyle.Elevated}
+                    supportingText="Apps below are actively curated but do not indicate any endorsement or
+                        relationship with IOTA Wallet. Please DYOR."
+                />
             ) : null}
 
             {filteredEcosystemApps?.length ? (
-                <div className="divide-gray-45 mt-2 flex flex-col divide-x-0 divide-y divide-solid">
+                <div className="mt-md flex flex-col gap-sm">
                     {filteredEcosystemApps.map((app) => (
                         <IotaApp
                             key={app.link}
diff --git a/apps/wallet/src/ui/app/pages/approval-request/SignMessageRequest.tsx b/apps/wallet/src/ui/app/pages/approval-request/SignMessageRequest.tsx
index a94e583de3f..610a63c8397 100644
--- a/apps/wallet/src/ui/app/pages/approval-request/SignMessageRequest.tsx
+++ b/apps/wallet/src/ui/app/pages/approval-request/SignMessageRequest.tsx
@@ -11,14 +11,13 @@ import { useAccountByAddress } from '../../hooks/useAccountByAddress';
 import { useSigner } from '../../hooks/useSigner';
 import { respondToTransactionRequest } from '../../redux/slices/transaction-requests';
 import { PageMainLayoutTitle } from '../../shared/page-main-layout/PageMainLayoutTitle';
-import { Text } from '../../shared/text';
 
 export interface SignMessageRequestProps {
     request: SignMessageApprovalRequest;
 }
 
 export function SignMessageRequest({ request }: SignMessageRequestProps) {
-    const { message, type } = useMemo(() => toUtf8OrB64(request.tx.message), [request.tx.message]);
+    const { message } = useMemo(() => toUtf8OrB64(request.tx.message), [request.tx.message]);
     const { data: account } = useAccountByAddress(request.tx.accountAddress);
     const signer = useSigner(account);
     const dispatch = useAppDispatch();
@@ -53,14 +52,7 @@ export function SignMessageRequest({ request }: SignMessageRequestProps) {
             </div>
             <div className="flex flex-col flex-nowrap items-stretch overflow-y-auto overflow-x-hidden rounded-15 border border-solid border-gray-50 bg-white shadow-card-soft">
                 <div className="break-words p-5">
-                    <Text
-                        variant="pBodySmall"
-                        weight="medium"
-                        color="steel-darker"
-                        mono={type === 'base64'}
-                    >
-                        {message}
-                    </Text>
+                    <span className="text-body-sm text-neutral-40">{message}</span>
                 </div>
             </div>
         </UserApproveContainer>
diff --git a/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx b/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx
index 8484226eca3..001d31ab4ee 100644
--- a/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx
+++ b/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx
@@ -2,7 +2,6 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Text } from '_app/shared/text';
 import { ExplorerLinkType, Loading, UnlockAccountButton } from '_components';
 import { useAppSelector, useCoinsReFetchingConfig } from '_hooks';
 import { useActiveAccount } from '_src/ui/app/hooks/useActiveAccount';
@@ -200,15 +199,11 @@ function TokenDetails({ coinType }: TokenDetailsProps) {
                                 {!accountHasIota ? (
                                     <div className="flex flex-col gap-5">
                                         <div className="flex flex-col flex-nowrap items-center justify-center px-2.5 text-center">
-                                            <Text
-                                                variant="pBodySmall"
-                                                color="gray-80"
-                                                weight="normal"
-                                            >
+                                            <span className="text-body-sm text-neutral-40">
                                                 {isMainnet
                                                     ? 'Start by buying IOTA'
                                                     : 'Need to send transactions on the IOTA network? You’ll need IOTA in your wallet'}
-                                            </Text>
+                                            </span>
                                         </div>
                                         {!isMainnet && <FaucetRequestButton />}
                                     </div>
diff --git a/apps/wallet/src/ui/app/pages/home/tokens/coin-balance/CoinBalance.module.scss b/apps/wallet/src/ui/app/pages/home/tokens/coin-balance/CoinBalance.module.scss
deleted file mode 100644
index 163194b6163..00000000000
--- a/apps/wallet/src/ui/app/pages/home/tokens/coin-balance/CoinBalance.module.scss
+++ /dev/null
@@ -1,119 +0,0 @@
-@use '_utils';
-@use '_values/colors';
-
-.container {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    gap: 10px;
-
-    &.row-item {
-        padding: 15px 0;
-
-        & + & {
-            border-top: 1px solid colors.$gray-45;
-        }
-    }
-}
-
-.coin-balance-btn {
-    cursor: pointer;
-}
-
-.coin-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 12px;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    color: colors.$white;
-    background-color: colors.$gray-75;
-    flex-shrink: 0;
-
-    &.iota {
-        background-color: colors.$iota-blue;
-    }
-}
-
-.coin-name-container {
-    display: flex;
-    flex-flow: column nowrap;
-    gap: 6px;
-    flex: 1;
-    overflow: hidden;
-}
-
-.coin-name {
-    color: colors.$gray-90;
-    text-transform: capitalize;
-
-    @include utils.typography('Primary/Body-SB');
-    @include utils.overflow-ellipsis;
-}
-
-.coin-symbol {
-    color: colors.$gray-65;
-    text-transform: uppercase;
-
-    @include utils.typography('Primary/BodySmall-M');
-    @include utils.overflow-ellipsis;
-}
-
-.value-container {
-    display: flex;
-    flex-flow: row nowrap;
-    flex: 1;
-    overflow: hidden;
-
-    &.row-item {
-        flex: 1;
-        justify-content: flex-end;
-    }
-
-    &.standalone {
-        align-items: baseline;
-    }
-}
-
-.value {
-    &.standalone {
-        color: colors.$gray-100;
-
-        @include utils.typography('Primary/Heading1-B');
-    }
-
-    &.row-item {
-        flex-shrink: 0;
-
-        @include utils.overflow-ellipsis;
-    }
-}
-
-.symbol {
-    &.standalone {
-        margin-left: 6px;
-        color: colors.$gray-65;
-
-        @include utils.typography('Primary/Heading3-M');
-    }
-
-    &.row-item {
-        flex-shrink: 1;
-
-        @include utils.overflow-ellipsis;
-    }
-}
-
-.value,
-.symbol {
-    white-space: nowrap;
-
-    &.row-item {
-        color: colors.$gray-90;
-        margin-right: 4px;
-
-        @include utils.typography('Primary/Body-M');
-    }
-}
diff --git a/apps/wallet/src/ui/app/pages/home/tokens/icon-link/index.tsx b/apps/wallet/src/ui/app/pages/home/tokens/icon-link/index.tsx
index 788a0bdb85d..272284b6d49 100644
--- a/apps/wallet/src/ui/app/pages/home/tokens/icon-link/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/tokens/icon-link/index.tsx
@@ -1,12 +1,11 @@
 // Copyright (c) Mysten Labs, Inc.
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
-import { Text } from '_app/shared/text';
+
 import cl from 'clsx';
 import { memo } from 'react';
 import type { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
-
 import st from './IconLink.module.scss';
 
 export interface IconLinkProps {
@@ -24,9 +23,9 @@ function IconLink({ to, icon, disabled = false, text }: IconLinkProps) {
             tabIndex={disabled ? -1 : undefined}
         >
             <div className={cl(disabled ? 'text-gray-60' : 'text-hero-dark')}>{icon}</div>
-            <Text color={disabled ? 'gray-60' : 'hero-dark'} weight="semibold" variant="bodySmall">
+            <span className={cl('text-body-sm', disabled ? 'opacity-60' : 'text-neutral-10')}>
                 {text}
-            </Text>
+            </span>
         </Link>
     );
 }
diff --git a/apps/wallet/src/ui/app/shared/card-layout/index.tsx b/apps/wallet/src/ui/app/shared/card-layout/index.tsx
index 09b3937d8c6..55ab6622f49 100644
--- a/apps/wallet/src/ui/app/shared/card-layout/index.tsx
+++ b/apps/wallet/src/ui/app/shared/card-layout/index.tsx
@@ -2,7 +2,6 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Text } from '_app/shared/text';
 import type { ReactNode } from 'react';
 import { CheckmarkFilled, IotaLogoMark } from '@iota/ui-icons';
 import { Header } from '@iota/apps-ui-kit';
@@ -17,23 +16,17 @@ export interface CardLayoutProps {
 
 export function CardLayout({ children, title, subtitle, headerCaption, icon }: CardLayoutProps) {
     return (
-        <div className="bg-iota-lightest flex max-h-popup-height w-full max-w-popup-width flex-grow flex-col flex-nowrap items-center overflow-auto rounded-20 p-7.5 pt-10 shadow-wallet-content">
+        <div className="flex max-h-popup-height w-full max-w-popup-width flex-grow flex-col flex-nowrap items-center overflow-auto p-lg">
             {icon === 'success' ? (
-                <div className="border-success mb-2.5 flex h-12 w-12 items-center justify-center rounded-full border-2 border-dotted p-1">
-                    <div className="bg-success flex h-8 w-8 items-center justify-center rounded-full">
-                        <CheckmarkFilled className="text-2xl text-white" />
-                    </div>
-                </div>
+                <CheckmarkFilled className="mb-lg h-8 w-8 text-primary-30" />
             ) : null}
             {icon === 'iota' ? (
-                <div className="bg-iota mb-7 flex h-16 w-16 flex-col flex-nowrap items-center justify-center rounded-full">
-                    <IotaLogoMark className="text-4xl text-white" />
+                <div className="mb-lg flex h-10 w-10 flex-col flex-nowrap items-center justify-center rounded-full bg-primary-30">
+                    <IotaLogoMark className="h-6 w-6 text-neutral-100" />
                 </div>
             ) : null}
             {headerCaption ? (
-                <Text variant="caption" color="steel-dark" weight="semibold">
-                    {headerCaption}
-                </Text>
+                <span className="text-label-sm text-neutral-40">{headerCaption}</span>
             ) : null}
             {title ? (
                 <div className="mt-1.25">
@@ -41,10 +34,8 @@ export function CardLayout({ children, title, subtitle, headerCaption, icon }: C
                 </div>
             ) : null}
             {subtitle ? (
-                <div className="mb-3.75 text-center">
-                    <Text variant="caption" color="steel-darker" weight="bold">
-                        {subtitle}
-                    </Text>
+                <div className="mb-md text-center">
+                    <span className="text-label-md text-neutral-10">{subtitle}</span>
                 </div>
             ) : null}
             {children}
diff --git a/apps/wallet/src/ui/app/shared/coin-balance/index.tsx b/apps/wallet/src/ui/app/shared/coin-balance/index.tsx
deleted file mode 100644
index fbfa8c2cfed..00000000000
--- a/apps/wallet/src/ui/app/shared/coin-balance/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { Text } from '_app/shared/text';
-import { useFormatCoin } from '@iota/core';
-import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-
-//TODO create variant for different use cases like heading4, subtitle, bodySmall and different symbols color
-interface CoinBalanceProps {
-    amount: bigint | number | string;
-    coinType?: string;
-}
-
-export function CoinBalance({ amount, coinType }: CoinBalanceProps) {
-    const [formatted, symbol] = useFormatCoin(amount, coinType || IOTA_TYPE_ARG);
-
-    return Math.abs(Number(amount)) > 0 ? (
-        <div className="flex flex-nowrap items-baseline gap-0.5 align-baseline">
-            <Text variant="body" weight="semibold" color="gray-90">
-                {formatted}
-            </Text>
-            <Text variant="subtitle" color="gray-90" weight="medium">
-                {symbol}
-            </Text>
-        </div>
-    ) : null;
-}
diff --git a/apps/wallet/src/ui/app/shared/field-label/index.tsx b/apps/wallet/src/ui/app/shared/field-label/index.tsx
deleted file mode 100644
index f8b59316c3c..00000000000
--- a/apps/wallet/src/ui/app/shared/field-label/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { Text } from '_app/shared/text';
-import type { ReactNode } from 'react';
-
-export interface FieldLabelProps {
-    txt: string;
-    children: ReactNode | ReactNode[];
-}
-
-export default function FieldLabel({ txt, children }: FieldLabelProps) {
-    return (
-        <label className="mt-7.5 flex flex-col flex-nowrap gap-2.5 first:mt-0">
-            <div className="ml-2">
-                <Text variant="body" color="steel-darker" weight="semibold">
-                    {txt}
-                </Text>
-            </div>
-
-            {children}
-        </label>
-    );
-}
diff --git a/apps/wallet/src/ui/app/shared/text/index.tsx b/apps/wallet/src/ui/app/shared/text/index.tsx
deleted file mode 100644
index 8bf73abc8f9..00000000000
--- a/apps/wallet/src/ui/app/shared/text/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import { type ReactNode } from 'react';
-
-const textStyles = cva([], {
-    variants: {
-        weight: {
-            normal: 'font-normal',
-            medium: 'font-medium',
-            semibold: 'font-semibold',
-            bold: 'font-bold',
-        },
-        variant: {
-            body: 'text-body',
-            bodySmall: 'text-bodySmall',
-            subtitle: 'text-subtitle',
-            subtitleSmall: 'text-subtitleSmall',
-            subtitleSmallExtra: 'text-subtitleSmallExtra',
-            caption: 'uppercase text-caption',
-            captionSmall: 'uppercase text-captionSmall',
-            captionSmallExtra: 'uppercase tracking-wider text-captionSmallExtra',
-            pBody: 'text-pBody',
-            pBodySmall: 'text-pBodySmall',
-            pSubtitle: 'text-pSubtitle',
-            pSubtitleSmall: 'text-pSubtitleSmall',
-        },
-        color: {
-            white: 'text-white',
-            'gray-100': 'text-gray-100',
-            'gray-90': 'text-gray-90',
-            'gray-85': 'text-gray-85',
-            'gray-80': 'text-gray-80',
-            'gray-75': 'text-gray-75',
-            'gray-70': 'text-gray-70',
-            'gray-65': 'text-gray-65',
-            'gray-60': 'text-gray-60',
-            'iota-dark': 'text-iota-dark',
-            iota: 'text-iota',
-            'iota-light': 'text-iota-light',
-            steel: 'text-steel',
-            'steel-dark': 'text-steel-dark',
-            'steel-darker': 'text-steel-darker',
-            hero: 'text-hero',
-            'hero-dark': 'text-hero-dark',
-            'hero-darkest': 'text-hero-darkest',
-            'success-dark': 'text-success-dark',
-            'issue-dark': 'text-issue-dark',
-        },
-        italic: {
-            true: 'italic',
-            false: '',
-        },
-        truncate: {
-            true: 'truncate',
-            false: '',
-        },
-        mono: {
-            true: 'font-mono',
-            false: 'font-sans',
-        },
-        nowrap: {
-            true: 'whitespace-nowrap',
-        },
-    },
-    defaultVariants: {
-        weight: 'medium',
-        variant: 'body',
-    },
-});
-
-export interface TextProps extends VariantProps<typeof textStyles> {
-    children: ReactNode;
-    title?: string;
-}
-
-export function Text({ children, title, ...styleProps }: TextProps) {
-    return (
-        <div title={title} className={textStyles(styleProps)}>
-            {children}
-        </div>
-    );
-}