diff --git a/.claude/rules/sim-styling.md b/.claude/rules/sim-styling.md
index 48d9086a481..c3769ab28a1 100644
--- a/.claude/rules/sim-styling.md
+++ b/.claude/rules/sim-styling.md
@@ -47,7 +47,11 @@ setWidth: (width) => {
 
 ## Text Scale
 
-Custom font sizes (the `@theme` block in `apps/sim/app/_styles/globals.css`): `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px. `text-sm` is Tailwind default 14px. Field titles use `text-small` (13px); hints/errors use `text-caption` (12px).
+Use the named scale in `apps/sim/app/_styles/globals.css`: `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px, `text-md`=16px, `text-title`=28px, `text-title-lg`=32px, and `text-display`=40px. The explicitly adopted stock entries retain their rem units and default leading: `text-sm`=0.875rem, `text-xl`=1.25rem, and `text-2xl`=1.5rem (14/20/24px at the default root size). Field titles use `text-small`; hints/errors use `text-caption`; workflow titles use `text-md`.
+
+Preserve explicit line heights when replacing arbitrary sizes. Where the old size inherited its line height, use `leading-[inherit]` if the named utility would otherwise add a different default. Keep document-relative heading/code recipes and the thinking loader's proportional label sizing distinct from ordinary UI text.
+
+Use `font-inter` within the existing scoped Inter loading boundary; the utility does not load the font globally. Keep monospace for code, JSON, and credentials.
 
 Icons default `size-[14px]`. Equal h/w → `size-*` (`size-[14px]`, `size-4`), never `h-N w-N`.
 
@@ -67,7 +71,7 @@ A scroll region that can hide rows past an edge uses `useScrollEdges` with `scro
 
 ## Font Weight
 
-Three steps, Tailwind's stock scale, nothing else: **`font-normal` (400)**, **`font-medium` (500)**, **`font-semibold` (600)**. 400 is the document default, so body text, chip labels, sidebar items, and headings carry **no weight class at all** — they inherit. Reach for a class only to step *up* from body.
+Three steps, explicitly adopted from Tailwind's stock scale in globals.css, nothing else: **`font-normal` (400)**, **`font-medium` (500)**, **`font-semibold` (600)**. 400 is the document default, so body text, chip labels, sidebar items, and headings carry **no weight class at all** — they inherit. Reach for a class to step *up* from body or to reset meaningful inherited weight. Raw CSS references the same `--font-weight-normal`, `--font-weight-medium`, and `--font-weight-semibold` definitions; their values remain 400/500/600.
 
 Never write an arbitrary weight (`font-[380]`, `font-[430]`, `font-[450]`, …), and never set `fontWeight` in an inline `style`. There was previously a CSS-variable weight scale (`--font-weight-base/medium/semibold`, remapping `font-medium` to 440/480) plus seven ad-hoc values clustered between 380 and 500; it was deleted because nothing read as hierarchical. Off-scale values are only acceptable where the design system genuinely cannot reach — react-email templates and the static `apps/sim/emails/broadcasts/*.html`, which email clients render without CSS variables.
 
diff --git a/.cursor/rules/sim-styling.mdc b/.cursor/rules/sim-styling.mdc
index 7f92c255aeb..dfa91b0418c 100644
--- a/.cursor/rules/sim-styling.mdc
+++ b/.cursor/rules/sim-styling.mdc
@@ -47,7 +47,11 @@ setWidth: (width) => {
 
 ## Text Scale
 
-Custom font sizes (the `@theme` block in `apps/sim/app/_styles/globals.css`): `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px. `text-sm` is Tailwind default 14px. Field titles use `text-small` (13px); hints/errors use `text-caption` (12px).
+Use the named scale in `apps/sim/app/_styles/globals.css`: `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px, `text-md`=16px, `text-title`=28px, `text-title-lg`=32px, and `text-display`=40px. The explicitly adopted stock entries retain their rem units and default leading: `text-sm`=0.875rem, `text-xl`=1.25rem, and `text-2xl`=1.5rem (14/20/24px at the default root size). Field titles use `text-small`; hints/errors use `text-caption`; workflow titles use `text-md`.
+
+Preserve explicit line heights when replacing arbitrary sizes. Where the old size inherited its line height, use `leading-[inherit]` if the named utility would otherwise add a different default. Keep document-relative heading/code recipes and the thinking loader's proportional label sizing distinct from ordinary UI text.
+
+Use `font-inter` within the existing scoped Inter loading boundary; the utility does not load the font globally. Keep monospace for code, JSON, and credentials.
 
 Icons default `size-[14px]`. Equal h/w → `size-*` (`size-[14px]`, `size-4`), never `h-N w-N`.
 
@@ -67,7 +71,7 @@ A scroll region that can hide rows past an edge uses `useScrollEdges` with `scro
 
 ## Font Weight
 
-Three steps, Tailwind's stock scale, nothing else: **`font-normal` (400)**, **`font-medium` (500)**, **`font-semibold` (600)**. 400 is the document default, so body text, chip labels, sidebar items, and headings carry **no weight class at all** — they inherit. Reach for a class only to step *up* from body.
+Three steps, explicitly adopted from Tailwind's stock scale in globals.css, nothing else: **`font-normal` (400)**, **`font-medium` (500)**, **`font-semibold` (600)**. 400 is the document default, so body text, chip labels, sidebar items, and headings carry **no weight class at all** — they inherit. Reach for a class to step *up* from body or to reset meaningful inherited weight. Raw CSS references the same `--font-weight-normal`, `--font-weight-medium`, and `--font-weight-semibold` definitions; their values remain 400/500/600.
 
 Never write an arbitrary weight (`font-[380]`, `font-[430]`, `font-[450]`, …), and never set `fontWeight` in an inline `style`. There was previously a CSS-variable weight scale (`--font-weight-base/medium/semibold`, remapping `font-medium` to 440/480) plus seven ad-hoc values clustered between 380 and 500; it was deleted because nothing read as hierarchical. Off-scale values are only acceptable where the design system genuinely cannot reach — react-email templates and the static `apps/sim/emails/broadcasts/*.html`, which email clients render without CSS variables.
 
diff --git a/apps/sim/app/(auth)/components/auth-header.tsx b/apps/sim/app/(auth)/components/auth-header.tsx
index 803e1b0ec57..1b8d278f9e4 100644
--- a/apps/sim/app/(auth)/components/auth-header.tsx
+++ b/apps/sim/app/(auth)/components/auth-header.tsx
@@ -14,7 +14,9 @@ interface AuthHeaderProps {
 export function AuthHeader({ title, description }: AuthHeaderProps) {
   return (
     <div className='space-y-1 text-center'>
-      <h1 className='text-balance text-[32px] text-[var(--text-primary)] leading-[1.2]'>{title}</h1>
+      <h1 className='text-balance text-[var(--text-primary)] text-title-lg leading-[1.2]'>
+        {title}
+      </h1>
       {description != null && (
         <p className='text-[var(--text-muted)] text-base leading-[1.5]'>{description}</p>
       )}
diff --git a/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx b/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx
index 621a3eecc1e..7972106bfc9 100644
--- a/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx
@@ -229,7 +229,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
                   </p>
                 </div>
 
-                <div className='text-center font-light text-sm'>
+                <div className='text-center font-normal text-sm'>
                   <button
                     onClick={() => {
                       setShowOtpVerification(false)
diff --git a/apps/sim/app/(interfaces)/chat/components/input/input.tsx b/apps/sim/app/(interfaces)/chat/components/input/input.tsx
index a1e432f9dd2..f17d121a74e 100644
--- a/apps/sim/app/(interfaces)/chat/components/input/input.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/input/input.tsx
@@ -181,7 +181,7 @@ export const ChatInput: React.FC<{
                       ) : (
                         <div className='flex h-full w-full flex-col items-center justify-center gap-0.5 text-[var(--text-muted)]'>
                           <Paperclip className='size-[18px]' />
-                          <span className='max-w-[48px] truncate px-[2px] text-[9px]'>
+                          <span className='max-w-[48px] truncate px-[2px] text-micro'>
                             {file.name.split('.').pop()}
                           </span>
                         </div>
@@ -214,7 +214,7 @@ export const ChatInput: React.FC<{
             onKeyDown={handleKeyDown}
             placeholder={isDragOver ? 'Drop files here...' : 'Enter a message...'}
             rows={1}
-            className='m-0 h-auto min-h-[24px] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent p-1 text-[15px] text-[var(--text-primary)] leading-[24px] caret-[var(--text-primary)] outline-hidden [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
+            className='m-0 h-auto min-h-[24px] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent p-1 text-[var(--text-primary)] text-base leading-[24px] caret-[var(--text-primary)] outline-hidden [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
           />
 
           <div className='flex items-center justify-between'>
diff --git a/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx b/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx
index bb09919dc63..ccdd0f6be94 100644
--- a/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx
+++ b/apps/sim/app/(interfaces)/resume/[workflowId]/[executionId]/resume-page-client.tsx
@@ -146,7 +146,7 @@ function renderStructuredValuePreview(value: unknown) {
           className='max-h-[220px]'
         />
         {truncated && (
-          <p className='mt-1 text-[11px] text-[var(--text-muted)]'>
+          <p className='mt-1 text-[var(--text-muted)] text-xs leading-[inherit]'>
             Value truncated for preview ({DISPLAY_VALUE_PREVIEW_MAX_CHARS.toLocaleString()} of{' '}
             {prettyPrinted.length.toLocaleString()} characters shown).
           </p>
@@ -162,7 +162,7 @@ function renderStructuredValuePreview(value: unknown) {
         {truncated ? `${stringValue}…` : stringValue}
       </div>
       {truncated && (
-        <p className='mt-1 text-[11px] text-[var(--text-muted)]'>
+        <p className='mt-1 text-[var(--text-muted)] text-xs leading-[inherit]'>
           Value truncated for preview ({DISPLAY_VALUE_PREVIEW_MAX_CHARS.toLocaleString()} of{' '}
           {String(value).length.toLocaleString()} characters shown).
         </p>
@@ -774,8 +774,10 @@ export default function ResumeExecutionPage({
         {/* Header */}
         <div className='mb-8 flex items-center justify-between'>
           <div>
