diff --git a/packages/app/.storybook/components/StoryGrid.tsx b/packages/app/.storybook/components/StoryGrid.tsx
index f4816480c..a0605277c 100644
--- a/packages/app/.storybook/components/StoryGrid.tsx
+++ b/packages/app/.storybook/components/StoryGrid.tsx
@@ -9,7 +9,7 @@ export function StoryGrid({ children, className }: { children: React.ReactNode;
 }
 
 function GridLabel({ children }: { children: React.ReactNode }) {
-  return <div className="typography-label-6 text-neutral-500">{children}</div>
+  return <div className="typography-label-4 text-neutral-500">{children}</div>
 }
 
 StoryGrid.Label = GridLabel
diff --git a/packages/app/src/features/actions/components/action-row/ActionRow.tsx b/packages/app/src/features/actions/components/action-row/ActionRow.tsx
index f2392ee68..893e26e08 100644
--- a/packages/app/src/features/actions/components/action-row/ActionRow.tsx
+++ b/packages/app/src/features/actions/components/action-row/ActionRow.tsx
@@ -51,7 +51,7 @@ function ActionRow({ children, actionHandlerState, actionIndex, onAction, layout
 
 const iconVariants = cva(
   cn(
-    'typography-label-5 grid h-6 w-12 grid-cols-[1fr_1px_1fr] items-center',
+    'typography-label-3 grid h-6 w-12 grid-cols-[1fr_1px_1fr] items-center',
     'justify-items-center rounded-xs transition-all delay-500 duration-200 sm:h-8 sm:w-16',
   ),
   {
@@ -88,7 +88,7 @@ function Title({ children }: { children: ReactNode }) {
   return (
     <HorizontalScroll
       className={cn(
-        'typography-label-4 col-span-2 flex items-center gap-1.5',
+        'typography-label-2 col-span-2 flex items-center gap-1.5',
         'md:col-span-1 sm:overflow-visible',
         actionHandlerState.status === 'success' && 'text-secondary',
       )}
@@ -122,7 +122,7 @@ function Amount({ token, amount }: { token: Token; amount: NormalizedUnitNumber
   return (
     <div
       className={cn(
-        'typography-label-4 col-span-full col-start-2 md:col-span-1',
+        'typography-label-2 col-span-full col-start-2 md:col-span-1',
         actionHandlerState.status === 'success' && 'text-secondary',
       )}
     >
@@ -147,7 +147,7 @@ function ErrorWarning() {
       <TooltipTrigger asChild>
         <div
           className={cn(
-            'typography-label-5 typography-label-4 col-span-full col-start-2 inline-flex min-w-0 text-secondary md:col-span-1',
+            'typography-body-3 col-span-full col-start-2 inline-flex min-w-0 text-secondary md:col-span-1',
             layout === 'compact' ? 'md:col-start-3' : 'md:col-start-4',
           )}
         >
diff --git a/packages/app/src/features/actions/settings-dialog/components/SettingsDialog.tsx b/packages/app/src/features/actions/settings-dialog/components/SettingsDialog.tsx
index af3aa996c..9d2669fad 100644
--- a/packages/app/src/features/actions/settings-dialog/components/SettingsDialog.tsx
+++ b/packages/app/src/features/actions/settings-dialog/components/SettingsDialog.tsx
@@ -54,8 +54,8 @@ export function SettingsDialog(props: SettingsDialogProps) {
           <DialogTitle>Settings</DialogTitle>
           <div className="flex items-center gap-8 rounded-sm bg-secondary p-6">
             <div className="flex flex-col gap-2">
-              <h3 className="typography-label-4 text-primary">Use permits when available</h3>
-              <p className="typography-body-5 text-secondary">
+              <h3 className="typography-label-2 text-primary">Use permits when available</h3>
+              <p className="typography-body-3 text-secondary">
                 Permits are a way to save gas by avoiding on-chain approve transactions. Instead signed permits are
                 bundled with another transactions such as deposit or borrow.
               </p>
diff --git a/packages/app/src/features/actions/views/ActionsView.tsx b/packages/app/src/features/actions/views/ActionsView.tsx
index 0490f56e6..ef45633e6 100644
--- a/packages/app/src/features/actions/views/ActionsView.tsx
+++ b/packages/app/src/features/actions/views/ActionsView.tsx
@@ -10,8 +10,8 @@ import { ActionsGridLayout } from '../types'
 const actionsTitleVariants = cva('', {
   variants: {
     layout: {
-      extended: 'typography-label-2 text-primary',
-      compact: 'typography-label-5 text-secondary',
+      extended: 'typography-heading-5 text-primary',
+      compact: 'typography-label-3 text-secondary',
     },
   },
 })
diff --git a/packages/app/src/features/compliance/components/TermsOfService.tsx b/packages/app/src/features/compliance/components/TermsOfService.tsx
index 81e539dd9..372a9bf89 100644
--- a/packages/app/src/features/compliance/components/TermsOfService.tsx
+++ b/packages/app/src/features/compliance/components/TermsOfService.tsx
@@ -73,7 +73,7 @@ export function TermsOfService({ onAgree }: TermsOfServiceProps) {
   return (
     <MultiPanelDialog>
       <div className="typography-heading-5">Terms of Service and Disclaimer</div>
-      <div className="typography-body-4">
+      <div className="typography-body-2">
         By using this site, I represent that I have read and agree to the <ToSLink /> and{' '}
         <Link to={links.privacyPolicy} variant="secondary" external>
           Privacy Policy
@@ -82,7 +82,7 @@ export function TermsOfService({ onAgree }: TermsOfServiceProps) {
       </div>
       <ScrollArea
         viewportRef={scrollAreaRef}
-        className="typography-body-4 h-64 rounded-sm bg-secondary pr-3 pl-2 text-primary shadow-inner"
+        className="typography-body-2 h-64 rounded-sm bg-secondary pr-3 pl-2 text-primary shadow-inner"
         type="always"
       >
         <div className="grid grid-cols-[auto_1fr] gap-4">
diff --git a/packages/app/src/features/dialogs/claim-rewards/components/RewardsList.tsx b/packages/app/src/features/dialogs/claim-rewards/components/RewardsList.tsx
index edad1091f..1b2b547a5 100644
--- a/packages/app/src/features/dialogs/claim-rewards/components/RewardsList.tsx
+++ b/packages/app/src/features/dialogs/claim-rewards/components/RewardsList.tsx
@@ -14,7 +14,7 @@ export function RewardsList({ rewards, className }: RewardsListProps) {
       {rewards.map(({ token, amount }, index) => (
         <div
           key={token.symbol}
-          className="typography-label-4 flex items-center justify-between border-b py-4 text-primary last:border-none"
+          className="typography-label-2 flex items-center justify-between border-b py-4 text-primary last:border-none"
           data-testid={testIds.dialog.claimRewards.transactionOverview.row(index)}
         >
           <TokenAmount
diff --git a/packages/app/src/features/dialogs/collateral/views/SuccessView.tsx b/packages/app/src/features/dialogs/collateral/views/SuccessView.tsx
index dbd4cd03f..8bf9cc731 100644
--- a/packages/app/src/features/dialogs/collateral/views/SuccessView.tsx
+++ b/packages/app/src/features/dialogs/collateral/views/SuccessView.tsx
@@ -16,7 +16,7 @@ export function SuccessView({ collateralSetting, token, onProceed }: SuccessView
   return (
     <SuccessViewContent>
       <SuccessViewCheckmark />
-      <SuccessViewSummaryPanel className="typography-label-4 text-primary">
+      <SuccessViewSummaryPanel className="typography-label-2 text-primary">
         <div className="flex items-center gap-2">
           <TokenIcon token={token} className="h-5" />
           {token.symbol}
diff --git a/packages/app/src/features/dialogs/common/components/success-view/SuccessPanelTitle.tsx b/packages/app/src/features/dialogs/common/components/success-view/SuccessPanelTitle.tsx
index f1fd3adbd..8e92b7f70 100644
--- a/packages/app/src/features/dialogs/common/components/success-view/SuccessPanelTitle.tsx
+++ b/packages/app/src/features/dialogs/common/components/success-view/SuccessPanelTitle.tsx
@@ -3,5 +3,5 @@ export interface DialogSectionTitleProps {
 }
 
 export function SuccessViewPanelTitle({ children }: DialogSectionTitleProps) {
-  return <h3 className="typography-label-5 mt-4 mb-1 text-secondary first:mt-0">{children}</h3>
+  return <h3 className="typography-label-3 mt-4 mb-1 text-secondary first:mt-0">{children}</h3>
 }
diff --git a/packages/app/src/features/dialogs/common/components/success-view/SuccessViewTokenRow.tsx b/packages/app/src/features/dialogs/common/components/success-view/SuccessViewTokenRow.tsx
index 611a6716f..8bc4739ae 100644
--- a/packages/app/src/features/dialogs/common/components/success-view/SuccessViewTokenRow.tsx
+++ b/packages/app/src/features/dialogs/common/components/success-view/SuccessViewTokenRow.tsx
@@ -12,11 +12,11 @@ export function SuccessViewTokenRow({ token, amount }: SuccessViewTokenRowProps)
     <div className="mb-2 flex w-full items-center justify-between">
       <div className="flex items-center gap-1">
         <TokenIcon token={token} className="h-5" />
-        <span className="typography-label-4 text-primary">{token.symbol}</span>
+        <span className="typography-label-2 text-primary">{token.symbol}</span>
       </div>
       <div className="flex grow flex-col text-right">
-        <div className="typography-label-4 text-primary">{token.format(amount, { style: 'auto' })}</div>
-        <div className="typography-label-5 text-secondary"> {token.formatUSD(amount)}</div>
+        <div className="typography-label-2 text-primary">{token.format(amount, { style: 'auto' })}</div>
+        <div className="typography-label-3 text-secondary"> {token.formatUSD(amount)}</div>
       </div>
     </div>
   )
diff --git a/packages/app/src/features/dialogs/e-mode/components/EModeCategoryTile.tsx b/packages/app/src/features/dialogs/e-mode/components/EModeCategoryTile.tsx
index e2a57e54e..97f57a063 100644
--- a/packages/app/src/features/dialogs/e-mode/components/EModeCategoryTile.tsx
+++ b/packages/app/src/features/dialogs/e-mode/components/EModeCategoryTile.tsx
@@ -31,7 +31,7 @@ export function EModeCategoryTile({ eModeCategory }: EModeCategoryTileProps) {
       <Badge variant={variant === 'active' ? 'success' : 'neutral'} appearance="soft" size="sm">
         {variant === 'active' ? 'Active' : 'Inactive'}
       </Badge>
-      <h4 className="typography-label-6 sm:typography-label-3">{eModeCategory.name}</h4>
+      <h4 className="typography-label-4 sm:typography-label-1">{eModeCategory.name}</h4>
       <IconStack paths={iconPaths} maxIcons={4} />
     </button>
   )
diff --git a/packages/app/src/features/dialogs/e-mode/views/EModeView.tsx b/packages/app/src/features/dialogs/e-mode/views/EModeView.tsx
index 24bebc5bc..28b53693c 100644
--- a/packages/app/src/features/dialogs/e-mode/views/EModeView.tsx
+++ b/packages/app/src/features/dialogs/e-mode/views/EModeView.tsx
@@ -43,7 +43,7 @@ export function EModeView({
     <MultiPanelDialog>
       <div className="flex flex-col gap-3">
         <DialogTitle>Set E-Mode Category</DialogTitle>
-        <p className="typography-body-5 text-secondary">
+        <p className="typography-body-3 text-secondary">
           E-Mode allows you to borrow assets belonging to the selected category.
           <br />
           Please visit our{' '}
diff --git a/packages/app/src/features/dialogs/e-mode/views/SuccessView.tsx b/packages/app/src/features/dialogs/e-mode/views/SuccessView.tsx
index edbc85d0f..30146c3a8 100644
--- a/packages/app/src/features/dialogs/e-mode/views/SuccessView.tsx
+++ b/packages/app/src/features/dialogs/e-mode/views/SuccessView.tsx
@@ -13,7 +13,7 @@ export function SuccessView({ eModeCategoryName, onProceed }: SuccessViewProps)
   return (
     <SuccessViewContent>
       <SuccessViewCheckmark />
-      <SuccessViewSummaryPanel className="typography-label-4 text-primary">
+      <SuccessViewSummaryPanel className="typography-label-2 text-primary">
         <div>{eModeCategoryName}</div>
         <h3>Option activated</h3>
       </SuccessViewSummaryPanel>
diff --git a/packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.tsx b/packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.tsx
index 74ed6e349..08c27cd8c 100644
--- a/packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.tsx
+++ b/packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.tsx
@@ -31,7 +31,7 @@ export function SandboxDialogView({
         <MagicWand className="icon-sm text-secondary" />
         Sandbox Mode
       </DialogTitle>
-      <p className="typography-body-4 text-secondary">
+      <p className="typography-body-2 text-secondary">
         Sandbox Mode is a risk-free environment where you can test the Spark App and understand how it works. When
         you're ready, you can switch back to the real world. Have fun exploring!
       </p>
@@ -42,7 +42,7 @@ export function SandboxDialogView({
           'No real assets involved',
           'Fast – no need to sign transactions',
         ].map((item, index) => (
-          <li key={index} className="typography-heading-6 flex items-center gap-2.5">
+          <li key={index} className="typography-label-2 flex items-center gap-2.5">
             <CheckIcon className="icon-sm icon-system-success-primary" />
             {item}
           </li>
diff --git a/packages/app/src/features/dialogs/savings/deposit/components/BenefitsDialog.tsx b/packages/app/src/features/dialogs/savings/deposit/components/BenefitsDialog.tsx
index 4c61051ff..0132808e9 100644
--- a/packages/app/src/features/dialogs/savings/deposit/components/BenefitsDialog.tsx
+++ b/packages/app/src/features/dialogs/savings/deposit/components/BenefitsDialog.tsx
@@ -31,7 +31,7 @@ export function BenefitsDialog({ portalContainerRef, apyImprovement }: BenefitsD
         <div className="flex flex-col gap-6 p-1">
           <div className="flex flex-col gap-2">
             <h2 className="typography-heading-4 text-primary">Deposit into Savings USDS</h2>
-            <p className="typography-body-5 text-secondary">
+            <p className="typography-body-3 text-secondary">
               By enabling this option, you will be depositing your stablecoins into Savings USDS, thus accessing the SSR
               (Sky Savings Rate), which provides the highest predictable rate in USDS. You can exit Savings USDS at any
               time at your sole discretion.
diff --git a/packages/app/src/features/dialogs/savings/deposit/components/UpgradeToSusdsSwitch.tsx b/packages/app/src/features/dialogs/savings/deposit/components/UpgradeToSusdsSwitch.tsx
index 7f84bb214..8365962b5 100644
--- a/packages/app/src/features/dialogs/savings/deposit/components/UpgradeToSusdsSwitch.tsx
+++ b/packages/app/src/features/dialogs/savings/deposit/components/UpgradeToSusdsSwitch.tsx
@@ -23,7 +23,7 @@ export function UpgradeToSusdsSwitch({
     <div className="flex w-full items-center justify-between rounded-sm bg-savings-100 px-4 py-5">
       <div className="flex items-center gap-2">
         <img src={assets.token.susds} className="h-5" />
-        <div className="typography-label-4 text-primary">
+        <div className="typography-label-2 text-primary">
           Deposit into Savings USDS and get{' '}
           {apyImprovement ? (
             <span className="text-savings-600">{formatPercentage(apyImprovement)} higher APY</span>
diff --git a/packages/app/src/features/dialogs/savings/deposit/views/SavingsDepositView.stories.tsx b/packages/app/src/features/dialogs/savings/deposit/views/SavingsDepositView.stories.tsx
index d1b3d4408..417b052e7 100644
--- a/packages/app/src/features/dialogs/savings/deposit/views/SavingsDepositView.stories.tsx
+++ b/packages/app/src/features/dialogs/savings/deposit/views/SavingsDepositView.stories.tsx
@@ -116,7 +116,7 @@ export const WithSUSDSSwitchMobile = getMobileStory(WithSUSDSSwitch)
 export const WithSUSDSSwitchTablet = getTabletStory(WithSUSDSSwitch)
 
 export const WithBenefitsDrawerOpened: Story = {
-  decorators: [WithWrappingDialog()],
+  decorators: [WithWrappingDialog(), WithClassname('min-h-[900px]')],
   args: {
     savingsUsdsSwitchInfo: {
       showSwitch: true,
diff --git a/packages/app/src/features/dialogs/savings/migrate/downgrade/views/DowngradeUSDSToDaiView.tsx b/packages/app/src/features/dialogs/savings/migrate/downgrade/views/DowngradeUSDSToDaiView.tsx
index e807c3bb6..5b54e2aa6 100644
--- a/packages/app/src/features/dialogs/savings/migrate/downgrade/views/DowngradeUSDSToDaiView.tsx
+++ b/packages/app/src/features/dialogs/savings/migrate/downgrade/views/DowngradeUSDSToDaiView.tsx
@@ -41,7 +41,7 @@ export function DowngradeUSDSToDaiView({
         Downgrade {fromToken.symbol} to {toToken.symbol}
       </DialogTitle>
 
-      <div className="typography-label-5 mb-2 text-secondary">
+      <div className="typography-label-3 mb-2 text-secondary">
         You can downgrade from USDS to DAI whenever you choose, and you are free to switch back from DAI to USDS in the
         future, at your own sole discretion.{' '}
         <Link to={links.docs.downgradeUsds} external>
diff --git a/packages/app/src/features/dialogs/savings/withdraw/components/form/AddressInput.tsx b/packages/app/src/features/dialogs/savings/withdraw/components/form/AddressInput.tsx
index fa5edb156..3e87e0761 100644
--- a/packages/app/src/features/dialogs/savings/withdraw/components/form/AddressInput.tsx
+++ b/packages/app/src/features/dialogs/savings/withdraw/components/form/AddressInput.tsx
@@ -15,11 +15,11 @@ export const AddressInput = forwardRef<HTMLInputElement, AddressInputProps>(
   ({ error, blockExplorerUrl, label, ...rest }, ref) => {
     return (
       <div className="flex flex-col gap-2">
-        {label && <div className="typography-label-5 text-secondary">{label}</div>}
+        {label && <div className="typography-label-3 text-secondary">{label}</div>}
         <div
           className={cn(
             'grid h-14 grid-cols-[1fr_auto] gap-2',
-            'typography-label-6 sm:typography-label-4 text-primary',
+            'typography-label-4 sm:typography-label-2 text-primary',
             'rounded-sm border border-primary bg-secondary',
             'focus-within:border-brand-primary',
             'items-center rounded-sm px-3 sm:px-4',
@@ -44,7 +44,7 @@ export const AddressInput = forwardRef<HTMLInputElement, AddressInputProps>(
         </div>
         {error && (
           <div
-            className="typography-label-6 text-system-error-primary"
+            className="typography-label-4 text-system-error-primary"
             data-testid={testIds.component.AddressInput.error}
           >
             {error}
diff --git a/packages/app/src/features/dialogs/savings/withdraw/views/SuccessView.tsx b/packages/app/src/features/dialogs/savings/withdraw/views/SuccessView.tsx
index 42fde84f5..b960d4e66 100644
--- a/packages/app/src/features/dialogs/savings/withdraw/views/SuccessView.tsx
+++ b/packages/app/src/features/dialogs/savings/withdraw/views/SuccessView.tsx
@@ -28,7 +28,7 @@ export function SuccessView({ tokenToWithdraw, closeDialog, sendModeExtension }:
             <SuccessViewPanelTitle>Recipient</SuccessViewPanelTitle>
             <BlockExplorerAddressLink
               address={sendModeExtension.receiver}
-              className="typography-label-4 text-primary"
+              className="typography-label-2 text-primary"
             />
           </>
         )}
diff --git a/packages/app/src/features/dialogs/select-network/components/NetworkStatusBadge.tsx b/packages/app/src/features/dialogs/select-network/components/NetworkStatusBadge.tsx
index aa478c34e..7621944af 100644
--- a/packages/app/src/features/dialogs/select-network/components/NetworkStatusBadge.tsx
+++ b/packages/app/src/features/dialogs/select-network/components/NetworkStatusBadge.tsx
@@ -21,7 +21,7 @@ export function NetworkStatusBadge({ status }: NetworkStatusBadgeProps) {
   return (
     <div className={networkStatusBadgeVariants({ status })}>
       <Icon className={cn('icon-xxs', status === 'pending' && 'animate-[spin_2s_linear_infinite]')} />
-      <div className="typography-label-6">{text}</div>
+      <div className="typography-label-4">{text}</div>
     </div>
   )
 }
diff --git a/packages/app/src/features/dialogs/select-network/views/SelectNetworkDialogView.tsx b/packages/app/src/features/dialogs/select-network/views/SelectNetworkDialogView.tsx
index 4761c4cc1..de7f37b5e 100644
--- a/packages/app/src/features/dialogs/select-network/views/SelectNetworkDialogView.tsx
+++ b/packages/app/src/features/dialogs/select-network/views/SelectNetworkDialogView.tsx
@@ -32,7 +32,7 @@ export function SelectNetworkDialogView({ chains }: SelectNetworkDialogViewProps
             key={chain.name}
           >
             <div className="flex w-full items-center justify-between border-b px-4 py-5">
-              <div className="typography-label-4 flex items-center gap-2">
+              <div className="typography-label-2 flex items-center gap-2">
                 <img src={chain.logo} className="h-6 w-6" />
                 {chain.name}
               </div>
@@ -42,7 +42,7 @@ export function SelectNetworkDialogView({ chains }: SelectNetworkDialogViewProps
                 <NetworkStatusBadge status="pending" />
               ) : undefined}
             </div>
-            <div className="typography-label-6 p-4">
+            <div className="typography-label-4 p-4">
               <span className="text-secondary">Network available for:</span> {chain.supportedPages.join(', ')}
             </div>
           </button>
diff --git a/packages/app/src/features/easy-borrow/components/form/Borrow.tsx b/packages/app/src/features/easy-borrow/components/form/Borrow.tsx
index f59b6bac9..f6e753138 100644
--- a/packages/app/src/features/easy-borrow/components/form/Borrow.tsx
+++ b/packages/app/src/features/easy-borrow/components/form/Borrow.tsx
@@ -38,7 +38,7 @@ export function Borrow({
     <Panel className="flex flex-col" data-testid={testIds.easyBorrow.form.borrow} spacing="none">
       <Panel className={cn('flex flex-1 flex-col gap-4 bg-primary', showTokenSummary && 'rounded-b-none')}>
         <div className="flex items-center justify-between">
-          <h4 className="typography-label-2 h-8 text-primary">Borrow</h4>
+          <h4 className="typography-heading-5 h-8 text-primary">Borrow</h4>
           {pageStatus.state === 'confirmation' && (
             <IconButton onClick={pageStatus.onProceedToForm} variant="transparent" size="l" icon={XIcon} />
           )}
diff --git a/packages/app/src/features/easy-borrow/components/form/Deposits.tsx b/packages/app/src/features/easy-borrow/components/form/Deposits.tsx
index 7e3d83dcc..acef5cf3d 100644
--- a/packages/app/src/features/easy-borrow/components/form/Deposits.tsx
+++ b/packages/app/src/features/easy-borrow/components/form/Deposits.tsx
@@ -47,7 +47,7 @@ export function Deposits({
       <Panel className={cn('flex flex-1 flex-col gap-4 bg-primary', showTokenSummary && 'rounded-b-none')}>
         <div className="flex items-center justify-between">
           <div className="flex h-8 flex-row items-center gap-1">
-            <h4 className="typography-label-2 text-primary">Deposit</h4>
+            <h4 className="typography-heading-5 text-primary">Deposit</h4>
             <Info>
               Some assets (e.g., isolated assets) are only accessible via the{' '}
               <Link to={paths.myPortfolio}>My portfolio</Link> at this time.
diff --git a/packages/app/src/features/easy-borrow/components/form/LoanToValuePanel.tsx b/packages/app/src/features/easy-borrow/components/form/LoanToValuePanel.tsx
index 3a7aa2df2..00efefa2b 100644
--- a/packages/app/src/features/easy-borrow/components/form/LoanToValuePanel.tsx
+++ b/packages/app/src/features/easy-borrow/components/form/LoanToValuePanel.tsx
@@ -25,14 +25,14 @@ export function LoanToValuePanel({
     <Panel className={className}>
       <div className="flex flex-col gap-6">
         <div className="flex flex-col gap-1">
-          <div className="typography-label-2 flex flex-row justify-between text-primary">
+          <div className="typography-heading-5 flex flex-row justify-between text-primary">
             <h4>Loan to Value (LTV)</h4>
             <h4 data-testid={testIds.easyBorrow.form.ltv}>{formatPercentage(ltv)}</h4>
           </div>
 
-          <div className="typography-label-5 mt-2 flex flex-row justify-between text-secondary">
+          <div className="typography-label-3 mt-2 flex flex-row justify-between text-secondary">
             <div>Ratio of the collateral value to the borrowed value</div>
-            <div>max. {formatPercentage(maxLtv)}</div>
+            <div className="text-right">max. {formatPercentage(maxLtv)}</div>
           </div>
         </div>
 
diff --git a/packages/app/src/features/easy-borrow/components/form/LoanToValueSlider.tsx b/packages/app/src/features/easy-borrow/components/form/LoanToValueSlider.tsx
index faa6912a3..de84a8d93 100644
--- a/packages/app/src/features/easy-borrow/components/form/LoanToValueSlider.tsx
+++ b/packages/app/src/features/easy-borrow/components/form/LoanToValueSlider.tsx
@@ -69,7 +69,7 @@ export function LoanToValueSlider({
                   isLast && '-ml-0.5 -mr-1 rounded-e-full',
                 )}
               >
-                <div className={cn('-bottom-6 typography-label-6 absolute text-secondary', isActive && 'text-primary')}>
+                <div className={cn('-bottom-6 typography-label-4 absolute text-secondary', isActive && 'text-primary')}>
                   {step.label}
                 </div>
               </div>
@@ -95,7 +95,7 @@ export function LoanToValueSlider({
                 left: `${(maxSelectableValue / maxSliderValue) * 100}%`,
               }}
             />
-            <div className="typography-heading-7 absolute bottom-7 bg-gradient-spark-primary bg-clip-text text-transparent">
+            <div className="typography-label-4 absolute bottom-7 bg-gradient-spark-primary bg-clip-text text-transparent">
               {formatPercentage(liquidationLtv)}
             </div>
           </div>
diff --git a/packages/app/src/features/easy-borrow/components/form/TokenSummary.tsx b/packages/app/src/features/easy-borrow/components/form/TokenSummary.tsx
index a748d3b2a..610670aef 100644
--- a/packages/app/src/features/easy-borrow/components/form/TokenSummary.tsx
+++ b/packages/app/src/features/easy-borrow/components/form/TokenSummary.tsx
@@ -20,7 +20,7 @@ export function TokenSummary({ position, type, maxSymbols = 3 }: TokenSummaryPro
   return (
     <div className="flex w-fit items-center gap-2">
       <IconStack paths={tokenIconPaths} maxIcons={maxSymbols} />
-      <div className="typography-body-5 text-secondary">{summary}</div>
+      <div className="typography-body-3 text-secondary">{summary}</div>
     </div>
   )
 }
diff --git a/packages/app/src/features/easy-borrow/components/side-panel/EasyBorrowSidePanel.tsx b/packages/app/src/features/easy-borrow/components/side-panel/EasyBorrowSidePanel.tsx
index a16bef42d..0bb770c6d 100644
--- a/packages/app/src/features/easy-borrow/components/side-panel/EasyBorrowSidePanel.tsx
+++ b/packages/app/src/features/easy-borrow/components/side-panel/EasyBorrowSidePanel.tsx
@@ -20,7 +20,7 @@ export function EasyBorrowSidePanel({ hf, liquidationDetails, borrowRate, dai, u
         </div>
       )}
       <Panel variant="quaternary" spacing="m" className="flex flex-col justify-end gap-3 only:col-span-2">
-        <h4 className="typography-label-2">Borrow Rate</h4>
+        <h4 className="typography-heading-5">Borrow Rate</h4>
         <div className="flex flex-col gap-3">
           <h3
             className="typography-display-3 bg-gradient-borrow-rate-orange bg-clip-text text-transparent"
@@ -28,7 +28,7 @@ export function EasyBorrowSidePanel({ hf, liquidationDetails, borrowRate, dai, u
           >
             {formatPercentage(borrowRate, { skipSign: true })}%
           </h3>
-          <div className="typography-body-5">
+          <div className="typography-body-3">
             Borrow {dai}
             {usds ? ` or ${usds}` : ''} directly from SKY
           </div>
diff --git a/packages/app/src/features/farm-details/components/farm-info-panel/active/ActiveFarmInfoPanel.tsx b/packages/app/src/features/farm-details/components/farm-info-panel/active/ActiveFarmInfoPanel.tsx
index 1dd7af9a2..aaf9560aa 100644
--- a/packages/app/src/features/farm-details/components/farm-info-panel/active/ActiveFarmInfoPanel.tsx
+++ b/packages/app/src/features/farm-details/components/farm-info-panel/active/ActiveFarmInfoPanel.tsx
@@ -101,19 +101,19 @@ export function ActiveFarmInfoPanel({
       <div className="flex divide-x divide-fg-secondary">
         {farm.depositors && (
           <DetailsItem title="Participants">
-            <div className="typography-label-5 lg:typography-label-3 xl:typography-label-2 text-primary-inverse">
+            <div className="typography-label-3 lg:typography-label-1 xl:typography-heading-5 text-primary-inverse">
               {farm.depositors}
             </div>
           </DetailsItem>
         )}
         <DetailsItem title="TVL">
-          <div className="typography-label-5 lg:typography-label-3 xl:typography-label-2 text-primary-inverse">
+          <div className="typography-label-3 lg:typography-label-1 xl:typography-heading-5 text-primary-inverse">
             {USD_MOCK_TOKEN.formatUSD(farm.totalSupply, { compact: true })}
           </div>
         </DetailsItem>
         {farm.apy?.gt(0) && (
           <DetailsItem title="APY" explainer={<ApyTooltip farmAddress={farm.address} />}>
-            <div className="typography-label-5 lg:typography-label-3 xl:typography-label-2 text-feature-farms-primary">
+            <div className="typography-label-3 lg:typography-label-1 xl:typography-heading-5 text-feature-farms-primary">
               {formatPercentage(farm.apy, { minimumFractionDigits: 0 })}
             </div>
           </DetailsItem>
@@ -121,7 +121,7 @@ export function ActiveFarmInfoPanel({
         <DetailsItem title="My Deposit">
           <div
             className={cn(
-              'typography-label-5 lg:typography-label-3 xl:typography-label-2',
+              'typography-label-3 lg:typography-label-1 xl:typography-heading-5',
               'flex items-center gap-1 text-primary-inverse lg:gap-1.5',
             )}
             data-testid={testIds.farmDetails.activeFarmInfoPanel.staked}
diff --git a/packages/app/src/features/farm-details/components/farm-info-panel/active/GrowingReward.tsx b/packages/app/src/features/farm-details/components/farm-info-panel/active/GrowingReward.tsx
index 657d00b51..da6a61d15 100644
--- a/packages/app/src/features/farm-details/components/farm-info-panel/active/GrowingReward.tsx
+++ b/packages/app/src/features/farm-details/components/farm-info-panel/active/GrowingReward.tsx
@@ -44,7 +44,7 @@ export function GrowingReward({ rewardToken, calculateReward, refreshIntervalInM
         )}
       </div>
       {rewardToken.unitPriceUsd.gt(0) && (
-        <div className="typography-label-4 col-start-2 ml-1.5 text-primary-inverse">
+        <div className="typography-label-2 col-start-2 ml-1.5 text-primary-inverse">
           &#8776;
           <span data-testid={testIds.farmDetails.activeFarmInfoPanel.rewardsUsd}>
             {rewardToken.formatUSD(currentReward)}
diff --git a/packages/app/src/features/farm-details/components/farm-info-panel/common/DetailsItem.tsx b/packages/app/src/features/farm-details/components/farm-info-panel/common/DetailsItem.tsx
index f08eaef74..70fdfef9c 100644
--- a/packages/app/src/features/farm-details/components/farm-info-panel/common/DetailsItem.tsx
+++ b/packages/app/src/features/farm-details/components/farm-info-panel/common/DetailsItem.tsx
@@ -11,7 +11,7 @@ export function DetailsItem({ title, explainer, children }: DetailsItemProps) {
     <div className="flex flex-col gap-1 px-3 xl:px-6 last:pr-0 first:pl-0">
       <div
         className={cn(
-          'typography-label-6 md:typography-label-5 lg:typography-label-4',
+          'typography-label-4 md:typography-label-3 lg:typography-label-2',
           'flex flex-row items-center gap-1 text-secondary',
         )}
       >
diff --git a/packages/app/src/features/farm-details/components/farm-info-panel/inactive/InactiveFarmInfoPanel.tsx b/packages/app/src/features/farm-details/components/farm-info-panel/inactive/InactiveFarmInfoPanel.tsx
index 82c2e8fe0..fa7a6f7c6 100644
--- a/packages/app/src/features/farm-details/components/farm-info-panel/inactive/InactiveFarmInfoPanel.tsx
+++ b/packages/app/src/features/farm-details/components/farm-info-panel/inactive/InactiveFarmInfoPanel.tsx
@@ -44,26 +44,26 @@ export function InactiveFarmInfoPanel({
         <div className="flex">
           {farm.depositors && (
             <DetailsItem title="Participants">
-              <div className="typography-label-5 lg:typography-label-3 xl:typography-label-2 text-primary-inverse">
+              <div className="typography-label-3 lg:typography-label-1 xl:typography-heading-5 text-primary-inverse">
                 {farm.depositors}
               </div>
             </DetailsItem>
           )}
           <DetailsItem title="TVL">
-            <div className="typography-label-5 lg:typography-label-3 xl:typography-label-2 text-primary-inverse">
+            <div className="typography-label-3 lg:typography-label-1 xl:typography-heading-5 text-primary-inverse">
               {USD_MOCK_TOKEN.formatUSD(farm.totalSupply, { compact: true })}
             </div>
           </DetailsItem>
           {farm.apy?.gt(0) && (
             <DetailsItem title="APY" explainer={<ApyTooltip farmAddress={farm.address} />}>
-              <div className="typography-label-5 lg:typography-label-3 xl:typography-label-2 text-feature-farms-primary">
+              <div className="typography-label-3 lg:typography-label-1 xl:typography-heading-5 text-feature-farms-primary">
                 {formatPercentage(farm.apy, { minimumFractionDigits: 0 })}
               </div>
             </DetailsItem>
           )}
           {farm.apy?.isZero() && farm.totalRewarded && (
             <DetailsItem title="Total rewarded">
-              <div className="typography-label-5 lg:typography-label-3 xl:typography-label-2 text-primary-inverse">
+              <div className="typography-label-3 lg:typography-label-1 xl:typography-heading-5 text-primary-inverse">
                 {farm.rewardToken.format(farm.totalRewarded, { style: 'compact' })} {farm.rewardToken.symbol}
               </div>
             </DetailsItem>
@@ -101,7 +101,7 @@ function PointsFarmDetails({
           {isChroniclePointsFarm && <ChroniclePointsTooltip />}
         </div>
       </h2>
-      <div className="typography-body-5 text-tertiary">
+      <div className="typography-body-3 text-tertiary">
         {isChroniclePointsFarm && (
           <div className="mb-2">
             Chronicle is the original oracle on Ethereum built within MakerDAO for the creation of DAI. Today,
@@ -129,11 +129,10 @@ function TokenFarmDetails({ farm, assetsGroupType }: { farm: Farm; assetsGroupTy
         </span>{' '}
         in rewards
       </h2>
-      <div className="typography-body-5 text-tertiary">
+      <div className="typography-body-3 text-tertiary">
         {farm.apy?.gt(0) && (
           <>Deposit any of the tokens listed below and start farming {farm.rewardToken.symbol} tokens.</>
-        )}
-        <br />
+        )}{' '}
         Learn more about farming{' '}
         <Link to={links.docs.farmingRewards} external>
           here
diff --git a/packages/app/src/features/farm-details/components/tokens-to-deposit/TokensToDeposit.tsx b/packages/app/src/features/farm-details/components/tokens-to-deposit/TokensToDeposit.tsx
index 4762b6ede..2e1c96b76 100644
--- a/packages/app/src/features/farm-details/components/tokens-to-deposit/TokensToDeposit.tsx
+++ b/packages/app/src/features/farm-details/components/tokens-to-deposit/TokensToDeposit.tsx
@@ -22,7 +22,7 @@ export function TokensToDeposit({ assets, openStakeDialog }: TokensToDepositProp
         header: 'Balance',
         headerAlign: 'right',
         renderCell: ({ balance, token }) => (
-          <div className="typography-label-4 flex w-full flex-row justify-end">
+          <div className="typography-label-2 flex w-full flex-row justify-end">
             {balance.eq(0) ? '-' : token.format(balance, { style: 'auto' })}
           </div>
         ),
diff --git a/packages/app/src/features/farm-details/dialogs/unstake/components/claim-rewards-switch/ExitFarmSwitch.tsx b/packages/app/src/features/farm-details/dialogs/unstake/components/claim-rewards-switch/ExitFarmSwitch.tsx
index 6208600d0..da82d1acd 100644
--- a/packages/app/src/features/farm-details/dialogs/unstake/components/claim-rewards-switch/ExitFarmSwitch.tsx
+++ b/packages/app/src/features/farm-details/dialogs/unstake/components/claim-rewards-switch/ExitFarmSwitch.tsx
@@ -20,11 +20,11 @@ export function ExitFarmSwitch({ checked, onSwitch, reward }: UpgradeToSusdsSwit
       <div className="flex items-center gap-3">
         <img src={rewardIcon} className="h-6" />
         <div className="flex flex-col">
-          <div className="typography-label-4 text-primary">
+          <div className="typography-label-2 text-primary">
             Withdraw and claim<span className="hidden sm:inline"> rewards in one transaction</span>
           </div>
           <div
-            className="typography-label-6 text-secondary"
+            className="typography-label-4 text-secondary"
             data-testid={testIds.farmDetails.unstakeDialog.exitFarmSwitchPanel.reward}
           >
             ~{rewardAmount} {reward.token.symbol} {reward.token.unitPriceUsd.gt(0) && `(~${rewardUsdValue})`}
diff --git a/packages/app/src/features/farms/components/farm-tile/FarmTile.tsx b/packages/app/src/features/farms/components/farm-tile/FarmTile.tsx
index e4f4b0442..cf000601c 100644
--- a/packages/app/src/features/farms/components/farm-tile/FarmTile.tsx
+++ b/packages/app/src/features/farms/components/farm-tile/FarmTile.tsx
@@ -63,7 +63,7 @@ export function FarmTile({
         </div>
         <div className="flex h-full flex-col px-6 pb-7">
           <div className="mb-auto grid w-full grid-flow-col grid-cols-[auto,auto] grid-rows-[auto,auto]">
-            <div className="typography-label-5 text-secondary" data-testid={testIds.farms.tile.stakeText}>
+            <div className="typography-label-3 text-secondary" data-testid={testIds.farms.tile.stakeText}>
               Deposit {entryAssetsGroup.name}
             </div>
             <div className="typography-heading-3 text-primary" data-testid={testIds.farms.tile.rewardText}>
@@ -71,7 +71,7 @@ export function FarmTile({
             </div>
             {apy?.gt(0) && (
               <>
-                <div className="typography-label-5 justify-self-end text-secondary">APY</div>
+                <div className="typography-label-3 justify-self-end text-secondary">APY</div>
                 <div
                   className="typography-heading-3 justify-self-end text-primary"
                   data-testid={testIds.farms.tile.apy}
@@ -84,8 +84,8 @@ export function FarmTile({
           <div className="mt-11 mb-6 border-primary border-t" />
           {staked.gt(0) ? (
             <>
-              <div className="typography-label-5 mb-2 text-secondary">Tokens deposited:</div>
-              <div className="typography-label-4 flex items-center gap-1.5">
+              <div className="typography-label-3 mb-2 text-secondary">Tokens deposited:</div>
+              <div className="typography-label-2 flex items-center gap-1.5">
                 <img src={getTokenImage(stakingToken.symbol)} alt="farm-reward-icon" className="icon-md" />
                 <span data-testid={testIds.farms.tile.staked}>{stakingToken.format(staked, { style: 'auto' })}</span>{' '}
                 {stakingToken.symbol}
@@ -93,7 +93,7 @@ export function FarmTile({
             </>
           ) : (
             <>
-              <div className="typography-label-5 mb-2 text-secondary">Tokens to deposit:</div>
+              <div className="typography-label-3 mb-2 text-secondary">Tokens to deposit:</div>
               <IconStack paths={entryTokenIcons} iconBorder />
             </>
           )}
diff --git a/packages/app/src/features/market-details/components/charts/interest-yield/InterestYieldChart.tsx b/packages/app/src/features/market-details/components/charts/interest-yield/InterestYieldChart.tsx
index bbb9402f9..0fcc6e030 100644
--- a/packages/app/src/features/market-details/components/charts/interest-yield/InterestYieldChart.tsx
+++ b/packages/app/src/features/market-details/components/charts/interest-yield/InterestYieldChart.tsx
@@ -57,11 +57,11 @@ export function InterestYieldChart({
       <div className="ml-10 flex items-center gap-4">
         <div className="flex items-center gap-1.5">
           <Circle size={4} fill={colors.primary} stroke="0" />
-          <div className="typography-label-6 text-secondary">Borrow APY</div>
+          <div className="typography-label-4 text-secondary">Borrow APY</div>
         </div>
         <div className="flex items-center gap-1.5">
           <Circle size={4} fill={colors.secondary} stroke="0" />
-          <div className="typography-label-6 text-secondary">Utilization Rate</div>
+          <div className="typography-label-4 text-secondary">Utilization Rate</div>
         </div>
       </div>
       <Chart {...chartProps} />
diff --git a/packages/app/src/features/market-details/components/charts/interest-yield/components/Chart.tsx b/packages/app/src/features/market-details/components/charts/interest-yield/components/Chart.tsx
index d555e4158..bbbf67bbd 100644
--- a/packages/app/src/features/market-details/components/charts/interest-yield/components/Chart.tsx
+++ b/packages/app/src/features/market-details/components/charts/interest-yield/components/Chart.tsx
@@ -208,7 +208,7 @@ function Chart({
 
 function TooltipContent({ data }: { data: GraphDataPoint }) {
   return (
-    <div className="typography-label-6 flex gap-3 rounded-sm border border-primary bg-primary p-3 shadow">
+    <div className="typography-label-4 flex gap-3 rounded-sm border border-primary bg-primary p-3 shadow">
       <div className="flex flex-col gap-3 text-secondary">
         <p>Utilization Rate:</p>
         <p>Borrow APY:</p>
diff --git a/packages/app/src/features/market-details/components/debt-ceiling-progress/DebtCeilingProgress.tsx b/packages/app/src/features/market-details/components/debt-ceiling-progress/DebtCeilingProgress.tsx
index ff8338fdc..d0fe586a9 100644
--- a/packages/app/src/features/market-details/components/debt-ceiling-progress/DebtCeilingProgress.tsx
+++ b/packages/app/src/features/market-details/components/debt-ceiling-progress/DebtCeilingProgress.tsx
@@ -22,7 +22,7 @@ export function DebtCeilingProgress({ debt, debtCeiling }: DebtCeilingProgressPr
     <div className="col-span-3 mt-6 flex flex-col gap-4 rounded-sm border border-primary p-4 sm:col-span-2 sm:col-start-2 sm:mt-8">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-1 text-secondary">
-          <p className="typography-label-6">Isolated Debt Ceiling</p>
+          <p className="typography-label-4">Isolated Debt Ceiling</p>
           <Info className="text-inherit">
             Debt ceiling limits the amount possible to borrow against this asset by protocol users. Debt ceiling is
             specific to assets in isolation mode and is denoted in USD.{' '}
@@ -31,7 +31,7 @@ export function DebtCeilingProgress({ debt, debtCeiling }: DebtCeilingProgressPr
             </Link>
           </Info>
         </div>
-        <p className="typography-label-6">
+        <p className="typography-label-4">
           <span
             className={cn('text-primary', hasCeilingBeenReached && 'text-system-error-primary')}
             data-testid={testIds.marketDetails.collateralStatusPanel.debt}
diff --git a/packages/app/src/features/market-details/components/info-tile/InfoTile.tsx b/packages/app/src/features/market-details/components/info-tile/InfoTile.tsx
index 67147bb63..069d0ac63 100644
--- a/packages/app/src/features/market-details/components/info-tile/InfoTile.tsx
+++ b/packages/app/src/features/market-details/components/info-tile/InfoTile.tsx
@@ -19,14 +19,14 @@ export function InfoTile({ children, 'data-testid': dataTestId, className }: Inf
 }
 
 function Label({ children }: InfoTileProps) {
-  return <div className="typography-label-5 my-auto text-secondary">{children}</div>
+  return <div className="typography-label-4 my-auto text-secondary">{children}</div>
 }
 
 function Value({ children, 'data-testid': dataTestId, className }: InfoTileProps) {
   return (
     <div
       className={cn(
-        'typography-body-4 flex items-center gap-1 justify-self-end text-primary sm:min-h-[26px] sm:justify-self-start',
+        'typography-body-2 flex items-center gap-1 justify-self-end text-primary sm:min-h-[26px] sm:justify-self-start',
         className,
       )}
       data-testid={dataTestId}
@@ -41,7 +41,7 @@ function ComplementaryLine({ children, 'data-testid': dataTestId, className }: I
     <p
       className={cn(
         'col-start-2 row-start-2 justify-self-end',
-        'typography-label-6 text-secondary',
+        'typography-label-4 text-secondary',
         'sm:col-start-1 sm:row-start-3',
         'sm:justify-self-start',
         className,
diff --git a/packages/app/src/features/market-details/components/market-overview/components/LegendItem.tsx b/packages/app/src/features/market-details/components/market-overview/components/LegendItem.tsx
index 31f789361..594e528bd 100644
--- a/packages/app/src/features/market-details/components/market-overview/components/LegendItem.tsx
+++ b/packages/app/src/features/market-details/components/market-overview/components/LegendItem.tsx
@@ -15,7 +15,7 @@ function LegendItem({ variant, children }: LegendItemProps) {
   return (
     <div className="flex items-center gap-1.5" role="listitem">
       <LegendItemBadge variant={variant} />
-      <div className="typography-label-5 text-primary-inverse">{children}</div>
+      <div className="typography-label-3 text-primary-inverse">{children}</div>
     </div>
   )
 }
@@ -46,7 +46,7 @@ function LegendItemBadge({ variant }: { variant: LegendItemVariant }) {
   return (
     <div className={legendItemBadgeVariants({ variant })}>
       <Circle size={6} fill="currentColor" />
-      <div className="typography-label-6">{badgeText}</div>
+      <div className="typography-label-4">{badgeText}</div>
     </div>
   )
 }
diff --git a/packages/app/src/features/market-details/components/my-wallet/MyWalletChainMismatch.tsx b/packages/app/src/features/market-details/components/my-wallet/MyWalletChainMismatch.tsx
index f398051cf..75f259e27 100644
--- a/packages/app/src/features/market-details/components/my-wallet/MyWalletChainMismatch.tsx
+++ b/packages/app/src/features/market-details/components/my-wallet/MyWalletChainMismatch.tsx
@@ -4,7 +4,7 @@ export function MyWalletChainMismatch() {
   return (
     <Panel className="flex flex-col gap-4">
       <h3 className="typography-heading-4 text-primary">My Wallet</h3>
-      <p className="typography-label-5 text-secondary">
+      <p className="typography-label-3 text-secondary">
         To access this asset, please switch your wallet connection to the appropriate chain.
       </p>
     </Panel>
diff --git a/packages/app/src/features/market-details/components/my-wallet/components/ActionDetails.tsx b/packages/app/src/features/market-details/components/my-wallet/components/ActionDetails.tsx
index adcacf753..912269e9c 100644
--- a/packages/app/src/features/market-details/components/my-wallet/components/ActionDetails.tsx
+++ b/packages/app/src/features/market-details/components/my-wallet/components/ActionDetails.tsx
@@ -10,11 +10,11 @@ interface ActionDetailsProps {
 export function ActionDetails({ label, token, value }: ActionDetailsProps) {
   return (
     <div className="flex flex-col items-baseline">
-      <p className="typography-label-6 text-secondary">{label}</p>
-      <p className="typography-body-4 text-primary">
+      <p className="typography-label-4 text-secondary">{label}</p>
+      <p className="typography-body-2 text-primary">
         {token.format(value, { style: 'auto' })} {token.symbol}
       </p>
-      <div className="typography-label-6 text-secondary">{token.formatUSD(value)}</div>
+      <div className="typography-label-4 text-secondary">{token.formatUSD(value)}</div>
     </div>
   )
 }
diff --git a/packages/app/src/features/market-details/components/my-wallet/components/BorrowRow.tsx b/packages/app/src/features/market-details/components/my-wallet/components/BorrowRow.tsx
index e104b614d..7f2bed53f 100644
--- a/packages/app/src/features/market-details/components/my-wallet/components/BorrowRow.tsx
+++ b/packages/app/src/features/market-details/components/my-wallet/components/BorrowRow.tsx
@@ -34,7 +34,7 @@ export function BorrowRow({ token, availableToBorrow, eligibility, onAction }: B
 function InfoWrapper({ children }: { children: React.ReactNode }) {
   return (
     <div className="grid grid-cols-1 border-primary border-t py-4">
-      <p className="typography-body-6 text-secondary">{children}</p>
+      <p className="typography-body-4 text-secondary">{children}</p>
     </div>
   )
 }
diff --git a/packages/app/src/features/market-details/components/my-wallet/components/TokenBalance.tsx b/packages/app/src/features/market-details/components/my-wallet/components/TokenBalance.tsx
index 6ebc27742..568396207 100644
--- a/packages/app/src/features/market-details/components/my-wallet/components/TokenBalance.tsx
+++ b/packages/app/src/features/market-details/components/my-wallet/components/TokenBalance.tsx
@@ -11,10 +11,10 @@ interface TokenBalanceProps {
 export function TokenBalance({ token, balance }: TokenBalanceProps) {
   return (
     <div className="my-4 flex flex-col gap-1">
-      <p className="typography-label-6 text-secondary">Balance:</p>
+      <p className="typography-label-4 text-secondary">Balance:</p>
       <div className="flex items-center">
         <TokenIcon token={token} className="mr-2 h-6 w-6" />
-        <p className="typography-body-3 text-primary" data-testid={testIds.marketDetails.walletPanel.balance}>
+        <p className="typography-body-1 text-primary" data-testid={testIds.marketDetails.walletPanel.balance}>
           {token.format(balance, { style: 'auto' })} {token.symbol}
         </p>
       </div>
diff --git a/packages/app/src/features/market-details/components/oracle-panel/components/FixedOraclePanel.tsx b/packages/app/src/features/market-details/components/oracle-panel/components/FixedOraclePanel.tsx
index c75961296..107574ee2 100644
--- a/packages/app/src/features/market-details/components/oracle-panel/components/FixedOraclePanel.tsx
+++ b/packages/app/src/features/market-details/components/oracle-panel/components/FixedOraclePanel.tsx
@@ -10,9 +10,9 @@ export function FixedOraclePanel({ chainId, price, priceOracleAddress, token }:
   return (
     <Panel className="flex flex-col gap-4">
       <div>
-        <div className="typography-label-6 mb-1 text-secondary">Oracle type</div>
+        <div className="typography-label-4 mb-1 text-secondary">Oracle type</div>
         <div className="flex items-center gap-2">
-          <h3 className="typography-heading-5 text-primary">Fixed Price</h3>
+          <h3 className="typography-label-1 text-primary">Fixed Price</h3>
           <Info size={16}>
             The asset price is set by a contract at a predefined value, adjustable only through Sky governance
             decisions.
diff --git a/packages/app/src/features/market-details/components/oracle-panel/components/MarketOraclePanel.tsx b/packages/app/src/features/market-details/components/oracle-panel/components/MarketOraclePanel.tsx
index 3ecd4ed3b..b54899183 100644
--- a/packages/app/src/features/market-details/components/oracle-panel/components/MarketOraclePanel.tsx
+++ b/packages/app/src/features/market-details/components/oracle-panel/components/MarketOraclePanel.tsx
@@ -11,9 +11,9 @@ export function MarketOraclePanel({ providedBy, chainId, price, priceOracleAddre
   return (
     <Panel className="flex flex-col gap-4">
       <div>
-        <div className="typography-label-6 mb-1 text-secondary">Oracle type</div>
+        <div className="typography-label-4 mb-1 text-secondary">Oracle type</div>
         <div className="flex items-center gap-2">
-          <h3 className="typography-heading-5 text-primary">
+          <h3 className="typography-label-1 text-primary">
             Market Price {providedBy.length > 1 && <span className="text-secondary">(Redundant)</span>}
           </h3>
           <Info size={16}>
diff --git a/packages/app/src/features/market-details/components/oracle-panel/components/ProvidersList.tsx b/packages/app/src/features/market-details/components/oracle-panel/components/ProvidersList.tsx
index cf8e2aa44..d831f2d65 100644
--- a/packages/app/src/features/market-details/components/oracle-panel/components/ProvidersList.tsx
+++ b/packages/app/src/features/market-details/components/oracle-panel/components/ProvidersList.tsx
@@ -10,7 +10,7 @@ interface ProvidersListProps {
 export function ProvidersList({ providers }: ProvidersListProps) {
   return (
     <div className="grid grid-cols-[auto_1fr] gap-2 border-primary border-t pt-6 sm:gap-6">
-      <div className="typography-label-6 my-auto text-secondary">Provided by</div>
+      <div className="typography-label-4 my-auto text-secondary">Provided by</div>
 
       <div
         className="mt-auto flex flex-row-reverse flex-wrap gap-2 place-self-end sm:flex-row sm:gap-4 sm:place-self-auto"
diff --git a/packages/app/src/features/market-details/components/oracle-panel/components/UnderlyingAssetOraclePanel.tsx b/packages/app/src/features/market-details/components/oracle-panel/components/UnderlyingAssetOraclePanel.tsx
index b43a3ebaf..9914f84c2 100644
--- a/packages/app/src/features/market-details/components/oracle-panel/components/UnderlyingAssetOraclePanel.tsx
+++ b/packages/app/src/features/market-details/components/oracle-panel/components/UnderlyingAssetOraclePanel.tsx
@@ -10,9 +10,9 @@ export function UnderlyingAssetOraclePanel({ asset, chainId, priceOracleAddress,
   return (
     <Panel className="flex flex-col gap-4">
       <div>
-        <div className="typography-label-6 mb-1 text-secondary">Oracle type</div>
+        <div className="typography-label-4 mb-1 text-secondary">Oracle type</div>
         <div className="flex items-center gap-2">
-          <h3 className="typography-heading-5 text-primary">Underlying Asset Price</h3>
+          <h3 className="typography-label-1 text-primary">Underlying Asset Price</h3>
           <Info size={16}>
             The asset price is derived from a market price oracle tracking the value of the underlying asset. Sky
             Governance controls which oracle is used.
diff --git a/packages/app/src/features/market-details/components/oracle-panel/components/UnknownOraclePanel.tsx b/packages/app/src/features/market-details/components/oracle-panel/components/UnknownOraclePanel.tsx
index 0706de101..6e7c77311 100644
--- a/packages/app/src/features/market-details/components/oracle-panel/components/UnknownOraclePanel.tsx
+++ b/packages/app/src/features/market-details/components/oracle-panel/components/UnknownOraclePanel.tsx
@@ -9,7 +9,7 @@ export function UnknownOraclePanel({ chainId, token, price, priceOracleAddress }
   return (
     <Panel className="flex flex-col gap-4">
       <div className="flex items-center gap-2">
-        <h3 className="typography-heading-5 text-primary">Oracle</h3>
+        <h3 className="typography-label-1 text-primary">Oracle</h3>
       </div>
       <div className="flex flex-col gap-4 sm:gap-6">
         <div className="flex flex-col gap-4 sm:flex-row sm:gap-10">
diff --git a/packages/app/src/features/market-details/components/oracle-panel/components/YieldingFixedOraclePanel.tsx b/packages/app/src/features/market-details/components/oracle-panel/components/YieldingFixedOraclePanel.tsx
index c78f3fb98..fb7f8fe26 100644
--- a/packages/app/src/features/market-details/components/oracle-panel/components/YieldingFixedOraclePanel.tsx
+++ b/packages/app/src/features/market-details/components/oracle-panel/components/YieldingFixedOraclePanel.tsx
@@ -24,9 +24,9 @@ export function YieldingFixedOraclePanel({
   return (
     <Panel className="flex flex-col gap-4">
       <div>
-        <div className="typography-label-5 mb-1 text-secondary">Oracle type</div>
+        <div className="typography-label-4 mb-1 text-secondary">Oracle type</div>
         <div className="flex items-center gap-2">
-          <h3 className="typography-label-3 text-primary">
+          <h3 className="typography-label-1 text-primary">
             Yielding Fixed Price {providedBy.length > 1 && <span className="text-secondary">(Redundant)</span>}
           </h3>
           <Info size={16}>
@@ -39,36 +39,36 @@ export function YieldingFixedOraclePanel({
         <div className="grid items-center gap-4 md:grid-cols-[1fr,14px,1fr,14px,1fr] md:gap-3 md:pb-6">
           <div className="relative flex flex-col items-center gap-2">
             <div
-              className="typography-body-2 w-full rounded-lg border border-primary bg-secondary p-2 text-center text-primary"
+              className="typography-label-1 w-full rounded-sm bg-secondary p-4 text-center text-primary"
               data-testid={oracleTestIds.yieldingFixed.ratio}
             >
               {ratio.toFixed(4)}
             </div>
-            <div className="md:-bottom-6 typography-label-6 text-secondary md:absolute">
+            <div className="md:-bottom-6 typography-label-4 text-secondary md:absolute">
               <span data-testid={oracleTestIds.asset}>{token.symbol}</span> to {baseAssetSymbol} Ratio
             </div>
           </div>
           <img src={assets.multiply} alt="multiply sign" className="w-3.5 place-self-center" />
           <div className="relative flex flex-col items-center gap-2">
             <div
-              className="typography-body-2 w-full rounded-lg border border-primary bg-secondary p-2 text-center text-primary"
+              className="typography-label-1 w-full rounded-sm bg-secondary p-4 text-center text-primary"
               data-testid={oracleTestIds.yieldingFixed.baseAssetPrice}
             >
               {formatUSDPriceWithPrecision(baseAssetPrice)}
             </div>
-            <div className="md:-bottom-6 typography-label-6 text-secondary md:absolute">
+            <div className="md:-bottom-6 typography-label-4 text-secondary md:absolute">
               <span data-testid={oracleTestIds.yieldingFixed.baseAssetSymbol}>{baseAssetSymbol}</span> Oracle Price
             </div>
           </div>
           <img src={assets.equal} alt="equal sign" className="w-3.5 place-self-center" />
           <div className="relative flex flex-col items-center gap-2">
             <div
-              className="typography-body-2 w-full rounded-lg border border-primary bg-secondary p-2 text-center text-primary"
+              className="typography-label-1 w-full rounded-sm bg-secondary p-4 text-center text-primary"
               data-testid={oracleTestIds.price}
             >
               {formatUSDPriceWithPrecision(price)}
             </div>
-            <div className="md:-bottom-6 typography-label-6 text-secondary md:absolute">Final Price</div>
+            <div className="md:-bottom-6 typography-label-4 text-secondary md:absolute">Final Price</div>
           </div>
         </div>
 
@@ -77,6 +77,7 @@ export function YieldingFixedOraclePanel({
             <InfoTile.Label>Ratio Contract</InfoTile.Label>
             <InfoTile.Value className="w-full">
               <BlockExplorerAddressLink
+                className="typography-label-2"
                 address={token.address}
                 chainId={chainId}
                 data-testid={oracleTestIds.yieldingFixed.ratioContract}
@@ -88,6 +89,7 @@ export function YieldingFixedOraclePanel({
             <InfoTile.Label>Oracle Contract</InfoTile.Label>
             <InfoTile.Value className="w-full">
               <BlockExplorerAddressLink
+                className="typography-label-2"
                 address={baseAssetOracle}
                 chainId={chainId}
                 data-testid={oracleTestIds.yieldingFixed.baseAssetOracleContract}
@@ -99,6 +101,7 @@ export function YieldingFixedOraclePanel({
             <InfoTile.Label>Price Contract</InfoTile.Label>
             <InfoTile.Value className="w-full">
               <BlockExplorerAddressLink
+                className="typography-label-2"
                 address={priceOracleAddress}
                 chainId={chainId}
                 data-testid={oracleTestIds.oracleContract}
diff --git a/packages/app/src/features/market-details/components/spark-airdrop-info-panel/SparkAirdropInfoPanel.tsx b/packages/app/src/features/market-details/components/spark-airdrop-info-panel/SparkAirdropInfoPanel.tsx
index 0566852f4..31a3d5b78 100644
--- a/packages/app/src/features/market-details/components/spark-airdrop-info-panel/SparkAirdropInfoPanel.tsx
+++ b/packages/app/src/features/market-details/components/spark-airdrop-info-panel/SparkAirdropInfoPanel.tsx
@@ -21,8 +21,8 @@ export function SparkAirdropInfoPanel({ variant, eligibleToken }: SparkAirdropIn
     >
       <img src={assets.sparkIcon} alt="Spark logo" className="h-[2.75rem]" />
       <div className="flex flex-col gap-1">
-        <h4 className="typography-label-3 text-primary">Eligible for Spark Airdrop</h4>
-        <p className="typography-label-6 text-secondary">
+        <h4 className="typography-label-1 text-primary">Eligible for Spark Airdrop</h4>
+        <p className="typography-label-4 text-secondary">
           {eligibleToken} {participants} will be eligible for a future ⚡&nbsp;SPK airdrop. Please read the details on
           the{' '}
           <Link to={links.docs.sparkAirdrop} external>
diff --git a/packages/app/src/features/market-details/components/status-panel/EModeStatusPanel.tsx b/packages/app/src/features/market-details/components/status-panel/EModeStatusPanel.tsx
index 78feb101b..f190d27dc 100644
--- a/packages/app/src/features/market-details/components/status-panel/EModeStatusPanel.tsx
+++ b/packages/app/src/features/market-details/components/status-panel/EModeStatusPanel.tsx
@@ -60,7 +60,7 @@ export function EModeStatusPanel({
             <EModeBadge categoryId={categoryId} />
           </InfoTile.Value>
         </InfoTile>
-        <p className="typography-body-6 col-span-1 text-secondary sm:col-span-3">
+        <p className="typography-body-4 col-span-1 text-secondary sm:col-span-3">
           E-Mode for {categoryName} assets increases your LTV within the {categoryName} category. This means that when
           E-Mode is enabled, you will have higher borrowing power for assets in this category:{' '}
           {eModeCategoryTokens.join(', ')}. You can enter E-Mode from your{' '}
diff --git a/packages/app/src/features/market-details/components/status-panel/components/Subheader.tsx b/packages/app/src/features/market-details/components/status-panel/components/Subheader.tsx
index 89340645d..0a35f9704 100644
--- a/packages/app/src/features/market-details/components/status-panel/components/Subheader.tsx
+++ b/packages/app/src/features/market-details/components/status-panel/components/Subheader.tsx
@@ -16,7 +16,7 @@ export function Subheader({ status }: SubheaderProps) {
       <Content variant="orange">
         In Isolation Mode you can only borrow stablecoins up to the debt ceiling and cannot use any other asset as
         collateral.{' '}
-        <Link to={links.docs.isolationMode} external>
+        <Link to={links.docs.isolationMode} variant="underline" external>
           Learn more
         </Link>
         .
@@ -70,7 +70,7 @@ function Content({ children, variant }: ContentProps) {
   return <p className={cn(variants({ variant }), 'col-span-2 col-start-2 mt-1.5 mb-3')}>{children}</p>
 }
 
-const variants = cva('typography-body-6', {
+const variants = cva('typography-body-4', {
   variants: {
     variant: {
       orange: 'text-system-warning-primary',
diff --git a/packages/app/src/features/market-details/views/components/TokenLinksDropdown.tsx b/packages/app/src/features/market-details/views/components/TokenLinksDropdown.tsx
index c198cf904..bbc65a642 100644
--- a/packages/app/src/features/market-details/views/components/TokenLinksDropdown.tsx
+++ b/packages/app/src/features/market-details/views/components/TokenLinksDropdown.tsx
@@ -82,11 +82,11 @@ function TokenLinksDropdownItem({ address, token, label }: TokenLinksDropdownIte
       <div className="flex max-w-60 flex-1 flex-col gap-1">
         <div className="flex items-center gap-1">
           <TokenIcon token={token} className="h-4 w-4" />
-          <div className="typography-label-6 flex flex-row items-center gap-2.5 text-secondary lg:gap-1 group-hover:text-brand-primary">
+          <div className="typography-label-4 flex flex-row items-center gap-2.5 text-secondary lg:gap-1 group-hover:text-brand-primary">
             {label}
           </div>
         </div>
-        <div className="typography-body-5 flex items-center gap-2 text-primary">
+        <div className="typography-body-3 flex items-center gap-2 text-primary">
           <Address address={address} postfix={<BoxArrowTopRight className="h-3.5 w-3.5" />} />
         </div>
       </div>
diff --git a/packages/app/src/features/markets/components/asset-status-badge/components/AssetStatusDescription.tsx b/packages/app/src/features/markets/components/asset-status-badge/components/AssetStatusDescription.tsx
index 2d3fec268..98d6fb47d 100644
--- a/packages/app/src/features/markets/components/asset-status-badge/components/AssetStatusDescription.tsx
+++ b/packages/app/src/features/markets/components/asset-status-badge/components/AssetStatusDescription.tsx
@@ -9,7 +9,7 @@ export function AssetStatusDescription({ children }: AssetStatusDescriptionProps
   return (
     <div className="flex items-center gap-3">
       {icon}
-      <p className="typography-label-6 text-primary-inverse">{description}</p>
+      <p className="typography-label-4 text-primary-inverse">{description}</p>
     </div>
   )
 }
diff --git a/packages/app/src/features/markets/components/markets-table/components/ApyWithRewardsCell.tsx b/packages/app/src/features/markets/components/markets-table/components/ApyWithRewardsCell.tsx
index e37e4945b..7dc287e0e 100644
--- a/packages/app/src/features/markets/components/markets-table/components/ApyWithRewardsCell.tsx
+++ b/packages/app/src/features/markets/components/markets-table/components/ApyWithRewardsCell.tsx
@@ -24,7 +24,7 @@ export function ApyWithRewardsCell({ mobileViewOptions, ...rest }: ApyWithReward
   if (mobileViewOptions?.isMobileView) {
     return (
       <div className="flex flex-row items-center justify-between">
-        <div className="typography-label-6 text-secondary">{mobileViewOptions.rowTitle}</div>
+        <div className="typography-label-4 text-secondary">{mobileViewOptions.rowTitle}</div>
         <CellContent {...rest} />
       </div>
     )
@@ -72,7 +72,7 @@ function CellValue({ value, dimmed }: CellValueProps) {
   return <div className={cn(variants({ dimmed }))}>{formatPercentage(value)}</div>
 }
 
-const variants = cva('typography-label-4 text-primary', {
+const variants = cva('typography-label-2 text-primary', {
   variants: {
     dimmed: {
       true: 'text-secondary/70',
diff --git a/packages/app/src/features/markets/components/markets-table/components/AssetNameCell.tsx b/packages/app/src/features/markets/components/markets-table/components/AssetNameCell.tsx
index b17cfeec8..081767108 100644
--- a/packages/app/src/features/markets/components/markets-table/components/AssetNameCell.tsx
+++ b/packages/app/src/features/markets/components/markets-table/components/AssetNameCell.tsx
@@ -32,7 +32,7 @@ export function AssetNameCell({ token, reserveStatus, 'data-testid': dataTestId
       )}
       <div className="flex min-w-0 flex-col xl:flex-row xl:items-baseline xl:gap-2">
         <TokenName token={token} className={cn(isPaused && 'text-system-error-secondary')} />
-        <p className={cn('typography-label-6 text-secondary', isPaused && 'text-system-error-secondary/60')}>
+        <p className={cn('typography-label-4 text-secondary', isPaused && 'text-system-error-secondary/60')}>
           {token.symbol}
         </p>
       </div>
@@ -53,7 +53,7 @@ export function TokenName({ token, className }: TokenNameProps) {
   return (
     <Tooltip open={!isTruncated ? false : undefined}>
       <TooltipTrigger asChild>
-        <p className={cn('typography-label-4 truncate', className)} ref={tokenNameRef}>
+        <p className={cn('typography-label-2 truncate', className)} ref={tokenNameRef}>
           {token.name}
         </p>
       </TooltipTrigger>
diff --git a/packages/app/src/features/markets/components/summary-tile/components/Tile.tsx b/packages/app/src/features/markets/components/summary-tile/components/Tile.tsx
index a74282f94..bf3f3b9be 100644
--- a/packages/app/src/features/markets/components/summary-tile/components/Tile.tsx
+++ b/packages/app/src/features/markets/components/summary-tile/components/Tile.tsx
@@ -24,7 +24,7 @@ export function Tile({ icon: Icon, title, USDValue, description, 'data-testid':
         <div className="flex items-center gap-1">
           <div
             className={cn(
-              'typography-label-6 relative text-secondary',
+              'typography-label-4 relative text-secondary',
               'before:-z-10 before:absolute before:inset-0',
               'before:bg-primary/60 before:blur-xs',
             )}
diff --git a/packages/app/src/features/my-portfolio/components/my-wallet-panel/MyWalletPanel.tsx b/packages/app/src/features/my-portfolio/components/my-wallet-panel/MyWalletPanel.tsx
index c280f6c01..d70deaa8a 100644
--- a/packages/app/src/features/my-portfolio/components/my-wallet-panel/MyWalletPanel.tsx
+++ b/packages/app/src/features/my-portfolio/components/my-wallet-panel/MyWalletPanel.tsx
@@ -19,7 +19,7 @@ export function MyWalletPanel({ assets, includeDeposits, setIncludeDeposits }: M
           <Info>Assets in your wallet supported by Spark.</Info>
         </div>
         <div className="flex items-center gap-2">
-          <div className="typography-label-5 text-secondary">Include deposits</div>
+          <div className="typography-label-3 text-secondary">Include deposits</div>
           <Switch checked={includeDeposits} onCheckedChange={setIncludeDeposits} />
         </div>
       </div>
diff --git a/packages/app/src/features/my-portfolio/components/position/Position.tsx b/packages/app/src/features/my-portfolio/components/position/Position.tsx
index 75381a69a..50d7ecf5e 100644
--- a/packages/app/src/features/my-portfolio/components/position/Position.tsx
+++ b/packages/app/src/features/my-portfolio/components/position/Position.tsx
@@ -59,7 +59,7 @@ function Ticks({ ticks }: TicksProps) {
       {ticks.map(({ label, x }) => (
         <div className="-translate-x-[50%] absolute flex flex-col items-center" style={{ left: `${x}%` }} key={x}>
           <div className="h-2 w-[1px] bg-neutral-600" />
-          {label && <div className="typography-body-6 text-secondary">{label}</div>}
+          {label && <div className="typography-body-4 text-secondary">{label}</div>}
         </div>
       ))}
     </div>
@@ -75,8 +75,8 @@ function Deposited({ positionSummary, ticks }: DepositedProps) {
   return (
     <div className="flex flex-col gap-1">
       <div className="flex flex-row justify-between">
-        <div className="typography-label-4 text-primary">Collateral deposited</div>
-        <div className="typography-label-4 text-primary" data-testid={testIds.myPortfolio.deposited}>
+        <div className="typography-label-2 text-primary">Collateral deposited</div>
+        <div className="typography-label-2 text-primary" data-testid={testIds.myPortfolio.deposited}>
           {getPositionFormattedValue(positionSummary?.totalCollateralUSD)}
         </div>
       </div>
@@ -135,8 +135,8 @@ function Borrow({ positionSummary, ticks }: BorrowProps) {
   return (
     <div className="flex flex-col gap-1">
       <div className="flex flex-row justify-between">
-        <div className="typography-label-4 text-primary">Borrow</div>
-        <div className="typography-label-4 text-primary" data-testid={testIds.myPortfolio.borrowed}>
+        <div className="typography-label-2 text-primary">Borrow</div>
+        <div className="typography-label-2 text-primary" data-testid={testIds.myPortfolio.borrowed}>
           {getPositionFormattedValue(positionSummary?.borrow.current)}
         </div>
       </div>
@@ -186,7 +186,7 @@ function BorrowBar({ positionSummary }: BorrowBarProps) {
             className="-translate-x-[1px] absolute z-[2] h-7 border-primary border-l-2 pl-2"
             style={{ left: `${borrow.percents.max}%` }}
           >
-            <div className="typography-label-6 flex min-h-full flex-col justify-center text-neutral-600">max</div>
+            <div className="typography-label-4 flex min-h-full flex-col justify-center text-neutral-600">max</div>
           </div>
         </TooltipTrigger>
         <TooltipContent>You can borrow up to {USD_MOCK_TOKEN.formatUSD(positionSummary.borrow.max)}.</TooltipContent>
diff --git a/packages/app/src/features/savings/components/growing-balance/GrowingBalance.tsx b/packages/app/src/features/savings/components/growing-balance/GrowingBalance.tsx
index 6b2d93811..067fab3c4 100644
--- a/packages/app/src/features/savings/components/growing-balance/GrowingBalance.tsx
+++ b/packages/app/src/features/savings/components/growing-balance/GrowingBalance.tsx
@@ -51,7 +51,7 @@ export function GrowingBalance({
         )}
       </div>
       <div
-        className="typography-label-4 col-start-2 ml-1.5 text-primary-inverse"
+        className="typography-label-2 col-start-2 ml-1.5 text-primary-inverse"
         data-testid={testIds.savings[savingsType].balance}
       >
         {savingsTokenWithBalance.token.format(savingsTokenWithBalance.balance, { style: 'auto' })}{' '}
diff --git a/packages/app/src/features/savings/components/navbar-item/SavingsAPYBadge.tsx b/packages/app/src/features/savings/components/navbar-item/SavingsAPYBadge.tsx
index fd68ac6a8..0399f62d2 100644
--- a/packages/app/src/features/savings/components/navbar-item/SavingsAPYBadge.tsx
+++ b/packages/app/src/features/savings/components/navbar-item/SavingsAPYBadge.tsx
@@ -21,7 +21,7 @@ export function SavingsAPYBadge({ APY, isLoading, className }: SavingsAPYBadgePr
         <Skeleton className="h-4 w-5 rounded-sm bg-primary/80 backdrop-brightness-75" />
       ) : (
         APY && (
-          <span className="typography-label-5 !leading-none text-primary-inverse">
+          <span className="typography-label-3 !leading-none text-primary-inverse">
             {formatPercentage(APY, { minimumFractionDigits: 0 })}
           </span>
         )
diff --git a/packages/app/src/features/savings/components/savings-info-tile/SavingsInfoTile.tsx b/packages/app/src/features/savings/components/savings-info-tile/SavingsInfoTile.tsx
index f4fcf4580..6fdbb301e 100644
--- a/packages/app/src/features/savings/components/savings-info-tile/SavingsInfoTile.tsx
+++ b/packages/app/src/features/savings/components/savings-info-tile/SavingsInfoTile.tsx
@@ -21,7 +21,7 @@ interface LabelProps {
 function Label({ children, tooltipContent: tooltipText }: LabelProps) {
   return (
     <div className="flex items-center gap-1">
-      <div className="typography-label-6 md:typography-label-5 lg:typography-label-4 text-secondary">{children}</div>
+      <div className="typography-label-4 md:typography-label-3 lg:typography-label-2 text-secondary">{children}</div>
       {tooltipText && <Info className="text-primary-inverse">{tooltipText}</Info>}
     </div>
   )
@@ -33,7 +33,7 @@ export interface ValueProps {
 }
 function Value({ children, className }: ValueProps) {
   return (
-    <p className={cn('typography-label-5 lg:typography-label-3 xl:typography-label-2 text-primary', className)}>
+    <p className={cn('typography-label-3 lg:typography-label-1 xl:typography-heading-5 text-primary', className)}>
       {children}
     </p>
   )
diff --git a/packages/app/src/features/savings/components/savings-opportunity/components/Explainer.tsx b/packages/app/src/features/savings/components/savings-opportunity/components/Explainer.tsx
index 1e8b1a027..87486c6da 100644
--- a/packages/app/src/features/savings/components/savings-opportunity/components/Explainer.tsx
+++ b/packages/app/src/features/savings/components/savings-opportunity/components/Explainer.tsx
@@ -29,7 +29,7 @@ export function Explainer({ stablecoinValue, savingsMeta, originChainId }: Expla
           <img key={symbol} src={getTokenImage(TokenSymbol(symbol))} className="h-6 w-6" />
         ))}
       </div>
-      <div className="typography-body-6 max-w-[52ch] text-tertiary">
+      <div className="typography-body-4 max-w-[52ch] text-tertiary">
         {stablecoinValue ? (
           <>
             You have{' '}
diff --git a/packages/app/src/features/savings/components/savings-opportunity/components/SavingsRate.tsx b/packages/app/src/features/savings/components/savings-opportunity/components/SavingsRate.tsx
index 18becc858..a53dc8184 100644
--- a/packages/app/src/features/savings/components/savings-opportunity/components/SavingsRate.tsx
+++ b/packages/app/src/features/savings/components/savings-opportunity/components/SavingsRate.tsx
@@ -16,7 +16,7 @@ export function SavingsRate({ originChainId, APY, savingsMetaItem }: SavingsRate
   return (
     <div className="flex flex-col gap-1.5">
       <div className="flex items-center gap-1.5">
-        <div className="typography-label-1 text-primary-inverse">{savingsMetaItem.rateAcronym} Rate</div>
+        <div className="typography-heading-4 text-primary-inverse">{savingsMetaItem.rateAcronym} Rate</div>
         <Info className="icon-sm text-secondary">
           <SavingsRateTooltipContent originChainId={originChainId} savingsMetaItem={savingsMetaItem} />
         </Info>
diff --git a/packages/app/src/features/savings/components/stablecoins-in-wallet/StablecoinsInWallet.tsx b/packages/app/src/features/savings/components/stablecoins-in-wallet/StablecoinsInWallet.tsx
index 4f51519b3..ba7394e36 100644
--- a/packages/app/src/features/savings/components/stablecoins-in-wallet/StablecoinsInWallet.tsx
+++ b/packages/app/src/features/savings/components/stablecoins-in-wallet/StablecoinsInWallet.tsx
@@ -36,7 +36,7 @@ export function StablecoinsInWallet({
         header: 'Balance',
         headerAlign: 'right',
         renderCell: ({ balance, token }) => (
-          <div className="typography-label-4 flex w-full flex-row justify-end">
+          <div className="typography-label-2 flex w-full flex-row justify-end">
             {balance.eq(0) ? '-' : token.format(balance, { style: 'auto' })}
           </div>
         ),
@@ -84,8 +84,8 @@ export function StablecoinsInWallet({
             <div className="flex items-center gap-3">
               <img src={uiAssets.token.sky} className="h-8 w-8 rounded-full border-2 border-[#DBCAF4]" />
               <div className="flex flex-col">
-                <div className="typography-label-5 text-primary">Convert stablecoins without fees and slippage!</div>
-                <div className="typography-body-6 text-secondary">
+                <div className="typography-label-3 text-primary">Convert stablecoins without fees and slippage!</div>
+                <div className="typography-body-4 text-secondary">
                   Use SKY infrastructure to convert between supported stablecoins.
                 </div>
               </div>
diff --git a/packages/app/src/features/savings/components/stablecoins-in-wallet/components/TokenCell.tsx b/packages/app/src/features/savings/components/stablecoins-in-wallet/components/TokenCell.tsx
index b4b686c85..3e7f85c63 100644
--- a/packages/app/src/features/savings/components/stablecoins-in-wallet/components/TokenCell.tsx
+++ b/packages/app/src/features/savings/components/stablecoins-in-wallet/components/TokenCell.tsx
@@ -22,7 +22,7 @@ export function TokenCell({ token, migrationInfo }: TokenCellProps) {
   }
 
   return (
-    <div className="typography-label-4 flex flex-row items-center gap-2">
+    <div className="typography-label-2 flex flex-row items-center gap-2">
       <TokenIcon token={token} className="icon-md" />
       {token.symbol}
     </div>
diff --git a/packages/app/src/features/savings/components/stablecoins-in-wallet/components/UpgradeTokenButton.tsx b/packages/app/src/features/savings/components/stablecoins-in-wallet/components/UpgradeTokenButton.tsx
index 567af2cf4..dfb6d6117 100644
--- a/packages/app/src/features/savings/components/stablecoins-in-wallet/components/UpgradeTokenButton.tsx
+++ b/packages/app/src/features/savings/components/stablecoins-in-wallet/components/UpgradeTokenButton.tsx
@@ -23,7 +23,7 @@ export function UpgradeTokenButton({
     <div
       className={cn(
         'inline-flex items-center justify-center gap-1.5',
-        'typography-label-4 bg-secondary py-1 pr-1 pl-1 sm:pl-2',
+        'typography-label-2 bg-secondary py-1 pr-1 pl-1 sm:pl-2',
         'rounded-sm bg-secondary text-primary',
       )}
       data-testid={dataTestId}
diff --git a/packages/app/src/features/savings/components/upgrade-savings-banner/UpgradeSavingsBanner.tsx b/packages/app/src/features/savings/components/upgrade-savings-banner/UpgradeSavingsBanner.tsx
index 18d737eef..9a0b46f4d 100644
--- a/packages/app/src/features/savings/components/upgrade-savings-banner/UpgradeSavingsBanner.tsx
+++ b/packages/app/src/features/savings/components/upgrade-savings-banner/UpgradeSavingsBanner.tsx
@@ -31,7 +31,7 @@ export function UpgradeSavingsBanner({ onUpgradeSavingsClick, apyImprovement }:
           'lg:grid-cols-[1fr_1fr_auto] md:grid-cols-[1fr_1fr] md:grid-rows-1 sm:gap-y-3 sm:pr-8',
         )}
       >
-        <div className="typography-heading-6 sm:typography-heading-5 justify-self-end text-primary">
+        <div className="typography-label-2 sm:typography-heading-5 justify-self-end text-primary">
           Upgrade your <span className="text-[#76C14A]">Savings DAI</span> to{' '}
           <span className="text-system-success-primary">Savings USDS</span>
           <span className="hidden sm:inline"> and unlock the full potential of the Sky ecosystem.</span>
@@ -63,7 +63,7 @@ function Benefit({ children }: { children: ReactNode }) {
   return (
     <div className="flex items-center gap-2">
       <CheckIcon className="icon-xs icon-system-success-primary shrink-0" />
-      <div className="typography-label-5">{children}</div>
+      <div className="typography-label-3">{children}</div>
     </div>
   )
 }
diff --git a/packages/app/src/features/savings/components/welcome-dialog/WelcomeDialog.tsx b/packages/app/src/features/savings/components/welcome-dialog/WelcomeDialog.tsx
index 738146210..105ce0f5f 100644
--- a/packages/app/src/features/savings/components/welcome-dialog/WelcomeDialog.tsx
+++ b/packages/app/src/features/savings/components/welcome-dialog/WelcomeDialog.tsx
@@ -26,7 +26,7 @@ export function WelcomeDialog({ open, onConfirm, apyImprovement }: WelcomeDialog
         />
         <div className="flex flex-col gap-8 p-4 sm:p-8">
           <h2 className="typography-heading-2 text-primary-inverse">Welcome USDS, the new upgraded DAI!</h2>
-          <p className="typography-body-5 text-secondary">
+          <p className="typography-body-3 text-secondary">
             USDS is the new version of DAI, the stablecoin that powers the Sky ecosystem. Upgrading to USDS unlocks
             additional benefits, providing you with more opportunities to earn rewards within the ecosystem. The upgrade
             is optional, and you can continue using DAI if you prefer.{' '}
diff --git a/packages/app/src/features/topbar/components/topbar-airdrop/TopbarAirdropDropdown.tsx b/packages/app/src/features/topbar/components/topbar-airdrop/TopbarAirdropDropdown.tsx
index 70774dc6e..d84372b0e 100644
--- a/packages/app/src/features/topbar/components/topbar-airdrop/TopbarAirdropDropdown.tsx
+++ b/packages/app/src/features/topbar/components/topbar-airdrop/TopbarAirdropDropdown.tsx
@@ -61,13 +61,13 @@ export function TopbarAirdropDropdown({
             {isLoading ? (
               <Skeleton className="h-6 w-10 rounded-sm" />
             ) : (
-              <div className="typography-label-4 tabular-nums" data-chromatic="ignore">
+              <div className="typography-label-2 tabular-nums" data-chromatic="ignore">
                 {formatAirdropAmount({ amount, precision, isGrowing })} {SPK_MOCK_TOKEN.symbol}
               </div>
             )}
           </DropdownMenuItem>
           <DropdownMenuSeparator className="my-2" />
-          <DropdownMenuItem className="!typography-body-6 pointer-events-none py-2 text-secondary">
+          <DropdownMenuItem className="!typography-body-4 pointer-events-none py-2 text-secondary">
             DAI borrowers with volatile assets and ETH depositors will be eligible for a future ⚡ SPK airdrop.
           </DropdownMenuItem>
         </DropdownMenuGroup>
diff --git a/packages/app/src/features/topbar/components/topbar-menu/TopbarMenu.tsx b/packages/app/src/features/topbar/components/topbar-menu/TopbarMenu.tsx
index 57958fe67..c1548fa16 100644
--- a/packages/app/src/features/topbar/components/topbar-menu/TopbarMenu.tsx
+++ b/packages/app/src/features/topbar/components/topbar-menu/TopbarMenu.tsx
@@ -64,7 +64,7 @@ export function TopbarMenu({
               Sandbox Mode
               <Switch checked={isInSandbox} className="ml-auto" />
             </div>
-            <div className="typography-label-5 text-secondary">
+            <div className="typography-label-3 text-secondary">
               Explore Spark with <br />
               unlimited tokens
             </div>
@@ -82,7 +82,7 @@ export function TopbarMenu({
             to={links.github}
             variant="unstyled"
             external
-            className="typography-label-6 bg-secondary p-6 text-center text-secondary"
+            className="typography-label-4 bg-secondary p-6 text-center text-secondary"
           >
             Built from {sha} at {buildTime}
           </Link>
@@ -109,7 +109,7 @@ export function TopbarMenu({
             Sandbox Mode
             <Switch checked={isInSandbox} className="ml-auto" />
           </div>
-          <div className="typography-label-5 text-secondary">
+          <div className="typography-label-3 text-secondary">
             Explore Spark with <br />
             unlimited tokens
           </div>
@@ -127,7 +127,7 @@ export function TopbarMenu({
           to={links.github}
           variant="unstyled"
           external
-          className="typography-label-6 p-5 text-center text-secondary"
+          className="typography-label-4 p-5 text-center text-secondary"
         >
           Built from {sha} at {buildTime}
         </Link>
diff --git a/packages/app/src/features/topbar/components/topbar-menu/components/TopbarMenuAirdropItem.tsx b/packages/app/src/features/topbar/components/topbar-menu/components/TopbarMenuAirdropItem.tsx
index e10cecb1b..8742f8c5a 100644
--- a/packages/app/src/features/topbar/components/topbar-menu/components/TopbarMenuAirdropItem.tsx
+++ b/packages/app/src/features/topbar/components/topbar-menu/components/TopbarMenuAirdropItem.tsx
@@ -67,7 +67,7 @@ function TopbarMenuAirdropDialog({
         <MenuItem variant="secondary" asChild withSeparator>
           <button className="flex items-center gap-2 rounded-none p-6">
             <div className="flex flex-col items-start gap-2">
-              <span className="typography-label-5 text-secondary">Spark Airdrop Tokens</span>
+              <span className="typography-label-3 text-secondary">Spark Airdrop Tokens</span>
               <div className="flex items-center gap-2">
                 <img src={assets.brand.symbolGradient} alt="spark logo" className="icon-md" />
                 {SPK_MOCK_TOKEN.format(amount ?? NormalizedUnitNumber(0), { style: 'compact' })}
@@ -82,13 +82,13 @@ function TopbarMenuAirdropDialog({
         <DialogTitle className="border-primary border-b p-5 pt-6">Spark Airdrop Tokens</DialogTitle>
 
         <MenuItem className="flex flex-col items-start gap-2 p-6">
-          <span className="typography-label-5 text-secondary">Amount</span>
+          <span className="typography-label-3 text-secondary">Amount</span>
           <div className="flex items-center gap-2">
             <img src={assets.brand.symbolGradient} className="icon-md" />
             {isLoading ? (
               <Skeleton className="h-6 w-10 rounded-sm" />
             ) : (
-              <div className="typography-label-4" data-chromatic="ignore">
+              <div className="typography-label-2" data-chromatic="ignore">
                 {formatAirdropAmount({ amount, precision, isGrowing })} {SPK_MOCK_TOKEN.symbol}
               </div>
             )}
@@ -96,7 +96,7 @@ function TopbarMenuAirdropDialog({
         </MenuItem>
 
         <div className="flex flex-col gap-4 bg-secondary p-6">
-          <span className="typography-body-5 text-secondary">
+          <span className="typography-body-3 text-secondary">
             DAI borrowers with volatile assets and ETH depositors will be eligible for a future ⚡ SPK airdrop.
           </span>
 
diff --git a/packages/app/src/features/topbar/components/topbar-menu/components/TopbarMenuRewardsItem.tsx b/packages/app/src/features/topbar/components/topbar-menu/components/TopbarMenuRewardsItem.tsx
index 7bc315cf5..e28e0f95c 100644
--- a/packages/app/src/features/topbar/components/topbar-menu/components/TopbarMenuRewardsItem.tsx
+++ b/packages/app/src/features/topbar/components/topbar-menu/components/TopbarMenuRewardsItem.tsx
@@ -17,7 +17,7 @@ export function TopbarMenuRewardsItem({ onClaim, totalClaimableReward, rewards }
         <MenuItem variant="secondary" asChild withSeparator>
           <button className="flex items-center gap-2 rounded-none p-6">
             <div className="flex flex-col items-start gap-2">
-              <span className="typography-label-5 text-secondary">Rewards</span>
+              <span className="typography-label-3 text-secondary">Rewards</span>
               <div className="flex items-center gap-2">
                 <img src={assets.giftGradient} alt="Gift icon" className="icon-md" />
                 {USD_MOCK_TOKEN.formatUSD(totalClaimableReward, { compact: true })}
@@ -36,12 +36,12 @@ export function TopbarMenuRewardsItem({ onClaim, totalClaimableReward, rewards }
             <div className="flex items-center gap-2">
               <img src={getTokenImage(token.symbol)} alt={`${token.symbol} icon`} className="h-6" />
 
-              <div className="typography-label-4">
+              <div className="typography-label-2">
                 {token.format(amount, { style: 'auto' })} {token.symbol}
               </div>
             </div>
 
-            <div className="typography-label-6 text-secondary">{token.formatUSD(amount)}</div>
+            <div className="typography-label-4 text-secondary">{token.formatUSD(amount)}</div>
           </MenuItem>
         ))}
 
diff --git a/packages/app/src/features/topbar/components/topbar-navigation/TopbarButton.tsx b/packages/app/src/features/topbar/components/topbar-navigation/TopbarButton.tsx
index 890b1a5f8..5173c4b82 100644
--- a/packages/app/src/features/topbar/components/topbar-navigation/TopbarButton.tsx
+++ b/packages/app/src/features/topbar/components/topbar-navigation/TopbarButton.tsx
@@ -5,7 +5,7 @@ import { NavLink, To, useMatch } from 'react-router-dom'
 
 const buttonVariants = cva(
   cn(
-    'typography-label-4 inline-flex h-20 flex-nowrap items-center sm:h-10',
+    'typography-label-2 inline-flex h-20 flex-nowrap items-center sm:h-10',
     'group gap-2 border-base-white border-l-4 bg-primary px-4 py-2 sm:rounded-sm sm:border sm:border-primary',
     'border-solid border-opacity-40 transition-colors sm:shadow-xs',
     'focus-visible:outline-none focus-visible:ring-1 ',
diff --git a/packages/app/src/features/topbar/components/topbar-rewards/TopbarRewards.tsx b/packages/app/src/features/topbar/components/topbar-rewards/TopbarRewards.tsx
index c5bf82183..36076c175 100644
--- a/packages/app/src/features/topbar/components/topbar-rewards/TopbarRewards.tsx
+++ b/packages/app/src/features/topbar/components/topbar-rewards/TopbarRewards.tsx
@@ -61,7 +61,7 @@ export function TopbarRewards({ rewards, onClaim, totalClaimableReward }: Topbar
               <div className="flex items-center gap-2">
                 <img src={getTokenImage(token.symbol)} alt={`${token.symbol} icon`} className="h-6" />
 
-                <div className="typography-label-4">
+                <div className="typography-label-2">
                   <span data-testid={testIds.topbar.rewards.details.amount}>
                     {token.format(amount, { style: 'auto' })}
                   </span>{' '}
@@ -69,7 +69,7 @@ export function TopbarRewards({ rewards, onClaim, totalClaimableReward }: Topbar
                 </div>
               </div>
 
-              <div className="typography-label-6 text-secondary" data-testid={testIds.topbar.rewards.details.amountUSD}>
+              <div className="typography-label-4 text-secondary" data-testid={testIds.topbar.rewards.details.amountUSD}>
                 {token.formatUSD(amount)}
               </div>
             </DropdownMenuItem>
diff --git a/packages/app/src/features/topbar/components/topbar-wallet/components/TopbarWalletAddressDisplay.tsx b/packages/app/src/features/topbar/components/topbar-wallet/components/TopbarWalletAddressDisplay.tsx
index 68e6b9333..e004bcc55 100644
--- a/packages/app/src/features/topbar/components/topbar-wallet/components/TopbarWalletAddressDisplay.tsx
+++ b/packages/app/src/features/topbar/components/topbar-wallet/components/TopbarWalletAddressDisplay.tsx
@@ -14,7 +14,7 @@ export function TopbarWalletAddressDisplay({ walletIcon, address }: TopbarWallet
         <img src={walletIcon} alt="Wallet icon" className="aspect-square h-12 md:h-6" />
       </div>
 
-      <div className="typography-label-4 overflow-hidden text-primary">
+      <div className="typography-label-2 overflow-hidden text-primary">
         <div className="flex items-center gap-1">
           <Address compact address={address} />
           <CopyButton text={address} />
diff --git a/packages/app/src/ui/atoms/accordion/Accordion.tsx b/packages/app/src/ui/atoms/accordion/Accordion.tsx
index 9151fc88d..2b6cd63ca 100644
--- a/packages/app/src/ui/atoms/accordion/Accordion.tsx
+++ b/packages/app/src/ui/atoms/accordion/Accordion.tsx
@@ -21,7 +21,7 @@ const AccordionTrigger = React.forwardRef<
     <Trigger
       ref={ref}
       className={cn(
-        'typography-label-4 flex flex-1 items-center justify-between py-4 text-primary transition-all [&[data-state=open]>svg]:rotate-180',
+        'typography-label-2 flex flex-1 items-center justify-between py-4 text-primary transition-all [&[data-state=open]>svg]:rotate-180',
         className,
       )}
       {...props}
@@ -39,7 +39,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <Content
     ref={ref}
-    className="typography-body-4 overflow-hidden text-secondary transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="typography-body-2 overflow-hidden text-secondary transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
     <div className={cn('pt-0 pb-4', className)}>{children}</div>
diff --git a/packages/app/src/ui/atoms/badge/Badge.tsx b/packages/app/src/ui/atoms/badge/Badge.tsx
index 47a4546f5..bbaaee08b 100644
--- a/packages/app/src/ui/atoms/badge/Badge.tsx
+++ b/packages/app/src/ui/atoms/badge/Badge.tsx
@@ -32,7 +32,7 @@ export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
 )
 Badge.displayName = 'Badge'
 
-const badgeVariants = cva('typography-label-5 inline-flex w-fit items-center gap-1 rounded-full', {
+const badgeVariants = cva('typography-label-3 inline-flex w-fit items-center gap-1 rounded-full', {
   variants: {
     appearance: {
       soft: '',
diff --git a/packages/app/src/ui/atoms/dropdown/DropdownMenu.tsx b/packages/app/src/ui/atoms/dropdown/DropdownMenu.tsx
index 819ae670a..04bdf1b09 100644
--- a/packages/app/src/ui/atoms/dropdown/DropdownMenu.tsx
+++ b/packages/app/src/ui/atoms/dropdown/DropdownMenu.tsx
@@ -110,7 +110,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn('typography-label-6 px-4 py-1 text-secondary', className)}
+    className={cn('typography-label-4 px-4 py-1 text-secondary', className)}
     {...props}
   />
 ))
diff --git a/packages/app/src/ui/atoms/health-factor-gauge/HealthFactorGauge.tsx b/packages/app/src/ui/atoms/health-factor-gauge/HealthFactorGauge.tsx
index 215145b70..1ec251d25 100644
--- a/packages/app/src/ui/atoms/health-factor-gauge/HealthFactorGauge.tsx
+++ b/packages/app/src/ui/atoms/health-factor-gauge/HealthFactorGauge.tsx
@@ -107,7 +107,7 @@ export function HealthFactorGauge({ value, className }: HealthFactorGaugeProps)
             fill="none"
           />
 
-          <text x="65" y="200" fill="#908E9E" textAnchor="middle" className="typography-label-6">
+          <text x="65" y="200" fill="#908E9E" textAnchor="middle" className="typography-label-4">
             1
           </text>
           <text
@@ -116,7 +116,7 @@ export function HealthFactorGauge({ value, className }: HealthFactorGaugeProps)
             fill="#908E9E"
             textAnchor="middle"
             dominantBaseline="middle"
-            className="typography-label-6"
+            className="typography-label-4"
           >
             1.5
           </text>
@@ -126,7 +126,7 @@ export function HealthFactorGauge({ value, className }: HealthFactorGaugeProps)
             fill="#908E9E"
             textAnchor="middle"
             dominantBaseline="middle"
-            className="typography-label-6"
+            className="typography-label-4"
           >
             2
           </text>
@@ -136,7 +136,7 @@ export function HealthFactorGauge({ value, className }: HealthFactorGaugeProps)
             fill="#908E9E"
             textAnchor="middle"
             dominantBaseline="middle"
-            className="typography-label-6"
+            className="typography-label-4"
           >
             2.5
           </text>
@@ -146,7 +146,7 @@ export function HealthFactorGauge({ value, className }: HealthFactorGaugeProps)
             fill="#908E9E"
             textAnchor="middle"
             dominantBaseline="middle"
-            className="typography-label-6"
+            className="typography-label-4"
           >
             3
           </text>
@@ -156,11 +156,11 @@ export function HealthFactorGauge({ value, className }: HealthFactorGaugeProps)
             fill="#908E9E"
             textAnchor="middle"
             dominantBaseline="middle"
-            className="typography-label-6"
+            className="typography-label-4"
           >
             3.5
           </text>
-          <text x="335" y="200" fill="#908E9E" textAnchor="middle" className="typography-label-6">
+          <text x="335" y="200" fill="#908E9E" textAnchor="middle" className="typography-label-4">
             4
           </text>
 
diff --git a/packages/app/src/ui/atoms/key-points/KeyPoints.tsx b/packages/app/src/ui/atoms/key-points/KeyPoints.tsx
index 5be59bb7a..98e31f4f6 100644
--- a/packages/app/src/ui/atoms/key-points/KeyPoints.tsx
+++ b/packages/app/src/ui/atoms/key-points/KeyPoints.tsx
@@ -12,7 +12,7 @@ export function KeyPoints({ children, className }: KeyPointsProps) {
 
 function KeyPointsItem({ children, variant }: { children: ReactNode; variant: 'positive' | 'negative' }) {
   return (
-    <li className="typography-label-4 flex items-center gap-2.5">
+    <li className="typography-label-2 flex items-center gap-2.5">
       {variant === 'positive' && <CheckIcon className="icon-xs text-system-success-primary" />}
       {variant === 'negative' && <XIcon className="icon-xs text-system-error-primary" />}
       {children}
diff --git a/packages/app/src/ui/atoms/label/Label.tsx b/packages/app/src/ui/atoms/label/Label.tsx
index 9d692d874..083b9e2f8 100644
--- a/packages/app/src/ui/atoms/label/Label.tsx
+++ b/packages/app/src/ui/atoms/label/Label.tsx
@@ -4,7 +4,7 @@ import * as React from 'react'
 
 import { cn } from '@/ui/utils/style'
 
-const labelVariants = cva('typography-label-5 peer-disabled:cursor-not-allowed peer-disabled:opacity-70')
+const labelVariants = cva('typography-label-3 peer-disabled:cursor-not-allowed peer-disabled:opacity-70')
 
 export const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
diff --git a/packages/app/src/ui/atoms/link/Link.stories.tsx b/packages/app/src/ui/atoms/link/Link.stories.tsx
index 563130e6d..7f0354f2a 100644
--- a/packages/app/src/ui/atoms/link/Link.stories.tsx
+++ b/packages/app/src/ui/atoms/link/Link.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof Link>
 
 export const Primary: Story = {
   render: () => (
-    <div className="typography-body-4">
+    <div className="typography-body-2">
       Lorem ipsum dolor sit amend{' '}
       <Link to="" variant="primary">
         consectetur
@@ -26,7 +26,7 @@ export const Primary: Story = {
 
 export const Secondary: Story = {
   render: () => (
-    <div className="typography-body-4">
+    <div className="typography-body-2">
       Lorem ipsum dolor sit amend{' '}
       <Link to="" variant="secondary">
         consectetur
@@ -38,7 +38,7 @@ export const Secondary: Story = {
 
 export const Underline: Story = {
   render: () => (
-    <div className="typography-body-4 text-system-success-primary">
+    <div className="typography-body-2 text-system-success-primary">
       Lorem ipsum dolor sit amend{' '}
       <Link to="" variant="underline">
         consectetur
@@ -50,7 +50,7 @@ export const Underline: Story = {
 
 export const External: Story = {
   render: () => (
-    <div className="typography-body-4">
+    <div className="typography-body-2">
       Lorem ipsum dolor sit amend{' '}
       <Link to="https://app.spark.fi" variant="secondary" external>
         consectetur
diff --git a/packages/app/src/ui/atoms/network-badge/NetworkBadge.tsx b/packages/app/src/ui/atoms/network-badge/NetworkBadge.tsx
index 70b178a6d..dc2d81531 100644
--- a/packages/app/src/ui/atoms/network-badge/NetworkBadge.tsx
+++ b/packages/app/src/ui/atoms/network-badge/NetworkBadge.tsx
@@ -10,7 +10,7 @@ export function NetworkBadge({ chainId }: NetworkBadgeProps) {
   return (
     <div className="flex items-center gap-1 rounded-full bg-primary p-1 pr-2.5">
       <img src={meta.logo} className="icon-sm" alt={meta.name} />
-      <span className="typography-label-6">{meta.name}</span>
+      <span className="typography-label-4">{meta.name}</span>
     </div>
   )
 }
diff --git a/packages/app/src/ui/atoms/redesign-top-banner/RedesignTopBanner.tsx b/packages/app/src/ui/atoms/redesign-top-banner/RedesignTopBanner.tsx
index 96fdbebec..d44fd9a21 100644
--- a/packages/app/src/ui/atoms/redesign-top-banner/RedesignTopBanner.tsx
+++ b/packages/app/src/ui/atoms/redesign-top-banner/RedesignTopBanner.tsx
@@ -18,7 +18,7 @@ export function RedesignTopBanner({ onClose, className }: RedesignTopBannerProps
         className,
       )}
     >
-      <div className="typography-label-5 md:typography-label-4 text-primary">
+      <div className="typography-label-3 md:typography-label-2 text-primary">
         Welcome to the{'  '}
         <Sparkles sizeRange={[12, 20]} className="mx-1 whitespace-nowrap">
           <span className="bg-gradient-spark-secondary bg-clip-text text-transparent">New Spark!</span>
diff --git a/packages/app/src/ui/atoms/table/Table.tsx b/packages/app/src/ui/atoms/table/Table.tsx
index 02595df43..ff3f262b7 100644
--- a/packages/app/src/ui/atoms/table/Table.tsx
+++ b/packages/app/src/ui/atoms/table/Table.tsx
@@ -4,7 +4,7 @@ import { cn } from '@/ui/utils/style'
 
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
-    <table ref={ref} className={cn('typography-body-5 w-full caption-bottom', className)} {...props} />
+    <table ref={ref} className={cn('typography-body-3 w-full caption-bottom', className)} {...props} />
   ),
 )
 Table.displayName = 'Table'
@@ -59,7 +59,7 @@ TableCell.displayName = 'TableCell'
 
 const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
   ({ className, ...props }, ref) => (
-    <caption ref={ref} className={cn('typography-label-5 mt-4 text-secondary', className)} {...props} />
+    <caption ref={ref} className={cn('typography-label-3 mt-4 text-secondary', className)} {...props} />
   ),
 )
 TableCaption.displayName = 'TableCaption'
diff --git a/packages/app/src/ui/atoms/tabs/Tabs.tsx b/packages/app/src/ui/atoms/tabs/Tabs.tsx
index 1251df001..6bcadcf51 100644
--- a/packages/app/src/ui/atoms/tabs/Tabs.tsx
+++ b/packages/app/src/ui/atoms/tabs/Tabs.tsx
@@ -9,8 +9,8 @@ const Tabs = TabsPrimitive.Root
 const tabsListVariants = cva('inline-flex w-full flex-wrap items-center justify-center rounded-sm bg-secondary', {
   variants: {
     size: {
-      l: 'typography-label-4 gap-2 p-1.5',
-      s: 'typography-label-6 gap-0.5 p-0.5',
+      l: 'typography-label-2 gap-2 p-1.5',
+      s: 'typography-label-4 gap-0.5 p-0.5',
     },
   },
   defaultVariants: {
diff --git a/packages/app/src/ui/atoms/tooltip/Tooltip.tsx b/packages/app/src/ui/atoms/tooltip/Tooltip.tsx
index 53428a11c..78eb031a9 100644
--- a/packages/app/src/ui/atoms/tooltip/Tooltip.tsx
+++ b/packages/app/src/ui/atoms/tooltip/Tooltip.tsx
@@ -22,7 +22,7 @@ function TooltipContentLayoutIcon({ src }: { src: string }) {
 }
 
 function TooltipContentLayoutTitle({ children }: ChildrenProps) {
-  return <h5 className="typography-label-4">{children}</h5>
+  return <h5 className="typography-label-2">{children}</h5>
 }
 
 function TooltipContentLayoutBody({ children }: ChildrenProps) {
@@ -43,7 +43,7 @@ const TooltipTrigger = RadixPrimitive.Trigger
 
 const tooltipContentVariants = cva(
   cn(
-    'typography-label-6 z-50 overflow-hidden rounded-sm bg-primary-inverse',
+    'typography-label-4 z-50 overflow-hidden rounded-sm bg-primary-inverse',
     'border-primary/25 border-t px-3 py-2 text-fg-primary-inverse shadow-glow-lg',
   ),
   {
diff --git a/packages/app/src/ui/charts/ChartTooltipContent.tsx b/packages/app/src/ui/charts/ChartTooltipContent.tsx
index d3ed88772..85e440bc2 100644
--- a/packages/app/src/ui/charts/ChartTooltipContent.tsx
+++ b/packages/app/src/ui/charts/ChartTooltipContent.tsx
@@ -11,12 +11,12 @@ export function ChartTooltipContent({ children: [date, value] }: { children: Rea
 }
 
 function TooltipDate({ children }: { children: ReactNode }) {
-  return <div className="typography-label-6 flex flex-col gap-3 text-secondary">{children}</div>
+  return <div className="typography-label-4 flex flex-col gap-3 text-secondary">{children}</div>
 }
 
 function TooltipValue({ children, dotColor }: { children: ReactNode; dotColor: string }) {
   return (
-    <div className="typography-label-4 flex items-center gap-1.5 text-primary-inverse">
+    <div className="typography-label-2 flex items-center gap-1.5 text-primary-inverse">
       <Circle size={8} fill={dotColor} stroke="0" />
       <div>{children}</div>
     </div>
diff --git a/packages/app/src/ui/charts/components/ChartTabsPanel.tsx b/packages/app/src/ui/charts/components/ChartTabsPanel.tsx
index cab8de35f..d5315683a 100644
--- a/packages/app/src/ui/charts/components/ChartTabsPanel.tsx
+++ b/packages/app/src/ui/charts/components/ChartTabsPanel.tsx
@@ -78,7 +78,7 @@ export function ChartTabsPanel({ tabs, onTimeframeChange, selectedTimeframe, hei
         <div className="flex flex-col flex-wrap items-center justify-between gap-2 lg:flex-row lg:gap-1">
           <TabsList className="w-full lg:w-auto" size="s">
             {tabs.map((tab) => (
-              <TabsTrigger key={tab.id} value={tab.id} className="typography-label-5 px-1 md:px-1.5 xl:px-5">
+              <TabsTrigger key={tab.id} value={tab.id} className="typography-label-3 px-1 md:px-1.5 xl:px-5">
                 {tab.label}
               </TabsTrigger>
             ))}
@@ -124,7 +124,7 @@ function ChartPanel({ height, component: Chart, isError, isPending, props }: Cha
   if (isError) {
     return (
       <div className="flex items-center justify-center" style={{ height }} ref={ref}>
-        <div className="typography-label-5 flex items-center rounded-full bg-secondary px-3 py-1 text-secondary/80">
+        <div className="typography-label-3 flex items-center rounded-full bg-secondary px-3 py-1 text-secondary/80">
           <AlertTriangle className="h-4" /> Failed to load chart data
         </div>
       </div>
diff --git a/packages/app/src/ui/charts/components/TimeframeButtons.tsx b/packages/app/src/ui/charts/components/TimeframeButtons.tsx
index 990d11b65..d76d5cc82 100644
--- a/packages/app/src/ui/charts/components/TimeframeButtons.tsx
+++ b/packages/app/src/ui/charts/components/TimeframeButtons.tsx
@@ -34,7 +34,7 @@ function TimeframeButton({ selected, ...props }: TimeframeButtonProps) {
   return (
     <button
       className={cn(
-        'typography-label-6 border border-transparent p-1.5 text-secondary xl:min-w-9 ',
+        'typography-label-4 border border-transparent p-1.5 text-secondary xl:min-w-9 ',
         'flex-1 rounded-[6px] transition-colors ease-in hover:bg-tertiary',
         'focus-visible:outline-none focus-visible:ring focus-visible:ring-primary-200 focus-visible:ring-offset-0',
         selected && 'border-primary bg-primary text-primary shadow-xs hover:bg-primary',
diff --git a/packages/app/src/ui/layouts/app-layout/components/PageNotSupportedWarning.tsx b/packages/app/src/ui/layouts/app-layout/components/PageNotSupportedWarning.tsx
index 4dd67292b..cff711899 100644
--- a/packages/app/src/ui/layouts/app-layout/components/PageNotSupportedWarning.tsx
+++ b/packages/app/src/ui/layouts/app-layout/components/PageNotSupportedWarning.tsx
@@ -22,10 +22,10 @@ export function PageNotSupportedWarning({ pageName, openNetworkSelectDialog }: P
         <div className="flex gap-4">
           <AlertTriangle className="h-8 w-8 text-system-error-primary" />
           <div className="flex flex-col gap-0.5">
-            <div className="typography-label-5 lg:typography-label-4 text-primary">
+            <div className="typography-label-3 lg:typography-label-2 text-primary">
               {pageName} {pageName.endsWith('s') ? 'are' : 'is'} not supported on the network you are connected to.
             </div>
-            <div className="typography-body-5 text-secondary">
+            <div className="typography-body-3 text-secondary">
               Switch to other supported networks to unlock this page.
             </div>
           </div>
diff --git a/packages/app/src/ui/molecules/alert/Alert.tsx b/packages/app/src/ui/molecules/alert/Alert.tsx
index fdeaa5902..840eb988f 100644
--- a/packages/app/src/ui/molecules/alert/Alert.tsx
+++ b/packages/app/src/ui/molecules/alert/Alert.tsx
@@ -32,7 +32,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
 )
 Alert.displayName = 'Alert'
 
-const alertVariants = cva('typography-label-6 grid grid-cols-[auto_1fr] items-center gap-3 rounded-sm p-4', {
+const alertVariants = cva('typography-label-4 grid grid-cols-[auto_1fr] items-center gap-3 rounded-sm p-4', {
   variants: {
     variant: {
       info: 'bg-brand-secondary text-brand-primary',
diff --git a/packages/app/src/ui/molecules/asset-selector/AssetSelector.tsx b/packages/app/src/ui/molecules/asset-selector/AssetSelector.tsx
index 997ff4964..7e072818a 100644
--- a/packages/app/src/ui/molecules/asset-selector/AssetSelector.tsx
+++ b/packages/app/src/ui/molecules/asset-selector/AssetSelector.tsx
@@ -33,7 +33,7 @@ export function AssetSelector({
       >
         <div className="flex flex-row items-center gap-2" data-testid={testIds.component.AssetSelector.option}>
           <TokenIcon token={selectedAsset} className="h-6 w-6" />
-          <div className="typography-label-4">{selectedAsset.symbol}</div>
+          <div className="typography-label-2">{selectedAsset.symbol}</div>
         </div>
       </div>
     )
@@ -44,7 +44,7 @@ export function AssetSelector({
       <SelectTrigger disabled={disabled} data-testid={testIds.component.AssetSelector.trigger}>
         <div className="flex flex-row items-center gap-2">
           <TokenIcon token={selectedAsset} className="h-6 w-6" />
-          <div className="typography-label-4">{selectedAsset.symbol}</div>
+          <div className="typography-label-2">{selectedAsset.symbol}</div>
         </div>
       </SelectTrigger>
       <SelectContent>
@@ -56,12 +56,12 @@ export function AssetSelector({
             >
               <div className="flex flex-row items-center gap-2">
                 <TokenIcon token={token} className="h-6 w-6" />
-                <div className="typography-label-4">{token.symbol}</div>
+                <div className="typography-label-2">{token.symbol}</div>
               </div>
               {showBalance && (
                 <div className="flex flex-col items-end gap-0.5">
-                  <div className="typography-label-6 text-fg-quaternary">Balance</div>
-                  <div className="typography-label-6 text-fg-primary">
+                  <div className="typography-label-4 text-fg-quaternary">Balance</div>
+                  <div className="typography-label-4 text-fg-primary">
                     {token.format(balance, { style: 'compact' })}
                   </div>
                 </div>
diff --git a/packages/app/src/ui/molecules/cooldown-timer/CooldownTimer.tsx b/packages/app/src/ui/molecules/cooldown-timer/CooldownTimer.tsx
index 55efc9013..9ee261c28 100644
--- a/packages/app/src/ui/molecules/cooldown-timer/CooldownTimer.tsx
+++ b/packages/app/src/ui/molecules/cooldown-timer/CooldownTimer.tsx
@@ -25,9 +25,9 @@ export function CooldownTimer({ renewalPeriod, latestUpdateTimestamp, forceOpen
         <TimerResetIcon size={16} className="text-fg-brand-tertiary" />
       </TooltipTrigger>
       <TooltipContent className="p-3">
-        <div className="typography-label-6 flex flex-col gap-2 text-tertiary">
+        <div className="typography-label-4 flex flex-col gap-2 text-tertiary">
           Cooldown period:
-          <div className="typography-label-4 text-primary-inverse">{secondsToTime(timeLeft)}</div>
+          <div className="typography-label-2 text-primary-inverse">{secondsToTime(timeLeft)}</div>
           {timeLeft === 0 ? (
             <>
               The cap renewal cooldown is over. <br /> It might be changed at any time.
diff --git a/packages/app/src/ui/molecules/data-table/components/ColumnHeader.tsx b/packages/app/src/ui/molecules/data-table/components/ColumnHeader.tsx
index b6587d629..cf1206aeb 100644
--- a/packages/app/src/ui/molecules/data-table/components/ColumnHeader.tsx
+++ b/packages/app/src/ui/molecules/data-table/components/ColumnHeader.tsx
@@ -22,7 +22,7 @@ export function ColumnHeader<T>({ column, columnDefinition }: ColumnHeaderProps<
       {sortable ? (
         <Button
           variant="transparent"
-          className="!typography-label-6 h-4 cursor-pointer rounded-[1px] p-0 text-secondary"
+          className="!typography-label-4 h-4 cursor-pointer rounded-[1px] p-0 text-secondary"
           onClick={() => sortable && column.toggleSorting(column.getIsSorted() === 'asc')}
         >
           {column.getIsSorted() !== false ? (
@@ -39,7 +39,7 @@ export function ColumnHeader<T>({ column, columnDefinition }: ColumnHeaderProps<
           {header}
         </Button>
       ) : (
-        <span className="typography-label-6 h-4 text-secondary ">{header}</span>
+        <span className="typography-label-4 h-4 text-secondary ">{header}</span>
       )}
     </div>
   )
diff --git a/packages/app/src/ui/molecules/data-table/components/CompactValueCell.tsx b/packages/app/src/ui/molecules/data-table/components/CompactValueCell.tsx
index d0ddd891f..05d0550fd 100644
--- a/packages/app/src/ui/molecules/data-table/components/CompactValueCell.tsx
+++ b/packages/app/src/ui/molecules/data-table/components/CompactValueCell.tsx
@@ -26,7 +26,7 @@ export function CompactValueCell({
   if (mobileViewOptions?.isMobileView) {
     return (
       <div className="flex flex-row items-center justify-between">
-        <div className="typography-label-6 w-full text-secondary">{mobileViewOptions.rowTitle}</div>
+        <div className="typography-label-4 w-full text-secondary">{mobileViewOptions.rowTitle}</div>
         <CompactValue
           token={token}
           value={value}
@@ -81,14 +81,14 @@ function CompactValue({
     <div className={cn('flex flex-col', className)} data-testid={dataTestId}>
       <div
         className={cn(
-          'typography-label-4 flex w-full flex-row justify-end text-primary',
+          'typography-label-2 flex w-full flex-row justify-end text-primary',
           dimmed && 'text-neutral-600/70',
         )}
       >
         {token.format(value, { style: compactValue ? 'compact' : 'auto' })}
       </div>
       <div className="flex w-full flex-row justify-end">
-        <div className={cn('typography-body-6 text-secondary', dimmed && 'text-neutral-600/30')}>
+        <div className={cn('typography-body-4 text-secondary', dimmed && 'text-neutral-600/30')}>
           {token.formatUSD(value, { compact: compactValue })}
         </div>
       </div>
diff --git a/packages/app/src/ui/molecules/data-table/components/PercentageCell.tsx b/packages/app/src/ui/molecules/data-table/components/PercentageCell.tsx
index 67b9ce79e..244a38ebe 100644
--- a/packages/app/src/ui/molecules/data-table/components/PercentageCell.tsx
+++ b/packages/app/src/ui/molecules/data-table/components/PercentageCell.tsx
@@ -12,7 +12,7 @@ export function PercentageCell({ value, mobileViewOptions }: PercentageCellProps
   if (mobileViewOptions?.isMobileView) {
     return (
       <div className="flex flex-row items-center justify-between">
-        <div className="typography-label-6 w-full text-secondary">{mobileViewOptions.rowTitle}</div>
+        <div className="typography-label-4 w-full text-secondary">{mobileViewOptions.rowTitle}</div>
         <div>{formatPercentage(value)}</div>
       </div>
     )
diff --git a/packages/app/src/ui/molecules/data-table/components/SwitchCell.tsx b/packages/app/src/ui/molecules/data-table/components/SwitchCell.tsx
index f302dbd6f..84eb65679 100644
--- a/packages/app/src/ui/molecules/data-table/components/SwitchCell.tsx
+++ b/packages/app/src/ui/molecules/data-table/components/SwitchCell.tsx
@@ -12,7 +12,7 @@ export function SwitchCell({ checked, onSwitchClick, mobileViewOptions }: Switch
   if (mobileViewOptions?.isMobileView) {
     return (
       <div className="flex flex-row items-center justify-between">
-        <div className="typography-label-6 w-full text-secondary">{mobileViewOptions.rowTitle}</div>
+        <div className="typography-label-4 w-full text-secondary">{mobileViewOptions.rowTitle}</div>
         <Switch checked={checked} onClick={onSwitchClick} />
       </div>
     )
diff --git a/packages/app/src/ui/molecules/data-table/components/TokenWithLogo.tsx b/packages/app/src/ui/molecules/data-table/components/TokenWithLogo.tsx
index 137c0b7f7..7fd025ae0 100644
--- a/packages/app/src/ui/molecules/data-table/components/TokenWithLogo.tsx
+++ b/packages/app/src/ui/molecules/data-table/components/TokenWithLogo.tsx
@@ -23,7 +23,7 @@ export function TokenWithLogo({ token, reserveStatus }: TokenWithLogoProps) {
           <TokenIcon token={token} className="h-6 w-6" />
         </ColorFilter>
       </div>
-      <div className={cn('typography-label-4 text-primary', isPaused && 'text-system-error-primary')}>
+      <div className={cn('typography-label-2 text-primary', isPaused && 'text-system-error-primary')}>
         {token.symbol}
       </div>
       {isFrozen && <FrozenPill />}
diff --git a/packages/app/src/ui/molecules/health-factor-panel-content/HealthFactorPanelContent.tsx b/packages/app/src/ui/molecules/health-factor-panel-content/HealthFactorPanelContent.tsx
index 790925603..6b1bb0adf 100644
--- a/packages/app/src/ui/molecules/health-factor-panel-content/HealthFactorPanelContent.tsx
+++ b/packages/app/src/ui/molecules/health-factor-panel-content/HealthFactorPanelContent.tsx
@@ -19,7 +19,7 @@ export const HealthFactorPanelContent = forwardRef<HTMLDivElement, HealthFactorP
     return (
       <div className={cn('flex h-full flex-col gap-8', className)} ref={ref}>
         <div className="flex items-center gap-2">
-          <h3 className="typography-label-2">Health factor</h3>
+          <h3 className="typography-heading-5">Health factor</h3>
           <Info>
             <p>
               The health factor is a number that shows how safe your assets are in the protocol. It's calculated by
@@ -45,7 +45,7 @@ export const HealthFactorPanelContent = forwardRef<HTMLDivElement, HealthFactorP
             <div className="flex w-full flex-col">
               <div className="mb-3 flex items-center justify-between border-fg-primary border-b pb-3">
                 <div className="flex flex-row items-center gap-2">
-                  <div className="typography-label-4">Liquidation Price</div>
+                  <div className="typography-label-2">Liquidation Price</div>
                   <Info>
                     Estimated price of {liquidationDetails.tokenWithPrice.symbol} at which the position may be
                     liquidated.
@@ -55,7 +55,7 @@ export const HealthFactorPanelContent = forwardRef<HTMLDivElement, HealthFactorP
               </div>
               <div className="flex items-center justify-between">
                 <div className="flex flex-row items-center gap-2">
-                  <div className="typography-label-4">Current {liquidationDetails.tokenWithPrice.symbol} Price </div>
+                  <div className="typography-label-2">Current {liquidationDetails.tokenWithPrice.symbol} Price </div>
                   <Info>Current price of {liquidationDetails.tokenWithPrice.symbol}.</Info>
                 </div>
                 <div>{USD_MOCK_TOKEN.formatUSD(liquidationDetails.tokenWithPrice.priceInUSD)}</div>
diff --git a/packages/app/src/ui/molecules/icon-stack/IconStack.tsx b/packages/app/src/ui/molecules/icon-stack/IconStack.tsx
index 29495400a..09dbd7c46 100644
--- a/packages/app/src/ui/molecules/icon-stack/IconStack.tsx
+++ b/packages/app/src/ui/molecules/icon-stack/IconStack.tsx
@@ -40,7 +40,7 @@ export function IconStack({
         <div
           className={cn(
             'flex items-center justify-center rounded-full bg-primary-600 text-primary-inverse',
-            size === 'base' ? 'typography-label-6' : 'typography-label-4',
+            size === 'base' ? 'typography-label-4' : 'typography-label-2',
             iconVariants({ size }),
           )}
         >
diff --git a/packages/app/src/ui/molecules/labeled-switch/LabeledSwitch.tsx b/packages/app/src/ui/molecules/labeled-switch/LabeledSwitch.tsx
index effb14ddc..75b8241ca 100644
--- a/packages/app/src/ui/molecules/labeled-switch/LabeledSwitch.tsx
+++ b/packages/app/src/ui/molecules/labeled-switch/LabeledSwitch.tsx
@@ -13,7 +13,7 @@ export function LabeledSwitch({ children, 'data-testid': dataTestId, ...props }:
   return (
     <div className="flex items-center gap-3">
       <Switch {...props} id={id} data-testid={dataTestId} />
-      <Label htmlFor={id} className="typography-label-4">
+      <Label htmlFor={id} className="typography-label-2">
         {children}
       </Label>
     </div>
diff --git a/packages/app/src/ui/molecules/token-amount/TokenAmount.tsx b/packages/app/src/ui/molecules/token-amount/TokenAmount.tsx
index 71ddffa5b..4098b7aad 100644
--- a/packages/app/src/ui/molecules/token-amount/TokenAmount.tsx
+++ b/packages/app/src/ui/molecules/token-amount/TokenAmount.tsx
@@ -27,12 +27,12 @@ export function TokenAmount({
       <div className="flex w-fit items-center gap-1.5">
         <TokenIcon token={token} className="h-4 w-4" />
         <div className="flex items-baseline gap-1">
-          <div className="typography-label-4 text-primary" data-testid={amountDataTestId}>
+          <div className="typography-label-2 text-primary" data-testid={amountDataTestId}>
             {formattedAmount}
             {/* @note: next line is need to maintain backward compatibility with e2e test - amount should include token symbol */}
             <span className="hidden"> {token.symbol}</span>
           </div>
-          <div className="typography-body-6 text-secondary" data-testid={usdAmountDataTestId}>
+          <div className="typography-body-4 text-secondary" data-testid={usdAmountDataTestId}>
             {formattedUsdAmount}
           </div>
         </div>
@@ -43,12 +43,12 @@ export function TokenAmount({
   return (
     <div className="grid w-fit grid-cols-[auto_auto] grid-rows-[auto_auto] items-center gap-x-1.5 gap-y-0.5">
       <TokenIcon token={token} className="h-4 w-4" />
-      <div className="typography-label-4 text-primary" data-testid={amountDataTestId}>
+      <div className="typography-label-2 text-primary" data-testid={amountDataTestId}>
         {formattedAmount}
         <span className="hidden"> {token.symbol}</span>
       </div>
       <div />
-      <div className="typography-body-6 text-secondary" data-testid={usdAmountDataTestId}>
+      <div className="typography-body-4 text-secondary" data-testid={usdAmountDataTestId}>
         {formattedUsdAmount}
       </div>
     </div>
diff --git a/packages/app/src/ui/organisms/asset-input/AssetInput.tsx b/packages/app/src/ui/organisms/asset-input/AssetInput.tsx
index 854ed53f1..406fab7a4 100644
--- a/packages/app/src/ui/organisms/asset-input/AssetInput.tsx
+++ b/packages/app/src/ui/organisms/asset-input/AssetInput.tsx
@@ -84,7 +84,7 @@ export function AssetInput<TFieldValues extends FieldValues>({
 
   return (
     <div className="flex flex-col gap-2">
-      {label && <div className="typography-label-5 text-secondary">{label}</div>}
+      {label && <div className="typography-label-3 text-secondary">{label}</div>}
       <div
         className={cn(
           'grid items-center gap-3 p-2 pr-4',
@@ -110,7 +110,7 @@ export function AssetInput<TFieldValues extends FieldValues>({
             type="text"
             inputMode="decimal"
             className={cn(
-              'typography-label-4 text-primary focus:outline-none',
+              'typography-label-2 text-primary focus:outline-none',
               disabled && 'cursor-not-allowed opacity-50',
             )}
             placeholder="0"
@@ -136,7 +136,7 @@ export function AssetInput<TFieldValues extends FieldValues>({
               }
             }}
           />
-          <div className={cn('typography-label-6 truncate text-secondary', disabled && 'opacity-50')}>
+          <div className={cn('typography-label-4 truncate text-secondary', disabled && 'opacity-50')}>
             {token.formatUSD(NormalizedUnitNumber(parseBigNumber(value, 0)))}
           </div>
         </div>
@@ -145,7 +145,7 @@ export function AssetInput<TFieldValues extends FieldValues>({
             <button
               onClick={disabled ? undefined : setMaxValue}
               className={cn(
-                'typography-label-5 text-brand-primary disabled:text-secondary hover:text-primary-950',
+                'typography-label-3 text-brand-primary disabled:text-secondary hover:text-primary-950',
                 disabled && 'cursor-not-allowed opacity-50',
               )}
               disabled={disabled || isMaxSelected}
@@ -153,7 +153,7 @@ export function AssetInput<TFieldValues extends FieldValues>({
             >
               MAX
             </button>
-            <div className={cn('typography-body-6 text-secondary', disabled && 'opacity-50')}>
+            <div className={cn('typography-body-4 text-secondary', disabled && 'opacity-50')}>
               {token.format(maxValue, { style: 'compact' })} {token.symbol}
             </div>
           </div>
@@ -161,7 +161,7 @@ export function AssetInput<TFieldValues extends FieldValues>({
         {onRemove && <IconButton icon={XIcon} onClick={onRemove} variant="transparent" size="m" />}
       </div>
       {showError && error && (
-        <div data-testid={testIds.component.AssetInput.error} className="typography-label-6 text-system-error-primary">
+        <div data-testid={testIds.component.AssetInput.error} className="typography-label-4 text-system-error-primary">
           {error.message}
         </div>
       )}
diff --git a/packages/app/src/ui/organisms/responsive-data-table/ResponsiveDataTable.tsx b/packages/app/src/ui/organisms/responsive-data-table/ResponsiveDataTable.tsx
index c22399d94..01d5cdbd5 100644
--- a/packages/app/src/ui/organisms/responsive-data-table/ResponsiveDataTable.tsx
+++ b/packages/app/src/ui/organisms/responsive-data-table/ResponsiveDataTable.tsx
@@ -47,7 +47,7 @@ export function ResponsiveDataTable<T extends { [k: string]: any }>({
         <TableHeader>
           <TableRow className="flex justify-between pb-3">
             {[rowHeaderDefinition?.header, 'More info'].map((header, index) => (
-              <TableHead className="typography-label-6 p-0 text-secondary" key={index}>
+              <TableHead className="typography-label-4 p-0 text-secondary" key={index}>
                 {header}
               </TableHead>
             ))}
diff --git a/packages/app/src/ui/organisms/risk-acknowledgement/RiskAcknowledgement.tsx b/packages/app/src/ui/organisms/risk-acknowledgement/RiskAcknowledgement.tsx
index c2b6404c6..8f7196622 100644
--- a/packages/app/src/ui/organisms/risk-acknowledgement/RiskAcknowledgement.tsx
+++ b/packages/app/src/ui/organisms/risk-acknowledgement/RiskAcknowledgement.tsx
@@ -24,7 +24,7 @@ export function RiskAcknowledgement({ warning, onStatusChange }: RiskAcknowledge
         </div>
       </Alert>
       <LabeledSwitch onCheckedChange={onStatusChange} data-testid={testIds.component.RiskAcknowledgement.switch}>
-        <div className="typography-label-5 text-primary">I acknowledge risks involved</div>
+        <div className="typography-label-3 text-primary">I acknowledge risks involved</div>
       </LabeledSwitch>
     </div>
   )
diff --git a/packages/app/src/ui/organisms/transaction-overview/TransactionOverview.tsx b/packages/app/src/ui/organisms/transaction-overview/TransactionOverview.tsx
index 6db8b5a5b..ad96a1755 100644
--- a/packages/app/src/ui/organisms/transaction-overview/TransactionOverview.tsx
+++ b/packages/app/src/ui/organisms/transaction-overview/TransactionOverview.tsx
@@ -23,11 +23,11 @@ function TransactionOverview({ children, showSkyBadge = false }: TransactionOver
   return (
     <section className="flex flex-col gap-2">
       <div className="flex items-center justify-between">
-        <h5 className="typography-body-5 text-secondary">Transaction overview</h5>
+        <h5 className="typography-body-3 text-secondary">Transaction overview</h5>
         {showSkyBadge && (
           <div className="flex items-center gap-1.5">
             <img src={assets.token.sky} className="icon-xs" />
-            <div className="typography-label-6 text-brand-primary">Powered by Sky</div>
+            <div className="typography-label-4 text-brand-primary">Powered by Sky</div>
             <Tooltip>
               <TooltipTrigger asChild>
                 <InfoIcon className="icon-xs icon-brand-primary" />
@@ -48,7 +48,7 @@ function TransactionOverview({ children, showSkyBadge = false }: TransactionOver
 }
 
 function TransactionOverviewLabel({ children }: { children: React.ReactNode }) {
-  return <div className="typography-label-5 text-secondary">{children}:</div>
+  return <div className="typography-label-3 text-secondary">{children}:</div>
 }
 
 function TransactionOverviewRow({ children }: { children: React.ReactNode }) {
@@ -66,7 +66,7 @@ function TransactionOverviewRow({ children }: { children: React.ReactNode }) {
 }
 
 function TransactionOverviewGenericRow({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div {...rest} className={cn('typography-label-4 text-primary', className)} />
+  return <div {...rest} className={cn('typography-label-2 text-primary', className)} />
 }
 
 TransactionOverview.Label = TransactionOverviewLabel
diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewApyChange.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewApyChange.tsx
index 19b79feab..fa983e80b 100644
--- a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewApyChange.tsx
+++ b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewApyChange.tsx
@@ -14,7 +14,7 @@ export function TransactionOverviewApyChange({ currentApy, updatedApy }: Transac
     <div className="flex flex-row items-center gap-2.5">
       <div
         data-testid={testIds.dialog.savings.transactionOverview.apyChange.before}
-        className="typography-label-4 text-primary"
+        className="typography-label-2 text-primary"
       >
         {formatPercentage(currentApy)}
       </div>
@@ -22,7 +22,7 @@ export function TransactionOverviewApyChange({ currentApy, updatedApy }: Transac
       <div
         data-testid={testIds.dialog.savings.transactionOverview.apyChange.after}
         className={cn(
-          'typography-label-4',
+          'typography-label-2',
           currentApy.eq(updatedApy) && 'text-primary',
           currentApy.gt(updatedApy) && 'text-system-error-primary',
           currentApy.lt(updatedApy) && 'text-system-success-primary',
diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewAvailableAssets.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewAvailableAssets.tsx
index 46225692c..e79a728c7 100644
--- a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewAvailableAssets.tsx
+++ b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewAvailableAssets.tsx
@@ -11,7 +11,7 @@ export function TransactionOverviewAvailableAssets({ categoryName, tokens }: Tra
   if (categoryName === 'No E-Mode') {
     return (
       <div
-        className="typography-label-4 text-primary"
+        className="typography-label-2 text-primary"
         data-testid={testIds.dialog.eMode.transactionOverview.availableAssets.assets}
       >
         All assets
@@ -20,7 +20,7 @@ export function TransactionOverviewAvailableAssets({ categoryName, tokens }: Tra
   }
 
   return (
-    <div className="typography-label-4 flex items-center gap-2.5 text-primary">
+    <div className="typography-label-2 flex items-center gap-2.5 text-primary">
       <div data-testid={testIds.dialog.eMode.transactionOverview.availableAssets.category}>{categoryName}</div>
       <MoveRightIcon className="icon-xxs icon-secondary" />
       <div data-testid={testIds.dialog.eMode.transactionOverview.availableAssets.assets}>
diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewFarmApy.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewFarmApy.tsx
index 6ebfae312..5d773ce48 100644
--- a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewFarmApy.tsx
+++ b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewFarmApy.tsx
@@ -17,13 +17,13 @@ export function TransactionOverviewFarmApy({ apy, rewardsPerYear, rewardToken }:
         {apy.gt(0) && (
           <div
             data-testid={testIds.farmDetails.stakeDialog.transactionOverview.estimatedRewards.apy}
-            className="typography-label-4 text-primary"
+            className="typography-label-2 text-primary"
           >
             {formatPercentage(apy)}
           </div>
         )}
         <div
-          className="typography-body-6 text-secondary"
+          className="typography-body-4 text-secondary"
           data-testid={testIds.farmDetails.stakeDialog.transactionOverview.estimatedRewards.description}
         >
           Earn ~{rewardToken.format(rewardsPerYear, { style: 'auto' })} {rewardToken.symbol}/year
diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewHealthFactorChange.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewHealthFactorChange.tsx
index f748c2c48..2557a308d 100644
--- a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewHealthFactorChange.tsx
+++ b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewHealthFactorChange.tsx
@@ -53,7 +53,7 @@ function HealthFactorBadge({ healthFactor, 'data-testid': dataTestId }: HealthFa
       <Badge appearance="solid" size="xs" variant={riskLevelToStateVariant[riskLevel]}>
         {title}
       </Badge>
-      <div className="typography-label-4 text-primary">{formatHealthFactor(healthFactor)}</div>
+      <div className="typography-label-2 text-primary">{formatHealthFactor(healthFactor)}</div>
     </div>
   )
 }
diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewMaxLtvChange.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewMaxLtvChange.tsx
index d73f4d6d1..ac8499417 100644
--- a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewMaxLtvChange.tsx
+++ b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewMaxLtvChange.tsx
@@ -15,7 +15,7 @@ export function TransactionOverviewMaxLtvChange({
   if (!updatedMaxLTV) {
     return (
       <div
-        className="typography-label-4 text-primary"
+        className="typography-label-2 text-primary"
         data-testid={testIds.dialog.eMode.transactionOverview.maxLtv.before}
       >
         {formatPercentage(currentMaxLTV)}
@@ -24,7 +24,7 @@ export function TransactionOverviewMaxLtvChange({
   }
 
   return (
-    <div className="typography-label-4 flex items-center gap-2.5 text-primary">
+    <div className="typography-label-2 flex items-center gap-2.5 text-primary">
       <div data-testid={testIds.dialog.eMode.transactionOverview.maxLtv.before}>{formatPercentage(currentMaxLTV)}</div>
       <MoveRightIcon className="icon-xxs icon-secondary" />
       <div data-testid={testIds.dialog.eMode.transactionOverview.maxLtv.after}>{formatPercentage(updatedMaxLTV)}</div>
diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewRoute.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewRoute.tsx
index 63eb1fc69..2ac02419e 100644
--- a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewRoute.tsx
+++ b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewRoute.tsx
@@ -42,10 +42,10 @@ export function TransactionOverviewRoute({ route }: TransactionOverviewRouteProp
               />
             ) : (
               <div className="flex flex-col items-end gap-1.5">
-                <div className="typography-label-4 text-primary" data-testid={item.upperTextDataTestId}>
+                <div className="typography-label-2 text-primary" data-testid={item.upperTextDataTestId}>
                   {item.upperText}
                 </div>
-                <div className="typography-body-6 text-secondary" data-testid={item.lowerTextDataTestId}>
+                <div className="typography-body-4 text-secondary" data-testid={item.lowerTextDataTestId}>
                   {item.lowerText}
                 </div>
               </div>
@@ -62,7 +62,7 @@ export function TransactionOverviewRoutePlaceholder({ className, ...rest }: HTML
   return (
     <div
       {...rest}
-      className={cn('typography-label-4 flex min-h-[42px] flex-col justify-center text-primary', className)}
+      className={cn('typography-label-2 flex min-h-[42px] flex-col justify-center text-primary', className)}
     />
   )
 }
diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewSavingsApy.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewSavingsApy.tsx
index f997c1191..d4f0ba497 100644
--- a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewSavingsApy.tsx
+++ b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewSavingsApy.tsx
@@ -17,13 +17,13 @@ export function TransactionOverviewSavingsApy({ apy, stableEarnRate, baseStable
         {apy.gt(0) && (
           <div
             data-testid={testIds.dialog.savings.transactionOverview.apy.value}
-            className="typography-label-4 text-primary"
+            className="typography-label-2 text-primary"
           >
             {formatPercentage(apy)}
           </div>
         )}
         <div
-          className="typography-body-6 text-secondary"
+          className="typography-body-4 text-secondary"
           data-testid={testIds.dialog.savings.transactionOverview.apy.description}
         >
           Earn ~{baseStable.format(stableEarnRate, { style: 'auto' })} {baseStable.symbol}/year
diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewStakedInFarm.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewStakedInFarm.tsx
index 95f7c4547..c1b91f4d1 100644
--- a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewStakedInFarm.tsx
+++ b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewStakedInFarm.tsx
@@ -17,7 +17,7 @@ export function TransactionOverviewStakedInFarm({ token, amount, farmName }: Tra
       <TokenIcon token={token} className="h-4 w-4" />
       <div className="flex items-baseline gap-1">
         <div
-          className="typography-label-4 text-primary"
+          className="typography-label-2 text-primary"
           data-testid={testIds.farmDetails.stakeDialog.transactionOverview.outcome}
         >
           {formattedAmount}
diff --git a/packages/app/tailwind.config.ts b/packages/app/tailwind.config.ts
index d17f2b2bf..64f21e8b8 100644
--- a/packages/app/tailwind.config.ts
+++ b/packages/app/tailwind.config.ts
@@ -413,32 +413,32 @@ export default {
     plugin(({ addUtilities, theme }) => {
       addUtilities({
         '.typography-display-1': {
-          fontSize: '2.375rem', // 38px
-          lineHeight: '2.375rem', // 38px
+          fontSize: '4.5rem', // 72px
+          lineHeight: '4.5rem', // 72px
           letterSpacing: 'calc(-2 * 0.01em)',
           fontWeight: '500',
           fontFamily: theme('fontFamily.roobert'),
         },
 
         '.typography-display-2': {
-          fontSize: '1.875rem', // 30px
-          lineHeight: '1.875rem', // 30px
+          fontSize: '3.5rem', // 56px
+          lineHeight: '3.5rem', // 56px
           letterSpacing: 'calc(-2 * 0.01em)',
           fontWeight: '500',
           fontFamily: theme('fontFamily.roobert'),
         },
 
         '.typography-display-3': {
-          fontSize: '1.5rem', // 24px
-          lineHeight: '1.5rem', // 24px
+          fontSize: '3rem', // 48px
+          lineHeight: '3.75rem', // 60px
           letterSpacing: 'calc(-1 * 0.01em)',
           fontWeight: '500',
           fontFamily: theme('fontFamily.roobert'),
         },
 
         '.typography-heading-1': {
-          fontSize: '2.625rem', // 42px
-          lineHeight: '3rem', // 48px
+          fontSize: '2.25rem', // 36px
+          lineHeight: '2.625rem', // 42px
           letterSpacing: 'calc(-1 * 0.01em)',
           fontWeight: '500',
           fontFamily: theme('fontFamily.roobert'),
@@ -476,130 +476,82 @@ export default {
           fontFamily: theme('fontFamily.roobert'),
         },
 
-        '.typography-heading-6': {
-          fontSize: '0.875rem', // 14px
-          lineHeight: '1rem', // 20px
-          letterSpacing: 'calc(-1 * 0.01em)',
-          fontWeight: '500',
-          fontFamily: theme('fontFamily.roobert'),
-        },
-
-        '.typography-heading-7': {
-          fontSize: '0.75rem', // 12px
-          lineHeight: '0.875rem', // 14px
-          letterSpacing: 'calc(-1 * 0.01em)',
-          fontWeight: '500',
-          fontFamily: theme('fontFamily.roobert'),
-        },
-
         '.typography-body-1': {
-          fontSize: '1.25rem', // 20px
-          lineHeight: '1.875rem', // 30px
-          letterSpacing: 'calc(-1 * 0.01em)',
-          fontWeight: '400',
-          fontFamily: theme('fontFamily.sans'),
-        },
-
-        '.typography-body-2': {
-          fontSize: '1.125rem', // 18px
-          lineHeight: '1.75rem', // 28px
-          letterSpacing: 'calc(-1 * 0.01em)',
-          fontWeight: '400',
-          fontFamily: theme('fontFamily.sans'),
-        },
-
-        '.typography-body-3': {
           fontSize: '1rem', // 16px
           lineHeight: '1.5rem', // 24px
-          letterSpacing: 'calc(-1 * 0.01em)',
+          letterSpacing: '0px',
           fontWeight: '400',
           fontFamily: theme('fontFamily.sans'),
         },
 
-        '.typography-body-4': {
+        '.typography-body-2': {
           fontSize: '0.875rem', // 14px
           lineHeight: '1.25rem', // 20px
-          letterSpacing: 'calc(-1 * 0.01em)',
+          letterSpacing: '0px',
           fontWeight: '400',
           fontFamily: theme('fontFamily.sans'),
         },
 
-        '.typography-body-5': {
+        '.typography-body-3': {
           fontSize: '0.75rem', // 12px
           lineHeight: '1.125rem', // 18px
-          letterSpacing: 'calc(-1 * 0.01em)',
+          letterSpacing: '0px',
           fontWeight: '400',
           fontFamily: theme('fontFamily.sans'),
         },
 
-        '.typography-body-6': {
-          fontSize: '0.625rem', // 10px
-          lineHeight: '0.875rem', // 14px
-          letterSpacing: 'calc(-1 * 0.01em)',
+        '.typography-body-4': {
+          fontSize: '0.75rem', // 12px
+          lineHeight: '1.125rem', // 18px
+          letterSpacing: '0px',
           fontWeight: '400',
           fontFamily: theme('fontFamily.sans'),
         },
 
         // @todo update typography below when added
         '.typography-label-1': {
-          fontSize: '1.5rem',
-          lineHeight: '1.75rem',
-          letterSpacing: 'calc(-1 * 0.01em)',
-          fontWeight: '500',
-          fontFamily: theme('fontFamily.roobert'),
-        },
-
-        '.typography-label-2': {
-          fontSize: '1.25rem',
-          lineHeight: '1.5rem',
-          letterSpacing: 'calc(-1 * 0.01em)',
-          fontWeight: '500',
-          fontFamily: theme('fontFamily.roobert'),
-        },
-
-        '.typography-label-3': {
-          fontSize: '1.125rem',
-          lineHeight: '1.375rem',
+          fontSize: '1rem', // 16px
+          lineHeight: '1.125rem', // 18px
           letterSpacing: 'calc(-0.5 * 0.01em)',
           fontWeight: '500',
           fontFamily: theme('fontFamily.roobert'),
         },
 
-        '.typography-label-4': {
-          fontSize: '1rem',
-          lineHeight: '1.125rem',
+        '.typography-label-2': {
+          fontSize: '0.875rem', // 14px
+          lineHeight: '1rem', // 16px
           letterSpacing: 'calc(-0.5 * 0.01em)',
           fontWeight: '500',
           fontFamily: theme('fontFamily.roobert'),
         },
 
-        '.typography-label-5': {
-          fontSize: '0.875rem',
-          lineHeight: '1rem',
+        '.typography-label-3': {
+          fontSize: '0.75rem', // 12px
+          lineHeight: '1rem', // 16px
           letterSpacing: '0px',
           fontWeight: '500',
           fontFamily: theme('fontFamily.roobert'),
         },
 
-        '.typography-label-6': {
-          fontSize: '0.75rem',
-          lineHeight: '1rem',
+        '.typography-label-4': {
+          fontSize: '0.75rem', // 12px
+          lineHeight: '1rem', // 16px
           letterSpacing: '0px',
           fontWeight: '500',
           fontFamily: theme('fontFamily.roobert'),
         },
 
         '.typography-button-1': {
-          fontSize: '1rem',
-          lineHeight: '1.25rem',
+          fontSize: '1rem', // 16px
+          lineHeight: '1.25rem', // 20px
           letterSpacing: '0px',
           fontWeight: '500',
           fontFamily: theme('fontFamily.roobert'),
         },
 
         '.typography-button-2': {
-          fontSize: '0.875rem',
-          lineHeight: '1rem',
+          fontSize: '0.875rem', // 14px
+          lineHeight: '1rem', // 16px
           letterSpacing: '0px',
           fontWeight: '500',
           fontFamily: theme('fontFamily.roobert'),
@@ -647,61 +599,41 @@ export default {
           },
 
           '.typography-body-1': {
-            fontSize: '1.5rem', // 24px
-            lineHeight: '2.25rem', // 36px
-          },
-
-          '.typography-body-2': {
-            fontSize: '1.25rem', // 20px
-            lineHeight: '1.875rem', // 30px
-          },
-
-          '.typography-body-3': {
             fontSize: '1.125rem', // 18px
             lineHeight: '1.75rem', // 28px
           },
 
-          '.typography-body-4': {
+          '.typography-body-2': {
             fontSize: '1rem', // 16px
             lineHeight: '1.5rem', // 24px
           },
 
-          '.typography-body-5': {
+          '.typography-body-3': {
             fontSize: '0.875rem', // 14px
             lineHeight: '1.25rem', // 20px
           },
 
-          '.typography-body-6': {
+          '.typography-body-4': {
             fontSize: '0.75rem', // 12px
             lineHeight: '1.125rem', // 18px
           },
 
           '.typography-label-1': {
-            fontSize: '1.5rem', // 24px
-            lineHeight: '1.75rem', // 28px
-          },
-
-          '.typography-label-2': {
-            fontSize: '1.25rem', // 20px
-            lineHeight: '1.5rem', // 24px
-          },
-
-          '.typography-label-3': {
             fontSize: '1.125rem', // 18px
             lineHeight: '1.375rem', // 22px
           },
 
-          '.typography-label-4': {
+          '.typography-label-2': {
             fontSize: '1rem', // 16px
             lineHeight: '1.125rem', // 18px
           },
 
-          '.typography-label-5': {
+          '.typography-label-3': {
             fontSize: '0.875rem', // 14px
             lineHeight: '1rem', // 16px
           },
 
-          '.typography-label-6': {
+          '.typography-label-4': {
             fontSize: '0.75rem', // 12px
             lineHeight: '1rem', // 16px
           },
@@ -729,7 +661,6 @@ export default {
           lineHeight: '100%',
         },
 
-        // needed to override the default line heights
         '@screen sm': {
           '.leading-spacious': {
             lineHeight: '150%',