improvement(emcn): let every primitive inherit the document font weight

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-logs/landing-preview-logs.tsx

@@ -236,10 +236,7 @@ export function LandingPreviewLogs() {
           <thead className='border-[var(--border)] border-b'>
             <tr>
               {COL_HEADERS.map(({ key, label }) => (
-                <th
-                  key={key}
-                  className='h-10 px-6 py-1.5 text-left align-middle font-normal text-caption'
-                >
+                <th key={key} className='h-10 px-6 py-1.5 text-left align-middle text-caption'>
                   <button
                     type='button'
                     onClick={() => handleSort(key)}

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-resource/landing-preview-resource.tsx

@@ -131,10 +131,7 @@ export function LandingPreviewResource({
           <thead className='border-[var(--border)] border-b'>
             <tr>
               {columns.map((col) => (
-                <th
-                  key={col.id}
-                  className='h-10 px-6 py-1.5 text-left align-middle font-normal text-caption'
-                >
+                <th key={col.id} className='h-10 px-6 py-1.5 text-left align-middle text-caption'>
                   <button
                     type='button'
                     onClick={() => handleSortClick(col.id)}

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-tables/landing-preview-tables.tsx

@@ -467,7 +467,7 @@ function SpreadsheetView({ tableId, tableName, onBack }: SpreadsheetViewProps) {
                   <th key={col.id} className={CELL_HEADER}>
                     <div className='flex h-full w-full min-w-0 items-center px-2 py-[7px]'>
                       <Icon className='size-3 shrink-0 text-[var(--text-icon)]' />
-                      <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
+                      <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap text-[var(--text-primary)] text-small'>
                         {col.label}
                       </span>
                       <ChevronDown className='ml-auto size-[14px] shrink-0 text-[var(--text-muted)]' />

apps/sim/app/(landing)/knowledge/components/knowledge-hero-loop.tsx

@@ -214,7 +214,7 @@ export function KnowledgeHeroLoop() {
                   {COL_HEADERS.map((header) => (
                     <th
                       key={header}
-                      className='h-10 px-6 py-1.5 text-left align-middle font-normal text-[var(--text-muted)] text-caption'
+                      className='h-10 px-6 py-1.5 text-left align-middle text-[var(--text-muted)] text-caption'
                     >
                       {header}
                     </th>

apps/sim/app/(landing)/logs/components/logs-hero-loop.tsx

@@ -335,7 +335,7 @@ export function LogsHeroLoop() {
                   {COL_HEADERS.map((label) => (
                     <th
                       key={label}
-                      className='h-10 px-6 py-1.5 text-left align-middle font-normal text-[var(--text-muted)] text-caption'
+                      className='h-10 px-6 py-1.5 text-left align-middle text-[var(--text-muted)] text-caption'
                     >
                       {label}
                     </th>

apps/sim/app/(landing)/tables/components/tables-hero-loop.tsx

@@ -316,7 +316,7 @@ function TablesGridPane({ rowCount, filledCount }: TablesGridPaneProps) {
                   <th key={column.id} className={CELL_HEADER}>
                     <div className='flex h-full w-full min-w-0 items-center px-2 py-[7px]'>
                       <Icon className='size-3 shrink-0 text-[var(--text-icon)]' />
-                      <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
+                      <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap text-[var(--text-primary)] text-small'>
                         {column.label}
                       </span>
                       <ChevronDown className='ml-auto size-[14px] shrink-0 text-[var(--text-muted)]' />

apps/sim/app/_styles/globals.css

@@ -658,6 +658,15 @@ html.sidebar-booting .sidebar-shell-inner {
     letter-spacing: 0.28px;
   }
 
+  /* Completes Preflight, which resets h1-h6 to `inherit` but leaves `th` at the
+     UA `bold`. Without this a table header, and every label, input, and button
+     inside it, silently renders at 700 — so `font-medium` on a header reads as
+     a step DOWN, and removing it makes the header heavier. Normalized here once
+     rather than neutralized at each `<th>`. */
+  th {
+    font-weight: inherit;
+  }
+
   /* Ensure visible text caret across inputs and editors */
   input,
   textarea,

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx

@@ -71,7 +71,7 @@ export function NewColumnDropdown({
         onClick={blocked ? onBlocked : undefined}
       >
         <Plus className='size-[14px] shrink-0 text-[var(--text-icon)]' />
-        <span className='font-medium text-[var(--text-body)] text-small'>New column</span>
+        <span className='text-[var(--text-body)] text-small'>New column</span>
       </button>
     )
 

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx

@@ -162,8 +162,9 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
 
       const ghost = document.createElement('div')
       ghost.textContent = ghostLabel
+      ghost.className = 'text-small'
       ghost.style.cssText =
-        'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;font-size:13px;font-weight:500;white-space:nowrap;color:var(--text-primary)'
+        'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;white-space:nowrap;color:var(--text-primary)'
       document.body.appendChild(ghost)
       e.dataTransfer.setDragImage(ghost, ghost.offsetWidth / 2, ghost.offsetHeight / 2)
       requestAnimationFrame(() => ghost.parentNode?.removeChild(ghost))
@@ -284,7 +285,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
               if (e.key === 'Escape') onRenameCancel()
             }}
             onBlur={onRenameSubmit}
-            className='ml-1.5 min-w-0 flex-1 border-0 bg-transparent p-0 font-medium text-[var(--text-primary)] text-small outline-none focus:outline-none focus:ring-0'
+            className='ml-1.5 min-w-0 flex-1 border-0 bg-transparent p-0 text-[var(--text-primary)] text-small outline-none focus:outline-none focus:ring-0'
           />
         </div>
       ) : readOnly ? (
@@ -295,7 +296,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
             blockIconInfo={sourceInfo?.blockIconInfo}
             blockMissing={blockMissing}
           />
-          <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[13px] text-[var(--text-primary)]'>
+          <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap text-[var(--text-primary)] text-small'>
             {column.workflowGroupId ? column.headerLabel : column.name}
           </span>
         </div>
@@ -313,7 +314,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
               blockIconInfo={sourceInfo?.blockIconInfo}
               blockMissing={blockMissing}
             />
-            <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
+            <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap text-[var(--text-primary)] text-small'>
               {column.workflowGroupId ? column.headerLabel : column.name}
             </span>
           </button>

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx

@@ -368,8 +368,9 @@ export function WorkflowGroupMetaCell({
 
     const ghost = document.createElement('div')
     ghost.textContent = name
+    ghost.className = 'text-xs'
     ghost.style.cssText =
-      'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;font-size:13px;font-weight:500;white-space:nowrap;color:var(--text-primary)'
+      'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;white-space:nowrap;color:var(--text-primary)'
     document.body.appendChild(ghost)
     e.dataTransfer.setDragImage(ghost, ghost.offsetWidth / 2, ghost.offsetHeight / 2)
     requestAnimationFrame(() => ghost.parentNode?.removeChild(ghost))
@@ -438,9 +439,7 @@ export function WorkflowGroupMetaCell({
         ) : (
           <Workflow className='size-[12px] shrink-0 text-[var(--text-icon)]' />
         )}
-        <span className='min-w-0 truncate font-medium text-[11px] text-[var(--text-secondary)]'>
-          {name}
-        </span>
+        <span className='min-w-0 truncate text-[var(--text-secondary)] text-xs'>{name}</span>
         {onRunColumn && (
           <DropdownMenu open={runMenuOpen} onOpenChange={setRunMenuOpen}>
             <DropdownMenuTrigger asChild>

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx

@@ -1687,11 +1687,10 @@ export function TableGrid({
     host.appendChild(measure)
 
     try {
-      measure.className = 'font-medium text-small'
+      measure.className = 'text-small'
       measure.textContent = column.headerLabel
       maxWidth = Math.max(maxWidth, measure.getBoundingClientRect().width + 57)
 
-      measure.className = 'text-small'
       for (const row of currentRows) {
         const val = row.data[column.key]
         if (val == null) continue

packages/emcn/src/AGENTS.md

@@ -6,6 +6,6 @@ These rules apply to `packages/emcn/**`.
 - Use Radix UI primitives for accessibility where applicable.
 - Use CVA when a component has 2+ variants; use direct `className` composition for single-style components.
 - Export both the component and its variants helper when using CVA.
-- Keep tokens consistent with the chip-pill canonical look: normal font-weight, `--text-body` value text, `--text-icon` icons at `size-[14px]`, `rounded-lg`. Components own their exact tokens (e.g. `Button` uses `rounded-[5px]`+`font-medium`). See `.claude/rules/emcn-components.md` for the full chip-chrome reference.
+- Keep tokens consistent with the chip-pill canonical look: normal font-weight, `--text-body` value text, `--text-icon` icons at `size-[14px]`, `rounded-lg`. Components own their exact geometry tokens (e.g. `Button` uses `rounded-[5px]`), but never their own font-weight — every primitive inherits the document 400, and a weight class is reached for only to step deliberately up. See `.claude/rules/emcn-components.md` for the full chip-chrome reference.
 - Prefer `transition-colors` for interactive hover and active states.
 - Use TSDoc when documenting public components or APIs.

packages/emcn/src/components/avatar/avatar.tsx

@@ -133,6 +133,11 @@ AvatarImage.displayName = 'AvatarImage'
 
 /**
  * Fallback component for Avatar. Displays initials or icon when image is unavailable.
+ *
+ * Carries the package's only hardcoded `font-medium`, and deliberately: one or
+ * two capitals at `text-xs` on a filled disc are a glyph, not running text, and
+ * need the extra mass to read at avatar sizes. This is the sanctioned "step up
+ * from body" — every other primitive inherits the document 400.
  */
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,

packages/emcn/src/components/badge/badge.tsx

@@ -5,41 +5,38 @@ import { cn } from '../../lib/cn'
 /** Shared base styles for status color badge variants */
 const STATUS_BASE = 'gap-1.5 rounded-md'
 
-const badgeVariants = cva(
-  'inline-flex items-center font-medium focus:outline-none transition-colors',
-  {
-    variants: {
-      variant: {
-        default:
-          'gap-1 rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] hover-hover:text-[var(--text-primary)] hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]',
-        outline:
-          'gap-1 rounded-[40px] border border-[var(--border-1)] bg-transparent text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)] hover-hover:bg-[var(--surface-5)] dark:hover-hover:bg-transparent dark:hover-hover:border-[var(--surface-6)]',
-        type: 'gap-1 rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] dark:bg-[var(--surface-6)]',
-        green: `${STATUS_BASE} bg-[var(--badge-success-bg)] text-[var(--badge-success-text)]`,
-        red: `${STATUS_BASE} bg-[var(--badge-error-bg)] text-[var(--badge-error-text)]`,
-        gray: `${STATUS_BASE} bg-[var(--badge-gray-bg)] text-[var(--badge-gray-text)]`,
-        blue: `${STATUS_BASE} bg-[var(--badge-blue-bg)] text-[var(--badge-blue-text)]`,
-        'blue-secondary': `${STATUS_BASE} bg-[var(--badge-blue-secondary-bg)] text-[var(--badge-blue-secondary-text)]`,
-        purple: `${STATUS_BASE} bg-[var(--badge-purple-bg)] text-[var(--badge-purple-text)]`,
-        orange: `${STATUS_BASE} bg-[var(--badge-orange-bg)] text-[var(--badge-orange-text)]`,
-        amber: `${STATUS_BASE} bg-[var(--badge-amber-bg)] text-[var(--badge-amber-text)]`,
-        teal: `${STATUS_BASE} bg-[var(--badge-teal-bg)] text-[var(--badge-teal-text)]`,
-        cyan: `${STATUS_BASE} bg-[var(--badge-cyan-bg)] text-[var(--badge-cyan-text)]`,
-        pink: `${STATUS_BASE} bg-[var(--badge-pink-bg)] text-[var(--badge-pink-text)]`,
-        'gray-secondary': `${STATUS_BASE} bg-[var(--surface-4)] text-[var(--text-secondary)]`,
-      },
-      size: {
-        sm: 'px-[7px] py-[1px] text-xs',
-        md: 'px-[9px] py-0.5 text-caption',
-        lg: 'px-[9px] py-[2.25px] text-caption',
-      },
+const badgeVariants = cva('inline-flex items-center focus:outline-none transition-colors', {
+  variants: {
+    variant: {
+      default:
+        'gap-1 rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] hover-hover:text-[var(--text-primary)] hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]',
+      outline:
+        'gap-1 rounded-[40px] border border-[var(--border-1)] bg-transparent text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)] hover-hover:bg-[var(--surface-5)] dark:hover-hover:bg-transparent dark:hover-hover:border-[var(--surface-6)]',
+      type: 'gap-1 rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] dark:bg-[var(--surface-6)]',
+      green: `${STATUS_BASE} bg-[var(--badge-success-bg)] text-[var(--badge-success-text)]`,
+      red: `${STATUS_BASE} bg-[var(--badge-error-bg)] text-[var(--badge-error-text)]`,
+      gray: `${STATUS_BASE} bg-[var(--badge-gray-bg)] text-[var(--badge-gray-text)]`,
+      blue: `${STATUS_BASE} bg-[var(--badge-blue-bg)] text-[var(--badge-blue-text)]`,
+      'blue-secondary': `${STATUS_BASE} bg-[var(--badge-blue-secondary-bg)] text-[var(--badge-blue-secondary-text)]`,
+      purple: `${STATUS_BASE} bg-[var(--badge-purple-bg)] text-[var(--badge-purple-text)]`,
+      orange: `${STATUS_BASE} bg-[var(--badge-orange-bg)] text-[var(--badge-orange-text)]`,
+      amber: `${STATUS_BASE} bg-[var(--badge-amber-bg)] text-[var(--badge-amber-text)]`,
+      teal: `${STATUS_BASE} bg-[var(--badge-teal-bg)] text-[var(--badge-teal-text)]`,
+      cyan: `${STATUS_BASE} bg-[var(--badge-cyan-bg)] text-[var(--badge-cyan-text)]`,
+      pink: `${STATUS_BASE} bg-[var(--badge-pink-bg)] text-[var(--badge-pink-text)]`,
+      'gray-secondary': `${STATUS_BASE} bg-[var(--surface-4)] text-[var(--text-secondary)]`,
     },
-    defaultVariants: {
-      variant: 'default',
-      size: 'md',
+    size: {
+      sm: 'px-[7px] py-[1px] text-xs',
+      md: 'px-[9px] py-0.5 text-caption',
+      lg: 'px-[9px] py-[2.25px] text-caption',
     },
-  }
-)
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'md',
+  },
+})
 
 /** Color variants that support dot indicators */
 const STATUS_VARIANTS = [

packages/emcn/src/components/button-group/button-group.tsx

@@ -100,7 +100,7 @@ function ButtonGroup({
 }
 
 const buttonGroupItemVariants = cva(
-  'inline-flex items-center justify-center font-medium transition-colors outline-none focus:outline-none focus-visible:outline-none disabled:pointer-events-none disabled:opacity-70 px-2 py-1 text-caption border',
+  'inline-flex items-center justify-center transition-colors outline-none focus:outline-none focus-visible:outline-none disabled:pointer-events-none disabled:opacity-70 px-2 py-1 text-caption border',
   {
     variants: {
       active: {

packages/emcn/src/components/button/button.tsx

@@ -21,7 +21,7 @@ import { cn } from '../../lib/cn'
  * @example <Button variant='quiet' size='icon' aria-label='Dismiss'><X className='size-[16px]' /></Button>
  */
 const buttonVariants = cva(
-  'inline-flex items-center justify-center font-medium transition-colors disabled:pointer-events-none disabled:opacity-70 outline-none focus:outline-none focus-visible:outline-none rounded-[5px]',
+  'inline-flex items-center justify-center transition-colors disabled:pointer-events-none disabled:opacity-70 outline-none focus:outline-none focus-visible:outline-none rounded-[5px]',
   {
     variants: {
       variant: {

packages/emcn/src/components/chip-combobox/chip-combobox.tsx

@@ -11,8 +11,9 @@ import { Combobox, type ComboboxProps } from '../combobox/combobox'
  * Reuses 100% of `Combobox` — search, editable entry, multi-select, groups,
  * async loading, per-option icons, and `overlayContent` all work unchanged.
  * Only the trigger chrome is overridden (the `className` merges last in
- * `Combobox`, so `rounded-lg` / height / dark surface and the chip typography
- * — normal weight, `--text-body` — win over the heavier combobox defaults).
+ * `Combobox`, so `rounded-lg` / height / dark surface and the chip `--text-body`
+ * color win over the combobox defaults). Weight is no longer overridden here —
+ * `Combobox` inherits the document's 400, which is already the chip weight.
  * The muted placeholder still applies because the combobox tints the inner
  * label span with `--text-muted` independently of the trigger className.
  *
@@ -27,7 +28,7 @@ export function ChipCombobox({ className, ...props }: ComboboxProps) {
     <Combobox
       {...props}
       className={cn(
-        'h-[30px] rounded-lg font-normal text-[var(--text-body)] dark:bg-[var(--surface-4)]',
+        'h-[30px] rounded-lg text-[var(--text-body)] dark:bg-[var(--surface-4)]',
         className
       )}
     />

packages/emcn/src/components/chip-modal/chip-modal.tsx

@@ -623,10 +623,7 @@ function ChipModalField(props: ChipModalFieldProps) {
 
   return (
     <div className={cn('flex flex-col gap-[9px]', flush ? 'px-0' : 'px-2', className)}>
-      <Label
-        htmlFor={associatesLabel ? id : undefined}
-        className='pl-0.5 font-normal text-[var(--text-muted)]'
-      >
+      <Label htmlFor={associatesLabel ? id : undefined} className='pl-0.5 text-[var(--text-muted)]'>
         {title}
         {required && (
           <span aria-hidden className='ml-0.5 text-[var(--text-error)]'>

packages/emcn/src/components/code/code.tsx

@@ -481,7 +481,7 @@ function Container({ children, className, style, onDragOver, onDrop }: CodeConta
       className={cn(
         // Base container styling
         'group relative min-h-[100px] rounded-sm border border-[var(--border-1)]',
-        'bg-[var(--surface-1)] font-medium font-mono text-sm transition-colors',
+        'bg-[var(--surface-1)] font-mono text-sm transition-colors',
         'dark:bg-[var(--code-bg)]',
         // Overflow handling for long content
         'overflow-x-auto overflow-y-auto',
@@ -544,7 +544,7 @@ export function getCodeEditorProps(options?: {
     padding: 8,
     className: cn(
       // Base editor classes
-      'bg-transparent font-[inherit] text-[inherit] font-medium',
+      'bg-transparent font-[inherit] text-[inherit]',
       'text-[var(--text-primary)] dark:text-[var(--code-foreground)]',
       'leading-[21px] outline-none focus:outline-none',
       'min-h-[106px]',
@@ -1079,7 +1079,7 @@ const VirtualizedViewerInner = memo(function VirtualizedViewerInner({
       ref={setRefs}
       className={cn(
         'code-editor-theme relative rounded-sm border border-[var(--border-1)]',
-        'bg-[var(--surface-1)] font-medium font-mono text-sm',
+        'bg-[var(--surface-1)] font-mono text-sm',
         wrapText ? 'overflow-x-hidden' : 'overflow-x-auto',
         'overflow-y-auto',
         'dark:bg-[var(--code-bg)]',

packages/emcn/src/components/collapsible-card/collapsible-card.tsx

@@ -45,9 +45,7 @@ export function CollapsibleCard({
         onKeyDown={(event) => handleKeyboardActivation(event, onToggleCollapse)}
       >
         <div className='flex min-w-0 flex-1 items-center gap-2'>
-          <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
-            {title}
-          </span>
+          <span className='block truncate text-[var(--text-tertiary)] text-sm'>{title}</span>
           {badge}
         </div>
       </div>