diff --git a/src/app/[countryCode]/(checkout)/layout.tsx b/src/app/[countryCode]/(checkout)/layout.tsx
index 53793dbd8..949a4aadf 100644
--- a/src/app/[countryCode]/(checkout)/layout.tsx
+++ b/src/app/[countryCode]/(checkout)/layout.tsx
@@ -17,16 +17,16 @@ export default function CheckoutLayout({
             data-testid="back-to-cart-link"
           >
             <ChevronDown className="rotate-90" size={16} />
-            <span className="mt-px hidden small:block txt-compact-plus text-ui-fg-subtle hover:text-ui-fg-base ">
+            <span className="mt-px hidden small:block text-compact-plus text-ui-fg-subtle hover:text-ui-fg-base ">
               Back to shopping cart
             </span>
-            <span className="mt-px block small:hidden txt-compact-plus text-ui-fg-subtle hover:text-ui-fg-base">
+            <span className="mt-px block small:hidden text-compact-plus text-ui-fg-subtle hover:text-ui-fg-base">
               Back
             </span>
           </LocalizedClientLink>
           <LocalizedClientLink
             href="/"
-            className="txt-compact-xlarge-plus text-ui-fg-subtle hover:text-ui-fg-base uppercase"
+            className="text-compact-xlarge-plus text-ui-fg-subtle hover:text-ui-fg-base uppercase"
             data-testid="store-link"
           >
             Medusa Store
diff --git a/src/modules/account/components/address-card/edit-address-modal.tsx b/src/modules/account/components/address-card/edit-address-modal.tsx
index 6f08daa91..2bf73b7fb 100644
--- a/src/modules/account/components/address-card/edit-address-modal.tsx
+++ b/src/modules/account/components/address-card/edit-address-modal.tsx
@@ -81,7 +81,7 @@ const EditAddress: React.FC<EditAddressProps> = ({
           </Heading>
           {address.company && (
             <Text
-              className="txt-compact-small text-ui-fg-base"
+              className="text-compact-small text-ui-fg-base"
               data-testid="address-company"
             >
               {address.company}
diff --git a/src/modules/account/templates/account-layout.tsx b/src/modules/account/templates/account-layout.tsx
index 2d2949063..a9b1ac408 100644
--- a/src/modules/account/templates/account-layout.tsx
+++ b/src/modules/account/templates/account-layout.tsx
@@ -24,7 +24,7 @@ const AccountLayout: React.FC<AccountLayoutProps> = ({
         <div className="flex flex-col small:flex-row items-end justify-between small:border-t border-gray-200 py-12 gap-8">
           <div>
             <h3 className="text-xl-semi mb-4">Got questions?</h3>
-            <span className="txt-medium">
+            <span className="text-medium">
               You can find frequently asked questions and answers on our
               customer service page.
             </span>
diff --git a/src/modules/cart/components/cart-item-select/index.tsx b/src/modules/cart/components/cart-item-select/index.tsx
index 0073df0d3..824e425fa 100644
--- a/src/modules/cart/components/cart-item-select/index.tsx
+++ b/src/modules/cart/components/cart-item-select/index.tsx
@@ -42,7 +42,7 @@ const CartItemSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
           onFocus={() => innerRef.current?.focus()}
           onBlur={() => innerRef.current?.blur()}
           className={clx(
-            "relative flex items-center txt-compact-small border text-ui-fg-base group",
+            "relative flex items-center text-compact-small border text-ui-fg-base group",
             className,
             {
               "text-ui-fg-subtle": isPlaceholder,
diff --git a/src/modules/cart/components/item/index.tsx b/src/modules/cart/components/item/index.tsx
index b35f1c49c..e575c19fb 100644
--- a/src/modules/cart/components/item/index.tsx
+++ b/src/modules/cart/components/item/index.tsx
@@ -64,7 +64,7 @@ const Item = ({ item, type = "full", currencyCode }: ItemProps) => {
 
       <Table.Cell className="text-left">
         <Text
-          className="txt-medium-plus text-ui-fg-base"
+          className="text-medium-plus text-ui-fg-base"
           data-testid="product-title"
         >
           {item.product_title}
diff --git a/src/modules/cart/components/sign-in-prompt/index.tsx b/src/modules/cart/components/sign-in-prompt/index.tsx
index b1d169d44..3ce042808 100644
--- a/src/modules/cart/components/sign-in-prompt/index.tsx
+++ b/src/modules/cart/components/sign-in-prompt/index.tsx
@@ -5,10 +5,10 @@ const SignInPrompt = () => {
   return (
     <div className="bg-white flex items-center justify-between">
       <div>
-        <Heading level="h2" className="txt-xlarge">
+        <Heading level="h2" className="text-xlarge">
           Already have an account?
         </Heading>
-        <Text className="txt-medium text-ui-fg-subtle mt-2">
+        <Text className="text-medium text-ui-fg-subtle mt-2">
           Sign in for a better experience.
         </Text>
       </div>
diff --git a/src/modules/cart/templates/items.tsx b/src/modules/cart/templates/items.tsx
index 71818c3f4..88f9c9ece 100644
--- a/src/modules/cart/templates/items.tsx
+++ b/src/modules/cart/templates/items.tsx
@@ -18,7 +18,7 @@ const ItemsTemplate = ({ cart }: ItemsTemplateProps) => {
       </div>
       <Table>
         <Table.Header className="border-t-0">
-          <Table.Row className="text-ui-fg-subtle txt-medium-plus">
+          <Table.Row className="text-ui-fg-subtle text-medium-plus">
             <Table.HeaderCell className="!pl-0">Item</Table.HeaderCell>
             <Table.HeaderCell></Table.HeaderCell>
             <Table.HeaderCell>Quantity</Table.HeaderCell>
diff --git a/src/modules/checkout/components/addresses/index.tsx b/src/modules/checkout/components/addresses/index.tsx
index d231acacc..814dfaaad 100644
--- a/src/modules/checkout/components/addresses/index.tsx
+++ b/src/modules/checkout/components/addresses/index.tsx
@@ -99,22 +99,22 @@ const Addresses = ({
                     className="flex flex-col w-1/3"
                     data-testid="shipping-address-summary"
                   >
-                    <Text className="txt-medium-plus text-ui-fg-base mb-1">
+                    <Text className="text-medium-plus text-ui-fg-base mb-1">
                       Shipping Address
                     </Text>
-                    <Text className="txt-medium text-ui-fg-subtle">
+                    <Text className="text-medium text-ui-fg-subtle">
                       {cart.shipping_address.first_name}{" "}
                       {cart.shipping_address.last_name}
                     </Text>
-                    <Text className="txt-medium text-ui-fg-subtle">
+                    <Text className="text-medium text-ui-fg-subtle">
                       {cart.shipping_address.address_1}{" "}
                       {cart.shipping_address.address_2}
                     </Text>
-                    <Text className="txt-medium text-ui-fg-subtle">
+                    <Text className="text-medium text-ui-fg-subtle">
                       {cart.shipping_address.postal_code},{" "}
                       {cart.shipping_address.city}
                     </Text>
-                    <Text className="txt-medium text-ui-fg-subtle">
+                    <Text className="text-medium text-ui-fg-subtle">
                       {cart.shipping_address.country_code?.toUpperCase()}
                     </Text>
                   </div>
@@ -123,13 +123,13 @@ const Addresses = ({
                     className="flex flex-col w-1/3 "
                     data-testid="shipping-contact-summary"
                   >
-                    <Text className="txt-medium-plus text-ui-fg-base mb-1">
+                    <Text className="text-medium-plus text-ui-fg-base mb-1">
                       Contact
                     </Text>
-                    <Text className="txt-medium text-ui-fg-subtle">
+                    <Text className="text-medium text-ui-fg-subtle">
                       {cart.shipping_address.phone}
                     </Text>
-                    <Text className="txt-medium text-ui-fg-subtle">
+                    <Text className="text-medium text-ui-fg-subtle">
                       {cart.email}
                     </Text>
                   </div>
@@ -138,29 +138,29 @@ const Addresses = ({
                     className="flex flex-col w-1/3"
                     data-testid="billing-address-summary"
                   >
-                    <Text className="txt-medium-plus text-ui-fg-base mb-1">
+                    <Text className="text-medium-plus text-ui-fg-base mb-1">
                       Billing Address
                     </Text>
 
                     {sameAsBilling ? (
-                      <Text className="txt-medium text-ui-fg-subtle">
+                      <Text className="text-medium text-ui-fg-subtle">
                         Billing- and delivery address are the same.
                       </Text>
                     ) : (
                       <>
-                        <Text className="txt-medium text-ui-fg-subtle">
+                        <Text className="text-medium text-ui-fg-subtle">
                           {cart.billing_address?.first_name}{" "}
                           {cart.billing_address?.last_name}
                         </Text>
-                        <Text className="txt-medium text-ui-fg-subtle">
+                        <Text className="text-medium text-ui-fg-subtle">
                           {cart.billing_address?.address_1}{" "}
                           {cart.billing_address?.address_2}
                         </Text>
-                        <Text className="txt-medium text-ui-fg-subtle">
+                        <Text className="text-medium text-ui-fg-subtle">
                           {cart.billing_address?.postal_code},{" "}
                           {cart.billing_address?.city}
                         </Text>
-                        <Text className="txt-medium text-ui-fg-subtle">
+                        <Text className="text-medium text-ui-fg-subtle">
                           {cart.billing_address?.country_code?.toUpperCase()}
                         </Text>
                       </>
diff --git a/src/modules/checkout/components/discount-code/index.tsx b/src/modules/checkout/components/discount-code/index.tsx
index 023158f36..c63b04524 100644
--- a/src/modules/checkout/components/discount-code/index.tsx
+++ b/src/modules/checkout/components/discount-code/index.tsx
@@ -53,13 +53,13 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
 
   return (
     <div className="w-full bg-white flex flex-col">
-      <div className="txt-medium">
+      <div className="text-medium">
         <form action={(a) => addPromotionCode(a)} className="w-full mb-5">
           <Label className="flex gap-x-1 my-2 items-center">
             <button
               onClick={() => setIsOpen(!isOpen)}
               type="button"
-              className="txt-medium text-ui-fg-interactive hover:text-ui-fg-interactive-hover"
+              className="text-medium text-ui-fg-interactive hover:text-ui-fg-interactive-hover"
               data-testid="add-discount-button"
             >
               Add Promotion Code(s)
@@ -100,7 +100,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
         {promotions.length > 0 && (
           <div className="w-full flex items-center">
             <div className="flex flex-col w-full">
-              <Heading className="txt-medium mb-2">
+              <Heading className="text-medium mb-2">
                 Promotion(s) applied:
               </Heading>
 
@@ -111,7 +111,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
                     className="flex items-center justify-between w-full max-w-full mb-2"
                     data-testid="discount-row"
                   >
-                    <Text className="flex gap-x-1 items-baseline txt-small-plus w-4/5 pr-1">
+                    <Text className="flex gap-x-1 items-baseline text-small-plus w-4/5 pr-1">
                       <span className="truncate" data-testid="discount-code">
                         <Badge
                           color={promotion.is_automatic ? "green" : "grey"}
diff --git a/src/modules/checkout/components/payment-container/index.tsx b/src/modules/checkout/components/payment-container/index.tsx
index 9d2c130de..3b8bc459c 100644
--- a/src/modules/checkout/components/payment-container/index.tsx
+++ b/src/modules/checkout/components/payment-container/index.tsx
@@ -107,7 +107,7 @@ export const StripeCardContainer = ({
       {selectedPaymentOptionId === paymentProviderId &&
         (stripeReady ? (
           <div className="my-4 transition-all duration-150 ease-in-out">
-            <Text className="txt-medium-plus text-ui-fg-base mb-1">
+            <Text className="text-medium-plus text-ui-fg-base mb-1">
               Enter your card details:
             </Text>
             <CardElement
diff --git a/src/modules/checkout/components/payment/index.tsx b/src/modules/checkout/components/payment/index.tsx
index 7d838b936..2af5c2e98 100644
--- a/src/modules/checkout/components/payment/index.tsx
+++ b/src/modules/checkout/components/payment/index.tsx
@@ -168,11 +168,11 @@ const Payment = ({
 
           {paidByGiftcard && (
             <div className="flex flex-col w-1/3">
-              <Text className="txt-medium-plus text-ui-fg-base mb-1">
+              <Text className="text-medium-plus text-ui-fg-base mb-1">
                 Payment method
               </Text>
               <Text
-                className="txt-medium text-ui-fg-subtle"
+                className="text-medium text-ui-fg-subtle"
                 data-testid="payment-method-summary"
               >
                 Gift card
@@ -206,11 +206,11 @@ const Payment = ({
           {cart && paymentReady && activeSession ? (
             <div className="flex items-start gap-x-1 w-full">
               <div className="flex flex-col w-1/3">
-                <Text className="txt-medium-plus text-ui-fg-base mb-1">
+                <Text className="text-medium-plus text-ui-fg-base mb-1">
                   Payment method
                 </Text>
                 <Text
-                  className="txt-medium text-ui-fg-subtle"
+                  className="text-medium text-ui-fg-subtle"
                   data-testid="payment-method-summary"
                 >
                   {paymentInfoMap[activeSession?.provider_id]?.title ||
@@ -218,11 +218,11 @@ const Payment = ({
                 </Text>
               </div>
               <div className="flex flex-col w-1/3">
-                <Text className="txt-medium-plus text-ui-fg-base mb-1">
+                <Text className="text-medium-plus text-ui-fg-base mb-1">
                   Payment details
                 </Text>
                 <div
-                  className="flex gap-2 txt-medium text-ui-fg-subtle items-center"
+                  className="flex gap-2 text-medium text-ui-fg-subtle items-center"
                   data-testid="payment-details-summary"
                 >
                   <Container className="flex items-center h-7 w-fit p-2 bg-ui-button-neutral-hover">
@@ -240,11 +240,11 @@ const Payment = ({
             </div>
           ) : paidByGiftcard ? (
             <div className="flex flex-col w-1/3">
-              <Text className="txt-medium-plus text-ui-fg-base mb-1">
+              <Text className="text-medium-plus text-ui-fg-base mb-1">
                 Payment method
               </Text>
               <Text
-                className="txt-medium text-ui-fg-subtle"
+                className="text-medium text-ui-fg-subtle"
                 data-testid="payment-method-summary"
               >
                 Gift card
diff --git a/src/modules/checkout/components/review/index.tsx b/src/modules/checkout/components/review/index.tsx
index 7730f7a01..9cd90b3d4 100644
--- a/src/modules/checkout/components/review/index.tsx
+++ b/src/modules/checkout/components/review/index.tsx
@@ -37,7 +37,7 @@ const Review = ({ cart }: { cart: any }) => {
         <>
           <div className="flex items-start gap-x-1 w-full mb-6">
             <div className="w-full">
-              <Text className="txt-medium-plus text-ui-fg-base mb-1">
+              <Text className="text-medium-plus text-ui-fg-base mb-1">
                 By clicking the Place Order button, you confirm that you have
                 read, understand and accept our Terms of Use, Terms of Sale and
                 Returns Policy and acknowledge that you have read Medusa
diff --git a/src/modules/checkout/components/shipping/index.tsx b/src/modules/checkout/components/shipping/index.tsx
index c90beed76..afc410c11 100644
--- a/src/modules/checkout/components/shipping/index.tsx
+++ b/src/modules/checkout/components/shipping/index.tsx
@@ -185,10 +185,10 @@ const Shipping: React.FC<ShippingProps> = ({
         <>
           <div className="grid">
             <div className="flex flex-col">
-              <span className="font-medium txt-medium text-ui-fg-base">
+              <span className="font-medium text-medium text-ui-fg-base">
                 Shipping method
               </span>
-              <span className="mb-4 text-ui-fg-muted txt-medium">
+              <span className="mb-4 text-ui-fg-muted text-medium">
                 How would you like you order delivered
               </span>
             </div>
@@ -294,10 +294,10 @@ const Shipping: React.FC<ShippingProps> = ({
           {showPickupOptions === PICKUP_OPTION_ON && (
             <div className="grid">
               <div className="flex flex-col">
-                <span className="font-medium txt-medium text-ui-fg-base">
+                <span className="font-medium text-medium text-ui-fg-base">
                   Store
                 </span>
-                <span className="mb-4 text-ui-fg-muted txt-medium">
+                <span className="mb-4 text-ui-fg-muted text-medium">
                   Choose a store near you
                 </span>
               </div>
@@ -377,10 +377,10 @@ const Shipping: React.FC<ShippingProps> = ({
           <div className="text-small-regular">
             {cart && (cart.shipping_methods?.length ?? 0) > 0 && (
               <div className="flex flex-col w-1/3">
-                <Text className="txt-medium-plus text-ui-fg-base mb-1">
+                <Text className="text-medium-plus text-ui-fg-base mb-1">
                   Method
                 </Text>
-                <Text className="txt-medium text-ui-fg-subtle">
+                <Text className="text-medium text-ui-fg-subtle">
                   {cart.shipping_methods?.at(-1)?.name}{" "}
                   {convertToLocale({
                     amount: cart.shipping_methods.at(-1)?.amount!,
diff --git a/src/modules/common/components/cart-totals/index.tsx b/src/modules/common/components/cart-totals/index.tsx
index 9a7c53ea4..f3d8348dc 100644
--- a/src/modules/common/components/cart-totals/index.tsx
+++ b/src/modules/common/components/cart-totals/index.tsx
@@ -29,7 +29,7 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals }) => {
 
   return (
     <div>
-      <div className="flex flex-col gap-y-2 txt-medium text-ui-fg-subtle ">
+      <div className="flex flex-col gap-y-2 text-medium text-ui-fg-subtle ">
         <div className="flex items-center justify-between">
           <span className="flex gap-x-1 items-center">
             Subtotal (excl. shipping and taxes)
@@ -78,10 +78,10 @@ const CartTotals: React.FC<CartTotalsProps> = ({ totals }) => {
         )}
       </div>
       <div className="h-px w-full border-b border-gray-200 my-4" />
-      <div className="flex items-center justify-between text-ui-fg-base mb-2 txt-medium ">
+      <div className="flex items-center justify-between text-ui-fg-base mb-2 text-medium ">
         <span>Total</span>
         <span
-          className="txt-xlarge-plus"
+          className="text-xlarge-plus"
           data-testid="cart-total"
           data-value={total || 0}
         >
diff --git a/src/modules/common/components/checkbox/index.tsx b/src/modules/common/components/checkbox/index.tsx
index f8e58ca2f..4e3e0b9fe 100644
--- a/src/modules/common/components/checkbox/index.tsx
+++ b/src/modules/common/components/checkbox/index.tsx
@@ -31,7 +31,7 @@ const CheckboxWithLabel: React.FC<CheckboxProps> = ({
       />
       <Label
         htmlFor="checkbox"
-        className="!transform-none !txt-medium"
+        className="!transform-none !text-medium"
         size="large"
       >
         {label}
diff --git a/src/modules/common/components/filter-radio-group/index.tsx b/src/modules/common/components/filter-radio-group/index.tsx
index dc70edeb4..7f91b6107 100644
--- a/src/modules/common/components/filter-radio-group/index.tsx
+++ b/src/modules/common/components/filter-radio-group/index.tsx
@@ -21,7 +21,7 @@ const FilterRadioGroup = ({
 }: FilterRadioGroupProps) => {
   return (
     <div className="flex gap-x-3 flex-col gap-y-3">
-      <Text className="txt-compact-small-plus text-ui-fg-muted">{title}</Text>
+      <Text className="text-compact-small-plus text-ui-fg-muted">{title}</Text>
       <RadioGroup data-testid={dataTestId} onValueChange={handleChange}>
         {items?.map((i) => (
           <div
@@ -40,7 +40,7 @@ const FilterRadioGroup = ({
             <Label
               htmlFor={i.value}
               className={clx(
-                "!txt-compact-small !transform-none text-ui-fg-subtle hover:cursor-pointer",
+                "!text-compact-small !transform-none text-ui-fg-subtle hover:cursor-pointer",
                 {
                   "text-ui-fg-base": i.value === value,
                 }
diff --git a/src/modules/common/components/input/index.tsx b/src/modules/common/components/input/index.tsx
index 1234ebb2e..b286d97d6 100644
--- a/src/modules/common/components/input/index.tsx
+++ b/src/modules/common/components/input/index.tsx
@@ -36,9 +36,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className="flex flex-col w-full">
         {topLabel && (
-          <Label className="mb-2 txt-compact-medium-plus">{topLabel}</Label>
+          <Label className="mb-2 text-compact-medium-plus">{topLabel}</Label>
         )}
-        <div className="flex relative z-0 w-full txt-compact-medium">
+        <div className="flex relative z-0 w-full text-compact-medium">
           <input
             type={inputType}
             name={name}
diff --git a/src/modules/common/components/line-item-options/index.tsx b/src/modules/common/components/line-item-options/index.tsx
index 69ad5270f..5bec862b7 100644
--- a/src/modules/common/components/line-item-options/index.tsx
+++ b/src/modules/common/components/line-item-options/index.tsx
@@ -16,7 +16,7 @@ const LineItemOptions = ({
     <Text
       data-testid={dataTestid}
       data-value={dataValue}
-      className="inline-block txt-medium text-ui-fg-subtle w-full overflow-hidden text-ellipsis"
+      className="inline-block text-medium text-ui-fg-subtle w-full overflow-hidden text-ellipsis"
     >
       Variant: {variant?.title}
     </Text>
diff --git a/src/modules/home/components/featured-products/product-rail/index.tsx b/src/modules/home/components/featured-products/product-rail/index.tsx
index 2a144f216..ddb54b260 100644
--- a/src/modules/home/components/featured-products/product-rail/index.tsx
+++ b/src/modules/home/components/featured-products/product-rail/index.tsx
@@ -29,7 +29,7 @@ export default async function ProductRail({
   return (
     <div className="content-container py-12 small:py-24">
       <div className="flex justify-between mb-8">
-        <Text className="txt-xlarge">{collection.title}</Text>
+        <Text className="text-xlarge">{collection.title}</Text>
         <InteractiveLink href={`/collections/${collection.handle}`}>
           View all
         </InteractiveLink>
diff --git a/src/modules/layout/components/country-select/index.tsx b/src/modules/layout/components/country-select/index.tsx
index 52497ab01..db97ad5f0 100644
--- a/src/modules/layout/components/country-select/index.tsx
+++ b/src/modules/layout/components/country-select/index.tsx
@@ -74,10 +74,10 @@ const CountrySelect = ({ toggleState, regions }: CountrySelectProps) => {
         }
       >
         <ListboxButton className="py-1 w-full">
-          <div className="txt-compact-small flex items-start gap-x-2">
+          <div className="text-compact-small flex items-start gap-x-2">
             <span>Shipping to:</span>
             {current && (
-              <span className="txt-compact-small flex items-center gap-x-2">
+              <span className="text-compact-small flex items-center gap-x-2">
                 {/* @ts-ignore */}
                 <ReactCountryFlag
                   svg
diff --git a/src/modules/layout/components/medusa-cta/index.tsx b/src/modules/layout/components/medusa-cta/index.tsx
index d4469471c..0aa3051c8 100644
--- a/src/modules/layout/components/medusa-cta/index.tsx
+++ b/src/modules/layout/components/medusa-cta/index.tsx
@@ -5,7 +5,7 @@ import NextJs from "../../../common/icons/nextjs"
 
 const MedusaCTA = () => {
   return (
-    <Text className="flex gap-x-2 txt-compact-small-plus items-center">
+    <Text className="flex gap-x-2 text-compact-small-plus items-center">
       Powered by
       <a href="https://www.medusajs.com" target="_blank" rel="noreferrer">
         <Medusa fill="#9ca3af" className="fill-[#9ca3af]" />
diff --git a/src/modules/layout/components/side-menu/index.tsx b/src/modules/layout/components/side-menu/index.tsx
index 8cd1cad54..a31e3c980 100644
--- a/src/modules/layout/components/side-menu/index.tsx
+++ b/src/modules/layout/components/side-menu/index.tsx
@@ -89,7 +89,7 @@ const SideMenu = ({ regions }: { regions: HttpTypes.StoreRegion[] | null }) => {
                           )}
                         />
                       </div>
-                      <Text className="flex justify-between txt-compact-small">
+                      <Text className="flex justify-between text-compact-small">
                         © {new Date().getFullYear()} Medusa Store. All rights
                         reserved.
                       </Text>
diff --git a/src/modules/layout/templates/footer/index.tsx b/src/modules/layout/templates/footer/index.tsx
index 1a5505833..4d12c7df8 100644
--- a/src/modules/layout/templates/footer/index.tsx
+++ b/src/modules/layout/templates/footer/index.tsx
@@ -18,7 +18,7 @@ export default async function Footer() {
           <div>
             <LocalizedClientLink
               href="/"
-              className="txt-compact-xlarge-plus text-ui-fg-subtle hover:text-ui-fg-base uppercase"
+              className="text-compact-xlarge-plus text-ui-fg-subtle hover:text-ui-fg-base uppercase"
             >
               Medusa Store
             </LocalizedClientLink>
@@ -26,7 +26,7 @@ export default async function Footer() {
           <div className="text-small-regular gap-10 md:gap-x-16 grid grid-cols-2 sm:grid-cols-3">
             {productCategories && productCategories?.length > 0 && (
               <div className="flex flex-col gap-y-2">
-                <span className="txt-small-plus txt-ui-fg-base">
+                <span className="text-small-plus text-ui-fg-base">
                   Categories
                 </span>
                 <ul
@@ -47,13 +47,13 @@ export default async function Footer() {
 
                     return (
                       <li
-                        className="flex flex-col gap-2 text-ui-fg-subtle txt-small"
+                        className="flex flex-col gap-2 text-ui-fg-subtle text-small"
                         key={c.id}
                       >
                         <LocalizedClientLink
                           className={clx(
                             "hover:text-ui-fg-base",
-                            children && "txt-small-plus"
+                            children && "text-small-plus"
                           )}
                           href={`/categories/${c.handle}`}
                           data-testid="category-link"
@@ -84,12 +84,12 @@ export default async function Footer() {
             )}
             {collections && collections.length > 0 && (
               <div className="flex flex-col gap-y-2">
-                <span className="txt-small-plus txt-ui-fg-base">
+                <span className="text-small-plus text-ui-fg-base">
                   Collections
                 </span>
                 <ul
                   className={clx(
-                    "grid grid-cols-1 gap-2 text-ui-fg-subtle txt-small",
+                    "grid grid-cols-1 gap-2 text-ui-fg-subtle text-small",
                     {
                       "grid-cols-2": (collections?.length || 0) > 3,
                     }
@@ -109,8 +109,8 @@ export default async function Footer() {
               </div>
             )}
             <div className="flex flex-col gap-y-2">
-              <span className="txt-small-plus txt-ui-fg-base">Medusa</span>
-              <ul className="grid grid-cols-1 gap-y-2 text-ui-fg-subtle txt-small">
+              <span className="text-small-plus text-ui-fg-base">Medusa</span>
+              <ul className="grid grid-cols-1 gap-y-2 text-ui-fg-subtle text-small">
                 <li>
                   <a
                     href="https://github.com/medusajs"
@@ -146,7 +146,7 @@ export default async function Footer() {
           </div>
         </div>
         <div className="flex w-full mb-16 justify-between text-ui-fg-muted">
-          <Text className="txt-compact-small">
+          <Text className="text-compact-small">
             © {new Date().getFullYear()} Medusa Store. All rights reserved.
           </Text>
           <MedusaCTA />
diff --git a/src/modules/layout/templates/nav/index.tsx b/src/modules/layout/templates/nav/index.tsx
index d8d763ae4..8aaf8982a 100644
--- a/src/modules/layout/templates/nav/index.tsx
+++ b/src/modules/layout/templates/nav/index.tsx
@@ -12,7 +12,7 @@ export default async function Nav() {
   return (
     <div className="sticky top-0 inset-x-0 z-50 group">
       <header className="relative h-16 mx-auto border-b duration-200 bg-white border-ui-border-base">
-        <nav className="content-container txt-xsmall-plus text-ui-fg-subtle flex items-center justify-between w-full h-full text-small-regular">
+        <nav className="content-container text-xsmall-plus text-ui-fg-subtle flex items-center justify-between w-full h-full text-small-regular">
           <div className="flex-1 basis-0 h-full flex items-center">
             <div className="h-full">
               <SideMenu regions={regions} />
@@ -22,7 +22,7 @@ export default async function Nav() {
           <div className="flex items-center h-full">
             <LocalizedClientLink
               href="/"
-              className="txt-compact-xlarge-plus hover:text-ui-fg-base uppercase"
+              className="text-compact-xlarge-plus hover:text-ui-fg-base uppercase"
               data-testid="nav-store-link"
             >
               Medusa Store
diff --git a/src/modules/order/components/item/index.tsx b/src/modules/order/components/item/index.tsx
index 69b001f94..0e9e9aaba 100644
--- a/src/modules/order/components/item/index.tsx
+++ b/src/modules/order/components/item/index.tsx
@@ -22,7 +22,7 @@ const Item = ({ item, currencyCode }: ItemProps) => {
 
       <Table.Cell className="text-left">
         <Text
-          className="txt-medium-plus text-ui-fg-base"
+          className="text-medium-plus text-ui-fg-base"
           data-testid="product-name"
         >
           {item.title}
diff --git a/src/modules/order/components/payment-details/index.tsx b/src/modules/order/components/payment-details/index.tsx
index 83bd92508..cc4598624 100644
--- a/src/modules/order/components/payment-details/index.tsx
+++ b/src/modules/order/components/payment-details/index.tsx
@@ -21,21 +21,21 @@ const PaymentDetails = ({ order }: PaymentDetailsProps) => {
         {payment && (
           <div className="flex items-start gap-x-1 w-full">
             <div className="flex flex-col w-1/3">
-              <Text className="txt-medium-plus text-ui-fg-base mb-1">
+              <Text className="text-medium-plus text-ui-fg-base mb-1">
                 Payment method
               </Text>
               <Text
-                className="txt-medium text-ui-fg-subtle"
+                className="text-medium text-ui-fg-subtle"
                 data-testid="payment-method"
               >
                 {paymentInfoMap[payment.provider_id].title}
               </Text>
             </div>
             <div className="flex flex-col w-2/3">
-              <Text className="txt-medium-plus text-ui-fg-base mb-1">
+              <Text className="text-medium-plus text-ui-fg-base mb-1">
                 Payment details
               </Text>
-              <div className="flex gap-2 txt-medium text-ui-fg-subtle items-center">
+              <div className="flex gap-2 text-medium text-ui-fg-subtle items-center">
                 <Container className="flex items-center h-7 w-fit p-2 bg-ui-button-neutral-hover">
                   {paymentInfoMap[payment.provider_id].icon}
                 </Container>
diff --git a/src/modules/order/components/shipping-details/index.tsx b/src/modules/order/components/shipping-details/index.tsx
index e83564c2f..ac7c24231 100644
--- a/src/modules/order/components/shipping-details/index.tsx
+++ b/src/modules/order/components/shipping-details/index.tsx
@@ -19,22 +19,22 @@ const ShippingDetails = ({ order }: ShippingDetailsProps) => {
           className="flex flex-col w-1/3"
           data-testid="shipping-address-summary"
         >
-          <Text className="txt-medium-plus text-ui-fg-base mb-1">
+          <Text className="text-medium-plus text-ui-fg-base mb-1">
             Shipping Address
           </Text>
-          <Text className="txt-medium text-ui-fg-subtle">
+          <Text className="text-medium text-ui-fg-subtle">
             {order.shipping_address?.first_name}{" "}
             {order.shipping_address?.last_name}
           </Text>
-          <Text className="txt-medium text-ui-fg-subtle">
+          <Text className="text-medium text-ui-fg-subtle">
             {order.shipping_address?.address_1}{" "}
             {order.shipping_address?.address_2}
           </Text>
-          <Text className="txt-medium text-ui-fg-subtle">
+          <Text className="text-medium text-ui-fg-subtle">
             {order.shipping_address?.postal_code},{" "}
             {order.shipping_address?.city}
           </Text>
-          <Text className="txt-medium text-ui-fg-subtle">
+          <Text className="text-medium text-ui-fg-subtle">
             {order.shipping_address?.country_code?.toUpperCase()}
           </Text>
         </div>
@@ -43,19 +43,19 @@ const ShippingDetails = ({ order }: ShippingDetailsProps) => {
           className="flex flex-col w-1/3 "
           data-testid="shipping-contact-summary"
         >
-          <Text className="txt-medium-plus text-ui-fg-base mb-1">Contact</Text>
-          <Text className="txt-medium text-ui-fg-subtle">
+          <Text className="text-medium-plus text-ui-fg-base mb-1">Contact</Text>
+          <Text className="text-medium text-ui-fg-subtle">
             {order.shipping_address?.phone}
           </Text>
-          <Text className="txt-medium text-ui-fg-subtle">{order.email}</Text>
+          <Text className="text-medium text-ui-fg-subtle">{order.email}</Text>
         </div>
 
         <div
           className="flex flex-col w-1/3"
           data-testid="shipping-method-summary"
         >
-          <Text className="txt-medium-plus text-ui-fg-base mb-1">Method</Text>
-          <Text className="txt-medium text-ui-fg-subtle">
+          <Text className="text-medium-plus text-ui-fg-base mb-1">Method</Text>
+          <Text className="text-medium text-ui-fg-subtle">
             {(order as any).shipping_methods[0]?.name} (
             {convertToLocale({
               amount: order.shipping_methods?.[0].total ?? 0,
diff --git a/src/modules/products/components/product-preview/index.tsx b/src/modules/products/components/product-preview/index.tsx
index 9e37c913e..6f202f3ca 100644
--- a/src/modules/products/components/product-preview/index.tsx
+++ b/src/modules/products/components/product-preview/index.tsx
@@ -37,7 +37,7 @@ export default async function ProductPreview({
           size="full"
           isFeatured={isFeatured}
         />
-        <div className="flex txt-compact-medium mt-4 justify-between">
+        <div className="flex text-compact-medium mt-4 justify-between">
           <Text className="text-ui-fg-subtle" data-testid="product-title">
             {product.title}
           </Text>
diff --git a/src/modules/store/components/pagination/index.tsx b/src/modules/store/components/pagination/index.tsx
index 6b827c5d6..12cdd1c65 100644
--- a/src/modules/store/components/pagination/index.tsx
+++ b/src/modules/store/components/pagination/index.tsx
@@ -35,7 +35,7 @@ export function Pagination({
   ) => (
     <button
       key={p}
-      className={clx("txt-xlarge-plus text-ui-fg-muted", {
+      className={clx("text-xlarge-plus text-ui-fg-muted", {
         "text-ui-fg-base hover:text-ui-fg-subtle": isCurrent,
       })}
       disabled={isCurrent}
@@ -49,7 +49,7 @@ export function Pagination({
   const renderEllipsis = (key: string) => (
     <span
       key={key}
-      className="txt-xlarge-plus text-ui-fg-muted items-center cursor-default"
+      className="text-xlarge-plus text-ui-fg-muted items-center cursor-default"
     >
       ...
     </span>