-            <h1 className='text-[20px] text-[var(--text-primary)]'>Paused Execution</h1>
-            <p className='mt-1 text-[14px] text-[var(--text-secondary)]'>
+            <h1 className='text-[var(--text-primary)] text-xl leading-[inherit]'>
+              Paused Execution
+            </h1>
+            <p className='mt-1 text-[var(--text-secondary)] text-sm leading-[inherit]'>
               Select a pause point to review and resume
             </p>
           </div>
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
index a679aef3881..ad0262f57cd 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx
@@ -373,7 +373,7 @@ export function StageBlockCard({
             hasContentBelowHeader ? 'h-[40px]' : 'h-[48px]'
           )}
         >
-          <span className='min-w-0 flex-1 truncate text-[17px] text-[var(--text-primary)]'>
+          <span className='min-w-0 flex-1 truncate text-[var(--text-primary)] text-md'>
             {block.name}
           </span>
           <WorkflowTypeTag
diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index 78b947eac66..6f480adc383 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -71,6 +71,7 @@
     "Noto Color Emoji";
 
   --font-season: var(--font-season);
+  --font-inter: var(--font-inter);
   --font-body:
     ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial,
     sans-serif, Segoe UI Emoji, Segoe UI Symbol;
@@ -90,19 +91,32 @@
   --breakpoint-xl: 1280px;
   --breakpoint-2xl: 1536px;
 
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+
   --text-micro: 10px;
   /**
-   * `xs` is the one size here that also exists in Tailwind's own scale, so it
-   * inherits `--text-xs--line-height` unless that is overridden too. v4's ratio
-   * (4/3) against an 11px size yields 14.67px, where v3 resolved 16.5px; the
-   * paired value keeps the leading where it was.
+   * Tailwind pairs `xs` with a default line-height ratio. Its v4 ratio (4/3)
+   * against our 11px size yields 14.67px; the explicit 1.5 preserves the
+   * existing 16.5px leading.
    */
   --text-xs: 11px;
   --text-xs--line-height: 1.5;
   --text-caption: 12px;
   --text-small: 13px;
+  /** Adopt the imported scale without changing its rem units or default leading. */
+  --text-sm: 0.875rem;
+  --text-sm--line-height: calc(1.25 / 0.875);
   --text-base: 15px;
   --text-md: 16px;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: calc(1.75 / 1.25);
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: calc(2 / 1.5);
+  --text-title: 28px;
+  --text-title-lg: 32px;
+  --text-display: 40px;
 
   /**
    * Hairline scale key. Overriding `spacing` rather than `width`/`height` keeps
diff --git a/apps/sim/app/cli/auth/cli-auth-view.tsx b/apps/sim/app/cli/auth/cli-auth-view.tsx
index f7865af95da..5ee00663588 100644
--- a/apps/sim/app/cli/auth/cli-auth-view.tsx
+++ b/apps/sim/app/cli/auth/cli-auth-view.tsx
@@ -96,7 +96,7 @@ export function CliAuthView() {
       <div className='space-y-4'>
         <div className='flex items-center justify-center rounded-[10px] border border-[var(--border-1)] py-5'>
           {/* `pl` offsets the trailing letter-space `tracking` adds after the last glyph, which would otherwise pull the code left of optical center. */}
-          <code className='pl-[0.2em] font-mono text-[28px] text-[var(--text-primary)] leading-none tracking-[0.2em]'>
+          <code className='pl-[0.2em] font-mono text-[var(--text-primary)] text-title leading-none tracking-[0.2em]'>
             {request.pairing}
           </code>
         </div>
diff --git a/apps/sim/app/f/[token]/public-file-email-auth.tsx b/apps/sim/app/f/[token]/public-file-email-auth.tsx
index a401c748e3f..8d237ed9ff5 100644
--- a/apps/sim/app/f/[token]/public-file-email-auth.tsx
+++ b/apps/sim/app/f/[token]/public-file-email-auth.tsx
@@ -188,7 +188,7 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
           </p>
         </div>
 
