improvement(docs): finish the platform token sweep

Follow-on within the same PR. A full comparison of every custom token docs
rolls against the platform found three more classes of drift.

Text scale — #6241 retuned these and docs kept the old values:
- `--text-body` #3b3b3b -> #434343 (light), #cdcdcd -> #c1c1c1 (dark)
- `--text-muted` #707070 -> #7a7a7a (light), #787878 -> #6e6e6e (dark)
- `--text-icon`  #525252 -> #5a5a5a (light), #a0a0a0 -> #969696 (dark)

Docs and the app now agree on all 62 shared token names, with zero divergent
values.

Missing shared-component tokens. Docs renders `@sim/emcn` (Badge, Chip,
ChipLink) and `@sim/workflow-renderer` (block, subflow and note views), but
never defined 14 of the tokens those components reference — an undefined
`var()` silently falls back to `currentColor`, so the failure is invisible
until the branch that uses it renders. Several are live: `--warning` on an
edited subflow, `--caution` on inline code inside a note, `--text-placeholder`
on an empty note, `--border-success` on a successful run edge. Added with the
app's values, along with `--text-icon-muted` (new in #6241) and the four Badge
palettes docs lacked (teal, cyan, pink, blue-secondary), so any variant renders
correctly rather than being one prop away from black.

Type scale — docs declares micro/xs/caption/small/base/md in `@theme` but 20
call sites bypassed it with identical raw values (`text-[13px]`,
`text-[0.8125rem]`, `text-[12px]`, `text-[15px]`, `text-[10px]`). Each now uses
the token; every value is byte-identical, so this is a rename, not a restyle.
The class reordering in the same files is biome's `useSortedClasses` reacting
to the rename — verified as a pure permutation, with the class multiset
unchanged in every file.

Deliberately left alone:
- `#33C482` / `#2FB3FF` — brand-mark SVG fills and default props in demo data,
  not styling.
- The Ask AI button's inverted `#383838`/`#575757`/`#e0e0e0`/`#cfcfcf`. The
  platform's `--surface-inverted`/`--surface-inverted-hover` hold *different*
  values, so adopting them would restyle the control rather than tokenize it.
  Worth doing, but as a visual change with review.

Author: waleedlatif1

apps/docs/app/global.css

