improvement(ui): share public headings and product typography

.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.

.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.
 

.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.

.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.
 

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>
       )}

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'

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)

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) => {

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'>

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>

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

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. */

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

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>

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>