-        <div className='text-center font-light text-sm'>
+        <div className='text-center font-normal text-sm'>
           <button
             onClick={() => {
               setSent(false)
diff --git a/apps/sim/app/invite/components/status-card.tsx b/apps/sim/app/invite/components/status-card.tsx
index f137111f4c1..282ec08d7d1 100644
--- a/apps/sim/app/invite/components/status-card.tsx
+++ b/apps/sim/app/invite/components/status-card.tsx
@@ -38,7 +38,7 @@ export function InviteStatusCard({
     return (
       <>
         <div className='space-y-1 text-center'>
-          <h1 className='text-[32px] text-[var(--text-primary)] tracking-tight'>Loading</h1>
+          <h1 className='text-[var(--text-primary)] text-title-lg tracking-tight'>Loading</h1>
           <p className='text-[var(--text-muted)]'>{description}</p>
         </div>
         <div className='mt-8 flex w-full items-center justify-center py-8'>
@@ -51,7 +51,7 @@ export function InviteStatusCard({
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className='text-[32px] text-[var(--text-primary)] tracking-tight'>{title}</h1>
+        <h1 className='text-[var(--text-primary)] text-title-lg tracking-tight'>{title}</h1>
         <p className='text-[var(--text-muted)]'>{description}</p>
       </div>
 
diff --git a/apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx b/apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx
index 78dde9bf9ac..24f104a75bd 100644
--- a/apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx
+++ b/apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx
@@ -100,7 +100,7 @@ export function Composer({
           placeholder={placeholder}
           aria-label='Ask Sim'
           rows={1}
-          className='field-sizing-content m-0 box-border min-h-[24px] w-full resize-none border-0 bg-transparent px-1 py-1 font-body text-[14px] text-[var(--text-primary)] leading-[24px] tracking-[-0.015em] outline-hidden [overflow-wrap:anywhere] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0'
+          className='field-sizing-content m-0 box-border min-h-[24px] w-full resize-none border-0 bg-transparent px-1 py-1 font-body text-[var(--text-primary)] text-sm leading-[24px] tracking-[-0.015em] outline-hidden [overflow-wrap:anywhere] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0'
         />
       </div>
 
diff --git a/apps/sim/app/o/[organizationId]/home/organization-home.tsx b/apps/sim/app/o/[organizationId]/home/organization-home.tsx
index 34ec83488ae..a14ceac699e 100644
--- a/apps/sim/app/o/[organizationId]/home/organization-home.tsx
+++ b/apps/sim/app/o/[organizationId]/home/organization-home.tsx
@@ -139,7 +139,7 @@ function OrganizationHomeContent({ userName, chatId }: OrganizationHomeProps) {
         <div className='min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable_both-edges]'>
           {/* Asymmetric padding biases the group up so the full cluster (heading + input + steps) sits at the optical center */}
           <div className='flex min-h-full flex-col items-center justify-center px-6 pt-[2vh] pb-[22vh]'>
-            <h1 className='mb-7 max-w-chat text-balance font-season text-[26px] text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-[28px]'>
+            <h1 className='mb-7 max-w-chat text-balance font-season text-2xl text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-title'>
               What should we get done{firstName ? `, ${firstName}` : ''}?
             </h1>
             <div className='relative w-full max-w-chat'>
diff --git a/apps/sim/app/o/[organizationId]/search/search.tsx b/apps/sim/app/o/[organizationId]/search/search.tsx
index f81ea1523a4..afaca0fad91 100644
--- a/apps/sim/app/o/[organizationId]/search/search.tsx
+++ b/apps/sim/app/o/[organizationId]/search/search.tsx
@@ -89,7 +89,7 @@ function SearchField({
         aria-label='Search your sources'
         autoComplete='off'
         spellCheck={false}
-        className='h-full min-w-0 flex-1 bg-transparent font-body text-[14px] text-[var(--text-primary)] tracking-[-0.015em] outline-hidden placeholder:text-[var(--text-muted)] [&::-webkit-search-cancel-button]:hidden'
+        className='h-full min-w-0 flex-1 bg-transparent font-body text-[var(--text-primary)] text-sm leading-[inherit] tracking-[-0.015em] outline-hidden placeholder:text-[var(--text-muted)] [&::-webkit-search-cancel-button]:hidden'
       />
       <div className='flex shrink-0 items-center gap-1.5'>
         {voice.isSupported && (
@@ -190,7 +190,7 @@ function OrganizationSearchContent() {
       ) : (
         <div className='min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable_both-edges]'>
           <div className='flex min-h-full flex-col items-center justify-center px-6 pt-[2vh] pb-[22vh]'>
-            <h1 className='mb-7 max-w-chat text-balance text-center font-season text-[26px] text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-[28px]'>
+            <h1 className='mb-7 max-w-chat text-balance text-center font-season text-2xl text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-title'>
               Search {organization.name}
             </h1>
             <div className='w-full max-w-chat'>
diff --git a/apps/sim/app/unsubscribe/unsubscribe.tsx b/apps/sim/app/unsubscribe/unsubscribe.tsx
index b5f265fd18e..84004b7827a 100644
--- a/apps/sim/app/unsubscribe/unsubscribe.tsx
+++ b/apps/sim/app/unsubscribe/unsubscribe.tsx
@@ -40,7 +40,7 @@ function UnsubscribeContent() {
     return (
       <InviteLayout>
         <div className='space-y-1 text-center'>
-          <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>Loading</h1>
+          <h1 className={'text-[var(--text-primary)] text-title-lg tracking-tight'}>Loading</h1>
           <p className={'text-[var(--text-muted)] text-md'}>Validating your unsubscribe link…</p>
         </div>
         <div className={'mt-8 flex w-full items-center justify-center py-8'}>
@@ -54,7 +54,7 @@ function UnsubscribeContent() {
     return (
       <InviteLayout>
         <div className='space-y-1 text-center'>
-          <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>
+          <h1 className={'text-[var(--text-primary)] text-title-lg tracking-tight'}>
             Invalid Unsubscribe Link
           </h1>
           <p className={'text-[var(--text-muted)] text-md'}>{error}</p>
@@ -73,7 +73,7 @@ function UnsubscribeContent() {
     return (
       <InviteLayout>
         <div className='space-y-1 text-center'>
-          <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>
+          <h1 className={'text-[var(--text-primary)] text-title-lg tracking-tight'}>
             Important Account Emails
           </h1>
           <p className={'text-[var(--text-muted)] text-md'}>
@@ -95,7 +95,7 @@ function UnsubscribeContent() {
     return (
       <InviteLayout>
         <div className='space-y-1 text-center'>
-          <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>
+          <h1 className={'text-[var(--text-primary)] text-title-lg tracking-tight'}>
             Successfully Unsubscribed
           </h1>
           <p className={'text-[var(--text-muted)] text-md'}>
@@ -118,7 +118,7 @@ function UnsubscribeContent() {
   return (
     <InviteLayout>
       <div className='space-y-1 text-center'>
-        <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>
+        <h1 className={'text-[var(--text-primary)] text-title-lg tracking-tight'}>
           Email Preferences
         </h1>
         <p className={'text-[var(--text-muted)] text-md'}>
@@ -206,7 +206,7 @@ export default function Unsubscribe() {
       fallback={
         <InviteLayout>
           <div className='space-y-1 text-center'>
-            <h1 className={'text-[32px] text-[var(--text-primary)] tracking-tight'}>Loading</h1>
+            <h1 className={'text-[var(--text-primary)] text-title-lg tracking-tight'}>Loading</h1>
             <p className={'text-[var(--text-muted)] text-md'}>Validating your unsubscribe link…</p>
           </div>
           <div className={'mt-8 flex w-full items-center justify-center py-8'}>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx b/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
index 392c085baae..13ae488488e 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
@@ -43,10 +43,10 @@ export function ErrorShell({ title, description, icon, children }: ErrorShellPro
           </div>
         </div>
         <div className='flex flex-col items-center gap-2'>
-          <h2 className='text-balance font-season text-[26px] text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-[28px]'>
+          <h2 className='text-balance font-season text-2xl text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-title'>
             {title}
           </h2>
-          <p className='max-w-[340px] text-[14px] text-[var(--text-tertiary)] leading-[1.55]'>
+          <p className='max-w-[340px] text-[var(--text-tertiary)] text-sm leading-[1.55]'>
             {description}
           </p>
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/resource-not-found.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/resource-not-found.tsx
index fa6007c8e02..bf99da51fa5 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/resource-not-found.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/resource-not-found.tsx
@@ -19,7 +19,7 @@ export function ResourceNotFound({ icon: Icon, title, description }: ResourceNot
     <div className='flex h-full flex-col items-center justify-center gap-3'>
       <Icon className='size-[32px] text-[var(--text-muted)]' />
       <div className='flex flex-col items-center gap-1'>
-        <h2 className='text-[20px] text-[var(--text-secondary)]'>{title}</h2>
+        <h2 className='text-[var(--text-secondary)] text-xl leading-[inherit]'>{title}</h2>
         <p className='text-[var(--text-muted)] text-small'>{description}</p>
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/chart-preview.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/chart-preview.tsx
index c99164e58e0..762b82c0391 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/chart-preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/chart-preview.tsx
@@ -24,8 +24,8 @@ function ChartErrorCard({ message, content }: { message: string; content: string
   return (
     <div className='overflow-hidden rounded-lg border border-[var(--border)]'>
       <div className='flex items-center justify-between border-[var(--border)] border-b bg-[var(--surface-3)] px-3 py-1.5'>
-        <span className='text-[11px] text-[var(--text-tertiary)]'>chart</span>
-        <span className='text-[11px] text-[var(--text-muted)]'>{message}</span>
+        <span className='text-[var(--text-tertiary)] text-xs leading-[inherit]'>chart</span>
+        <span className='text-[var(--text-muted)] text-xs leading-[inherit]'>{message}</span>
       </div>
       <div className='code-editor-theme bg-[var(--surface-5)]'>
         <pre className='m-0 overflow-x-auto whitespace-pre p-4 font-mono text-[var(--text-primary)] text-small leading-[1.6]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/document-table.css b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/document-table.css
index 43e6809375e..43c821a2ce0 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/document-table.css
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/document-table.css
@@ -54,14 +54,14 @@
   padding: 0.5rem 0.75rem;
   text-align: left;
   vertical-align: top;
-  font-size: 14px;
+  font-size: var(--text-sm);
   line-height: 1.5rem;
 }
 
 .rich-markdown-prose th,
 .document-table th {
   background: var(--surface-4);
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
 }
 
 /* Cell editors are invisible until focused: they take the cell's own typography and color. */
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/document-table.test.ts b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/document-table.test.ts
index fda1bbb36da..ff2c67485b5 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/document-table.test.ts
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/document-table.test.ts
@@ -141,8 +141,8 @@ describe('document-table chrome is shared with markdown tables', () => {
     const { th, td } = mountTable('document-table')
 
     expect(getComputedStyle(td).getPropertyValue('padding-left')).toBe('0.75rem')
-    expect(getComputedStyle(td).getPropertyValue('font-size')).toBe('14px')
-    expect(getComputedStyle(th).getPropertyValue('font-weight')).toBe('600')
+    expect(getComputedStyle(td).getPropertyValue('font-size')).toBe('var(--text-sm)')
+    expect(getComputedStyle(th).getPropertyValue('font-weight')).toBe('var(--font-weight-semibold)')
   })
 
   it('one rule draws the cell border for both roots', () => {
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
index 52407bbf750..c30a44d78d8 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
@@ -427,7 +427,7 @@ const MediaPreview = memo(function MediaPreview({
       <div className='flex h-full flex-col items-center justify-center gap-4 bg-[var(--surface-1)] p-8'>
         <div className='flex flex-col items-center gap-2 text-center'>
           <Music className='size-[32px] text-[var(--text-muted)]' />
-          <p className='text-[14px] text-[var(--text-primary)]'>{file.name}</p>
+          <p className='text-[var(--text-primary)] text-sm leading-[inherit]'>{file.name}</p>
         </div>
         {blobUrl && (
           // biome-ignore lint/a11y/useMediaCaption: audio from workspace files
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/mermaid-diagram.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/mermaid-diagram.tsx
index 10019822f72..81d2f981af1 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/mermaid-diagram.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/mermaid-diagram.tsx
@@ -49,9 +49,9 @@ function MermaidSourcePreview({
   return (
     <div className='my-4 overflow-hidden rounded-lg border border-[var(--border)]'>
       <div className='flex items-center justify-between border-[var(--border)] border-b bg-[var(--surface-3)] px-3 py-1.5'>
-        <span className='text-[11px] text-[var(--text-tertiary)]'>mermaid</span>
+        <span className='text-[var(--text-tertiary)] text-xs leading-[inherit]'>mermaid</span>
         {(isRendering || status) && (
-          <span className='text-[11px] text-[var(--text-muted)]'>
+          <span className='text-[var(--text-muted)] text-xs leading-[inherit]'>
             {isRendering ? 'Rendering…' : status}
           </span>
         )}
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx
index 598e330ca5a..3b255d082a1 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx
@@ -43,7 +43,7 @@ interface PdfViewerCoreProps {
 function PdfError({ error }: { error: string }) {
   return (
     <div className='flex flex-1 flex-col items-center justify-center gap-[8px]'>
-      <p className='text-[14px] text-[var(--text-body)]'>Failed to preview PDF</p>
+      <p className='text-[var(--text-body)] text-sm leading-[inherit]'>Failed to preview PDF</p>
       <p className='text-[var(--text-muted)] text-small'>{error}</p>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared.tsx
index ed585e4c382..1b5ca5f1932 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared.tsx
@@ -18,7 +18,7 @@ export const UnsupportedPreview = memo(function UnsupportedPreview({ name }: { n
 
   return (
     <div className='flex flex-1 flex-col items-center justify-center gap-[8px]'>
-      <p className='text-[14px] text-[var(--text-primary)]'>
+      <p className='text-[var(--text-primary)] text-sm leading-[inherit]'>
         Preview not available{ext ? ` for .${ext} files` : ' for this file'}
       </p>
       <p className='text-[var(--text-muted)] text-small'>
@@ -31,7 +31,9 @@ export const UnsupportedPreview = memo(function UnsupportedPreview({ name }: { n
 export function PreviewError({ label, error }: { label: string; error: string }) {
   return (
     <div className='flex flex-1 flex-col items-center justify-center gap-[8px]'>
-      <p className='text-[14px] text-[var(--text-primary)]'>Failed to preview {label}</p>
+      <p className='text-[var(--text-primary)] text-sm leading-[inherit]'>
+        Failed to preview {label}
+      </p>
       <p className='text-[var(--text-muted)] text-small'>{error}</p>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/link-mark-precedence.test.ts b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/link-mark-precedence.test.ts
index a2edbbae3e5..f5fae887e8f 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/link-mark-precedence.test.ts
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/link-mark-precedence.test.ts
@@ -102,11 +102,11 @@ describe('mark WRAPPING a link (`<mark><a>text</a></mark>`) — link color still
 })
 
 describe('each mark keeps its own non-color styling even when link-colored', () => {
-  it('bold link keeps font-weight 600', () => {
+  it('bold link keeps the central semibold weight', () => {
     const root = mount('<a href="#"><strong>bold link</strong></a>')
     const strong = root.querySelector('strong') as HTMLElement
     expect(colorOf(strong)).toBe(LINK_COLOR)
-    expect(getComputedStyle(strong).fontWeight).toBe('600')
+    expect(getComputedStyle(strong).fontWeight).toBe('var(--font-weight-semibold)')
   })
 
   it('italic link keeps font-style italic', () => {
@@ -144,7 +144,7 @@ describe('multiple marks stacked together with a link', () => {
     expect(colorOf(em)).toBe(LINK_COLOR)
     expect(colorOf(strong)).toBe(LINK_COLOR)
     expect(getComputedStyle(em).fontStyle).toBe('italic')
-    expect(getComputedStyle(strong).fontWeight).toBe('600')
+    expect(getComputedStyle(strong).fontWeight).toBe('var(--font-weight-semibold)')
   })
 
   it('bold + italic + strikethrough + link: link color wins at every nesting level', () => {
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/raw-markdown-snippet.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/raw-markdown-snippet.tsx
index ea4058895e7..0713cf189c4 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/raw-markdown-snippet.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/raw-markdown-snippet.tsx
@@ -3,7 +3,7 @@ import { NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap
 import { FootnoteDef, RawHtmlBlock } from './raw-markdown-snippet-schema'
 
 const BLOCK_CONTROL_CLASS =
-  'pointer-events-none absolute top-1.5 right-2 select-none rounded-md bg-[var(--surface-4)] px-1.5 py-0.5 text-[10px] text-[var(--text-muted)] uppercase tracking-wide opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100'
+  'pointer-events-none absolute top-1.5 right-2 select-none rounded-md bg-[var(--surface-4)] px-1.5 py-0.5 text-micro text-[var(--text-muted)] uppercase tracking-wide opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100'
 
 /** Badge text per block node type name — kept here rather than threaded through node options since
  * {@link NodeViewProps} exposes no options/extension reference to the rendering component. */
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css
index 3b6cc3f2b85..46a0d3c13d8 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css
@@ -18,8 +18,8 @@
   outline: none;
   color: var(--text-primary);
   font-family: var(--font-inter);
-  font-size: 15px;
-  font-weight: 400;
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-normal);
   line-height: 25px;
   letter-spacing: 0;
   overflow-wrap: anywhere;
@@ -73,7 +73,7 @@
 .rich-markdown-prose h4,
 .rich-markdown-prose h5,
 .rich-markdown-prose h6 {
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
   line-height: 1.3;
   color: var(--text-primary);
 }
@@ -117,7 +117,7 @@
  * the surrounding color, not reset it; omitting `color` here lets normal CSS inheritance do that
  * correctly in every context, including ones this file doesn't know about yet. */
 .rich-markdown-prose strong {
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
 }
 
 .rich-markdown-prose em {
@@ -317,7 +317,7 @@
 .rich-markdown-prose pre code {
   background: none;
   padding: 0;
-  font-size: 13px;
+  font-size: var(--text-small);
   line-height: 21px;
 }
 
@@ -458,8 +458,8 @@
  * set their own 600, so only body text and the placeholder are affected.
  */
 .rich-markdown-field-prose {
-  font-size: 14px;
-  font-weight: 400;
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-normal);
   line-height: 22px;
 }
 
@@ -553,8 +553,8 @@
   padding: 0.1rem 0.35rem;
   border-radius: 2px 2px 2px 0;
   /* 11px = the `text-xs` the canvas/tables presence tags use, for pixel parity. */
-  font-size: 11px;
-  font-weight: 500;
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-medium);
   line-height: 1.2;
   white-space: nowrap;
   text-overflow: ellipsis;
diff --git a/apps/sim/app/workspace/[workspaceId]/files/files.tsx b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
index 5c98c2aaeba..ec82f86e1dc 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/files.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
@@ -2060,7 +2060,7 @@ function FilesContent() {
           <Button
             variant='ghost'
             onClick={clearFileFilters}
-            className='h-[32px] w-full text-caption hover-hover:bg-[var(--surface-active)]'
+            className='h-[32px] w-full hover-hover:bg-[var(--surface-active)]'
           >
             Clear all filters
           </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
index ef9edea0bc2..8ffbfe24157 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
@@ -58,7 +58,7 @@ const LANG_ALIASES: Record<string, string> = {
 
 const PROSE_CLASSES = cn(
   'prose prose-base dark:prose-invert max-w-none',
-  'font-[family-name:var(--font-inter)] antialiased break-words tracking-[0]',
+  'font-inter antialiased break-words tracking-[0]',
   'prose-headings:font-semibold prose-headings:tracking-[0] prose-headings:text-[var(--text-primary)]',
   'prose-headings:mb-3 prose-headings:mt-6 first:prose-headings:mt-0',
   'prose-p:text-base prose-p:leading-[25px] prose-p:text-[var(--text-primary)]',
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx
index 080edad2af7..33d543ace0e 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx
@@ -15,7 +15,7 @@ export function Options({ items, onSelect }: OptionsProps) {
           key={item.id}
           type='button'
           onClick={() => onSelect?.(item.id)}
-          className='rounded-full border border-[var(--border)] bg-[var(--bg)] px-3.5 py-1.5 font-[family-name:var(--font-inter)] text-[var(--text-primary)] text-sm leading-5 transition-colors hover-hover:bg-[var(--surface-5)]'
+          className='rounded-full border border-[var(--border)] bg-[var(--bg)] px-3.5 py-1.5 font-inter text-[var(--text-primary)] text-sm leading-5 transition-colors hover-hover:bg-[var(--surface-5)]'
         >
           {item.label}
         </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
index fdd9ed5c7ee..6f39702465d 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
@@ -1095,7 +1095,9 @@ function MessageContentInner({
         <>
           <div className='mt-[10px] flex items-center gap-[8px]'>
             <CircleStop className='size-[16px] shrink-0 text-[var(--text-icon)]' />
-            <span className='text-[14px] text-[var(--text-body)]'>Stopped by user</span>
+            <span className='text-[var(--text-body)] text-sm leading-[inherit]'>
+              Stopped by user
+            </span>
           </div>
           {actions && <div className='mt-[10px]'>{actionsRow}</div>}
         </>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
index 5b6560b4eae..ed9ac8e2711 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
@@ -669,7 +669,9 @@ function EmbeddedWorkflow({ workspaceId, workflowId }: EmbeddedWorkflowProps) {
       <div className='flex h-full flex-col items-center justify-center gap-3'>
         <WorkflowX className='size-[32px] text-[var(--text-icon)]' />
         <div className='flex flex-col items-center gap-1'>
-          <h2 className='text-[20px] text-[var(--text-primary)]'>Workflow not found</h2>
+          <h2 className='text-[var(--text-primary)] text-xl leading-[inherit]'>
+            Workflow not found
+          </h2>
           <p className='text-[var(--text-body)] text-small'>
             This workflow may have been deleted or moved
           </p>
@@ -732,7 +734,7 @@ function EmbeddedFile({
       <div className='flex h-full flex-col items-center justify-center gap-3'>
         <FileX className='size-[32px] text-[var(--text-icon)]' />
         <div className='flex flex-col items-center gap-1'>
-          <h2 className='text-[20px] text-[var(--text-primary)]'>File not found</h2>
+          <h2 className='text-[var(--text-primary)] text-xl leading-[inherit]'>File not found</h2>
           <p className='text-[var(--text-body)] text-small'>
             This file may have been deleted or moved
           </p>
@@ -783,7 +785,7 @@ function EmbeddedFolder({ workspaceId, folderId }: EmbeddedFolderProps) {
       <div className='flex h-full flex-col items-center justify-center gap-3'>
         <FolderIcon className='size-[32px] text-[var(--text-icon)]' />
         <div className='flex flex-col items-center gap-1'>
-          <h2 className='text-[20px] text-[var(--text-primary)]'>Folder not found</h2>
+          <h2 className='text-[var(--text-primary)] text-xl leading-[inherit]'>Folder not found</h2>
           <p className='text-[var(--text-body)] text-small'>
             This folder may have been deleted or moved
           </p>
@@ -794,7 +796,7 @@ function EmbeddedFolder({ workspaceId, folderId }: EmbeddedFolderProps) {
 
   return (
     <div className='flex h-full flex-col overflow-y-auto p-6'>
-      <h2 className='mb-4 text-[16px] text-[var(--text-primary)]'>{folder.name}</h2>
+      <h2 className='mb-4 text-[var(--text-primary)] text-md'>{folder.name}</h2>
       {folderWorkflows.length === 0 ? (
         <p className='text-[var(--text-muted)] text-small'>No workflows in this folder</p>
       ) : (
@@ -841,7 +843,7 @@ function EmbeddedLog({ workspaceId, logId, onNotFound }: EmbeddedLogProps) {
       <div className='flex h-full flex-col items-center justify-center gap-3'>
         <Library className='size-[32px] text-[var(--text-icon)]' />
         <div className='flex flex-col items-center gap-1'>
-          <h2 className='text-[20px] text-[var(--text-primary)]'>Log not found</h2>
+          <h2 className='text-[var(--text-primary)] text-xl leading-[inherit]'>Log not found</h2>
           <p className='text-[var(--text-body)] text-small'>
             This log may have been deleted or is no longer available
           </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
index 088064324b1..32cfd395b83 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
@@ -59,12 +59,12 @@ export interface PlusMenuHandle {
  * Box and typography shared by the textarea and its mirror overlay — both must
  * produce identical line wrapping so the overlay text sits exactly over the
  * (transparent) textarea text. The scale is the chat input's native prompt
- * scale (`text-[14px]`, `-0.015em` tracking); the task modal's body inherits it
+ * scale (`text-sm`, 14px at the default root, `-0.015em` tracking); the task modal's body inherits it
  * so the editor reads the same whether it's the chat input or inside the modal.
  */
 const FIELD_MIRROR_CLASSES = cn(
   'm-0 box-border min-h-[24px] w-full [overflow-wrap:anywhere] border-0 bg-transparent',
-  'px-1 py-1 font-body text-[14px] leading-[24px] tracking-[-0.015em]'
+  'px-1 py-1 font-body text-sm leading-[24px] tracking-[-0.015em]'
 )
 
 /**
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx
index d807f00a5be..67359e00939 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx
@@ -8,10 +8,10 @@ import type { ChatMessageContext } from '@/app/workspace/[workspaceId]/home/type
 import { getIntegrationMatcher } from '@/blocks/integration-matcher'
 
 const USER_MESSAGE_CLASSES =
-  'whitespace-pre-wrap [overflow-wrap:anywhere] font-[family-name:var(--font-inter)] text-base text-[var(--text-primary)] leading-[23px] tracking-[0] antialiased'
+  'whitespace-pre-wrap [overflow-wrap:anywhere] font-inter text-base text-[var(--text-primary)] leading-[23px] tracking-[0] antialiased'
 
 const COMPACT_CLASSES =
-  'truncate text-small leading-[20px] font-[family-name:var(--font-inter)] text-[var(--text-primary)] tracking-[0] antialiased'
+  'truncate text-small leading-[20px] font-inter text-[var(--text-primary)] tracking-[0] antialiased'
 
 interface UserMessageContentProps {
   content: string
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index be6316624d4..cc387d5367e 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -675,7 +675,7 @@ function HomeContent({ chatId, userName, userId }: HomeProps) {
           <div className='h-full overflow-y-auto [scrollbar-gutter:stable_both-edges]'>
             {/* Asymmetric padding biases the group up so the full cluster (heading + input + suggestions) sits at the optical center */}
             <div className='flex min-h-full flex-col items-center justify-center px-6 pt-[2vh] pb-[22vh]'>
-              <h1 className='mb-7 max-w-chat text-balance font-season text-[26px] text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-[28px]'>
+              <h1 className='mb-7 max-w-chat text-balance font-season text-2xl text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-title'>
                 What should we get done{firstName ? `, ${firstName}` : ''}?
               </h1>
               <div ref={initialViewInputRef} className='relative w-full max-w-chat'>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
index 77303d43160..cc03ba5be29 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
@@ -445,7 +445,7 @@ export function Admin() {
                   <div className='flex gap-1'>
                     <Button
                       variant='active'
-                      className='h-[28px] text-caption'
+                      className='h-[28px]'
                       onClick={() =>
                         setAdminParams((prev) => ({
                           offset: Math.max(0, prev.offset - PAGE_SIZE),
@@ -457,7 +457,7 @@ export function Admin() {
                     </Button>
                     <Button
                       variant='active'
-                      className='h-[28px] text-caption'
+                      className='h-[28px]'
                       onClick={() =>
                         setAdminParams((prev) => ({ offset: prev.offset + PAGE_SIZE }))
                       }
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/run-status-control/run-status-control.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/run-status-control/run-status-control.tsx
index b71c689b2ae..9ac898f6c0d 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/run-status-control/run-status-control.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/run-status-control/run-status-control.tsx
@@ -38,12 +38,7 @@ export const RunStatusControl = memo(function RunStatusControl({
           </>
         )}
       </div>
-      <Button
-        variant='subtle'
-        className='py-1 text-caption'
-        onClick={onStopAll}
-        disabled={isStopping}
-      >
+      <Button variant='subtle' className='py-1' onClick={onStopAll} disabled={isStopping}>
         <Square className='mr-1.5 size-[14px]' />
         {isStopping ? 'Stopping…' : 'Stop all'}
       </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
index d069f93c6fa..6e110502e4d 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
@@ -322,7 +322,7 @@ const FilterRuleRow = memo(function FilterRuleRow({
       ) : (
         <button
           onClick={() => onToggleLogical(rule.id)}
-          className='w-[42px] shrink-0 rounded-full py-0.5 text-right text-[10px] text-[var(--text-muted)] uppercase tracking-wide transition-colors hover:text-[var(--text-secondary)]'
+          className='w-[42px] shrink-0 rounded-full py-0.5 text-right text-[var(--text-muted)] text-micro uppercase tracking-wide transition-colors hover:text-[var(--text-secondary)]'
         >
           {rule.logicalOperator}
         </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx
index f040e922466..0578a08a50d 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx
@@ -4698,7 +4698,9 @@ export function TableGrid({
       <div className='flex h-full flex-col items-center justify-center gap-3'>
         <TableX className='size-[32px] text-[var(--text-muted)]' />
         <div className='flex flex-col items-center gap-1'>
-          <h2 className='text-[20px] text-[var(--text-secondary)]'>Table not found</h2>
+          <h2 className='text-[var(--text-secondary)] text-xl leading-[inherit]'>
+            Table not found
+          </h2>
           <p className='text-[var(--text-muted)] text-small'>
             This table may have been deleted or moved
           </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-progress-menu.tsx b/apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-progress-menu.tsx
index 070ec159db8..191cf06b34d 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-progress-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-progress-menu.tsx
@@ -64,7 +64,7 @@ export function ImportProgressMenu({ workspaceId, tableId }: ImportProgressMenuP
   return (
     <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
       <DropdownMenuTrigger asChild>
-        <Button variant='subtle' className='py-1 text-caption'>
+        <Button variant='subtle' className='py-1'>
           {/* Aggregate state, mirroring the row iconography: spinner while anything runs, then
               alert if any job failed, else a check. */}
           {anyRunning ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/upgrade/components/plan-card/plan-card.tsx b/apps/sim/app/workspace/[workspaceId]/upgrade/components/plan-card/plan-card.tsx
index c14dfdeeda4..90e13df381c 100644
--- a/apps/sim/app/workspace/[workspaceId]/upgrade/components/plan-card/plan-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/upgrade/components/plan-card/plan-card.tsx
@@ -78,13 +78,15 @@ export function UpgradePlanCard({
     >
       <div className='flex flex-col gap-4'>
         <div className='flex items-start justify-between gap-2'>
-          <h3 className='text-[24px] text-[var(--text-primary)]'>{name}</h3>
+          <h3 className='text-2xl text-[var(--text-primary)] leading-[inherit]'>{name}</h3>
           {bannerText && <ChipTag variant='gray'>{bannerText}</ChipTag>}
         </div>
 
         <div className='flex flex-col'>
           <div className='flex items-center gap-2'>
-            <span className='text-[20px] text-[var(--text-primary)] tabular-nums'>{price}</span>
+            <span className='text-[var(--text-primary)] text-xl tabular-nums leading-[inherit]'>
+              {price}
+            </span>
             {discountLabel && <ChipTag variant='mono'>{discountLabel}</ChipTag>}
           </div>
           <p className='text-[var(--text-muted)] text-base'>{priceSubtext ?? '\u00A0'}</p>
diff --git a/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx b/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx
index 7ec5cadb581..a69dd3eea4f 100644
--- a/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx
@@ -192,7 +192,7 @@ export function Upgrade({ workspaceId }: UpgradeProps) {
       <div className='min-h-0 flex-1 overflow-y-auto px-6 [scrollbar-gutter:stable_both-edges]'>
         <div className='mx-auto flex w-full max-w-[960px] flex-col gap-7 pt-6 pb-3'>
           <div className='flex flex-col items-center gap-4'>
-            <h1 className='text-balance text-center font-season text-[30px] text-[var(--text-primary)]'>
+            <h1 className='text-balance text-center font-season text-[var(--text-primary)] text-title'>
               {header}
             </h1>
             {state.showUpgradePlans && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
index d6a91f24477..ab22cdac69f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
@@ -131,7 +131,7 @@ function ChatFilePreview({ file, onRemove }: ChatFilePreviewProps) {
       ) : (
         <div className='min-w-0 flex-1'>
           <div className='truncate font-medium text-[var(--white)] text-micro'>{file.name}</div>
-          <div className='text-[9px] text-[var(--text-tertiary)]'>{formatFileSize(file.size)}</div>
+          <div className='text-[var(--text-tertiary)] text-micro'>{formatFileSize(file.size)}</div>
         </div>
       )}
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
index 3d2e7e8b88a..f8cc36b1ef6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
@@ -208,7 +208,7 @@ export function CommandList() {
               {/* Right side: Keyboard Shortcut */}
               <div className='flex items-center gap-1'>
                 <Button
-                  className='group-hover:-translate-y-0.5 w-[26px] py-[3px] text-caption hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
+                  className='group-hover:-translate-y-0.5 w-[26px] py-[3px] hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
                   variant='3d'
                 >
                   <span>⌘</span>
@@ -216,7 +216,7 @@ export function CommandList() {
                 {shortcuts.map((shortcut) => (
                   <Button
                     key={shortcut}
-                    className='group-hover:-translate-y-0.5 w-[26px] py-[3px] text-caption hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
+                    className='group-hover:-translate-y-0.5 w-[26px] py-[3px] hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
                     variant='3d'
                   >
                     {shortcut}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index 5f894cfc5f3..37a47029032 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -854,7 +854,7 @@ export const Panel = memo(function Panel() {
             <div className='flex gap-1'>
               {isCopilotTabAvailable && (
                 <Button
-                  className={`h-[28px] truncate rounded-md border py-[5px] text-[12.5px] ${
+                  className={`h-[28px] truncate rounded-md border py-[5px] text-small ${
                     _hasHydrated && activeTab === 'copilot'
                       ? 'border-[var(--border-1)]'
                       : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)]'
@@ -867,7 +867,7 @@ export const Panel = memo(function Panel() {
                 </Button>
               )}
               <Button
-                className={`h-[28px] rounded-md border py-[5px] text-[12.5px] ${
+                className={`h-[28px] rounded-md border py-[5px] text-small ${
                   _hasHydrated && activeTab === 'toolbar'
                     ? 'border-[var(--border-1)]'
                     : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)]'
@@ -879,7 +879,7 @@ export const Panel = memo(function Panel() {
                 Toolbar
               </Button>
               <Button
-                className={`h-[28px] rounded-md border py-[5px] text-[12.5px] ${
+                className={`h-[28px] rounded-md border py-[5px] text-small ${
                   _hasHydrated && activeTab === 'editor'
                     ? 'border-[var(--border-1)]'
                     : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)]'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index 4adfb95edd8..7eca3e98c61 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -435,7 +435,7 @@ function ConnectionsSection({
               }
             >
               <div className='relative flex size-[14px] shrink-0 items-center justify-center overflow-hidden rounded-sm bg-violet-500'>
-                <span className='text-[9px] text-white'>V</span>
+                <span className='text-micro text-white'>V</span>
               </div>
               <OverflowText
                 label='Variables'
@@ -484,7 +484,7 @@ function ConnectionsSection({
               }
             >
               <div className='relative flex size-[14px] shrink-0 items-center justify-center overflow-hidden rounded-sm bg-cool-gray-500'>
-                <span className='text-[9px] text-white'>E</span>
+                <span className='text-micro text-white'>E</span>
               </div>
               <OverflowText
                 label='Secrets'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
index 04dfea0021a..d66fccc630b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
@@ -518,7 +518,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockNode>
         <div className='relative z-10 flex min-w-0 flex-1 items-center'>
           <OverflowText
             label={humanizeBlockName(canvasPresentation.title)}
-            className={!enabled ? 'text-[17px] text-[var(--text-muted)]' : 'text-[17px]'}
+            className={!enabled ? 'text-[var(--text-muted)] text-md' : 'text-md'}
           />
         </div>
         {!isNoteBlock && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx
index 1da14a9bf22..8896f96f435 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx
@@ -155,7 +155,7 @@ export function SidebarFooter({
     />
   ) : (
     <div
-      className='flex size-[16px] shrink-0 items-center justify-center rounded-full text-[9px] text-white leading-none'
+      className='flex size-[16px] shrink-0 items-center justify-center rounded-full text-micro text-white leading-none'
       style={{ backgroundColor: getUserColor(profile.id) }}
     >
       {name.charAt(0).toUpperCase()}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index 02d119714c3..8ef6f8ef7ab 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -1560,7 +1560,7 @@ export const Sidebar = memo(function Sidebar() {
                                           }
                                           onKeyDown={chatFlyoutRename.handleKeyDown}
                                           onBlur={handleChatRenameBlur}
-                                          className='min-w-0 flex-1 border-none bg-transparent text-[14px] text-[var(--text-body)] outline-hidden'
+                                          className='min-w-0 flex-1 border-none bg-transparent text-[var(--text-body)] text-sm leading-[inherit] outline-hidden'
                                         />
                                       </div>
                                     )
diff --git a/apps/sim/components/auth/public-auth-header.tsx b/apps/sim/components/auth/public-auth-header.tsx
index d3f1fa8a5d7..31c151205a9 100644
--- a/apps/sim/components/auth/public-auth-header.tsx
+++ b/apps/sim/components/auth/public-auth-header.tsx
@@ -9,7 +9,7 @@ interface PublicAuthHeaderProps {
 export function PublicAuthHeader({ title, description }: PublicAuthHeaderProps) {
   return (
     <div className='space-y-1 text-center'>
-      <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
+      <h1 className='text-balance text-[var(--text-primary)] text-display leading-[110%] tracking-[-0.02em]'>
         {title}
       </h1>
       <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
diff --git a/apps/sim/components/emails/_styles/base.tokens.test.ts b/apps/sim/components/emails/_styles/base.tokens.test.ts
index 5e607c8553a..18a44579376 100644
--- a/apps/sim/components/emails/_styles/base.tokens.test.ts
+++ b/apps/sim/components/emails/_styles/base.tokens.test.ts
@@ -79,9 +79,9 @@ describe('email type scale mirrors the globals.css @theme scale', () => {
     )
   })
 
-  it('sm is Tailwind stock 14px — the size text-sm resolves to in chip chrome', () => {
+  it('sm adopts Tailwind stock 0.875rem, matching 14px email text at the default root', () => {
     expect(typography.fontSize.sm).toBe('14px')
-    expect(tailwindFontSize.sm).toBeUndefined()
+    expect(tailwindFontSize.sm).toBe('0.875rem')
     expect(chipGeometryClass).toContain('text-sm')
   })
 
diff --git a/apps/sim/components/ui/thinking-loader.module.css b/apps/sim/components/ui/thinking-loader.module.css
index 52703157b5e..8a884235143 100644
--- a/apps/sim/components/ui/thinking-loader.module.css
+++ b/apps/sim/components/ui/thinking-loader.module.css
@@ -85,14 +85,14 @@
    is 400, never medium. */
 .label {
   composes: shimmer from "./shimmer-text.module.css";
-  font-size: var(--tl-label-size, 14px);
-  font-weight: 400;
+  font-size: var(--tl-label-size, var(--text-sm));
+  font-weight: var(--font-weight-normal);
 }
 
 /* Static label (shimmer off): the phrase in solid body ink, no gradient sweep. */
 .labelStatic {
-  font-size: var(--tl-label-size, 14px);
-  font-weight: 400;
+  font-size: var(--tl-label-size, var(--text-sm));
+  font-weight: var(--font-weight-normal);
   color: var(--text-body);
 }
 
diff --git a/apps/sim/ee/sso/components/sso-form.tsx b/apps/sim/ee/sso/components/sso-form.tsx
index 5bc2e346594..9d9f39d10d1 100644
--- a/apps/sim/ee/sso/components/sso-form.tsx
+++ b/apps/sim/ee/sso/components/sso-form.tsx
@@ -237,7 +237,7 @@ function SSOFormContent({
 
       {emailEnabled && (
         <>
-          <div className='relative my-6 font-light'>
+          <div className='relative my-6 font-normal'>
             <div className='absolute inset-0 flex items-center'>
               <div className='w-full border-[var(--border)] border-t' />
             </div>
@@ -259,7 +259,7 @@ function SSOFormContent({
       )}
 
       {emailEnabled && !registrationDisabled && (
-        <div className='pt-6 text-center font-light text-base'>
+        <div className='pt-6 text-center font-normal text-base'>
           <span className='font-normal'>Don't have an account? </span>
           <Link
             href={`/signup${callbackUrl ? `?callbackUrl=${encodeURIComponent(callbackUrl)}` : ''}`}
diff --git a/packages/emcn/src/lib/cn.test.ts b/packages/emcn/src/lib/cn.test.ts
index 7507ea397f4..b87665583aa 100644
--- a/packages/emcn/src/lib/cn.test.ts
+++ b/packages/emcn/src/lib/cn.test.ts
@@ -25,13 +25,22 @@ describe('cn', () => {
       ['text-base text-md', 'text-md'],
       ['text-md text-base', 'text-base'],
       ['text-small text-md text-micro', 'text-micro'],
+      ['text-sm text-title', 'text-title'],
+      ['text-title-lg text-xl', 'text-xl'],
+      ['text-title text-title-lg text-display', 'text-display'],
     ])('%s -> %s', (input, expected) => {
       expect(cn(input)).toBe(expected)
     })
 
-    it('keeps a font size and a text colour together', () => {
-      expect(cn('text-small text-[var(--text-body)]')).toBe('text-small text-[var(--text-body)]')
-    })
+    it.each(['small', 'title', 'title-lg', 'display'])(
+      'keeps text-%s and a text colour together in either order',
+      (size) => {
+        const fontSize = `text-${size}`
+        const colour = 'text-[var(--text-body)]'
+        expect(cn(fontSize, colour)).toBe(`${fontSize} ${colour}`)
+        expect(cn(colour, fontSize)).toBe(`${colour} ${fontSize}`)
+      }
+    )
 
     it('conflicts an arbitrary size with a named one', () => {
       expect(cn('text-[13px] text-small')).toBe('text-small')
diff --git a/packages/emcn/src/lib/cn.ts b/packages/emcn/src/lib/cn.ts
index 44b68c24039..63f87a80c53 100644
--- a/packages/emcn/src/lib/cn.ts
+++ b/packages/emcn/src/lib/cn.ts
@@ -14,7 +14,7 @@ import { extendTailwindMerge } from 'tailwind-merge'
 const twMerge = extendTailwindMerge({
   extend: {
     classGroups: {
-      'font-size': [{ text: ['micro', 'caption', 'small', 'md'] }],
+      'font-size': [{ text: ['micro', 'caption', 'small', 'md', 'title', 'title-lg', 'display'] }],
     },
   },
 })
diff --git a/packages/workflow-renderer/src/note/note-block-view.tsx b/packages/workflow-renderer/src/note/note-block-view.tsx
index d47a556d391..90c3a8a9523 100644
--- a/packages/workflow-renderer/src/note/note-block-view.tsx
+++ b/packages/workflow-renderer/src/note/note-block-view.tsx
@@ -1017,7 +1017,7 @@ export function NoteBlockView({
                     }
                   }}
                   className={cn(
-                    'nodrag nopan nowheel h-7 w-full min-w-0 select-text border-none bg-transparent px-0 text-[17px] text-current caret-current outline-hidden focus-visible:outline-hidden',
+                    'nodrag nopan nowheel h-7 w-full min-w-0 select-text border-none bg-transparent px-0 text-current text-md caret-current outline-hidden focus-visible:outline-hidden',
                     colorOption.selectionClassName,
                     !isEnabled && 'opacity-50'
                   )}
@@ -1033,14 +1033,14 @@ export function NoteBlockView({
                     !isEnabled && 'opacity-50'
                   )}
                 >
-                  <OverflowSpan value={name ?? ''} className='text-[17px] text-current'>
+                  <OverflowSpan value={name ?? ''} className='text-current text-md'>
                     {renderMarkedName(name ?? '', nameSearchRange)}
                   </OverflowSpan>
                 </button>
               ) : (
                 <OverflowSpan
                   value={name ?? ''}
-                  className={cn('text-[17px] text-current', !isEnabled && 'opacity-50')}
+                  className={cn('text-current text-md', !isEnabled && 'opacity-50')}
                 >
                   {renderMarkedName(name ?? '', nameSearchRange)}
                 </OverflowSpan>
diff --git a/packages/workflow-renderer/src/subflow/subflow-node-view.tsx b/packages/workflow-renderer/src/subflow/subflow-node-view.tsx
index 4886960c4fb..8fe376b8a8e 100644
--- a/packages/workflow-renderer/src/subflow/subflow-node-view.tsx
+++ b/packages/workflow-renderer/src/subflow/subflow-node-view.tsx
@@ -620,7 +620,7 @@ export function SubflowNodeView({
           >
             <OverflowSpan
               value={blockName}
-              className={cn('text-[17px]', !isEnabled && 'text-[var(--text-muted)]')}
+              className={cn('text-md', !isEnabled && 'text-[var(--text-muted)]')}
             />
           </div>
           <div className='relative z-10 flex shrink-0 items-center gap-1'>
diff --git a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
index cae87070f2f..8cd8d87a2ce 100644
--- a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
+++ b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
@@ -772,7 +772,7 @@ export function WorkflowBlockView({
             <OverflowSpan
               value={humanizeBlockName(name)}
               className={cn(
-                'text-[17px]',
+                'text-md',
                 !isEnabled && runPathStatus !== 'success' && 'text-[var(--text-muted)]'
               )}
             />
diff --git a/packages/workflow-renderer/src/workflow-type.tsx b/packages/workflow-renderer/src/workflow-type.tsx
index 22ed75db83e..80f8f11b9c9 100644
--- a/packages/workflow-renderer/src/workflow-type.tsx
+++ b/packages/workflow-renderer/src/workflow-type.tsx
@@ -169,7 +169,7 @@ export function BlockTileView({
         />
       ) : (
         fallbackLabel && (
-          <span className={cn('font-bold text-micro', foregroundClass)}>{fallbackLabel}</span>
+          <span className={cn('font-semibold text-micro', foregroundClass)}>{fallbackLabel}</span>
         )
       )}
     </div>