@@ -71,10 +71,11 @@ body.wp-lightbox-open [aria-label="Ask Sim"] {
   --text-primary: #1a1a1a;
   --text-secondary: #525252;
   --text-tertiary: #5c5c5c;
-  --text-body: #3b3b3b;
-  --text-muted: #707070;
+  --text-body: #434343;
+  --text-muted: #7a7a7a;
   --text-subtle: #8c8c8c;
-  --text-icon: #525252;
+  --text-icon: #5a5a5a;
+  --text-icon-muted: #5c5c5c;
   --text-inverse: #ffffff;
   --text-error: #ef4444;
   --text-muted-inverse: #a0a0a0;
@@ -87,6 +88,23 @@ body.wp-lightbox-open [aria-label="Ask Sim"] {
   --border-muted: var(--border);
   --badge-success-bg: #bbf7d0;
   --badge-success-text: #15803d;
+  /* Shared-component tokens: referenced by @sim/emcn and @sim/workflow-renderer.
+     Undefined here, a var() silently falls back to currentColor. Values mirror
+     apps/sim/app/_styles/globals.css. */
+  --border-success: #e0e0e0;
+  --success: #22c55e;
+  --error: #dc2626;
+  --warning: #ea580c;
+  --caution: #f59e0b;
+  --text-placeholder: #8d8d8d;
+  --badge-teal-bg: #99f6e4;
+  --badge-teal-text: #0f766e;
+  --badge-cyan-bg: #cffafe;
+  --badge-cyan-text: #0891b2;
+  --badge-pink-bg: #fbcfe8;
+  --badge-pink-text: #be185d;
+  --badge-blue-secondary-bg: #bae6fd;
+  --badge-blue-secondary-text: #0369a1;
   --badge-blue-bg: #bfdbfe;
   --badge-blue-text: #1d4ed8;
   --badge-purple-bg: #e9d5ff;
@@ -122,10 +140,11 @@ body.wp-lightbox-open [aria-label="Ask Sim"] {
   --text-primary: #e6e6e6;
   --text-secondary: #cccccc;
   --text-tertiary: #b3b3b3;
-  --text-body: #cdcdcd;
-  --text-muted: #787878;
+  --text-body: #c1c1c1;
+  --text-muted: #6e6e6e;
   --text-subtle: #7d7d7d;
-  --text-icon: #a0a0a0;
+  --text-icon: #969696;
+  --text-icon-muted: #949494;
   --text-inverse: #1b1b1b;
   --text-error: #ef4444;
   --text-muted-inverse: #b3b3b3;
@@ -138,6 +157,23 @@ body.wp-lightbox-open [aria-label="Ask Sim"] {
   --border-muted: var(--border);
   --badge-success-bg: rgba(34, 197, 94, 0.2);
   --badge-success-text: #86efac;
+  /* Shared-component tokens: referenced by @sim/emcn and @sim/workflow-renderer.
+     Undefined here, a var() silently falls back to currentColor. Values mirror
+     apps/sim/app/_styles/globals.css. */
+  --border-success: #575757;
+  --success: #22c55e;
+  --error: #f87171;
+  --warning: #ff6600;
+  --caution: #f59e0b;
+  --text-placeholder: #8d8d8d;
+  --badge-teal-bg: rgba(20, 184, 166, 0.2);
+  --badge-teal-text: #5eead4;
+  --badge-cyan-bg: rgba(14, 165, 233, 0.2);
+  --badge-cyan-text: #7dd3fc;
+  --badge-pink-bg: rgba(236, 72, 153, 0.2);
+  --badge-pink-text: #f9a8d4;
+  --badge-blue-secondary-bg: rgba(51, 180, 255, 0.2);
+  --badge-blue-secondary-text: #7dd3fc;
   --badge-blue-bg: rgba(59, 130, 246, 0.2);
   --badge-blue-text: #93c5fd;
   --badge-purple-bg: rgba(168, 85, 247, 0.2);

apps/docs/components/docs-layout/sidebar-components.tsx

@@ -56,7 +56,7 @@ const ITEM_BASE =
 const ITEM_ACTIVE_MOBILE = 'bg-[var(--surface-active)] font-medium text-[var(--text-primary)]'
 
 const ITEM_DESKTOP =
-  'lg:mb-[0.0625rem] lg:block lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:font-normal lg:text-[13px] lg:leading-tight'
+  'lg:mb-[0.0625rem] lg:block lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:font-normal lg:text-small lg:leading-tight'
 const ITEM_TEXT = 'lg:text-[var(--text-body)]'
 const ITEM_HOVER = 'lg:hover:bg-[var(--surface-3)]'
 const ITEM_ACTIVE = 'lg:bg-[var(--surface-active)] lg:font-normal lg:text-[var(--text-body)]'
@@ -144,7 +144,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
                 'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
                 'text-[var(--text-muted)] hover:bg-[var(--surface-active)] hover:text-[var(--text-body)]',
                 active && ITEM_ACTIVE_MOBILE,
-                'lg:block lg:flex-1 lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:text-[13px] lg:leading-tight',
+                'lg:block lg:flex-1 lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:text-small lg:leading-tight',
                 FOLDER_TEXT,
                 !active && FOLDER_HOVER,
                 active && FOLDER_ACTIVE
@@ -171,7 +171,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
             className={cn(
               'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
               'text-[var(--text-muted)] hover:bg-[var(--surface-active)]',
-              'lg:flex lg:w-full lg:cursor-pointer lg:items-center lg:justify-between lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:text-left lg:text-[13px] lg:leading-tight',
+              'lg:flex lg:w-full lg:cursor-pointer lg:items-center lg:justify-between lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:text-left lg:text-small lg:leading-tight',
               FOLDER_TEXT,
               FOLDER_HOVER
             )}
@@ -214,7 +214,7 @@ export function SidebarSeparator({ item }: { item: Separator }) {
       <p
         className={cn(
           'font-medium text-[var(--text-muted)] text-xs',
-          'lg:font-semibold lg:text-[10px] lg:text-[var(--text-muted)] lg:uppercase lg:tracking-[0.06em]'
+          'lg:font-semibold lg:text-[var(--text-muted)] lg:text-micro lg:uppercase lg:tracking-[0.06em]'
         )}
       >
         {item.name}

apps/docs/components/page-type-badge.tsx

@@ -42,7 +42,7 @@ export function PageTypeBadge({ type, className }: PageTypeBadgeProps) {
   return (
     <span
       className={cn(
-        'inline-flex items-center gap-1.5 rounded-md px-[9px] py-0.5 font-medium font-season text-[12px] transition-colors',
+        'inline-flex items-center gap-1.5 rounded-md px-[9px] py-0.5 font-medium font-season text-caption transition-colors',
         config.className,
         className
       )}

apps/docs/components/ui/search-trigger.tsx

@@ -34,8 +34,8 @@ export function SearchTrigger() {
       <Search className={chipContentIconClass} />
       <span>Search&hellip;</span>
       <kbd className='ml-auto flex items-center'>
-        <span className='text-[15px]'>⌘</span>
-        <span className='text-[12px]'>K</span>
+        <span className='text-base'>⌘</span>
+        <span className='text-caption'>K</span>
       </kbd>
     </button>
   )

apps/docs/components/ui/video-chapters.tsx

@@ -43,7 +43,7 @@ export function VideoChapters({ title = 'Chapters', chapters, className }: Video
 
   return (
     <aside className={cn('not-prose', className)}>
-      <p className='mb-2 px-2.5 font-medium text-[0.8125rem] text-[var(--text-muted)]'>{title}</p>
+      <p className='mb-2 px-2.5 font-medium text-[var(--text-muted)] text-small'>{title}</p>
       <ul className='m-0 flex list-none flex-col gap-0.5 p-0'>
         {chapters.map((chapter) => (
           <li key={chapter.title}>

apps/docs/components/ui/video-placeholder.tsx

@@ -143,7 +143,7 @@ export function VideoPlaceholder({
 
       {/* Top-right status pill — only until a video is wired up */}
       {!hasVideo && (
-        <span className='absolute top-6 right-6 z-10 inline-flex items-center gap-2 rounded-full border border-[var(--border-1)] bg-[var(--surface-2)] px-4 py-2 font-medium text-[12px] text-[var(--text-secondary)] uppercase tracking-[0.14em] md:top-8 md:right-8 dark:bg-[var(--surface-1)]'>
+        <span className='absolute top-6 right-6 z-10 inline-flex items-center gap-2 rounded-full border border-[var(--border-1)] bg-[var(--surface-2)] px-4 py-2 font-medium text-[var(--text-secondary)] text-caption uppercase tracking-[0.14em] md:top-8 md:right-8 dark:bg-[var(--surface-1)]'>
           <span className='size-1.5 rounded-full bg-[var(--brand-accent)]' />
           {label}
         </span>

apps/docs/components/ui/what-you-will-learn.tsx

@@ -19,9 +19,7 @@ interface WhatYouWillLearnProps {
 export function WhatYouWillLearn({ items, className }: WhatYouWillLearnProps) {
   return (
     <div className={cn('not-prose', className)}>
-      <p className='mb-3 font-medium text-[0.8125rem] text-[var(--text-muted)]'>
-        What you will learn
-      </p>
+      <p className='mb-3 font-medium text-[var(--text-muted)] text-small'>What you will learn</p>
       <div className='divide-y divide-[var(--border)]'>
         {items.map((item) => (
           <div key={item.title} className='py-3.5 first:pt-0 last:pb-0'>

apps/docs/components/workflow-preview/block-inspector.tsx

@@ -101,7 +101,7 @@ function FieldControl({ field }: { field: InspectorField }) {
             style={{ left: `calc(${percent}% - 6px)` }}
           />
         </div>
-        <span className='text-[13px] text-[var(--text-primary)]'>{field.value}</span>
+        <span className='text-[var(--text-primary)] text-small'>{field.value}</span>
       </div>
     )
   }

apps/docs/components/workflow-preview/output-bundle.tsx

@@ -64,7 +64,7 @@ function TreeNode({ node, depth = 0 }: { node: OutputNode; depth?: number }) {
     <div className='flex min-w-0 flex-col'>
       <div className='flex min-h-[26px] items-center gap-2 rounded-[6px] px-1'>
         <span
-          className='text-[13px]'
+          className='text-small'
           style={{ color: node.highlight ? 'var(--brand-secondary)' : 'var(--text-primary)' }}
         >
           {node.key}
@@ -82,7 +82,7 @@ function TreeNode({ node, depth = 0 }: { node: OutputNode; depth?: number }) {
                 <TreeNode key={child.key} node={child} depth={depth + 1} />
               ))
             : node.value !== undefined && (
-                <div className='py-0.5 text-[13px] text-[var(--text-secondary)]'>{node.value}</div>
+                <div className='py-0.5 text-[var(--text-secondary)] text-small'>{node.value}</div>
               )}
         </div>
       )}
@@ -112,7 +112,7 @@ export function OutputBundle({
     <div className='not-prose my-6 flex w-full max-w-[640px] flex-col gap-3'>
       <div className='flex overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--surface-1)]'>
         <div className='flex w-[210px] flex-shrink-0 flex-col border-[var(--border)] border-r px-2 py-2'>
-          <div className='px-2 pb-2 text-[12px] text-[var(--text-muted)]'>Logs</div>
+          <div className='px-2 pb-2 text-[var(--text-muted)] text-caption'>Logs</div>
           {logRows.map((row) => {
             const Icon = row.type ? resolveIcon(row.type) : null
             return (
@@ -127,9 +127,9 @@ export function OutputBundle({
                 >
                   {Icon && <Icon className='size-[10px] text-white' />}
                 </div>
-                <span className='truncate text-[13px] text-[var(--text-primary)]'>{row.name}</span>
+                <span className='truncate text-[var(--text-primary)] text-small'>{row.name}</span>
                 {row.duration && (
-                  <span className='ml-auto text-[12px] text-[var(--text-muted)]'>
+                  <span className='ml-auto text-[var(--text-muted)] text-caption'>
                     {row.duration}
                   </span>
                 )}
@@ -140,8 +140,8 @@ export function OutputBundle({
 
         <div className='flex min-w-0 flex-1 flex-col px-3 py-2'>
           <div className='flex items-center gap-3 pb-2'>
-            <span className='text-[13px] text-[var(--text-primary)]'>Output</span>
-            <span className='text-[13px] text-[var(--text-muted)]'>Input</span>
+            <span className='text-[var(--text-primary)] text-small'>Output</span>
+            <span className='text-[var(--text-muted)] text-small'>Input</span>
             <span className='ml-auto flex items-center gap-2 text-[var(--text-subtle)]'>
               <Search className='size-[12px]' />
               <Clipboard className='size-[12px]' />

apps/docs/components/workflow-preview/workflow-preview.tsx

@@ -325,7 +325,7 @@ export function WorkflowPreview({
           >
             <div className='relative min-w-0 flex-1'>
               <div className='pointer-events-none absolute top-0 right-0 left-0 z-10 flex items-center justify-between px-4 py-3'>
-                <span className='text-[13px] text-[var(--text-muted)]'>{workflow.name}</span>
+                <span className='text-[var(--text-muted)] text-small'>{workflow.name}</span>
                 <button
                   ref={closeButtonRef}
                   type='button'
@@ -360,7 +360,7 @@ export function WorkflowPreview({
                   tools={selectedBlock.tools}
                 />
               ) : (
-                <div className='flex h-full items-center justify-center px-6 text-center text-[13px] text-[var(--text-muted)]'>
+                <div className='flex h-full items-center justify-center px-6 text-center text-[var(--text-muted)] text-small'>
                   Select a block to see its full configuration
                 </div>
               )}