diff --git a/.claude/rules/emcn-components.md b/.claude/rules/emcn-components.md
index af477a7d886..8c8b468d246 100644
--- a/.claude/rules/emcn-components.md
+++ b/.claude/rules/emcn-components.md
@@ -70,3 +70,7 @@ geometry only; colour, radius and SVG stroke continue to come from the selected
 Use `shape='round'` for circular actions, or omit it to retain the current radius.
 `size='inline'` is a 20px-high action with caption typography and compact horizontal
 padding. Prefer these supported props to size, padding and radius overrides.
+
+### Chip sizing and centered actions
+
+`Chip`, `ChipLink`, and `ChipInput` retain their default 30px height. Use `size="lg"` for the existing auth-scale 36px controls; the larger size follows the root font size. `Chip` and `ChipLink` accept `align="center"` to center their icon/label group, including full-width form actions. Long labels still shrink and retain their overflow treatment. Avoid descendant flex overrides to center chip labels. The default geometry exports remain unchanged for static consumers.
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/emcn-components.mdc b/.cursor/rules/emcn-components.mdc
index 6a70e29d4b3..75fe49a83e3 100644
--- a/.cursor/rules/emcn-components.mdc
+++ b/.cursor/rules/emcn-components.mdc
@@ -71,3 +71,7 @@ geometry only; colour, radius and SVG stroke continue to come from the selected
 Use `shape='round'` for circular actions, or omit it to retain the current radius.
 `size='inline'` is a 20px-high action with caption typography and compact horizontal
 padding. Prefer these supported props to size, padding and radius overrides.
+
+### Chip sizing and centered actions
+
+`Chip`, `ChipLink`, and `ChipInput` retain their default 30px height. Use `size="lg"` for the existing auth-scale 36px controls; the larger size follows the root font size. `Chip` and `ChipLink` accept `align="center"` to center their icon/label group, including full-width form actions. Long labels still shrink and retain their overflow treatment. Avoid descendant flex overrides to center chip labels. The default geometry exports remain unchanged for static consumers.
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/(auth)/components/auth-input.tsx b/apps/sim/app/(auth)/components/auth-input.tsx
index 396bae64cf8..a2c3bc12979 100644
--- a/apps/sim/app/(auth)/components/auth-input.tsx
+++ b/apps/sim/app/(auth)/components/auth-input.tsx
@@ -1,20 +1,11 @@
 'use client'
 
 import * as React from 'react'
-import { ChipInput, type ChipInputProps, cn } from '@sim/emcn'
-import { AUTH_CONTROL_HEIGHT } from '@/app/(auth)/components/constants'
+import { ChipInput, type ChipInputProps } from '@sim/emcn'
 
