From c8de008f6b043298decb7429847a0a898b0c0c4b Mon Sep 17 00:00:00 2001 From: Bill Leoutsakos Date: Tue, 22 Sep 2026 00:37:01 -0700 Subject: [PATCH 1/5] improvement(ui): consolidate product typography --- apps/sim/app/(auth)/components/auth-header.tsx | 4 +++- .../chat/components/input/input.tsx | 4 ++-- .../[executionId]/resume-page-client.tsx | 10 ++++++---- apps/sim/app/_styles/globals.css | 15 +++++++++++++++ apps/sim/app/cli/auth/cli-auth-view.tsx | 2 +- .../app/f/[token]/public-file-email-auth.tsx | 2 +- apps/sim/app/invite/components/status-card.tsx | 4 ++-- .../home/components/composer/composer.tsx | 2 +- .../home/organization-home.tsx | 2 +- .../app/o/[organizationId]/search/search.tsx | 4 ++-- apps/sim/app/unsubscribe/unsubscribe.tsx | 12 ++++++------ .../[workspaceId]/components/error/error.tsx | 4 ++-- .../components/resource/resource-not-found.tsx | 2 +- .../components/file-viewer/chart-preview.tsx | 4 ++-- .../components/file-viewer/document-table.css | 4 ++-- .../file-viewer/document-table.test.ts | 4 ++-- .../components/file-viewer/file-viewer.tsx | 2 +- .../components/file-viewer/mermaid-diagram.tsx | 4 ++-- .../components/file-viewer/pdf-viewer.tsx | 2 +- .../components/file-viewer/preview-shared.tsx | 6 ++++-- .../link-mark-precedence.test.ts | 6 +++--- .../raw-markdown-snippet.tsx | 2 +- .../rich-markdown-editor.css | 18 +++++++++--------- .../workspace/[workspaceId]/files/files.tsx | 2 +- .../components/chat-content/chat-content.tsx | 2 +- .../components/options/options.tsx | 2 +- .../message-content/message-content.tsx | 4 +++- .../resource-content/resource-content.tsx | 12 +++++++----- .../user-input/components/constants.ts | 2 +- .../user-message-content.tsx | 4 ++-- .../app/workspace/[workspaceId]/home/home.tsx | 2 +- .../settings/components/admin/admin.tsx | 4 ++-- .../run-status-control/run-status-control.tsx | 7 +------ .../components/table-filter/table-filter.tsx | 2 +- .../components/table-grid/table-grid.tsx | 4 +++- .../import-progress-menu.tsx | 2 +- .../upgrade/components/plan-card/plan-card.tsx | 6 ++++-- .../[workspaceId]/upgrade/upgrade.tsx | 2 +- .../w/[workflowId]/components/chat/chat.tsx | 2 +- .../components/command-list/command-list.tsx | 4 ++-- .../w/[workflowId]/components/panel/panel.tsx | 6 +++--- .../preview-editor/preview-editor.tsx | 4 ++-- .../components/block/block.tsx | 2 +- .../sidebar-footer/sidebar-footer.tsx | 2 +- .../w/components/sidebar/sidebar.tsx | 2 +- .../sim/components/auth/public-auth-header.tsx | 2 +- .../emails/_styles/base.tokens.test.ts | 4 ++-- .../components/ui/thinking-loader.module.css | 8 ++++---- apps/sim/ee/sso/components/sso-form.tsx | 4 ++-- packages/emcn/src/lib/cn.test.ts | 15 ++++++++++++--- packages/emcn/src/lib/cn.ts | 2 +- .../src/note/note-block-view.tsx | 6 +++--- .../src/subflow/subflow-node-view.tsx | 2 +- .../src/workflow-block/workflow-block-view.tsx | 2 +- .../workflow-renderer/src/workflow-type.tsx | 2 +- 55 files changed, 139 insertions(+), 106 deletions(-) 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 (
-

{title}

+

+ {title} +

{description != null && (

{description}

)} diff --git a/apps/sim/app/(interfaces)/chat/components/input/input.tsx b/apps/sim/app/(interfaces)/chat/components/input/input.tsx index a1e432f9dd2..f17d121a74e 100644 --- a/apps/sim/app/(interfaces)/chat/components/input/input.tsx +++ b/apps/sim/app/(interfaces)/chat/components/input/input.tsx @@ -181,7 +181,7 @@ export const ChatInput: React.FC<{ ) : (
- + {file.name.split('.').pop()}
@@ -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' />
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 && ( -

+

Value truncated for preview ({DISPLAY_VALUE_PREVIEW_MAX_CHARS.toLocaleString()} of{' '} {prettyPrinted.length.toLocaleString()} characters shown).

@@ -162,7 +162,7 @@ function renderStructuredValuePreview(value: unknown) { {truncated ? `${stringValue}…` : stringValue}
{truncated && ( -

+

Value truncated for preview ({DISPLAY_VALUE_PREVIEW_MAX_CHARS.toLocaleString()} of{' '} {String(value).length.toLocaleString()} characters shown).

@@ -774,8 +774,10 @@ export default function ResumeExecutionPage({ {/* Header */}
-

Paused Execution

-

+

+ Paused Execution +

+

Select a pause point to review and resume

diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index 78b947eac66..001e59ed8fc 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,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 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() {
{/* `pl` offsets the trailing letter-space `tracking` adds after the last glyph, which would otherwise pull the code left of optical center. */} - + {request.pairing}
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) {

-
+
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx index ef9edea0bc2..8ffbfe24157 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx @@ -58,7 +58,7 @@ const LANG_ALIASES: Record = { 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} 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({ <>
- Stopped by user + + Stopped by user +
{actions &&
{actionsRow}
} 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) {
-

Workflow not found

+

+ Workflow not found +

This workflow may have been deleted or moved

@@ -732,7 +734,7 @@ function EmbeddedFile({
-

File not found

+

File not found

This file may have been deleted or moved

@@ -783,7 +785,7 @@ function EmbeddedFolder({ workspaceId, folderId }: EmbeddedFolderProps) {
-

Folder not found

+

Folder not found

This folder may have been deleted or moved

@@ -794,7 +796,7 @@ function EmbeddedFolder({ workspaceId, folderId }: EmbeddedFolderProps) { return (
-

{folder.name}

+

{folder.name}

{folderWorkflows.length === 0 ? (

No workflows in this folder

) : ( @@ -841,7 +843,7 @@ function EmbeddedLog({ workspaceId, logId, onNotFound }: EmbeddedLogProps) {
-

Log not found

+

Log not found

This log may have been deleted or is no longer available

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..6c908a7e883 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 @@ -64,7 +64,7 @@ export interface PlusMenuHandle { */ 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) {
{/* Asymmetric padding biases the group up so the full cluster (heading + input + suggestions) sits at the optical center */}
-

+

What should we get done{firstName ? `, ${firstName}` : ''}?

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() {
- diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx index d069f93c6fa..6e110502e4d 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx @@ -322,7 +322,7 @@ const FilterRuleRow = memo(function FilterRuleRow({ ) : ( 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({
-

Table not found

+

+ Table not found +

This table may have been deleted or moved

diff --git a/apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-progress-menu.tsx b/apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-progress-menu.tsx index 070ec159db8..191cf06b34d 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-progress-menu.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-progress-menu.tsx @@ -64,7 +64,7 @@ export function ImportProgressMenu({ workspaceId, tableId }: ImportProgressMenuP return ( - ) : ( {renderMarkedName(name ?? '', nameSearchRange)} 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({ >
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({ 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 && ( - {fallbackLabel} + {fallbackLabel} ) )}
From e44620f41459055a92f0b4b1870be0c43a856453 Mon Sep 17 00:00:00 2001 From: Bill Leoutsakos Date: Tue, 22 Sep 2026 00:49:22 -0700 Subject: [PATCH 2/5] docs(ui): document the shared typography scale --- .claude/rules/sim-styling.md | 8 ++++++-- .cursor/rules/sim-styling.mdc | 8 ++++++-- .../home/components/user-input/components/constants.ts | 2 +- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/.claude/rules/sim-styling.md b/.claude/rules/sim-styling.md index 48d9086a481..c3769ab28a1 100644 --- a/.claude/rules/sim-styling.md +++ b/.claude/rules/sim-styling.md @@ -47,7 +47,11 @@ setWidth: (width) => { ## Text Scale -Custom font sizes (the `@theme` block in `apps/sim/app/_styles/globals.css`): `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px. `text-sm` is Tailwind default 14px. Field titles use `text-small` (13px); hints/errors use `text-caption` (12px). +Use the named scale in `apps/sim/app/_styles/globals.css`: `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px, `text-md`=16px, `text-title`=28px, `text-title-lg`=32px, and `text-display`=40px. The explicitly adopted stock entries retain their rem units and default leading: `text-sm`=0.875rem, `text-xl`=1.25rem, and `text-2xl`=1.5rem (14/20/24px at the default root size). Field titles use `text-small`; hints/errors use `text-caption`; workflow titles use `text-md`. + +Preserve explicit line heights when replacing arbitrary sizes. Where the old size inherited its line height, use `leading-[inherit]` if the named utility would otherwise add a different default. Keep document-relative heading/code recipes and the thinking loader's proportional label sizing distinct from ordinary UI text. + +Use `font-inter` within the existing scoped Inter loading boundary; the utility does not load the font globally. Keep monospace for code, JSON, and credentials. Icons default `size-[14px]`. Equal h/w → `size-*` (`size-[14px]`, `size-4`), never `h-N w-N`. @@ -67,7 +71,7 @@ A scroll region that can hide rows past an edge uses `useScrollEdges` with `scro ## Font Weight -Three steps, Tailwind's stock scale, nothing else: **`font-normal` (400)**, **`font-medium` (500)**, **`font-semibold` (600)**. 400 is the document default, so body text, chip labels, sidebar items, and headings carry **no weight class at all** — they inherit. Reach for a class only to step *up* from body. +Three steps, explicitly adopted from Tailwind's stock scale in globals.css, nothing else: **`font-normal` (400)**, **`font-medium` (500)**, **`font-semibold` (600)**. 400 is the document default, so body text, chip labels, sidebar items, and headings carry **no weight class at all** — they inherit. Reach for a class to step *up* from body or to reset meaningful inherited weight. Raw CSS references the same `--font-weight-normal`, `--font-weight-medium`, and `--font-weight-semibold` definitions; their values remain 400/500/600. Never write an arbitrary weight (`font-[380]`, `font-[430]`, `font-[450]`, …), and never set `fontWeight` in an inline `style`. There was previously a CSS-variable weight scale (`--font-weight-base/medium/semibold`, remapping `font-medium` to 440/480) plus seven ad-hoc values clustered between 380 and 500; it was deleted because nothing read as hierarchical. Off-scale values are only acceptable where the design system genuinely cannot reach — react-email templates and the static `apps/sim/emails/broadcasts/*.html`, which email clients render without CSS variables. diff --git a/.cursor/rules/sim-styling.mdc b/.cursor/rules/sim-styling.mdc index 7f92c255aeb..dfa91b0418c 100644 --- a/.cursor/rules/sim-styling.mdc +++ b/.cursor/rules/sim-styling.mdc @@ -47,7 +47,11 @@ setWidth: (width) => { ## Text Scale -Custom font sizes (the `@theme` block in `apps/sim/app/_styles/globals.css`): `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px. `text-sm` is Tailwind default 14px. Field titles use `text-small` (13px); hints/errors use `text-caption` (12px). +Use the named scale in `apps/sim/app/_styles/globals.css`: `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px, `text-md`=16px, `text-title`=28px, `text-title-lg`=32px, and `text-display`=40px. The explicitly adopted stock entries retain their rem units and default leading: `text-sm`=0.875rem, `text-xl`=1.25rem, and `text-2xl`=1.5rem (14/20/24px at the default root size). Field titles use `text-small`; hints/errors use `text-caption`; workflow titles use `text-md`. + +Preserve explicit line heights when replacing arbitrary sizes. Where the old size inherited its line height, use `leading-[inherit]` if the named utility would otherwise add a different default. Keep document-relative heading/code recipes and the thinking loader's proportional label sizing distinct from ordinary UI text. + +Use `font-inter` within the existing scoped Inter loading boundary; the utility does not load the font globally. Keep monospace for code, JSON, and credentials. Icons default `size-[14px]`. Equal h/w → `size-*` (`size-[14px]`, `size-4`), never `h-N w-N`. @@ -67,7 +71,7 @@ A scroll region that can hide rows past an edge uses `useScrollEdges` with `scro ## Font Weight -Three steps, Tailwind's stock scale, nothing else: **`font-normal` (400)**, **`font-medium` (500)**, **`font-semibold` (600)**. 400 is the document default, so body text, chip labels, sidebar items, and headings carry **no weight class at all** — they inherit. Reach for a class only to step *up* from body. +Three steps, explicitly adopted from Tailwind's stock scale in globals.css, nothing else: **`font-normal` (400)**, **`font-medium` (500)**, **`font-semibold` (600)**. 400 is the document default, so body text, chip labels, sidebar items, and headings carry **no weight class at all** — they inherit. Reach for a class to step *up* from body or to reset meaningful inherited weight. Raw CSS references the same `--font-weight-normal`, `--font-weight-medium`, and `--font-weight-semibold` definitions; their values remain 400/500/600. Never write an arbitrary weight (`font-[380]`, `font-[430]`, `font-[450]`, …), and never set `fontWeight` in an inline `style`. There was previously a CSS-variable weight scale (`--font-weight-base/medium/semibold`, remapping `font-medium` to 440/480) plus seven ad-hoc values clustered between 380 and 500; it was deleted because nothing read as hierarchical. Off-scale values are only acceptable where the design system genuinely cannot reach — react-email templates and the static `apps/sim/emails/broadcasts/*.html`, which email clients render without CSS variables. diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts index 6c908a7e883..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,7 +59,7 @@ 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( From 626b19b89146e09b4633f67d815404d35c3a33f6 Mon Sep 17 00:00:00 2001 From: Bill Leoutsakos Date: Tue, 22 Sep 2026 01:15:28 -0700 Subject: [PATCH 3/5] improvement(ui): align platform demo titles with workflow typography --- .../hero/components/hero-platform-loop/stage-block-card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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]' )} > - + {block.name} Date: Tue, 22 Sep 2026 01:29:27 -0700 Subject: [PATCH 4/5] chore(ui): clarify the xs line-height comment --- apps/sim/app/_styles/globals.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index 001e59ed8fc..6f480adc383 100644 --- a/apps/sim/app/_styles/globals.css +++ b/apps/sim/app/_styles/globals.css @@ -97,10 +97,9 @@ --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; From 69a0277de89c4727357effcf3e851aa34c153205 Mon Sep 17 00:00:00 2001 From: Bill Leoutsakos Date: Tue, 22 Sep 2026 01:43:45 -0700 Subject: [PATCH 5/5] improvement(ui): align public email verification help weight --- .../app/(interfaces)/chat/components/auth/email/email-auth.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx b/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx index 621a3eecc1e..7972106bfc9 100644 --- a/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx +++ b/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx @@ -229,7 +229,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {

-
+