improvement(ui): consolidate product typography

Author: Bill Leoutsakos

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/(interfaces)/chat/components/input/input.tsx

@@ -181,7 +181,7 @@ export const ChatInput: React.FC<{
                       ) : (
                         <div className='flex h-full w-full flex-col items-center justify-center gap-0.5 text-[var(--text-muted)]'>
                           <Paperclip className='size-[18px]' />
-                          <span className='max-w-[48px] truncate px-[2px] text-[9px]'>
+                          <span className='max-w-[48px] truncate px-[2px] text-micro'>
                             {file.name.split('.').pop()}
                           </span>
                         </div>
@@ -214,7 +214,7 @@ export const ChatInput: React.FC<{
             onKeyDown={handleKeyDown}
             placeholder={isDragOver ? 'Drop files here...' : 'Enter a message...'}
             rows={1}
-            className='m-0 h-auto min-h-[24px] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent p-1 text-[15px] text-[var(--text-primary)] leading-[24px] caret-[var(--text-primary)] outline-hidden [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
+            className='m-0 h-auto min-h-[24px] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent p-1 text-[var(--text-primary)] text-base leading-[24px] caret-[var(--text-primary)] outline-hidden [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
           />
 
           <div className='flex items-center justify-between'>

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/_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,6 +91,10 @@
   --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
@@ -101,8 +106,18 @@
   --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-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)

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>
 

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>
 

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

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