-/**
- * The auth text field — a {@link ChipInput} raised to the auth control height
- * ({@link AUTH_CONTROL_HEIGHT}) so every labeled field on the auth and invite
- * surfaces shares one slightly-taller geometry. All chip props pass through
- * (`error`, `endAdornment`, `icon`, …); only the height is owned here, and a
- * caller's `className` (layout only) still composes on top.
- */
-export const AuthInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
-  ({ className, ...props }, ref) => (
-    <ChipInput ref={ref} className={cn(AUTH_CONTROL_HEIGHT, className)} {...props} />
-  )
+/** Auth fields use the larger shared chip size while retaining native input props and refs. */
+export const AuthInput = React.forwardRef<HTMLInputElement, Omit<ChipInputProps, 'size'>>(
+  (props, ref) => <ChipInput {...props} ref={ref} size='lg' />
 )
 
 AuthInput.displayName = 'AuthInput'
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 248d24644ee..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
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import { ChipInput, cn, InputOTP, InputOTPGroup, InputOTPSlot, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
+import { PublicAuthHeader } from '@/components/auth/public-auth-header'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { AuthSubmitButton } from '@/app/(auth)/components'
 import { AUTH_TEXT_LINK } from '@/app/(auth)/components/auth-button-classes'
@@ -110,16 +111,14 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
     <div className='flex flex-1 items-center justify-center px-4 py-16'>
       <div className='w-full max-w-[410px]'>
         <div className='flex flex-col items-center justify-center'>
-          <div className='space-y-1 text-center'>
-            <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-              {showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
-            </h1>
-            <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
-              {showOtpVerification
+          <PublicAuthHeader
+            title={showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
+            description={
+              showOtpVerification
                 ? `A verification code has been sent to ${email}`
-                : 'This chat requires email verification'}
-            </p>
-          </div>
+                : 'This chat requires email verification'
+            }
+          />
 
           <div className='mt-8 w-full max-w-[410px]'>
             {!showOtpVerification ? (
@@ -230,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/auth/password/password-auth.tsx b/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx
index df723907a00..cd49a26fa28 100644
--- a/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { cn, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
+import { PublicAuthHeader } from '@/components/auth/public-auth-header'
 import { AuthSubmitButton, PasswordInput } from '@/app/(auth)/components'
 import { useChatPasswordAuth } from '@/hooks/queries/chats'
 
@@ -44,14 +45,10 @@ export default function PasswordAuth({ identifier }: PasswordAuthProps) {
     <div className='flex flex-1 items-center justify-center px-4 py-16'>
       <div className='w-full max-w-[410px]'>
         <div className='flex flex-col items-center justify-center'>
-          <div className='space-y-1 text-center'>
-            <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-              Password Required
-            </h1>
-            <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
-              This chat is password-protected
-            </p>
-          </div>
+          <PublicAuthHeader
+            title='Password Required'
+            description='This chat is password-protected'
+          />
 
           <form
             onSubmit={(e) => {
diff --git a/apps/sim/app/(interfaces)/chat/components/input/input.tsx b/apps/sim/app/(interfaces)/chat/components/input/input.tsx
index 0554b38bed5..9ac7621d0c1 100644
--- a/apps/sim/app/(interfaces)/chat/components/input/input.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/input/input.tsx
@@ -182,7 +182,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>
@@ -215,7 +215,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/(landing)/components/landing-cta-link/landing-cta-link.tsx b/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx
index 4fbba3d3750..5787f2c8560 100644
--- a/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx
+++ b/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx
@@ -9,7 +9,7 @@ type LandingCtaSize = 'compact' | 'default' | 'display'
 
 export type LandingCtaSection = PostHogEventMap['landing_cta_clicked']['section']
 
-interface LandingCtaLinkProps extends Omit<ChipLinkProps, 'variant'> {
+interface LandingCtaLinkProps extends Omit<ChipLinkProps, 'variant' | 'size'> {
   size?: LandingCtaSize
   variant?: 'primary' | 'outline'
   /** Adds the animated chevron used by demo actions. */
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-auth-shell.tsx b/apps/sim/app/f/[token]/public-file-auth-shell.tsx
index 24da9e8d470..8953a5a5895 100644
--- a/apps/sim/app/f/[token]/public-file-auth-shell.tsx
+++ b/apps/sim/app/f/[token]/public-file-auth-shell.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { PublicAuthHeader } from '@/components/auth/public-auth-header'
 import { SupportFooter } from '@/app/(auth)/components/support-footer'
 import { LogoShell } from '@/app/(landing)/components/logo-shell'
 
@@ -17,14 +18,7 @@ export function PublicFileAuthShell({ title, subtitle, children }: PublicFileAut
   return (
     <LogoShell center footer={<SupportFooter position='static' />}>
       <div className='flex w-full max-w-lg flex-col items-center justify-center px-4'>
-        <div className='space-y-1 text-center'>
-          <h1 className='text-balance text-[40px] text-[var(--text-primary)] 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]'>
-            {subtitle}
-          </p>
-        </div>
+        <PublicAuthHeader title={title} description={subtitle} />
         <div className='mt-8 w-full max-w-[410px]'>{children}</div>
       </div>
     </LogoShell>
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 958b6b893bf..59505ceb97a 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]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx
index a843694bfe8..fa0e488c761 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx
@@ -11,7 +11,7 @@ const VIEWER_MASK_LENGTH = 10
 
 type SecretValueFieldProps = Omit<
   ComponentProps<'input'>,
-  'type' | 'value' | 'onChange' | 'readOnly' | 'style'
+  'type' | 'value' | 'onChange' | 'readOnly' | 'style' | 'size'
 > & {
   /** The chip owns field styling; callers use className for layout. */
   style?: never
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 53bd21ddf25..0772217a108 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]/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 b26c5ac8ccd..9795b956ae4 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 c7c6880bf90..c076b48eda3 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
new file mode 100644
index 00000000000..31c151205a9
--- /dev/null
+++ b/apps/sim/components/auth/public-auth-header.tsx
@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react'
+
+interface PublicAuthHeaderProps {
+  title: ReactNode
+  description: ReactNode
+}
+
+/** Heading shared by public chat, file-share and SSO access gates. */
+export function PublicAuthHeader({ title, description }: PublicAuthHeaderProps) {
+  return (
+    <div className='space-y-1 text-center'>
+      <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]'>
+        {description}
+      </p>
+    </div>
+  )
+}
diff --git a/apps/sim/components/emails/_styles/base.tokens.test.ts b/apps/sim/components/emails/_styles/base.tokens.test.ts
index 2c268e7756c..088c91aa91c 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-auth.tsx b/apps/sim/ee/sso/components/sso-auth.tsx
index e5489919698..855651edaed 100644
--- a/apps/sim/ee/sso/components/sso-auth.tsx
+++ b/apps/sim/ee/sso/components/sso-auth.tsx
@@ -4,6 +4,7 @@ import { type KeyboardEvent, useState } from 'react'
 import { ChipInput, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { useRouter } from 'next/navigation'
+import { PublicAuthHeader } from '@/components/auth/public-auth-header'
 import { ApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
 import { chatSSOContract } from '@/lib/api/contracts/chats'
@@ -98,14 +99,10 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
     <div className='flex flex-1 items-center justify-center px-4 py-16'>
       <div className='w-full max-w-[410px]'>
         <div className='flex flex-col items-center justify-center'>
-          <div className='space-y-1 text-center'>
-            <h1 className='text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'>
-              SSO Authentication
-            </h1>
-            <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
-              This chat requires SSO authentication
-            </p>
-          </div>
+          <PublicAuthHeader
+            title='SSO Authentication'
+            description='This chat requires SSO authentication'
+          />
 
           <form
             onSubmit={(e) => {
diff --git a/apps/sim/ee/sso/components/sso-form.tsx b/apps/sim/ee/sso/components/sso-form.tsx
index 494a9d25df7..9d9f39d10d1 100644
--- a/apps/sim/ee/sso/components/sso-form.tsx
+++ b/apps/sim/ee/sso/components/sso-form.tsx
@@ -5,6 +5,7 @@ import { Button, ChipInput, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
+import { PublicAuthHeader } from '@/components/auth/public-auth-header'
 import { isApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
 import { resolveSsoProviderContract } from '@/lib/api/contracts/auth'
@@ -186,22 +187,7 @@ function SSOFormContent({
 
   return (
     <>
-      <div className='space-y-1 text-center'>
-        <h1
-          className={
-            'text-balance text-[40px] text-[var(--text-primary)] leading-[110%] tracking-[-0.02em]'
-          }
-        >
-          Sign in with SSO
-        </h1>
-        <p
-          className={
-            'text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'
-          }
-        >
-          Enter your work email to continue
-        </p>
-      </div>
+      <PublicAuthHeader title='Sign in with SSO' description='Enter your work email to continue' />
 
       <form onSubmit={onSubmit} className={'mt-8 space-y-8'}>
         {formError && (
@@ -251,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>
@@ -273,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/components/chip-input/chip-input.test.tsx b/packages/emcn/src/components/chip-input/chip-input.test.tsx
index acbc4226246..a1d70082ff6 100644
--- a/packages/emcn/src/components/chip-input/chip-input.test.tsx
+++ b/packages/emcn/src/components/chip-input/chip-input.test.tsx
@@ -30,6 +30,19 @@ afterEach(() => {
 })
 
 describe('ChipInput', () => {
+  it.each([undefined, 'lg'] as const)(
+    'emits a single height for size %s without forwarding it to the native field',
+    (size) => {
+      const input = mount(<ChipInput size={size} disabled aria-label='Search' />)
+      const heights = input.parentElement?.className
+        .split(' ')
+        .filter((token) => token.startsWith('h-'))
+      expect(heights).toEqual([size === 'lg' ? 'h-9' : 'h-[30px]'])
+      expect(input.hasAttribute('size')).toBe(false)
+      expect(input.disabled).toBe(true)
+    }
+  )
+
   it('keeps the focused input mounted when custom leading content changes', () => {
     const input = mount()
     const render = (color: string) => (
@@ -76,7 +89,7 @@ describe('chip form controls', () => {
           error
           aria-invalid
           aria-describedby='error'
-          className='h-[34px]'
+          size='lg'
         />
         <p id='error'>Enter a work email</p>
         <ChipTextarea
@@ -93,7 +106,7 @@ describe('chip form controls', () => {
     expect(input.labels?.[0].textContent).toBe('Work email')
     expect(input.getAttribute('aria-describedby')).toBe('error')
     expect(input.getAttribute('aria-invalid')).toBe('true')
-    expect(input.parentElement?.className).toContain('h-[34px]')
+    expect(input.parentElement?.className).toContain('h-9')
     expect(input.parentElement?.className).toContain('border-[var(--text-error)]')
     expect(textareaRef.current?.rows).toBe(3)
     expect(textareaRef.current?.className).toContain('min-h-[80px]')
diff --git a/packages/emcn/src/components/chip-input/chip-input.tsx b/packages/emcn/src/components/chip-input/chip-input.tsx
index 444cbb1704a..3c5d7d1f161 100644
--- a/packages/emcn/src/components/chip-input/chip-input.tsx
+++ b/packages/emcn/src/components/chip-input/chip-input.tsx
@@ -28,11 +28,19 @@
  */
 import * as React from 'react'
 import { cn } from '../../lib/cn'
-import { chipFieldSurfaceClass, chipFieldTextClass, chipGeometryClass } from '../chip/chip-chrome'
+import {
+  chipContentGeometryClass,
+  chipFieldSurfaceClass,
+  chipFieldTextClass,
+  chipRadiusClass,
+  chipSizeClasses,
+} from '../chip/chip-chrome'
 
 type ChipInputIcon = React.ComponentType<{ className?: string }>
 
 export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** Control height: 30px by default, or the larger 36px auth spacing scale. */
+  size?: keyof typeof chipSizeClasses
   /** Leading icon component (e.g. `Search` from `@sim/emcn/icons`). Rendered at 14px in `--text-icon`, with the chip's 1.5 gap. */
   icon?: ChipInputIcon
   /** Custom leading content, such as a color swatch. Takes precedence over `icon`. */
@@ -62,6 +70,7 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
       error,
       disabled,
       type = 'text',
+      size = 'md',
       ...props
     },
     ref
@@ -69,7 +78,9 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
     <div
       className={cn(
         'flex w-full',
-        chipGeometryClass,
+        chipContentGeometryClass,
+        chipRadiusClass,
+        chipSizeClasses[size],
         chipFieldSurfaceClass,
         error && 'border-[var(--text-error)]',
         disabled && 'opacity-50',
diff --git a/packages/emcn/src/components/chip/chip-chrome.ts b/packages/emcn/src/components/chip/chip-chrome.ts
index 84c1fb201e4..b9e95d45ff4 100644
--- a/packages/emcn/src/components/chip/chip-chrome.ts
+++ b/packages/emcn/src/components/chip/chip-chrome.ts
@@ -51,6 +51,10 @@ export const chipContentGap = 'gap-1.5'
 
 /** Standard chip height, also shared by combobox fields. */
 export const chipHeightClass = 'h-[30px]'
+/** Shared control heights. Large controls follow the auth spacing scale. */
+export const chipSizeClasses = { md: chipHeightClass, lg: 'h-9' } as const
+/** Chip content geometry without height or radius, for sized controls. */
+export const chipContentGeometryClass = `items-center ${chipContentGap} px-2 text-left text-sm`
 
 /**
  * Chip pill geometry minus its corner radius — height, centering, gap, padding,
@@ -58,7 +62,7 @@ export const chipHeightClass = 'h-[30px]'
  * (non-`cn`) consumer never emits two competing radii; everything else reads
  * {@link chipGeometryClass}, which adds the default radius back.
  */
-export const chipGeometryUnroundedClass = `${chipHeightClass} items-center ${chipContentGap} px-2 text-left text-sm`
+export const chipGeometryUnroundedClass = `${chipHeightClass} ${chipContentGeometryClass}`
 /**
  * Chip pill geometry — height, centering, gap, radius, padding, text size — with
  * NO interactivity (no `cursor-pointer`, no hover). `chipVariants` composes this
diff --git a/packages/emcn/src/components/chip/chip.test.tsx b/packages/emcn/src/components/chip/chip.test.tsx
new file mode 100644
index 00000000000..7ca71576436
--- /dev/null
+++ b/packages/emcn/src/components/chip/chip.test.tsx
@@ -0,0 +1,93 @@
+/** @vitest-environment jsdom */
+import { act, createRef } from 'react'
+import { createRoot } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { Chip, ChipLink, chipVariants } from './chip'
+import { chipGeometryClass, chipGeometryUnroundedClass } from './chip-chrome'
+
+describe('Chip geometry', () => {
+  it.each([undefined, 'lg'] as const)(
+    'uses one height for raw variants, buttons and links at size %s',
+    (size) => {
+      const height = size === 'lg' ? 'h-9' : 'h-[30px]'
+      expect(
+        chipVariants({ size })
+          .split(' ')
+          .filter((token) => token.startsWith('h-'))
+      ).toEqual([height])
+      for (const node of [
+        <Chip key='button' size={size}>
+          Continue
+        </Chip>,
+        <ChipLink key='link' size={size} href='/workspace'>
+          Continue
+        </ChipLink>,
+      ]) {
+        const markup = renderToStaticMarkup(node)
+        expect(markup).toContain(height)
+        expect(markup).not.toContain(size === 'lg' ? 'h-[30px]' : 'h-9')
+        expect(markup).not.toMatch(/ size=/)
+      }
+      expect(chipGeometryUnroundedClass).toContain('h-[30px]')
+      expect(chipGeometryClass).toContain('h-[30px]')
+      expect(chipGeometryClass).toContain('rounded-lg')
+    }
+  )
+
+  it('centers the icon and label without preventing long text from shrinking', () => {
+    const markup = renderToStaticMarkup(
+      <Chip fullWidth align='center' leftAdornment={<svg aria-hidden />}>
+        Continue with your identity provider
+      </Chip>
+    )
+    expect(markup).toContain('justify-center')
+    expect(markup).toContain('flex-initial')
+    expect(markup).toContain('min-w-0')
+    expect(markup).not.toContain('flex-none')
+    expect(markup).not.toMatch(/ align=/)
+  })
+
+  it('preserves native refs, focus, submission, disabled actions and link navigation', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const button = createRef<HTMLButtonElement>()
+    const link = createRef<HTMLAnchorElement>()
+    let submissions = 0
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const render = (disabled: boolean) =>
+      act(() =>
+        root.render(
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              submissions++
+            }}
+          >
+            <Chip ref={button} size='lg' align='center' fullWidth type='submit' disabled={disabled}>
+              <strong>Continue</strong>
+            </Chip>
+            <ChipLink ref={link} size='lg' align='center' href='/workspace'>
+              <strong>Workspace</strong>
+            </ChipLink>
+          </form>
+        )
+      )
+    try {
+      render(false)
+      button.current?.focus()
+      expect(document.activeElement).toBe(button.current)
+      act(() => button.current?.click())
+      expect(submissions).toBe(1)
+      expect(link.current?.getAttribute('href')).toBe('/workspace')
+      render(true)
+      act(() => button.current?.click())
+      expect(submissions).toBe(1)
+      expect(button.current?.disabled).toBe(true)
+    } finally {
+      act(() => root.unmount())
+      container.remove()
+    }
+  })
+})
diff --git a/packages/emcn/src/components/chip/chip.tsx b/packages/emcn/src/components/chip/chip.tsx
index 5b333032762..d8d3fbd2494 100644
--- a/packages/emcn/src/components/chip/chip.tsx
+++ b/packages/emcn/src/components/chip/chip.tsx
@@ -14,17 +14,18 @@ import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-t
 import {
   chipActiveSurfaceClass,
   chipBorderShadowRing,
+  chipContentGeometryClass,
   chipContentIconClass,
   chipContentLabelClass,
   chipFilledFillTokens,
-  chipGeometryUnroundedClass,
   chipHoverSurfaceClass,
   chipPrimaryFillTokens,
   chipRadiusClass,
+  chipSizeClasses,
 } from './chip-chrome'
 
 /**
- * 30px pill — the platform's most common chrome pattern.
+ * 30px pill (36px with `size="lg"` at the default root font size) — the platform's most common chrome pattern.
  *
  * Render targets:
  * - {@link Chip} → `<button>`
@@ -41,6 +42,7 @@ import {
  * `border` (the `border-shadow` shadow ring on a transparent surface — an outline drawn purely via box-shadow,
  * no CSS border, no fill); outline (a true border with no shadow or hover fill).
  * `active` renders the default/filled chip in its selected state — `--surface-active`, held through hover.
+ * `align="center"` centers the complete icon/label group while allowing long labels to shrink.
  * `fullWidth` swaps `inline-flex` for block-level `flex`.
  * `shape` picks the corner radius: the implicit `default` is the `rounded-lg` pill; `round` is fully round
  * (`rounded-full`) for a chip sitting in a row of round controls. The radius lives in this variant rather than
@@ -60,7 +62,7 @@ import {
  * {@link chipHoverSurfaceClass}.
  */
 const chipVariants = cva(
-  `group cursor-pointer ${chipGeometryUnroundedClass} transition-colors disabled:cursor-not-allowed disabled:opacity-60`,
+  `group cursor-pointer ${chipContentGeometryClass} transition-colors disabled:cursor-not-allowed disabled:opacity-60`,
   {
     variants: {
       variant: {
@@ -74,6 +76,8 @@ const chipVariants = cva(
         outline:
           'border border-[var(--border)] bg-transparent hover-hover:border-[color-mix(in_srgb,var(--border)_80%,var(--text-secondary))]',
       },
+      size: chipSizeClasses,
+      align: { start: '', center: 'justify-center' },
       shape: { default: chipRadiusClass, round: 'rounded-full' },
       active: { true: '', false: '' },
       fullWidth: { true: 'flex w-full', false: 'inline-flex' },
@@ -82,7 +86,14 @@ const chipVariants = cva(
       { variant: ['default', 'filled'], active: false, className: chipHoverSurfaceClass },
       { variant: ['default', 'filled'], active: true, className: chipActiveSurfaceClass },
     ],
-    defaultVariants: { variant: 'default', shape: 'default', active: false, fullWidth: false },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+      align: 'start',
+      shape: 'default',
+      active: false,
+      fullWidth: false,
+    },
   }
 )
 
@@ -116,6 +127,7 @@ interface ChipBaseProps extends Omit<VariantProps<typeof chipVariants>, 'variant
  */
 function ChipContent({
   variant,
+  align,
   leftIcon: LeftIcon,
   leftAdornment,
   rightIcon: RightIcon,
@@ -124,7 +136,11 @@ function ChipContent({
 }: ChipBaseProps) {
   const isInverse = variant === 'primary' || variant === 'destructive'
   const iconClass = cn(chipContentIconClass, isInverse && 'text-current')
-  const labelClass = cn(chipContentLabelClass, 'flex-1', isInverse && 'text-current')
+  const labelClass = cn(
+    chipContentLabelClass,
+    align === 'center' ? 'flex-initial' : 'flex-1',
+    isInverse && 'text-current'
+  )
   const textLabel =
     typeof children === 'string' || typeof children === 'number' ? String(children) : null
   return (
@@ -151,6 +167,8 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
   {
     className,
     variant,
+    size,
+    align,
     shape,
     active,
     fullWidth,
@@ -168,11 +186,12 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
     <button
       ref={ref}
       type={type ?? 'button'}
-      className={cn(chipVariants({ variant, shape, active, fullWidth }), className)}
+      className={cn(chipVariants({ variant, size, align, shape, active, fullWidth }), className)}
       {...props}
     >
       <ChipContent
         variant={variant}
+        align={align}
         leftIcon={leftIcon}
         leftAdornment={leftAdornment}
         rightIcon={rightIcon}
@@ -196,6 +215,8 @@ const ChipLink = forwardRef<HTMLAnchorElement, ChipLinkProps>(function ChipLink(
   {
     className,
     variant,
+    size,
+    align,
     shape,
     active,
     fullWidth,
@@ -211,11 +232,12 @@ const ChipLink = forwardRef<HTMLAnchorElement, ChipLinkProps>(function ChipLink(
   return (
     <Link
       ref={ref}
-      className={cn(chipVariants({ variant, shape, active, fullWidth }), className)}
+      className={cn(chipVariants({ variant, size, align, shape, active, fullWidth }), className)}
       {...props}
     >
       <ChipContent
         variant={variant}
+        align={align}
         leftIcon={leftIcon}
         leftAdornment={leftAdornment}
         rightIcon={rightIcon}
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 6b71def6fb5..b3cfd5845dc 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>