diff --git a/BitFun-Installer/src/components/InstallErrorPanel.tsx b/BitFun-Installer/src/components/InstallErrorPanel.tsx
index 34c2b5b436..3475ce98e3 100644
--- a/BitFun-Installer/src/components/InstallErrorPanel.tsx
+++ b/BitFun-Installer/src/components/InstallErrorPanel.tsx
@@ -26,8 +26,8 @@ export function InstallErrorPanel({ message, variant = 'options' }: InstallError
         border: '1px solid color-mix(in srgb, var(--bf-color-border-default) 70%, transparent)',
         background: 'color-mix(in srgb, var(--bf-color-surface-subtle) 80%, transparent)',
         color: 'var(--bf-color-content-secondary)',
-        fontSize: 11,
-        lineHeight: 1.55,
+        fontSize: 'var(--bf-type-support-font-size)',
+        lineHeight: 'var(--bf-type-support-line-height)',
         textAlign: variant === 'bare' ? 'center' : 'left',
       }}
     >
@@ -41,8 +41,8 @@ export function InstallErrorPanel({ message, variant = 'options' }: InstallError
         <div
           style={{
             color: 'var(--bf-color-content-muted)',
-            fontSize: 12,
-            lineHeight: 1.6,
+            fontSize: 'var(--bf-type-body-xs-font-size)',
+            lineHeight: 'var(--bf-type-body-lg-line-height)',
             textAlign: 'center',
             maxWidth: 320,
           }}
@@ -63,8 +63,8 @@ export function InstallErrorPanel({ message, variant = 'options' }: InstallError
         border: '1px solid color-mix(in srgb, var(--bf-color-status-danger-content) 55%, transparent)',
         background: 'color-mix(in srgb, var(--bf-color-status-danger-content) 10%, transparent)',
         color: 'var(--bf-color-content-primary)',
-        fontSize: 12,
-        lineHeight: 1.5,
+        fontSize: 'var(--bf-type-body-xs-font-size)',
+        lineHeight: 'var(--bf-type-body-md-line-height)',
       }}
     >
       {text}
diff --git a/BitFun-Installer/src/pages/LanguageSelect.tsx b/BitFun-Installer/src/pages/LanguageSelect.tsx
index 9c3e34403e..ce11cbe215 100644
--- a/BitFun-Installer/src/pages/LanguageSelect.tsx
+++ b/BitFun-Installer/src/pages/LanguageSelect.tsx
@@ -47,9 +47,13 @@ export function LanguageSelect({ onSelect }: LanguageSelectProps) {
             filter: 'drop-shadow(0 0 40px color-mix(in srgb, var(--bf-color-accent-default) 8%, transparent))',
           }} />
           <h1 style={{
-            fontFamily: 'var(--bf-font-family-sans)', fontSize: 42, fontWeight: 700,
-            color: 'var(--bf-color-content-primary)', letterSpacing: '-0.03em',
-            lineHeight: 0.95, margin: '0 0 16px 0',
+            fontFamily: 'var(--bf-type-display-md-font-family)',
+            fontSize: 'var(--bf-type-display-md-font-size)',
+            fontWeight: 'var(--bf-type-heading-page-font-weight)',
+            color: 'var(--bf-color-content-primary)',
+            letterSpacing: 'var(--bf-type-display-md-letter-spacing)',
+            lineHeight: 'var(--bf-type-display-md-line-height)',
+            margin: '0 0 16px 0',
             textShadow: '0 0 60px color-mix(in srgb, var(--bf-color-accent-default) 15%, transparent)',
           }}>BitFun</h1>
         </div>
@@ -67,10 +71,10 @@ export function LanguageSelect({ onSelect }: LanguageSelectProps) {
             margin: '0 auto',
             padding: '0 24px',
             textAlign: 'center',
-            fontSize: 11,
+            fontSize: 'var(--bf-type-support-font-size)',
             color: 'var(--bf-color-content-muted)',
             opacity: 0.6,
-            letterSpacing: '0.5px',
+            letterSpacing: 'var(--bf-type-modifier-tracking-wider-letter-spacing)',
           }}>
             Version 0.2.15
           </div>
@@ -114,7 +118,7 @@ export function LanguageSelect({ onSelect }: LanguageSelectProps) {
                         cursor: 'pointer', textAlign: 'left',
                         transition: 'all 0.25s ease',
                         outline: 'none',
-                        fontFamily: 'var(--bf-font-family-sans)',
+                        fontFamily: 'var(--bf-type-label-lg-font-family)',
                         boxShadow: 'none',
                       }}
                       onMouseEnter={(e) => {
@@ -130,12 +134,13 @@ export function LanguageSelect({ onSelect }: LanguageSelectProps) {
                     >
                       <div style={{ flex: 1 }}>
                         <div style={{
-                          fontSize: 14, fontWeight: 500,
+                          fontSize: 'var(--bf-type-label-lg-font-size)',
+                          fontWeight: 'var(--bf-type-label-lg-font-weight)',
                           color: isSelected ? 'var(--bf-color-content-primary)' : 'var(--bf-color-content-secondary)',
                           transition: 'color 0.2s ease',
                         }}>{lang.nativeName}</div>
                         <div style={{
-                          fontSize: 11,
+                          fontSize: 'var(--bf-type-support-font-size)',
                           color: 'var(--bf-color-content-muted)', opacity: 0.7,
                           marginTop: 2,
                         }}>{lang.label}</div>
diff --git a/BitFun-Installer/src/pages/Options.tsx b/BitFun-Installer/src/pages/Options.tsx
index d99151efd6..7ac50896e6 100644
--- a/BitFun-Installer/src/pages/Options.tsx
+++ b/BitFun-Installer/src/pages/Options.tsx
@@ -79,7 +79,11 @@ export function Options({
     <div className="page-shell">
       <div className="page-scroll">
         <div className="page-container page-container--center" style={{ maxWidth: 560 }}>
-          <div style={{ marginBottom: 8, fontSize: 12, color: 'var(--bf-color-content-muted)' }}>
+          <div style={{
+            marginBottom: 8,
+            fontSize: 'var(--bf-type-body-xs-font-size)',
+            color: 'var(--bf-color-content-muted)',
+          }}>
             {t('options.subtitle')}
           </div>
           {existingInstall?.detected ? (
@@ -90,12 +94,15 @@ export function Options({
                 borderRadius: 10,
                 border: '1px solid color-mix(in srgb, var(--bf-color-accent-default) 45%, transparent)',
                 background: 'color-mix(in srgb, var(--bf-color-accent-default) 8%, transparent)',
-                fontSize: 12,
-                lineHeight: 1.55,
+                fontSize: 'var(--bf-type-body-xs-font-size)',
+                lineHeight: 'var(--bf-type-support-line-height)',
                 color: 'var(--bf-color-content-primary)',
               }}
             >
-              <div style={{ fontWeight: 600, marginBottom: 8 }}>{t('options.existingInstallTitle')}</div>
+              <div style={{
+                fontWeight: 'var(--bf-type-label-selected-font-weight)',
+                marginBottom: 8,
+              }}>{t('options.existingInstallTitle')}</div>
               {existingInstall.displayVersion ? (
                 <div style={{ marginBottom: 4, wordBreak: 'break-all' }}>
                   {t('options.existingInstallVersion', { version: existingInstall.displayVersion })}
@@ -117,7 +124,7 @@ export function Options({
                   <button
                     type="button"
                     className="btn"
-                    style={{ padding: '8px 12px', fontSize: 12 }}
+                    style={{ padding: '8px 12px', fontSize: 'var(--bf-type-body-xs-font-size)' }}
                     onClick={() => {
                       void onLaunchRegisteredUninstaller();
                     }}
@@ -172,7 +179,7 @@ export function Options({
                   display: 'flex',
                   gap: 16,
                   marginTop: 8,
-                  fontSize: 11,
+                  fontSize: 'var(--bf-type-support-font-size)',
                   color: 'var(--bf-color-content-muted)',
                   opacity: 0.7,
                   flexWrap: 'wrap',
diff --git a/BitFun-Installer/src/pages/Progress.tsx b/BitFun-Installer/src/pages/Progress.tsx
index 556999a27c..aaf5769f5c 100644
--- a/BitFun-Installer/src/pages/Progress.tsx
+++ b/BitFun-Installer/src/pages/Progress.tsx
@@ -44,10 +44,19 @@ export function ProgressPage({
         >
           {!error ? (
             <>
-              <p style={{ fontSize: 16, fontWeight: 600, color: 'var(--bf-color-content-primary)', marginBottom: 6 }}>
+              <p style={{
+                fontSize: 'var(--bf-type-flow-title-font-size)',
+                fontWeight: 'var(--bf-type-flow-title-font-weight)',
+                color: 'var(--bf-color-content-primary)',
+                marginBottom: 6,
+              }}>
                 {t('progress.title')}
               </p>
-              <p style={{ fontSize: 12, color: 'var(--bf-color-content-muted)', marginBottom: 22 }}>
+              <p style={{
+                fontSize: 'var(--bf-type-body-xs-font-size)',
+                color: 'var(--bf-color-content-muted)',
+                marginBottom: 22,
+              }}>
                 {stepLabel}
               </p>
               <div style={{ width: '100%', maxWidth: 320 }}>
@@ -58,7 +67,7 @@ export function ProgressPage({
                     justifyContent: 'space-between',
                     gap: 8,
                     marginTop: 8,
-                    fontSize: 11,
+                    fontSize: 'var(--bf-type-support-font-size)',
                     color: 'var(--bf-color-content-muted)',
                     opacity: 0.7,
                     flexWrap: 'wrap',
@@ -84,7 +93,12 @@ export function ProgressPage({
               >
                 <circle cx="12" cy="12" r="10" /><line x1="15" y1="9" x2="9" y2="15" /><line x1="9" y1="9" x2="15" y2="15" />
               </svg>
-              <p style={{ fontSize: 14, fontWeight: 500, color: 'var(--bf-color-content-primary)', marginBottom: 8 }}>{t('progress.failed')}</p>
+              <p style={{
+                fontSize: 'var(--bf-type-label-lg-font-size)',
+                fontWeight: 'var(--bf-type-label-lg-font-weight)',
+                color: 'var(--bf-color-content-primary)',
+                marginBottom: 8,
+              }}>{t('progress.failed')}</p>
               <InstallErrorPanel message={error} variant="bare" />
             </>
           )}
diff --git a/BitFun-Installer/src/pages/ThemeSetup.tsx b/BitFun-Installer/src/pages/ThemeSetup.tsx
index 4d6cfc907b..37c3ff6a62 100644
--- a/BitFun-Installer/src/pages/ThemeSetup.tsx
+++ b/BitFun-Installer/src/pages/ThemeSetup.tsx
@@ -73,7 +73,7 @@ export function ThemeSetup({ options, setOptions, onLaunch, onClose }: ThemeSetu
       <div className="page-scroll">
         <div className="page-container page-container--center" style={{ maxWidth: 760 }}>
           <p style={{
-            fontSize: 14,
+            fontSize: 'var(--bf-type-body-md-font-size)',
             color: 'var(--bf-color-content-secondary)',
             marginBottom: 12,
           }}>
@@ -98,7 +98,7 @@ export function ThemeSetup({ options, setOptions, onLaunch, onClose }: ThemeSetu
                 <div style={{ flex: 1, background: lightPreview.colors.background.primary }} />
                 <div style={{ flex: 1, background: darkPreview.colors.background.primary }} />
               </div>
-              <div style={{ fontSize: 11, color: 'var(--bf-color-content-primary)' }}>
+              <div style={{ fontSize: 'var(--bf-type-support-font-size)', color: 'var(--bf-color-content-primary)' }}>
                 {t('themeSetup.followSystem')}
               </div>
             </button>
@@ -115,7 +115,7 @@ export function ThemeSetup({ options, setOptions, onLaunch, onClose }: ThemeSetu
                     </div>
                   </div>
                 </div>
-                <div style={{ fontSize: 11, color: 'var(--bf-color-content-primary)' }}>
+                <div style={{ fontSize: 'var(--bf-type-support-font-size)', color: 'var(--bf-color-content-primary)' }}>
                   {t(`themeSetup.themeNames.${theme.id}`, { defaultValue: theme.name })}
                 </div>
               </button>
@@ -134,7 +134,7 @@ export function ThemeSetup({ options, setOptions, onLaunch, onClose }: ThemeSetu
             <div style={{
               color: 'var(--bf-color-status-danger-content)',
               marginBottom: 12,
-              fontSize: 12,
+              fontSize: 'var(--bf-type-body-xs-font-size)',
               width: '100%',
             }}>
               {finishError}
diff --git a/BitFun-Installer/src/styles/global.css b/BitFun-Installer/src/styles/global.css
index 97e02e6198..a38c43a6d7 100644
--- a/BitFun-Installer/src/styles/global.css
+++ b/BitFun-Installer/src/styles/global.css
@@ -4,8 +4,8 @@
 
 html, body, #root {
   width: 100%; height: 100%; overflow: hidden;
-  font-family: var(--bf-font-family-sans);
-  font-size: 14px; line-height: 1.5;
+  font-family: var(--bf-type-body-md-font-family);
+  font-size: var(--bf-type-body-md-font-size); line-height: var(--bf-type-body-md-line-height);
   color: var(--bf-color-content-primary);
   background: var(--bf-color-surface-canvas);
   -webkit-font-smoothing: antialiased;
@@ -43,9 +43,9 @@ html, body, #root {
 }
 
 .titlebar-title {
-  font-size: 12px; font-weight: 500;
+  font-size: var(--bf-type-body-xs-font-size); font-weight: var(--bf-type-label-lg-font-weight);
   color: var(--bf-color-content-muted); opacity: 0.6;
-  letter-spacing: 0.3px;
+  letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
 }
 
 .window-controls {
@@ -136,8 +136,8 @@ html, body, #root {
   background: transparent;
   border: 1px dashed var(--bf-color-border-default);
   border-radius: var(--bf-radius-sm);
-  font-family: var(--bf-font-family-sans);
-  font-size: 13px; font-weight: 500;
+  font-family: var(--bf-type-body-md-font-family);
+  font-size: var(--bf-type-body-sm-font-size); font-weight: var(--bf-type-label-lg-font-weight);
   color: var(--bf-color-content-muted);
   cursor: pointer;
   box-shadow: none;
@@ -241,8 +241,8 @@ html, body, #root {
 .card-btn__icon svg { color: var(--bf-color-accent-default); transition: color 0.25s ease; }
 
 .card-btn__content { flex: 1; display: flex; flex-direction: column; gap: 3px; }
-.card-btn__title { font-size: 14px; font-weight: 500; color: var(--bf-color-content-primary); }
-.card-btn__subtitle { font-size: 12px; color: var(--bf-color-content-muted); opacity: 0.7; }
+.card-btn__title { font-size: var(--bf-type-body-md-font-size); font-weight: var(--bf-type-label-lg-font-weight); color: var(--bf-color-content-primary); }
+.card-btn__subtitle { font-size: var(--bf-type-body-xs-font-size); color: var(--bf-color-content-muted); opacity: 0.7; }
 
 .card-btn__arrow {
   flex-shrink: 0; color: var(--bf-color-content-muted);
@@ -258,7 +258,7 @@ html, body, #root {
   border: 1px solid var(--bf-color-border-subtle);
   border-radius: var(--bf-radius-sm);
   color: var(--bf-color-content-primary);
-  font-size: 12px; font-family: var(--bf-font-family-mono);
+  font-size: var(--bf-type-body-xs-font-size); font-family: var(--bf-type-code-md-font-family);
   outline: none; transition: all 0.25s ease;
 }
 .input:focus {
@@ -303,8 +303,8 @@ html, body, #root {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 12px;
-  font-family: var(--bf-font-family-mono);
+  font-size: var(--bf-type-body-xs-font-size);
+  font-family: var(--bf-type-code-md-font-family);
   color: var(--bf-color-content-primary);
 }
 
@@ -353,8 +353,8 @@ html, body, #root {
   border-radius: var(--bf-radius-sm);
   background: var(--bf-color-surface-subtle);
   color: var(--bf-color-content-primary);
-  font-size: 12px;
-  font-family: var(--bf-font-family-mono);
+  font-size: var(--bf-type-body-xs-font-size);
+  font-family: var(--bf-type-code-md-font-family);
   outline: none;
 }
 
@@ -390,21 +390,21 @@ html, body, #root {
 }
 
 .bf-select-option-label {
-  font-size: 12px;
-  line-height: 1.2;
+  font-size: var(--bf-type-body-xs-font-size);
+  line-height: var(--bf-type-heading-page-line-height);
   color: var(--bf-color-content-primary);
 }
 
 .bf-select-option-desc {
-  font-size: 11px;
-  line-height: 1.2;
+  font-size: var(--bf-type-support-font-size);
+  line-height: var(--bf-type-heading-page-line-height);
   color: var(--bf-color-content-muted);
 }
 
 .bf-select-empty {
   padding: 8px;
   color: var(--bf-color-content-muted);
-  font-size: 12px;
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .model-setup-page {
@@ -429,21 +429,21 @@ html, body, #root {
 
 .model-setup-intro {
   margin-bottom: 2px;
-  font-size: 12px;
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-content-muted);
 }
 
 .model-setup-desc {
   margin-bottom: 8px;
-  font-size: 12px;
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-content-secondary);
 }
 
 .model-setup-provider-desc {
   margin-top: 4px;
   margin-bottom: 2px;
-  font-size: 11px;
-  line-height: 1.35;
+  font-size: var(--bf-type-support-font-size);
+  line-height: var(--bf-type-modifier-leading-balanced-line-height);
   color: var(--bf-color-content-muted);
 }
 
@@ -456,8 +456,8 @@ html, body, #root {
 }
 
 .model-setup-row__label {
-  font-size: 12px;
-  line-height: 1.25;
+  font-size: var(--bf-type-body-xs-font-size);
+  line-height: var(--bf-type-modifier-leading-dense-line-height);
   color: var(--bf-color-content-secondary);
   text-align: end;
   padding-right: 2px;
@@ -501,8 +501,8 @@ html, body, #root {
 }
 
 .model-setup-fetch-hint {
-  font-size: 11px;
-  line-height: 1.35;
+  font-size: var(--bf-type-support-font-size);
+  line-height: var(--bf-type-modifier-leading-balanced-line-height);
   color: var(--bf-color-content-muted);
   margin-top: 4px;
   padding-left: calc(34% + 10px);
@@ -521,12 +521,12 @@ html, body, #root {
 }
 
 .model-setup-test-msg--ok {
-  font-size: 12px;
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-status-success-content);
 }
 
 .model-setup-test-msg--err {
-  font-size: 12px;
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-status-danger-content);
 }
 
@@ -581,7 +581,7 @@ html, body, #root {
 .checkbox-box svg { width: 10px; height: 10px; color: var(--bf-color-surface-panel); opacity: 0; transition: opacity 0.15s ease; }
 .checkbox-box.checked svg { opacity: 1; }
 
-.checkbox-label { font-size: 13px; color: var(--bf-color-content-secondary); transition: color 0.15s ease; }
+.checkbox-label { font-size: var(--bf-type-body-sm-font-size); color: var(--bf-color-content-secondary); transition: color 0.15s ease; }
 .checkbox-item:hover .checkbox-label { color: var(--bf-color-content-primary); }
 
 .progress-bar-container {
@@ -620,10 +620,10 @@ html, body, #root {
 
 .section-label {
   display: flex; align-items: center; gap: 8px;
-  font-size: 12px; font-weight: 500;
+  font-size: var(--bf-type-body-xs-font-size); font-weight: var(--bf-type-label-lg-font-weight);
   color: var(--bf-color-content-muted);
   text-transform: uppercase;
-  letter-spacing: 0.8px;
+  letter-spacing: var(--bf-type-modifier-tracking-widest-letter-spacing);
   margin-bottom: 12px;
 }
 .section-label svg { opacity: 0.6; }
@@ -657,16 +657,16 @@ html, body, #root {
 
 .uninstall-title {
   margin-bottom: 22px;
-  font-size: 24px;
-  font-weight: 600;
+  font-size: var(--bf-type-heading-page-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
   text-align: center;
-  letter-spacing: 0.2px;
+  letter-spacing: var(--bf-type-modifier-tracking-subtle-letter-spacing);
 }
 
 .uninstall-subtitle {
   margin-bottom: 8px;
-  font-size: 12px;
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-content-primary);
   text-align: left;
   opacity: 0.86;
@@ -678,7 +678,7 @@ html, body, #root {
   gap: 6px;
   margin-bottom: 14px;
   padding: 4px 0 6px;
-  font-size: 12px;
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-content-muted);
   border: none;
   min-width: 0;
@@ -688,13 +688,13 @@ html, body, #root {
   white-space: nowrap;
   flex-shrink: 0;
   color: var(--bf-color-content-secondary);
-  font-family: var(--bf-font-family-mono);
+  font-family: var(--bf-type-code-md-font-family);
   opacity: 1;
 }
 
 .uninstall-inline-path {
   color: var(--bf-color-content-muted);
-  font-family: var(--bf-font-family-mono);
+  font-family: var(--bf-type-code-md-font-family);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -707,13 +707,13 @@ html, body, #root {
 .uninstall-error {
   margin-bottom: 10px;
   color: var(--bf-color-status-danger-content);
-  font-size: 12px;
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .uninstall-success {
   margin-bottom: 10px;
   color: var(--bf-color-status-success-content);
-  font-size: 12px;
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .uninstall-progress-wrap {
@@ -728,7 +728,7 @@ html, body, #root {
 }
 
 .uninstall-progress-text {
-  font-size: 11px;
+  font-size: var(--bf-type-support-font-size);
   color: var(--bf-color-content-muted);
   min-width: 34px;
   text-align: right;
diff --git a/design-system/apps/design-lab/src/preview/FlowChatPreviewRegistry.css b/design-system/apps/design-lab/src/preview/FlowChatPreviewRegistry.css
index e9c4d69b7b..0e9e345aff 100644
--- a/design-system/apps/design-lab/src/preview/FlowChatPreviewRegistry.css
+++ b/design-system/apps/design-lab/src/preview/FlowChatPreviewRegistry.css
@@ -18,8 +18,8 @@
   gap: var(--bf-space-3);
   overflow: hidden;
   color: var(--bf-color-content-secondary);
-  font-family:var(--bf-font-family-sans);
-  font-size: var(--bf-font-size-meta);
+  font-family:var(--bf-type-body-md-font-family);
+  font-size: var(--bf-type-support-font-size);
   white-space: nowrap;
 }
 
@@ -58,7 +58,7 @@
   color: var(--bf-color-content-primary);
   background: transparent;
   font: inherit;
-  line-height: var(--bf-line-height-base);
+  line-height: var(--bf-type-body-md-line-height);
 }
 
 .flow-chat-composer-preview textarea::placeholder {
@@ -95,8 +95,8 @@
   gap: var(--bf-space-1);
   padding-inline: var(--bf-space-2);
   border-radius: var(--bf-radius-pill);
-  font-family:var(--bf-font-family-sans);
-  font-size: var(--bf-font-size-sm);
+  font-family:var(--bf-type-body-md-font-family);
+  font-size: var(--bf-type-body-sm-font-size);
 }
 
 .flow-chat-composer-preview__model > span {
@@ -124,7 +124,7 @@
   overflow: hidden;
   min-inline-size: 0;
   color: inherit;
-  font-family:var(--bf-font-family-mono);
+  font-family:var(--bf-type-code-md-font-family);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -167,7 +167,7 @@
 .flow-chat-tool-card-preview__details code {
   overflow: hidden;
   color: var(--bf-color-content-primary);
-  font-family:var(--bf-font-family-mono);
+  font-family:var(--bf-type-code-md-font-family);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -181,7 +181,7 @@
   align-items: center;
   gap: var(--bf-space-1);
   color: var(--bf-color-content-muted);
-  font-family:var(--bf-font-family-mono);
+  font-family:var(--bf-type-code-md-font-family);
   font-variant-numeric: tabular-nums;
 }
 
@@ -200,9 +200,9 @@
   gap: var(--bf-space-1);
   margin: 0;
   color: var(--bf-color-content-secondary);
-  font-family:var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-base);
+  font-family:var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-body-sm-font-size);
+  line-height: var(--bf-type-body-md-line-height);
   white-space: pre-wrap;
 }
 
diff --git a/design-system/apps/design-lab/src/preview/FlowChatToolGallery.css b/design-system/apps/design-lab/src/preview/FlowChatToolGallery.css
index 2509bc5bb7..37918f496e 100644
--- a/design-system/apps/design-lab/src/preview/FlowChatToolGallery.css
+++ b/design-system/apps/design-lab/src/preview/FlowChatToolGallery.css
@@ -35,9 +35,9 @@
 
 .flow-chat-tool-group__attention {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-medium);
-  letter-spacing: var(--bf-letter-spacing-wider);
+  font-size: var(--bf-type-body-xs-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   text-transform: uppercase;
 }
 
@@ -48,13 +48,13 @@
 
 .flow-chat-tool-group__heading h3 {
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-2xl);
+  font-size: var(--bf-type-flow-section-title-font-size);
 }
 
 .flow-chat-tool-group__heading p,
 .flow-chat-tool-group__heading > button {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .flow-chat-tool-group__heading > button {
@@ -113,8 +113,8 @@
   overflow: hidden;
   min-width: 0;
   color: var(--bf-color-content-primary);
-  font-family:var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-sm);
+  font-family:var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-body-sm-font-size);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -122,7 +122,7 @@
 .flow-chat-tool-specimen__heading span {
   flex: 0 0 auto;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .flow-chat-dedicated-note {
@@ -158,19 +158,19 @@
 
 .flow-chat-dedicated-note strong {
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-body-sm-font-size);
 }
 
 .flow-chat-dedicated-note p,
 .flow-chat-dedicated-note code {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .flow-chat-dedicated-note code {
   max-inline-size: 360px;
   color: var(--bf-color-content-muted);
-  font-family:var(--bf-font-family-mono);
-  line-height: var(--bf-line-height-base);
+  font-family:var(--bf-type-code-md-font-family);
+  line-height: var(--bf-type-body-md-line-height);
   text-align: end;
 }
 
diff --git a/design-system/apps/design-lab/src/styles.css b/design-system/apps/design-lab/src/styles.css
index a7de5f6e87..099d30079b 100644
--- a/design-system/apps/design-lab/src/styles.css
+++ b/design-system/apps/design-lab/src/styles.css
@@ -43,7 +43,7 @@ body,
   min-height: 100vh;
   color: var(--bf-color-content-primary);
   background: var(--bf-color-surface-canvas);
-  font-family: var(--bf-font-family-sans);
+  font-family: var(--bf-type-body-md-font-family);
 }
 
 .lab-sidebar {
@@ -90,9 +90,9 @@ body,
 
 .lab-brand strong {
   overflow: hidden;
-  font-size: var(--bf-font-size-base);
-  font-weight: var(--bf-font-weight-semibold);
-  letter-spacing: var(--bf-letter-spacing-snug);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  letter-spacing: var(--bf-type-flow-title-letter-spacing);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -100,7 +100,7 @@ body,
 .lab-brand small {
   overflow: hidden;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -128,9 +128,9 @@ body,
 .lab-nav-label,
 .page-kicker {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-micro);
-  font-weight: var(--bf-font-weight-semibold);
-  letter-spacing: var(--bf-letter-spacing-caps);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-caps-letter-spacing);
   text-transform: uppercase;
 }
 
@@ -153,7 +153,7 @@ body,
   padding: 7px 10px;
   border-radius: 8px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   text-decoration: none;
   transition: color 120ms ease, background-color 120ms ease;
 }
@@ -167,13 +167,13 @@ body,
 .lab-navigation a[aria-current="page"] {
   color: var(--bf-color-content-primary);
   background: var(--bf-color-action-quiet-pressed);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .lab-navigation a small {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-2xs);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-overline-sm-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   text-transform: capitalize;
 }
 
@@ -199,7 +199,7 @@ body,
   border-radius: 9px;
   color: var(--bf-color-content-secondary);
   background: var(--bf-color-surface-tertiary);
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
   text-transform: capitalize;
 }
 
@@ -279,7 +279,7 @@ body,
   outline: 0;
   color: var(--bf-color-content-primary);
   background: transparent;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .lab-search input::placeholder {
@@ -296,8 +296,8 @@ body,
   border-radius: 6px;
   color: var(--bf-color-content-muted);
   background: var(--bf-color-surface-tertiary);
-  font-family:var(--bf-font-family-sans);
-  font-size: var(--bf-font-size-2xs);
+  font-family:var(--bf-type-body-md-font-family);
+  font-size: var(--bf-type-overline-sm-font-size);
 }
 
 .lab-search-results {
@@ -353,13 +353,13 @@ body,
 
 .lab-search-results strong {
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .lab-search-results small,
 .lab-search-results p {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
 }
 
 .lab-search-results p {
@@ -377,8 +377,8 @@ body,
 
 .topbar-links a {
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-body-xs-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   text-decoration: none;
 }
 
@@ -417,8 +417,8 @@ body,
   background: transparent;
   cursor: pointer;
   font: inherit;
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-support-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .lab-settings {
@@ -454,13 +454,13 @@ body,
 }
 
 .lab-settings-panel__heading strong {
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-body-sm-font-size);
 }
 
 .lab-settings-panel__heading span,
 .lab-settings-panel label > span {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
 }
 
 .lab-settings-panel__heading > button {
@@ -488,7 +488,7 @@ body,
   border-radius: 8px;
   color: var(--bf-color-content-primary);
   background: var(--bf-color-surface-panel);
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-support-font-size);
 }
 
 .settings-reset-button {
@@ -500,7 +500,7 @@ body,
   border: 1px solid var(--bf-color-border-subtle);
   border-radius: 8px;
   background: var(--bf-color-surface-tertiary);
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-support-font-size);
   cursor: pointer;
 }
 
@@ -511,7 +511,7 @@ body,
   place-items: center;
   border-radius: 999px;
   background: var(--bf-color-action-quiet-pressed);
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
 }
 
 .settings-reset-button:disabled {
@@ -556,15 +556,15 @@ body,
 
 .page-heading h1 {
   font-size: var(--bf-type-display-fluid-title-font-size);
-  line-height: var(--bf-line-height-display);
-  letter-spacing: var(--bf-letter-spacing-tighter);
+  line-height: var(--bf-type-display-xxl-line-height);
+  letter-spacing: var(--bf-type-modifier-tracking-tighter-letter-spacing);
 }
 
 .page-heading p {
   max-width: 680px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-relaxed);
+  font-size: var(--bf-type-body-sm-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
 }
 
 .lab-button,
@@ -579,8 +579,8 @@ body,
   border-radius: 999px;
   color: var(--bf-color-content-primary);
   background: var(--bf-color-surface-panel);
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-support-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   cursor: pointer;
 }
 
@@ -644,25 +644,25 @@ body,
   border-radius: 999px;
   color: var(--bf-color-content-secondary);
   background: var(--bf-color-surface-tertiary);
-  font-size: var(--bf-font-size-micro);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .overview-copy h1 {
   max-width: 610px;
   margin: 0;
   font-size: var(--bf-type-display-fluid-hero-font-size);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-none);
-  letter-spacing: var(--bf-letter-spacing-tighter);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
+  letter-spacing: var(--bf-type-modifier-tracking-tighter-letter-spacing);
 }
 
 .overview-copy p {
   max-width: 580px;
   margin: 0;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xl);
-  line-height: var(--bf-line-height-relaxed);
+  font-size: var(--bf-type-flow-title-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
 }
 
 .overview-actions {
@@ -691,8 +691,8 @@ body,
 }
 
 .primitive-note h2 {
-  font-size: var(--bf-font-size-3xl);
-  letter-spacing: var(--bf-letter-spacing-tight);
+  font-size: var(--bf-type-flow-page-title-font-size);
+  letter-spacing: var(--bf-type-display-xxl-letter-spacing);
 }
 
 .component-card__icon {
@@ -708,8 +708,8 @@ body,
 
 .component-card__category {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-2xs);
-  letter-spacing: var(--bf-letter-spacing-widest);
+  font-size: var(--bf-type-overline-sm-font-size);
+  letter-spacing: var(--bf-type-modifier-tracking-widest-letter-spacing);
   text-transform: uppercase;
 }
 
@@ -722,7 +722,7 @@ body,
   padding-top: 22px;
   border-top: 1px solid var(--bf-color-border-subtle);
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
 }
 
 /* Component catalog */
@@ -743,7 +743,7 @@ body,
   padding: 12px 16px;
   border-right: 1px solid var(--bf-color-border-subtle);
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
 }
 
 .component-summary-strip > span:last-child {
@@ -752,7 +752,7 @@ body,
 
 .component-summary-strip strong {
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-lg);
+  font-size: var(--bf-type-body-lg-font-size);
 }
 
 .component-catalog-grid {
@@ -779,16 +779,16 @@ body,
 .component-catalog-section-heading h2 {
   margin: 0;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-3xl);
-  letter-spacing: var(--bf-letter-spacing-tight);
+  font-size: var(--bf-type-flow-page-title-font-size);
+  letter-spacing: var(--bf-type-display-xxl-letter-spacing);
 }
 
 .component-catalog-section-heading p {
   max-width: 720px;
   margin: 0;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-body-sm-font-size);
+  line-height: var(--bf-type-body-md-line-height);
 }
 
 .component-card {
@@ -855,7 +855,7 @@ body,
 
 .component-navigation-panel-card-preview [data-bf-part="footer"] {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
 }
 
 .component-activity-item-card-preview {
@@ -903,14 +903,14 @@ body,
 }
 
 .component-card__body strong {
-  font-size: var(--bf-font-size-2xl);
-  letter-spacing: var(--bf-letter-spacing-tight);
+  font-size: var(--bf-type-flow-section-title-font-size);
+  letter-spacing: var(--bf-type-display-xxl-letter-spacing);
 }
 
 .component-card__body > span:last-child {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-body-sm-font-size);
+  line-height: var(--bf-type-body-md-line-height);
 }
 
 .component-card__footer {
@@ -921,7 +921,7 @@ body,
   padding: var(--bf-space-3) var(--bf-space-4);
   border-top: var(--bf-border-width-default) solid var(--bf-color-border-subtle);
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .primitive-note {
@@ -942,8 +942,8 @@ body,
 
 .primitive-note p {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-spacious);
+  font-size: var(--bf-type-body-xs-font-size);
+  line-height: var(--bf-type-modifier-leading-spacious-line-height);
 }
 
 /* Component details */
@@ -956,7 +956,7 @@ body,
   border: 0;
   color: var(--bf-color-content-muted);
   background: transparent;
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
   cursor: pointer;
 }
 
@@ -1001,8 +1001,8 @@ body,
 .preview-choice-group legend {
   padding: 0;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-micro);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .preview-choice-group > div {
@@ -1018,7 +1018,7 @@ body,
   border-radius: 7px;
   color: var(--bf-color-content-secondary);
   background: var(--bf-color-surface-panel);
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
   text-transform: capitalize;
   cursor: pointer;
 }
@@ -1051,13 +1051,13 @@ body,
   padding: var(--bf-space-3) var(--bf-space-4);
   border-bottom: var(--bf-border-width-default) solid var(--bf-color-border-subtle);
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   text-transform: capitalize;
 }
 
 .component-live-preview__label > span:first-child {
   color: var(--bf-color-content-primary);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .component-live-preview__stage {
@@ -1109,8 +1109,8 @@ input.lab-force-focus {
   min-height: 38px;
   padding: 7px 12px;
   border-bottom: 1px solid var(--bf-color-border-subtle);
-  font-size: var(--bf-font-size-2xs);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-overline-sm-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .component-code-panel__header button {
@@ -1121,7 +1121,7 @@ input.lab-force-focus {
   border: 1px solid var(--bf-color-border-subtle);
   border-radius: 6px;
   background: var(--bf-color-surface-panel);
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
   cursor: pointer;
 }
 
@@ -1131,9 +1131,9 @@ input.lab-force-focus {
   overflow: auto;
   padding: 16px;
   color: var(--bf-color-content-secondary);
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-micro);
-  line-height: var(--bf-line-height-relaxed);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-micro-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
 }
 
 .component-guidance-grid {
@@ -1158,9 +1158,9 @@ input.lab-force-focus {
 
 .component-guidance-grid h2,
 .component-reference-panel h2 {
-  font-size: var(--bf-font-size-lg);
-  line-height: var(--bf-line-height-support);
-  letter-spacing: var(--bf-letter-spacing-snug);
+  font-size: var(--bf-type-body-lg-font-size);
+  line-height: var(--bf-type-flow-support-line-height);
+  letter-spacing: var(--bf-type-flow-title-letter-spacing);
 }
 
 .component-guidance-grid ul {
@@ -1176,8 +1176,8 @@ input.lab-force-focus {
   grid-template-columns: auto minmax(0, 1fr);
   gap: 8px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-micro);
-  line-height: var(--bf-line-height-comfortable);
+  font-size: var(--bf-type-micro-font-size);
+  line-height: var(--bf-type-support-line-height);
 }
 
 .component-guidance-grid li :is(svg, [data-bf-component="icon"]) {
@@ -1201,7 +1201,7 @@ input.lab-force-focus {
 .reference-panel__heading > span,
 .text-action {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
 }
 
 .text-action {
@@ -1237,7 +1237,7 @@ input.lab-force-focus {
   padding: 10px 12px;
   border-right: 1px solid var(--bf-color-border-subtle);
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
 }
 
 .props-table__row > *:last-child {
@@ -1250,8 +1250,8 @@ input.lab-force-focus {
 
 .props-table__row--header > * {
   color: var(--bf-color-content-muted);
-  font-family:var(--bf-font-family-sans);
-  font-weight: var(--bf-font-weight-semibold);
+  font-family:var(--bf-type-body-md-font-family);
+  font-weight: var(--bf-type-label-selected-font-weight);
   text-transform: uppercase;
 }
 
@@ -1269,7 +1269,7 @@ input.lab-force-focus {
   border-radius: 6px;
   color: var(--bf-color-content-secondary);
   background: var(--bf-color-surface-tertiary);
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
 }
 
 /* Token workbench */
@@ -1306,15 +1306,15 @@ input.lab-force-focus {
 }
 
 .reference-color-palette__heading h2 {
-  font-size: var(--bf-font-size-xl);
-  letter-spacing: var(--bf-letter-spacing-tight);
+  font-size: var(--bf-type-flow-title-font-size);
+  letter-spacing: var(--bf-type-display-xxl-letter-spacing);
 }
 
 .reference-color-palette__heading p,
 .reference-color-palette__contract {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-micro);
-  line-height: var(--bf-line-height-comfortable);
+  font-size: var(--bf-type-micro-font-size);
+  line-height: var(--bf-type-support-line-height);
 }
 
 .reference-color-palette__summary {
@@ -1329,7 +1329,7 @@ input.lab-force-focus {
   border-radius: 999px;
   color: var(--bf-color-content-muted);
   background: var(--bf-color-surface-tertiary);
-  font-size: var(--bf-font-size-3xs);
+  font-size: var(--bf-type-overline-xs-font-size);
   white-space: nowrap;
 }
 
@@ -1353,13 +1353,13 @@ input.lab-force-focus {
 }
 
 .reference-color-scale > header h3 {
-  font-size: var(--bf-font-size-micro);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .reference-color-scale > header span {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-3xs);
+  font-size: var(--bf-type-overline-xs-font-size);
 }
 
 .reference-color-scale__steps {
@@ -1402,14 +1402,14 @@ input.lab-force-focus {
 .reference-color-step strong {
   margin-top: 6px;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-3xs);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-overline-xs-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .reference-color-step code {
   margin-top: 2px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-4xs);
+  font-size: var(--bf-type-overline-micro-font-size);
 }
 
 .reference-color-palette__contract {
@@ -1428,7 +1428,7 @@ input.lab-force-focus {
   align-items: center;
   gap: 7px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
 }
 
 .token-source-status > span:first-child {
@@ -1445,7 +1445,7 @@ input.lab-force-focus {
 .token-save-error,
 .token-error {
   color: var(--bf-color-status-danger-content);
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
 }
 
 .token-action-row {
@@ -1459,7 +1459,7 @@ input.lab-force-focus {
   min-height: 34px;
   padding: 6px 10px;
   border-radius: 8px;
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
 }
 
 .token-action-row button:disabled {
@@ -1470,7 +1470,7 @@ input.lab-force-focus {
 .token-edit-count {
   margin-right: 4px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
 }
 
 .token-category-tabs {
@@ -1489,14 +1489,14 @@ input.lab-force-focus {
   border-bottom: 2px solid transparent;
   color: var(--bf-color-content-secondary);
   background: transparent;
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
   cursor: pointer;
 }
 
 .token-category-tabs button[data-active] {
   border-bottom-color: var(--bf-color-content-primary);
   color: var(--bf-color-content-primary);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .token-workspace {
@@ -1546,7 +1546,7 @@ input.lab-force-focus {
   outline: 0;
   color: var(--bf-color-content-primary);
   background: transparent;
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
 }
 
 .token-table {
@@ -1568,8 +1568,8 @@ input.lab-force-focus {
   border-bottom: 1px solid var(--bf-color-border-subtle);
   color: var(--bf-color-content-muted);
   background: var(--bf-color-surface-tertiary);
-  font-size: var(--bf-font-size-2xs);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-overline-sm-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .token-table__body {
@@ -1625,8 +1625,8 @@ input.lab-force-focus {
 
 .token-table__row strong {
   overflow: hidden;
-  font-size: var(--bf-font-size-micro);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -1634,15 +1634,15 @@ input.lab-force-focus {
 .token-table__row code {
   overflow: hidden;
   color: var(--bf-color-content-muted);
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-2xs);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-overline-sm-font-size);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .token-table__row > span:last-child {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
 }
 
 .token-table__row > span:last-child i {
@@ -1650,7 +1650,7 @@ input.lab-force-focus {
   border: 1px solid var(--bf-color-border-default);
   border-radius: 999px;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-3xs);
+  font-size: var(--bf-type-overline-xs-font-size);
   font-style: normal;
 }
 
@@ -1671,7 +1671,7 @@ input.lab-force-focus {
   padding: 8px 14px;
   color: var(--bf-color-content-muted);
   background: var(--bf-color-surface-tertiary);
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
   text-transform: capitalize;
 }
 
@@ -1681,7 +1681,7 @@ input.lab-force-focus {
   place-items: center;
   padding: 24px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
   text-align: center;
 }
 
@@ -1718,8 +1718,8 @@ input.lab-force-focus {
 
 .token-inspector h2 {
   overflow-wrap: anywhere;
-  font-size: var(--bf-font-size-lg);
-  letter-spacing: var(--bf-letter-spacing-snug);
+  font-size: var(--bf-type-body-lg-font-size);
+  letter-spacing: var(--bf-type-flow-title-letter-spacing);
 }
 
 .edited-indicator {
@@ -1731,7 +1731,7 @@ input.lab-force-focus {
   border-radius: 999px;
   color: var(--bf-color-content-secondary);
   background: var(--bf-color-surface-tertiary);
-  font-size: var(--bf-font-size-3xs);
+  font-size: var(--bf-type-overline-xs-font-size);
 }
 
 .token-inspector__section {
@@ -1741,8 +1741,8 @@ input.lab-force-focus {
 
 .token-inspector__section > strong,
 .token-inspector__label-row strong {
-  font-size: var(--bf-font-size-micro);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .token-inspector__label-row {
@@ -1754,13 +1754,13 @@ input.lab-force-focus {
 
 .token-inspector__label-row span {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-3xs);
+  font-size: var(--bf-type-overline-xs-font-size);
 }
 
 .token-inspector p {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-micro);
-  line-height: var(--bf-line-height-relaxed);
+  font-size: var(--bf-type-micro-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
 }
 
 .token-value-control {
@@ -1786,8 +1786,8 @@ input.lab-force-focus {
   border-radius: 8px;
   color: var(--bf-color-content-primary);
   background: var(--bf-color-surface-panel);
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-micro);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-micro-font-size);
 }
 
 .token-value-input[aria-invalid="true"] {
@@ -1815,7 +1815,7 @@ input.lab-force-focus {
 
 .copy-value-row code {
   overflow: hidden;
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -1826,7 +1826,7 @@ input.lab-force-focus {
   justify-content: space-between;
   gap: 14px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
   text-transform: capitalize;
 }
 
@@ -1836,8 +1836,8 @@ input.lab-force-focus {
   place-items: center;
   padding: 32px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-micro);
-  line-height: var(--bf-line-height-relaxed);
+  font-size: var(--bf-type-micro-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
   text-align: center;
 }
 
@@ -1874,22 +1874,22 @@ input.lab-force-focus {
 }
 
 .effect-preview-heading h2 {
-  font-size: var(--bf-font-size-2xl);
-  line-height: var(--bf-line-height-tight);
+  font-size: var(--bf-type-flow-section-title-font-size);
+  line-height: var(--bf-type-heading-page-line-height);
 }
 
 .lab-eyebrow,
 .effect-card-label {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-semibold);
-  letter-spacing: var(--bf-letter-spacing-widest);
+  font-size: var(--bf-type-body-xs-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-widest-letter-spacing);
   text-transform: uppercase;
 }
 
 .effect-preview-heading > span:last-child {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .effect-preview-grid {
@@ -1939,7 +1939,7 @@ input.lab-force-focus {
   align-items: center;
   gap: var(--bf-space-2);
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-body-sm-font-size);
 }
 
 .status-samples > span[data-tone="info"] {
@@ -1979,7 +1979,7 @@ input.lab-force-focus {
   border: var(--bf-border-width-default) solid var(--bf-color-border-default);
   border-radius: var(--bf-radius-md);
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .surface-sample--canvas { background: var(--bf-color-surface-canvas); }
@@ -1996,26 +1996,26 @@ input.lab-force-focus {
 }
 
 .type-sample-display {
-  font-size: var(--bf-font-size-4xl);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-tight);
+  font-size: var(--bf-type-heading-display-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-heading-page-line-height);
 }
 
 .type-sample-title {
-  font-size: var(--bf-font-size-2xl);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-flow-section-title-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
 }
 
 .type-sample-body {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-base);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-body-md-font-size);
+  line-height: var(--bf-type-body-md-line-height);
 }
 
 .type-sample-caption {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  letter-spacing: var(--bf-letter-spacing-widest);
+  font-size: var(--bf-type-body-xs-font-size);
+  letter-spacing: var(--bf-type-modifier-tracking-widest-letter-spacing);
 }
 
 .geometry-samples {
@@ -2034,7 +2034,7 @@ input.lab-force-focus {
   border-radius: var(--bf-radius-md);
   color: var(--bf-color-content-secondary);
   background: var(--bf-color-surface-subtle);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .geometry-sample--split-view-panel {
@@ -2044,8 +2044,8 @@ input.lab-force-focus {
 
 .geometry-sample strong {
   color: var(--bf-color-content-primary);
-  font-family:var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-sm);
+  font-family:var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-body-sm-font-size);
   overflow-wrap: anywhere;
 }
 
@@ -2225,7 +2225,7 @@ input.lab-force-focus {
   }
 
   .lab-language-control select {
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
   }
 
   .topbar-icon-button,
@@ -2256,11 +2256,11 @@ input.lab-force-focus {
   }
 
   .overview-copy h1 {
-    font-size: var(--bf-font-size-6xl);
+    font-size: var(--bf-type-display-md-font-size);
   }
 
   .overview-copy p {
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 
   .overview-artwork {
@@ -2426,8 +2426,8 @@ input.lab-force-focus {
 }
 
 .lab-brand strong {
-  font-size: var(--bf-font-size-lg);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-body-lg-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .lab-navigation {
@@ -2438,14 +2438,14 @@ input.lab-force-focus {
 .lab-nav-label {
   margin-top: 22px;
   padding: 0 12px 8px;
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
 }
 
 .lab-navigation > a,
 .lab-component-links a {
   min-height: 40px;
   border-radius: 9px;
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-body-sm-font-size);
 }
 
 .lab-navigation > a {
@@ -2460,7 +2460,7 @@ input.lab-force-focus {
 .lab-component-links a {
   min-height: 35px;
   padding: 6px 10px;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .lab-sidebar-footer {
@@ -2468,7 +2468,7 @@ input.lab-force-focus {
   margin: 14px 20px 24px;
   padding: 8px 11px;
   background: var(--bf-color-surface-panel);
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-support-font-size);
 }
 
 .lab-sidebar-footer button {
@@ -2479,7 +2479,7 @@ input.lab-force-focus {
   border: 0;
   color: var(--bf-color-content-muted);
   background: transparent;
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
   text-transform: capitalize;
   cursor: pointer;
 }
@@ -2496,7 +2496,7 @@ input.lab-force-focus {
 
 .lab-search input,
 .topbar-links a {
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-body-sm-font-size);
 }
 
 .lab-language-control {
@@ -2509,7 +2509,7 @@ input.lab-force-focus {
 }
 
 .page-heading p {
-  font-size: var(--bf-font-size-base);
+  font-size: var(--bf-type-body-md-font-size);
 }
 
 .overview-hero {
@@ -2517,7 +2517,7 @@ input.lab-force-focus {
 }
 
 .primitive-note p {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 /* Getting started */
@@ -2544,16 +2544,16 @@ input.lab-force-focus {
 .guide-hero h1 {
   max-width: 760px;
   font-size: var(--bf-type-display-fluid-hero-font-size);
-  line-height: var(--bf-line-height-none);
-  letter-spacing: var(--bf-letter-spacing-tighter);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
+  letter-spacing: var(--bf-type-modifier-tracking-tighter-letter-spacing);
 }
 
 .guide-hero > p {
   max-width: 720px;
   margin: 0;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-lg);
-  line-height: var(--bf-line-height-spacious);
+  font-size: var(--bf-type-body-lg-font-size);
+  line-height: var(--bf-type-modifier-leading-spacious-line-height);
 }
 
 .guide-step-grid {
@@ -2583,8 +2583,8 @@ input.lab-force-focus {
   top: 24px;
   right: 24px;
   color: var(--bf-color-content-muted);
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-micro);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-micro-font-size);
 }
 
 .guide-step-icon,
@@ -2600,8 +2600,8 @@ input.lab-force-focus {
 
 .guide-step-grid h2 {
   margin: 24px 0 0;
-  font-size: var(--bf-font-size-xl);
-  letter-spacing: var(--bf-letter-spacing-tight);
+  font-size: var(--bf-type-flow-title-font-size);
+  letter-spacing: var(--bf-type-display-xxl-letter-spacing);
 }
 
 .guide-step-grid p,
@@ -2610,8 +2610,8 @@ input.lab-force-focus {
 .resource-boundary-panel p {
   margin: 0;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-spacious);
+  font-size: var(--bf-type-body-xs-font-size);
+  line-height: var(--bf-type-modifier-leading-spacious-line-height);
 }
 
 .guide-contract-panel {
@@ -2633,8 +2633,8 @@ input.lab-force-focus {
 .guide-contract-copy h2,
 .guide-next-panel h2,
 .resource-boundary-panel h2 {
-  font-size: var(--bf-font-size-3xl);
-  letter-spacing: var(--bf-letter-spacing-tight);
+  font-size: var(--bf-type-flow-page-title-font-size);
+  letter-spacing: var(--bf-type-display-xxl-letter-spacing);
 }
 
 .guide-contract-copy ul {
@@ -2650,8 +2650,8 @@ input.lab-force-focus {
   grid-template-columns: auto minmax(0, 1fr);
   gap: 8px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-meta);
-  line-height: var(--bf-line-height-comfortable);
+  font-size: var(--bf-type-support-font-size);
+  line-height: var(--bf-type-support-line-height);
 }
 
 .guide-code-card {
@@ -2670,7 +2670,7 @@ input.lab-force-focus {
   padding: 8px 13px;
   border-bottom: 1px solid var(--bf-color-border-subtle);
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
 }
 
 .guide-code-card pre {
@@ -2678,9 +2678,9 @@ input.lab-force-focus {
   overflow: auto;
   padding: 20px;
   color: var(--bf-color-content-secondary);
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-meta);
-  line-height: var(--bf-line-height-loose);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-support-font-size);
+  line-height: var(--bf-type-modifier-leading-loose-line-height);
 }
 
 .guide-next-panel,
@@ -2723,7 +2723,7 @@ input.lab-force-focus {
   padding: 18px 24px;
   border-right: 1px solid var(--bf-color-border-subtle);
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .resource-fact-strip span:last-child {
@@ -2732,8 +2732,8 @@ input.lab-force-focus {
 
 .resource-fact-strip strong {
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-4xl);
-  letter-spacing: var(--bf-letter-spacing-tight);
+  font-size: var(--bf-type-heading-display-font-size);
+  letter-spacing: var(--bf-type-display-xxl-letter-spacing);
 }
 
 .resource-grid {
@@ -2767,13 +2767,13 @@ input.lab-force-focus {
 }
 
 .resource-grid strong {
-  font-size: var(--bf-font-size-base);
+  font-size: var(--bf-type-body-md-font-size);
 }
 
 .resource-grid small {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-meta);
-  line-height: var(--bf-line-height-comfortable);
+  font-size: var(--bf-type-support-font-size);
+  line-height: var(--bf-type-support-line-height);
 }
 
 .resource-boundary-panel {
@@ -2818,8 +2818,8 @@ input.lab-force-focus {
 
 .pattern-section__heading > span {
   color: var(--bf-color-content-muted);
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-micro);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-micro-font-size);
 }
 
 .pattern-section__heading div {
@@ -2834,15 +2834,15 @@ input.lab-force-focus {
 }
 
 .pattern-section__heading h2 {
-  font-size: var(--bf-font-size-xl);
-  letter-spacing: var(--bf-letter-spacing-tight);
+  font-size: var(--bf-type-flow-title-font-size);
+  letter-spacing: var(--bf-type-display-xxl-letter-spacing);
 }
 
 .pattern-section__heading p,
 .pattern-navigation-copy p {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-meta);
-  line-height: var(--bf-line-height-relaxed);
+  font-size: var(--bf-type-support-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
 }
 
 .pattern-settings {
@@ -2934,8 +2934,8 @@ input.lab-force-focus {
 
 .pattern-recent-list > strong {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-body-xs-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .pattern-device-card {
@@ -2990,12 +2990,12 @@ input.lab-force-focus {
   align-items: center;
   flex-wrap: wrap;
   gap: var(--bf-space-4);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-body-sm-font-size);
 }
 
 .pattern-feedback {
   margin: 0;
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-body-sm-font-size);
   color: var(--bf-color-content-muted);
 }
 
@@ -3055,7 +3055,7 @@ input.lab-force-focus {
 
 .component-combobox-preview > span {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-body-sm-font-size);
 }
 
 .component-menu-interaction { padding: var(--bf-space-6); }
@@ -3099,7 +3099,7 @@ input.lab-force-focus {
   gap: 7px;
   margin-bottom: 14px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .component-breadcrumb button {
@@ -3136,16 +3136,16 @@ input.lab-force-focus {
 }
 
 .component-detail-heading h1 {
-  font-size: var(--bf-font-size-6xl);
-  line-height: var(--bf-line-height-none);
-  letter-spacing: var(--bf-letter-spacing-tighter);
+  font-size: var(--bf-type-display-md-font-size);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
+  letter-spacing: var(--bf-type-modifier-tracking-tighter-letter-spacing);
 }
 
 .component-detail-heading p {
   max-width: 680px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-base);
-  line-height: var(--bf-line-height-comfortable);
+  font-size: var(--bf-type-body-md-font-size);
+  line-height: var(--bf-type-support-line-height);
 }
 
 .component-meta-row {
@@ -3160,7 +3160,7 @@ input.lab-force-focus {
   border-radius: 6px;
   color: var(--bf-color-content-secondary);
   background: var(--bf-color-surface-tertiary);
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
   text-transform: capitalize;
 }
 
@@ -3193,8 +3193,8 @@ input.lab-force-focus {
 
 .component-workbench__toolbar > span {
   gap: 7px;
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-support-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .component-workbench__toolbar > div {
@@ -3208,7 +3208,7 @@ input.lab-force-focus {
   border: 1px solid var(--bf-color-border-subtle);
   border-radius: 7px;
   background: var(--bf-color-surface-panel);
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
   cursor: pointer;
 }
 
@@ -3232,13 +3232,13 @@ input.lab-force-focus {
 }
 
 .preview-choice-group legend {
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-support-font-size);
 }
 
 .preview-choice-group button {
   min-height: 30px;
   padding: 5px 9px;
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
 }
 
 .component-preview-column {
@@ -3256,12 +3256,12 @@ input.lab-force-focus {
 
 .component-code-panel pre {
   min-height: 190px;
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
 }
 
 /* Token authoring density follows the same desktop document scale. */
 .token-category-tabs button {
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-support-font-size);
 }
 
 .token-tools {
@@ -3270,15 +3270,15 @@ input.lab-force-focus {
 
 .token-search-field input,
 .token-tools select {
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-support-font-size);
 }
 
 .token-table__header {
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
 }
 
 .token-table__row strong {
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-support-font-size);
 }
 
 .token-table__row code,
@@ -3287,12 +3287,12 @@ input.lab-force-focus {
 .token-inspector p,
 .token-inspector__meta span,
 .copy-value-row code {
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
 }
 
 .token-inspector__section > strong,
 .token-inspector__label-row strong {
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-support-font-size);
 }
 
 .compact-props-table {
@@ -3310,7 +3310,7 @@ input.lab-force-focus {
 
 .compact-props-table > div:first-child {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-3xs);
+  font-size: var(--bf-type-overline-xs-font-size);
   text-transform: uppercase;
 }
 
@@ -3324,7 +3324,7 @@ input.lab-force-focus {
   overflow-wrap: anywhere;
   padding: 7px 5px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-3xs);
+  font-size: var(--bf-type-overline-xs-font-size);
 }
 
 .component-reference-panel {
@@ -3390,7 +3390,7 @@ input.lab-force-focus {
   }
 
   .guide-hero h1 {
-    font-size: var(--bf-font-size-6xl);
+    font-size: var(--bf-type-display-md-font-size);
   }
 
   .guide-contract-panel {
@@ -3512,14 +3512,14 @@ input.lab-force-focus {
 
 .component-panel-heading h2 {
   margin: 0;
-  font-size: var(--bf-font-size-xl);
-  letter-spacing: var(--bf-letter-spacing-tight);
+  font-size: var(--bf-type-flow-title-font-size);
+  letter-spacing: var(--bf-type-display-xxl-letter-spacing);
 }
 
 .component-panel-heading > span,
 .component-code-heading span {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
   text-transform: capitalize;
 }
 
@@ -3541,8 +3541,8 @@ input.lab-force-focus {
 
 .component-dialog-preview-stage__label {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-body-sm-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
 }
 
 .component-activity-item-preview-stage {
@@ -3563,8 +3563,8 @@ input.lab-force-focus {
 
 .component-card-preview-stage__label {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-body-sm-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
 }
 
 .component-card-example {
@@ -3603,8 +3603,8 @@ input.lab-force-focus {
 
 .component-activity-item-preview-stage__label {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-body-sm-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
 }
 
 .component-activity-item-example {
@@ -3638,8 +3638,8 @@ input.lab-force-focus {
 
 .component-toolbar-preview-stage__label {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-body-sm-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
 }
 
 .component-toolbar-example {
@@ -3672,8 +3672,8 @@ input.lab-force-focus {
 
 .component-composer-preview-stage__label {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-body-sm-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
 }
 
 .component-composer-example {
@@ -3695,7 +3695,7 @@ input.lab-force-focus {
   min-inline-size: 0;
   gap: var(--bf-space-1);
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   white-space: nowrap;
 }
 
@@ -3733,8 +3733,8 @@ input.lab-force-focus {
 .component-dialog-example__hint {
   margin: 0;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-body-sm-font-size);
+  line-height: var(--bf-type-body-md-line-height);
 }
 
 .component-dialog-example__model-card {
@@ -3751,13 +3751,13 @@ input.lab-force-focus {
 
 .component-dialog-example__model-card > strong {
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-base);
-  line-height: var(--bf-line-height-tight);
+  font-size: var(--bf-type-body-md-font-size);
+  line-height: var(--bf-type-heading-page-line-height);
 }
 
 .component-dialog-example__model-card > span {
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-body-sm-font-size);
+  line-height: var(--bf-type-body-md-line-height);
 }
 
 .component-scroll-area-example {
@@ -3782,7 +3782,7 @@ input.lab-force-focus {
   padding-inline: var(--bf-space-4);
   border-block-end: var(--bf-border-width-default) solid var(--bf-color-border-subtle);
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-body-sm-font-size);
   white-space: nowrap;
 }
 
@@ -3870,7 +3870,7 @@ input.lab-force-focus {
 
 .component-icon-composition p {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-body-sm-font-size);
 }
 
 .component-icon-composition__row {
@@ -3884,7 +3884,7 @@ input.lab-force-focus {
 .component-icon-composition__row > code {
   min-inline-size: 112px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .component-icon-catalog__item {
@@ -3903,7 +3903,7 @@ input.lab-force-focus {
   max-inline-size: 100%;
   overflow: hidden;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -4028,13 +4028,13 @@ input.lab-force-focus {
 
 .flow-chat-state-list__heading strong {
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-body-sm-font-size);
 }
 
 .flow-chat-state-list__heading code {
   color: var(--bf-color-content-muted);
-  font-family:var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-xs);
+  font-family:var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .flow-chat-state-list__preview {
@@ -4075,7 +4075,7 @@ input.lab-force-focus {
   place-items: center;
   color: var(--bf-color-content-muted);
   background: transparent;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   text-transform: capitalize;
 }
 
@@ -4089,8 +4089,8 @@ input.lab-force-focus {
   padding: var(--bf-space-3);
   color: var(--bf-color-content-secondary);
   background: transparent;
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-body-sm-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   text-transform: capitalize;
 }
 
@@ -4132,7 +4132,7 @@ input.lab-force-focus {
   border-radius: 7px;
   color: var(--bf-color-content-primary);
   background: var(--bf-color-surface-panel);
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
   cursor: pointer;
 }
 
@@ -4146,8 +4146,8 @@ input.lab-force-focus {
   border: 0;
   color: var(--bf-color-content-secondary);
   background: var(--bf-color-surface-panel);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-loose);
+  font-size: var(--bf-type-body-xs-font-size);
+  line-height: var(--bf-type-modifier-leading-loose-line-height);
 }
 
 .component-inspector {
@@ -4175,13 +4175,13 @@ input.lab-force-focus {
   border: 0;
   color: var(--bf-color-content-secondary);
   background: transparent;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   cursor: pointer;
 }
 
 .component-inspector-tabs button[aria-selected="true"] {
   color: var(--bf-color-content-primary);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .component-inspector-tabs button[aria-selected="true"]::after {
@@ -4219,8 +4219,8 @@ input.lab-force-focus {
 
 .component-inspector-content h2 {
   margin: 0;
-  font-size: var(--bf-font-size-xs);
-  letter-spacing: var(--bf-letter-spacing-snug);
+  font-size: var(--bf-type-body-xs-font-size);
+  letter-spacing: var(--bf-type-flow-title-letter-spacing);
 }
 
 .component-inspector-controls {
@@ -4234,7 +4234,7 @@ input.lab-force-focus {
   align-items: center;
   gap: 12px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-support-font-size);
 }
 
 .component-inspector-toggle {
@@ -4244,7 +4244,7 @@ input.lab-force-focus {
   gap: 12px;
   min-height: 38px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-support-font-size);
 }
 
 .component-inspector-toggle [data-bf-component="switch"] {
@@ -4261,7 +4261,7 @@ input.lab-force-focus {
   border-radius: 8px;
   color: var(--bf-color-content-primary);
   background: var(--bf-color-surface-panel);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   cursor: pointer;
 }
 
@@ -4312,7 +4312,7 @@ input.lab-force-focus {
   min-width: 0;
   overflow-wrap: anywhere;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-3xs);
+  font-size: var(--bf-type-overline-xs-font-size);
 }
 
 .component-inspector-props code {
@@ -4346,12 +4346,12 @@ input.lab-force-focus {
 .component-inspector-facts dd {
   margin: 0;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
 }
 
 .component-inspector-facts dd {
   color: var(--bf-color-content-primary);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
   text-transform: capitalize;
 }
 
@@ -4369,7 +4369,7 @@ input.lab-force-focus {
   border-radius: 6px;
   color: var(--bf-color-content-secondary);
   background: var(--bf-color-surface-tertiary);
-  font-size: var(--bf-font-size-3xs);
+  font-size: var(--bf-type-overline-xs-font-size);
 }
 
 .component-inspector-token-list {
@@ -4378,7 +4378,7 @@ input.lab-force-focus {
 
 .component-inspector-token-list code {
   overflow-wrap: anywhere;
-  line-height: var(--bf-line-height-support);
+  line-height: var(--bf-type-flow-support-line-height);
 }
 
 .component-inspector-action {
@@ -4388,8 +4388,8 @@ input.lab-force-focus {
   border-radius: 8px;
   color: var(--bf-color-content-primary);
   background: var(--bf-color-surface-panel);
-  font-size: var(--bf-font-size-micro);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   cursor: pointer;
 }
 
@@ -4465,12 +4465,12 @@ input.lab-force-focus {
   gap: 9px;
   margin-bottom: 20px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .colors-breadcrumb strong {
   color: var(--bf-color-content-primary);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .colors-page-heading {
@@ -4495,14 +4495,14 @@ input.lab-force-focus {
 
 .colors-heading-copy h1 {
   font-size: var(--bf-type-display-fluid-title-font-size);
-  line-height: var(--bf-line-height-none);
-  letter-spacing: var(--bf-letter-spacing-tighter);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
+  letter-spacing: var(--bf-type-modifier-tracking-tighter-letter-spacing);
 }
 
 .colors-heading-copy p {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-base);
-  line-height: var(--bf-line-height-comfortable);
+  font-size: var(--bf-type-body-md-font-size);
+  line-height: var(--bf-type-support-line-height);
 }
 
 .colors-context-controls {
@@ -4518,8 +4518,8 @@ input.lab-force-focus {
   align-items: center;
   gap: 9px;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-body-xs-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   white-space: nowrap;
 }
 
@@ -4541,7 +4541,7 @@ input.lab-force-focus {
   outline: 0;
   color: var(--bf-color-content-primary);
   background: var(--bf-color-surface-panel);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   cursor: pointer;
 }
 
@@ -4589,14 +4589,14 @@ input.lab-force-focus {
   border-bottom: 2px solid transparent;
   color: var(--bf-color-content-secondary);
   background: transparent;
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-body-sm-font-size);
   cursor: pointer;
 }
 
 .colors-section-tabs button[data-active] {
   border-bottom-color: var(--bf-color-content-primary);
   color: var(--bf-color-content-primary);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .colors-section-tabs button:focus-visible,
@@ -4625,9 +4625,9 @@ input.lab-force-focus {
 }
 
 .colors-card-heading h2 {
-  font-size: var(--bf-font-size-xl);
-  line-height: var(--bf-line-height-dense);
-  letter-spacing: var(--bf-letter-spacing-tight);
+  font-size: var(--bf-type-flow-title-font-size);
+  line-height: var(--bf-type-modifier-leading-dense-line-height);
+  letter-spacing: var(--bf-type-display-xxl-letter-spacing);
 }
 
 .colors-card-heading--copy > div {
@@ -4638,8 +4638,8 @@ input.lab-force-focus {
 .colors-card-heading p {
   max-width: 760px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-meta);
-  line-height: var(--bf-line-height-comfortable);
+  font-size: var(--bf-type-support-font-size);
+  line-height: var(--bf-type-support-line-height);
 }
 
 .colors-semantic-tools {
@@ -4669,7 +4669,7 @@ input.lab-force-focus {
   outline: 0;
   color: var(--bf-color-content-primary);
   background: transparent;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .colors-search-field input::placeholder {
@@ -4727,8 +4727,8 @@ input.lab-force-focus {
   height: 46px;
   color: var(--bf-color-content-secondary);
   background: var(--bf-color-surface-panel);
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-support-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   white-space: nowrap;
 }
 
@@ -4738,22 +4738,22 @@ input.lab-force-focus {
 }
 
 .semantic-color-table tbody th[scope="row"] {
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-lg-font-weight);
 }
 
 .semantic-color-table tbody td:last-child {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-meta);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-support-font-size);
+  line-height: var(--bf-type-body-md-line-height);
 }
 
 .semantic-color-table code,
 .colors-mapping-table code {
   overflow-wrap: anywhere;
   color: var(--bf-color-content-secondary);
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-micro);
-  font-weight: var(--bf-font-weight-medium);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
 }
 
 .semantic-color-group {
@@ -4771,14 +4771,14 @@ input.lab-force-focus {
 }
 
 .semantic-color-group strong {
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-body-xs-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .semantic-color-group small {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-regular);
+  font-size: var(--bf-type-support-font-size);
+  font-weight: var(--bf-type-body-md-font-weight);
 }
 
 .semantic-color-group--surface > i {
@@ -4842,7 +4842,7 @@ input.lab-force-focus {
 .semantic-color-table__empty td {
   height: 96px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   text-align: center;
 }
 
@@ -4857,7 +4857,7 @@ input.lab-force-focus {
   border: 0;
   color: var(--bf-color-content-secondary);
   background: var(--bf-color-surface-panel);
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-support-font-size);
   cursor: pointer;
 }
 
@@ -4885,7 +4885,7 @@ input.lab-force-focus {
   align-items: center;
   gap: 10px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-support-font-size);
 }
 
 .colors-scale-selector .colors-filter-field select {
@@ -4915,8 +4915,8 @@ input.lab-force-focus {
 
 .colors-scale-step strong {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-support-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
 }
 
 .colors-scale-step > span {
@@ -4927,8 +4927,8 @@ input.lab-force-focus {
 
 .colors-scale-step code {
   color: var(--bf-color-content-secondary);
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-micro);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-micro-font-size);
 }
 
 .colors-palette-grid {
@@ -4955,12 +4955,12 @@ input.lab-force-focus {
 }
 
 .colors-palette-row strong {
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-support-font-size);
 }
 
 .colors-palette-row small {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-2xs);
+  font-size: var(--bf-type-overline-sm-font-size);
 }
 
 .colors-palette-swatches {
@@ -5003,12 +5003,12 @@ input.lab-force-focus {
 
 .colors-mapping-table thead th {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-support-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .colors-mapping-table tbody th {
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-lg-font-weight);
 }
 
 .colors-mapping-table tbody tr:last-child > * {
@@ -5036,7 +5036,7 @@ input.lab-force-focus {
   }
 
   .colors-heading-copy h1 {
-    font-size: var(--bf-font-size-6xl);
+    font-size: var(--bf-type-display-md-font-size);
   }
 
   .colors-context-controls {
diff --git a/design-system/packages/design-tokens/README.md b/design-system/packages/design-tokens/README.md
index eb1ad96da5..365c8ba115 100644
--- a/design-system/packages/design-tokens/README.md
+++ b/design-system/packages/design-tokens/README.md
@@ -17,3 +17,44 @@ import "@bitfun/design-tokens/tokens.css";
 Only semantic and system token names are public API. Density modes reuse the same names and override values through a scoped `data-density` attribute.
 
 `tokenCatalog` is the authoring contract for visual tools. Each entry exposes its type, CSS variable, category, description, and resolved value in every density mode. Applications normally consume `tokens`; editors consume the catalog instead of maintaining a second token list.
+
+## Semantic typography roles
+
+Text-bearing components consume a complete semantic role rather than assembling
+font family, size, weight, line height, and letter spacing from foundation
+tokens. The core interface roles are:
+
+| Content purpose | Token role | Default contract |
+| --- | --- | --- |
+| Page title | `type.heading.page` | Control, 24px, 700, 1.2, normal |
+| Compact page title | `type.heading.compactPage` | Control, 20px, 600, 1.2, normal |
+| Navigation title | `type.heading.navigation` | Control, 17px, 600, 1.2, normal |
+| Section title | `type.heading.section` | Control, 15px, 600, 1.2, normal |
+| Card title | `type.heading.card` | Control, 13px, 600, 1.2, normal |
+| Body copy | `type.body.sm` | Sans, 13px, 400, 1.5, normal |
+| Supporting text | `type.support` | Control, 11px, 400, 1.55, normal |
+| Control label | `type.label.md` | Control, 13px, 400, 1.2, normal |
+| Selected control label | `type.label.selected` | Control, 13px, 600, 1.2, normal |
+
+Use every property from the selected role so localization, platform font
+fallbacks, density, and the runtime font-size preference remain synchronized:
+
+```css
+.title {
+  font-family: var(--bf-type-heading-card-font-family);
+  font-size: var(--bf-type-heading-card-font-size);
+  font-weight: var(--bf-type-heading-card-font-weight);
+  line-height: var(--bf-type-heading-card-line-height);
+  letter-spacing: var(--bf-type-heading-card-letter-spacing);
+}
+```
+
+Foundation variables such as `--bf-font-size-sm` remain available for renderer
+adapters and non-text geometry. Public text components should use `--bf-type-*`
+roles.
+
+When an existing composition intentionally overrides only line height or
+tracking, use `type.modifier.leading.*` or `type.modifier.tracking.*` on top of
+its established role. `type.overline.*` owns extra-small uppercase annotations;
+these modifiers keep product styles semantic without changing their resolved
+metrics during migration.
diff --git a/design-system/packages/design-tokens/src/system.tokens.json b/design-system/packages/design-tokens/src/system.tokens.json
index f215d75253..1fb9696ecc 100644
--- a/design-system/packages/design-tokens/src/system.tokens.json
+++ b/design-system/packages/design-tokens/src/system.tokens.json
@@ -45,8 +45,11 @@
       "base": { "$value": "14px" },
       "lg": { "$value": "15px" },
       "xl": { "$value": "16px" },
+      "xl-plus": { "$value": "17px" },
       "2xl": { "$value": "18px" },
+      "2xl-plus": { "$value": "20px" },
       "3xl": { "$value": "22px" },
+      "3xl-plus": { "$value": "24px" },
       "4xl": { "$value": "26px" },
       "5xl": { "$value": "32px" },
       "6xl": { "$value": "40px" },
@@ -70,6 +73,7 @@
     "dense": { "$value": 1.25 },
     "snug": { "$value": 1.3 },
     "compact": { "$value": 1.32 },
+    "balanced": { "$value": 1.35 },
     "ui": { "$value": 1.4 },
     "support": { "$value": 1.45 },
     "base": { "$value": 1.5 },
@@ -119,7 +123,7 @@
       },
       "lg": {
         "fontFamily": { "$value": "{font.family.sans}" },
-        "fontSize": { "$value": "{font.size.xl}" },
+        "fontSize": { "$value": "{font.size.lg}" },
         "fontWeight": { "$value": "{font.weight.regular}" },
         "lineHeight": { "$value": "{lineHeight.relaxed}" },
         "letterSpacing": { "$value": "{letterSpacing.normal}" }
@@ -143,7 +147,7 @@
       "md": {
         "fontFamily": { "$value": "{font.family.control}" },
         "fontSize": { "$value": "{font.size.sm}" },
-        "fontWeight": { "$value": "{font.weight.medium}" },
+        "fontWeight": { "$value": "{font.weight.regular}" },
         "lineHeight": { "$value": "{lineHeight.tight}" },
         "letterSpacing": { "$value": "{letterSpacing.normal}" }
       },
@@ -164,9 +168,9 @@
     },
     "support": {
       "fontFamily": { "$value": "{font.family.control}" },
-      "fontSize": { "$value": "{font.size.xs}" },
+      "fontSize": { "$value": "{font.size.meta}" },
       "fontWeight": { "$value": "{font.weight.regular}" },
-      "lineHeight": { "$value": "{lineHeight.support}" },
+      "lineHeight": { "$value": "{lineHeight.comfortable}" },
       "letterSpacing": { "$value": "{letterSpacing.normal}" }
     },
     "meta": {
@@ -183,27 +187,64 @@
       "lineHeight": { "$value": "{lineHeight.compact}" },
       "letterSpacing": { "$value": "{letterSpacing.normal}" }
     },
+    "overline": {
+      "micro": {
+        "fontFamily": { "$value": "{font.family.control}" },
+        "fontSize": { "$value": "{font.size.4xs}" },
+        "fontWeight": { "$value": "{font.weight.semibold}" },
+        "lineHeight": { "$value": "{lineHeight.none}" },
+        "letterSpacing": { "$value": "{letterSpacing.widest}" }
+      },
+      "xs": {
+        "fontFamily": { "$value": "{font.family.control}" },
+        "fontSize": { "$value": "{font.size.3xs}" },
+        "fontWeight": { "$value": "{font.weight.semibold}" },
+        "lineHeight": { "$value": "{lineHeight.none}" },
+        "letterSpacing": { "$value": "{letterSpacing.widest}" }
+      },
+      "sm": {
+        "fontFamily": { "$value": "{font.family.control}" },
+        "fontSize": { "$value": "{font.size.2xs}" },
+        "fontWeight": { "$value": "{font.weight.semibold}" },
+        "lineHeight": { "$value": "{lineHeight.none}" },
+        "letterSpacing": { "$value": "{letterSpacing.wider}" }
+      }
+    },
     "heading": {
+      "navigation": {
+        "fontFamily": { "$value": "{font.family.control}" },
+        "fontSize": { "$value": "{font.size.xl-plus}" },
+        "fontWeight": { "$value": "{font.weight.semibold}" },
+        "lineHeight": { "$value": "{lineHeight.tight}" },
+        "letterSpacing": { "$value": "{letterSpacing.normal}" }
+      },
+      "compactPage": {
+        "fontFamily": { "$value": "{font.family.control}" },
+        "fontSize": { "$value": "{font.size.2xl-plus}" },
+        "fontWeight": { "$value": "{font.weight.semibold}" },
+        "lineHeight": { "$value": "{lineHeight.tight}" },
+        "letterSpacing": { "$value": "{letterSpacing.normal}" }
+      },
       "section": {
-        "fontFamily": { "$value": "{font.family.sans}" },
+        "fontFamily": { "$value": "{font.family.control}" },
         "fontSize": { "$value": "{font.size.lg}" },
         "fontWeight": { "$value": "{font.weight.semibold}" },
         "lineHeight": { "$value": "{lineHeight.tight}" },
-        "letterSpacing": { "$value": "{letterSpacing.snug}" }
+        "letterSpacing": { "$value": "{letterSpacing.normal}" }
       },
       "card": {
-        "fontFamily": { "$value": "{font.family.sans}" },
-        "fontSize": { "$value": "{font.size.xl}" },
+        "fontFamily": { "$value": "{font.family.control}" },
+        "fontSize": { "$value": "{font.size.sm}" },
         "fontWeight": { "$value": "{font.weight.semibold}" },
         "lineHeight": { "$value": "{lineHeight.tight}" },
-        "letterSpacing": { "$value": "{letterSpacing.snug}" }
+        "letterSpacing": { "$value": "{letterSpacing.normal}" }
       },
       "page": {
-        "fontFamily": { "$value": "{font.family.sans}" },
-        "fontSize": { "$value": "{font.size.2xl}" },
-        "fontWeight": { "$value": "{font.weight.semibold}" },
+        "fontFamily": { "$value": "{font.family.control}" },
+        "fontSize": { "$value": "{font.size.3xl-plus}" },
+        "fontWeight": { "$value": "{font.weight.bold}" },
         "lineHeight": { "$value": "{lineHeight.tight}" },
-        "letterSpacing": { "$value": "{letterSpacing.tight}" }
+        "letterSpacing": { "$value": "{letterSpacing.normal}" }
       },
       "dialog": {
         "fontFamily": { "$value": "{font.family.sans}" },
@@ -236,6 +277,27 @@
         "letterSpacing": { "$value": "{letterSpacing.normal}" }
       }
     },
+    "modifier": {
+      "$description": "Single-property semantic modifiers for intentional deviations from a complete typography role.",
+      "leading": {
+        "none": { "lineHeight": { "$value": "{lineHeight.none}" } },
+        "dense": { "lineHeight": { "$value": "{lineHeight.dense}" } },
+        "snug": { "lineHeight": { "$value": "{lineHeight.snug}" } },
+        "balanced": { "lineHeight": { "$value": "{lineHeight.balanced}" } },
+        "ui": { "lineHeight": { "$value": "{lineHeight.ui}" } },
+        "spacious": { "lineHeight": { "$value": "{lineHeight.spacious}" } },
+        "loose": { "lineHeight": { "$value": "{lineHeight.loose}" } }
+      },
+      "tracking": {
+        "tighter": { "letterSpacing": { "$value": "{letterSpacing.tighter}" } },
+        "subtle": { "letterSpacing": { "$value": "{letterSpacing.subtle}" } },
+        "wide": { "letterSpacing": { "$value": "{letterSpacing.wide}" } },
+        "wider": { "letterSpacing": { "$value": "{letterSpacing.wider}" } },
+        "widest": { "letterSpacing": { "$value": "{letterSpacing.widest}" } },
+        "caps": { "letterSpacing": { "$value": "{letterSpacing.caps}" } },
+        "expanded": { "letterSpacing": { "$value": "{letterSpacing.expanded}" } }
+      }
+    },
     "flow": {
       "body": {
         "fontFamily": { "$value": "{font.family.sans}" },
@@ -337,6 +399,13 @@
         "lineHeight": { "$value": "{lineHeight.display}" },
         "letterSpacing": { "$value": "{letterSpacing.tight}" }
       },
+      "xxl": {
+        "fontFamily": { "$value": "{font.family.sans}" },
+        "fontSize": { "$value": "{font.size.9xl}" },
+        "fontWeight": { "$value": "{font.weight.semibold}" },
+        "lineHeight": { "$value": "{lineHeight.display}" },
+        "letterSpacing": { "$value": "{letterSpacing.tight}" }
+      },
       "fluidTitle": {
         "fontFamily": { "$value": "{font.family.sans}" },
         "fontSize": { "$value": "clamp({font.size.5xl}, 3.2vw, {font.size.7xl})" },
@@ -452,12 +521,17 @@
       "$type": "dimension",
       "gap": { "$value": "2px" },
       "padding": { "$value": "2px" },
+      "paddingMd": { "$value": "3px" },
       "radius": { "$value": "{radius.pill}" },
       "segmentHeight": { "$value": "22px" },
+      "segmentHeightMd": { "$value": "28px" },
+      "pillSegmentHeight": { "$value": "24px" },
       "segmentPaddingInline": { "$value": "{space.2}" },
       "segmentGap": { "$value": "{space.1}" },
       "segmentRadius": { "$value": "{radius.pill}" },
-      "iconSize": { "$value": "12px" }
+      "pillSegmentRadius": { "$value": "{radius.sm}" },
+      "iconSize": { "$value": "12px" },
+      "iconSizeMd": { "$value": "14px" }
     },
     "composer": {
       "$type": "dimension",
diff --git a/design-system/packages/design-tokens/src/typography-runtime.mjs b/design-system/packages/design-tokens/src/typography-runtime.mjs
index 9f6153f21f..be5230197d 100644
--- a/design-system/packages/design-tokens/src/typography-runtime.mjs
+++ b/design-system/packages/design-tokens/src/typography-runtime.mjs
@@ -12,8 +12,11 @@ export const TYPOGRAPHY_SIZE_OFFSETS = Object.freeze({
   base: 0,
   lg: 1,
   xl: 2,
+  "xl-plus": 3,
   "2xl": 4,
+  "2xl-plus": 6,
   "3xl": 8,
+  "3xl-plus": 10,
   "4xl": 12,
   "5xl": 18,
   "6xl": 26,
diff --git a/design-system/packages/design-tokens/tests/contract.test.mjs b/design-system/packages/design-tokens/tests/contract.test.mjs
index 8e9b29d9cf..4c4ccb3c5e 100644
--- a/design-system/packages/design-tokens/tests/contract.test.mjs
+++ b/design-system/packages/design-tokens/tests/contract.test.mjs
@@ -62,17 +62,22 @@ test("TabGroup geometry preserves the capsule selected and outline contract", as
   assert.equal(tokens["control.tabGroup.itemRadius"], "9999px");
 });
 
-test("SegmentedControl geometry preserves the compact mode-switch pill contract", async () => {
+test("SegmentedControl geometry preserves compact, filled, and filter compositions", async () => {
   const systemDocument = await readSource("system.tokens.json");
 
   assert.equal(tokens["control.segmentedControl.gap"], "2px");
   assert.equal(tokens["control.segmentedControl.padding"], "2px");
+  assert.equal(tokens["control.segmentedControl.paddingMd"], "3px");
   assert.equal(tokens["control.segmentedControl.segmentHeight"], "22px");
+  assert.equal(tokens["control.segmentedControl.segmentHeightMd"], "28px");
+  assert.equal(tokens["control.segmentedControl.pillSegmentHeight"], "24px");
   assert.equal(tokens["control.segmentedControl.segmentPaddingInline"], "8px");
   assert.equal(tokens["control.segmentedControl.segmentGap"], "4px");
   assert.equal(tokens["control.segmentedControl.iconSize"], "12px");
+  assert.equal(tokens["control.segmentedControl.iconSizeMd"], "14px");
   assert.equal(systemDocument.control.segmentedControl.radius.$value, "{radius.pill}");
   assert.equal(systemDocument.control.segmentedControl.segmentRadius.$value, "{radius.pill}");
+  assert.equal(systemDocument.control.segmentedControl.pillSegmentRadius.$value, "{radius.sm}");
 });
 
 test("Composer geometry preserves independent context, editor, and action regions", async () => {
@@ -386,6 +391,7 @@ test("shared system scales preserve the migrated Web UI foundation contract", ()
   assert.equal(tokens["font.size.meta"], "11px");
   assert.equal(tokens["font.size.xs"], "12px");
   assert.equal(tokens["font.size.sm"], "13px");
+  assert.equal(tokens["font.size.3xl-plus"], "24px");
   assert.equal(tokens["font.size.4xl"], "26px");
   assert.equal(tokens["font.size.8xl"], "56px");
   assert.equal(tokens["font.weight.regular"], 400);
@@ -413,7 +419,35 @@ test("semantic typography roles resolve to the canonical foundation", async () =
   assert.equal(systemDocument.type.flow.body.lineHeight.$value, "{lineHeight.reading}");
   assert.equal(tokens["type.body.md.fontSize"], "14px");
   assert.equal(tokens["type.label.selected.fontWeight"], 600);
-  assert.equal(tokens["type.heading.page.fontSize"], "18px");
+  assert.equal(systemDocument.type.heading.page.fontFamily.$value, "{font.family.control}");
+  assert.equal(systemDocument.type.heading.page.fontWeight.$value, "{font.weight.bold}");
+  assert.equal(systemDocument.type.heading.navigation.fontSize.$value, "{font.size.xl-plus}");
+  assert.equal(systemDocument.type.heading.compactPage.fontSize.$value, "{font.size.2xl-plus}");
+  assert.equal(systemDocument.type.heading.section.fontSize.$value, "{font.size.lg}");
+  assert.equal(systemDocument.type.heading.card.fontSize.$value, "{font.size.sm}");
+  assert.equal(systemDocument.type.body.lg.fontSize.$value, "{font.size.lg}");
+  assert.equal(systemDocument.type.support.fontSize.$value, "{font.size.meta}");
+  assert.equal(systemDocument.type.label.md.fontWeight.$value, "{font.weight.regular}");
+  assert.equal(systemDocument.type.overline.xs.fontSize.$value, "{font.size.3xs}");
+  assert.equal(systemDocument.type.overline.sm.fontSize.$value, "{font.size.2xs}");
+  assert.equal(systemDocument.type.modifier.leading.ui.lineHeight.$value, "{lineHeight.ui}");
+  assert.equal(systemDocument.type.modifier.leading.balanced.lineHeight.$value, "{lineHeight.balanced}");
+  assert.equal(systemDocument.type.modifier.tracking.wider.letterSpacing.$value, "{letterSpacing.wider}");
+  assert.equal(systemDocument.type.display.xxl.fontSize.$value, "{font.size.9xl}");
+  assert.equal(tokens["type.heading.page.fontSize"], "24px");
+  assert.equal(tokens["type.heading.page.fontWeight"], 700);
+  assert.equal(tokens["type.heading.navigation.fontSize"], "17px");
+  assert.equal(tokens["type.heading.compactPage.fontSize"], "20px");
+  assert.equal(tokens["type.heading.section.fontSize"], "15px");
+  assert.equal(tokens["type.heading.card.fontSize"], "13px");
+  assert.equal(tokens["type.body.lg.fontSize"], "15px");
+  assert.equal(tokens["type.support.fontSize"], "11px");
+  assert.equal(tokens["type.label.md.fontWeight"], 400);
+  assert.equal(tokens["type.overline.xs.fontSize"], "8px");
+  assert.equal(tokens["type.modifier.leading.ui.lineHeight"], 1.4);
+  assert.equal(tokens["type.modifier.leading.balanced.lineHeight"], 1.35);
+  assert.equal(tokens["type.modifier.tracking.wider.letterSpacing"], "0.04em");
+  assert.equal(tokens["type.display.xxl.fontSize"], "64px");
   assert.equal(tokens["type.code.md.fontSize"], "13px");
   assert.equal(tokens["type.flow.body.lineHeight"], 1.58);
 });
@@ -424,6 +458,10 @@ test("generated CSS preserves semantic typography references", async () => {
   assert.match(css, /--bf-type-body-md-font-size: var\(--bf-font-size-base\);/);
   assert.match(css, /--bf-type-flow-body-line-height: var\(--bf-line-height-reading\);/);
   assert.match(css, /--bf-type-label-selected-font-weight: var\(--bf-font-weight-semibold\);/);
+  assert.match(css, /--bf-type-heading-compact-page-font-size: var\(--bf-font-size-2xl-plus\);/);
+  assert.match(css, /--bf-type-modifier-leading-ui-line-height: var\(--bf-line-height-ui\);/);
+  assert.match(css, /--bf-type-modifier-leading-balanced-line-height: var\(--bf-line-height-balanced\);/);
+  assert.match(css, /--bf-type-modifier-tracking-wider-letter-spacing: var\(--bf-letter-spacing-wider\);/);
 });
 
 test("runtime typography scaling uses the canonical complete size ladder", () => {
@@ -438,8 +476,11 @@ test("runtime typography scaling uses the canonical complete size ladder", () =>
     base: "14px",
     lg: "15px",
     xl: "16px",
+    "xl-plus": "17px",
     "2xl": "18px",
+    "2xl-plus": "20px",
     "3xl": "22px",
+    "3xl-plus": "24px",
     "4xl": "26px",
     "5xl": "32px",
     "6xl": "40px",
diff --git a/design-system/packages/ui/src/components/ActionCard/ActionCard.meta.ts b/design-system/packages/ui/src/components/ActionCard/ActionCard.meta.ts
index bbcb72122a..3a40eac9fb 100644
--- a/design-system/packages/ui/src/components/ActionCard/ActionCard.meta.ts
+++ b/design-system/packages/ui/src/components/ActionCard/ActionCard.meta.ts
@@ -37,10 +37,7 @@ export const actionCardMeta = {
     "control.actionCard.actionsGap",
     "control.actionCard.actionsPaddingInlineEnd",
     "control.actionCard.radius",
-    "font.family.control",
-    "font.size.lg",
-    "font.size.sm",
-    "font.weight.regular",
-    "font.weight.semibold",
+    "type.heading.card.fontSize",
+    "type.body.sm.fontSize",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/ActionCard/ActionCard.module.css b/design-system/packages/ui/src/components/ActionCard/ActionCard.module.css
index 207d553422..976e19865f 100644
--- a/design-system/packages/ui/src/components/ActionCard/ActionCard.module.css
+++ b/design-system/packages/ui/src/components/ActionCard/ActionCard.module.css
@@ -18,7 +18,6 @@
     border-radius: var(--bf-control-action-card-radius);
     color: var(--bf-color-action-neutral-content);
     background: var(--bf-color-action-neutral-surface);
-    font-family:var(--bf-font-family-sans);
     transition:
       color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
       background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -117,16 +116,20 @@
 
   .title {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-lg);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-heading-card-font-family);
+    font-size: var(--bf-type-heading-card-font-size);
+    font-weight: var(--bf-type-heading-card-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-heading-card-letter-spacing);
   }
 
   .description {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   .actions {
diff --git a/design-system/packages/ui/src/components/ActionItem/ActionItem.meta.ts b/design-system/packages/ui/src/components/ActionItem/ActionItem.meta.ts
index 34250fa0fd..83a5d10bbf 100644
--- a/design-system/packages/ui/src/components/ActionItem/ActionItem.meta.ts
+++ b/design-system/packages/ui/src/components/ActionItem/ActionItem.meta.ts
@@ -26,10 +26,9 @@ export const actionItemMeta = {
     "color.status.danger.content",
     "color.status.danger.surface",
     "control.height.sm",
-    "font.family.control",
-    "font.size.sm",
-    "font.weight.regular",
-    "font.weight.semibold",
+    "type.label.md.fontSize",
+    "type.label.selected.fontWeight",
+    "type.meta.fontSize",
     "radius.base",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/ActionItem/ActionItem.module.css b/design-system/packages/ui/src/components/ActionItem/ActionItem.module.css
index ae15fd5504..c2011bdacc 100644
--- a/design-system/packages/ui/src/components/ActionItem/ActionItem.module.css
+++ b/design-system/packages/ui/src/components/ActionItem/ActionItem.module.css
@@ -26,7 +26,7 @@
 
   .root:not([data-disabled="true"]):has(.trigger:active) .label,
   .root:not([data-disabled="true"]):has(.trigger[data-bf-preview-state="active"]) .label {
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .root:has(.trigger:focus-visible) {
@@ -94,10 +94,11 @@
     overflow: hidden;
     flex: 1 1 auto;
     min-inline-size: 0;
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-label-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-md-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -112,9 +113,11 @@
 
   .metadata {
     color: var(--bf-color-content-muted);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-meta-font-family);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-meta-font-weight);
+    line-height: var(--bf-type-meta-line-height);
+    letter-spacing: var(--bf-type-meta-letter-spacing);
     white-space: nowrap;
   }
 
diff --git a/design-system/packages/ui/src/components/ActivityItem/ActivityItem.meta.ts b/design-system/packages/ui/src/components/ActivityItem/ActivityItem.meta.ts
index 50f6349893..32a1f1482f 100644
--- a/design-system/packages/ui/src/components/ActivityItem/ActivityItem.meta.ts
+++ b/design-system/packages/ui/src/components/ActivityItem/ActivityItem.meta.ts
@@ -32,7 +32,8 @@ export const activityItemMeta = {
     "control.activityItem.inlineGap",
     "control.activityItem.inlineIconSize",
     "type.meta.fontSize",
-    "lineHeight.comfortable",
+    "type.label.md.fontSize",
+    "type.label.sm.fontWeight",
     "control.activityItem.surfaceHeight",
     "control.activityItem.surfaceGap",
     "control.activityItem.surfacePaddingBlock",
@@ -48,8 +49,5 @@ export const activityItemMeta = {
     "control.changeCount.radius",
     "control.iconButton.xsSize",
     "control.iconButton.xsIconSize",
-    "font.family.control",
-    "font.size.sm",
-    "font.weight.medium",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/ActivityItem/ActivityItem.module.css b/design-system/packages/ui/src/components/ActivityItem/ActivityItem.module.css
index 5065498256..84996e8391 100644
--- a/design-system/packages/ui/src/components/ActivityItem/ActivityItem.module.css
+++ b/design-system/packages/ui/src/components/ActivityItem/ActivityItem.module.css
@@ -21,7 +21,9 @@
     align-items: center;
     min-inline-size: 0;
     color: var(--bf-color-content-muted);
-    font-family:var(--bf-font-family-sans);
+    font-family: var(--bf-type-meta-font-family);
+    font-weight: var(--bf-type-meta-font-weight);
+    letter-spacing: var(--bf-type-meta-letter-spacing);
   }
 
   .root[data-has-detail="true"] {
@@ -97,7 +99,7 @@
   .label {
     flex: 0 0 auto;
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   .description {
@@ -107,7 +109,7 @@
   .root[data-appearance="inline"] {
     gap: var(--bf-control-activity-item-inline-gap);
     font-size: var(--bf-type-meta-font-size);
-    line-height: var(--bf-line-height-comfortable);
+    line-height: var(--bf-type-meta-line-height);
   }
 
   .root[data-appearance="inline"] .trigger,
@@ -130,8 +132,11 @@
     border: var(--bf-border-width-default) solid var(--bf-color-border-subtle);
     border-radius: var(--bf-control-activity-item-surface-radius);
     background: var(--bf-color-surface-raised);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-label-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-md-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
     transition:
       background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
       border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
@@ -201,10 +206,11 @@
     padding-block: var(--bf-control-change-count-padding-block);
     padding-inline: var(--bf-control-change-count-padding-inline);
     border-radius: var(--bf-control-change-count-radius);
-    font-family:var(--bf-font-family-sans);
+    font-family: var(--bf-type-meta-font-family);
     font-size: var(--bf-type-meta-font-size);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-tight);
+    font-weight: var(--bf-type-meta-font-weight);
+    line-height: var(--bf-type-meta-line-height);
+    letter-spacing: var(--bf-type-meta-letter-spacing);
   }
 
   .additions {
diff --git a/design-system/packages/ui/src/components/Alert/Alert.module.css b/design-system/packages/ui/src/components/Alert/Alert.module.css
index f72693c1a3..2f52203ca7 100644
--- a/design-system/packages/ui/src/components/Alert/Alert.module.css
+++ b/design-system/packages/ui/src/components/Alert/Alert.module.css
@@ -1,13 +1,13 @@
 @layer bf.components {
-  .root { display: flex; align-items: flex-start; gap: var(--bf-space-3); padding: var(--bf-space-3) var(--bf-space-4); border: var(--bf-border-width-default) solid var(--bf-color-status-info-border); border-radius: var(--bf-radius-base); color: var(--bf-color-status-info-content); background: var(--bf-color-status-info-surface); font-family:var(--bf-font-family-sans); font-size: var(--bf-font-size-sm); line-height: var(--bf-line-height-base); }
+  .root { display: flex; align-items: flex-start; gap: var(--bf-space-3); padding: var(--bf-space-3) var(--bf-space-4); border: var(--bf-border-width-default) solid var(--bf-color-status-info-border); border-radius: var(--bf-radius-base); color: var(--bf-color-status-info-content); background: var(--bf-color-status-info-surface); font-family: var(--bf-type-body-sm-font-family); font-size: var(--bf-type-body-sm-font-size); font-weight: var(--bf-type-body-sm-font-weight); line-height: var(--bf-type-body-sm-line-height); letter-spacing: var(--bf-type-body-sm-letter-spacing); }
   .root[data-bf-tone="success"] { border-color: var(--bf-color-status-success-border); color: var(--bf-color-status-success-content); background: var(--bf-color-status-success-surface); }
   .root[data-bf-tone="warning"] { border-color: var(--bf-color-status-warning-border); color: var(--bf-color-status-warning-content); background: var(--bf-color-status-warning-surface); }
   .root[data-bf-tone="error"] { border-color: var(--bf-color-status-danger-border); color: var(--bf-color-status-danger-content); background: var(--bf-color-status-danger-surface); }
   .icon { display: inline-flex; flex: 0 0 auto; margin-block-start: 1px; }
   .content { display: flex; flex: 1 1 auto; min-inline-size: 0; flex-direction: column; gap: var(--bf-space-1); }
-  .title { color: var(--bf-color-content-primary); font-weight: var(--bf-font-weight-semibold); }
+  .title { color: var(--bf-color-content-primary); font-family: var(--bf-type-heading-card-font-family); font-size: var(--bf-type-heading-card-font-size); font-weight: var(--bf-type-heading-card-font-weight); line-height: var(--bf-type-heading-card-line-height); letter-spacing: var(--bf-type-heading-card-letter-spacing); }
   .message { color: var(--bf-color-content-primary); }
-  .description { color: var(--bf-color-content-secondary); font-size: var(--bf-font-size-xs); }
+  .description { color: var(--bf-color-content-secondary); font-family: var(--bf-type-support-font-family); font-size: var(--bf-type-support-font-size); font-weight: var(--bf-type-support-font-weight); line-height: var(--bf-type-support-line-height); letter-spacing: var(--bf-type-support-letter-spacing); }
   .close { flex: 0 0 auto; margin: calc(var(--bf-space-1) * -1); }
   @media (forced-colors: active) { .root { border-color: CanvasText; } }
 }
diff --git a/design-system/packages/ui/src/components/Avatar/Avatar.module.css b/design-system/packages/ui/src/components/Avatar/Avatar.module.css
index 4a3e5601ed..cc9ae59bdb 100644
--- a/design-system/packages/ui/src/components/Avatar/Avatar.module.css
+++ b/design-system/packages/ui/src/components/Avatar/Avatar.module.css
@@ -1,6 +1,6 @@
 @layer bf.components {
-  .root { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--bf-control-height-md); block-size: var(--bf-control-height-md); overflow: hidden; flex: 0 0 auto; border: var(--bf-border-width-default) solid var(--bf-color-field-border); border-radius: var(--bf-radius-pill); color: var(--bf-color-content-secondary); background: var(--bf-color-action-neutral-surface); font-family:var(--bf-font-family-sans); font-size: var(--bf-font-size-sm); font-weight: var(--bf-font-weight-semibold); }
-  .root[data-size="sm"] { inline-size: var(--bf-control-height-sm); block-size: var(--bf-control-height-sm); font-size: var(--bf-font-size-xs); }
+  .root { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--bf-control-height-md); block-size: var(--bf-control-height-md); overflow: hidden; flex: 0 0 auto; border: var(--bf-border-width-default) solid var(--bf-color-field-border); border-radius: var(--bf-radius-pill); color: var(--bf-color-content-secondary); background: var(--bf-color-action-neutral-surface); font-family: var(--bf-type-label-selected-font-family); font-size: var(--bf-type-label-selected-font-size); font-weight: var(--bf-type-label-selected-font-weight); line-height: var(--bf-type-label-selected-line-height); letter-spacing: var(--bf-type-label-selected-letter-spacing); }
+  .root[data-size="sm"] { inline-size: var(--bf-control-height-sm); block-size: var(--bf-control-height-sm); font-size: var(--bf-type-label-sm-font-size); }
   .root[data-size="lg"] { inline-size: var(--bf-control-height-lg); block-size: var(--bf-control-height-lg); }
   .root[data-bf-shape="square"] { border-radius: var(--bf-radius-base); }
   .image { inline-size: 100%; block-size: 100%; object-fit: cover; }
diff --git a/design-system/packages/ui/src/components/Button/Button.meta.ts b/design-system/packages/ui/src/components/Button/Button.meta.ts
index c0ebaab9c8..21c455ced2 100644
--- a/design-system/packages/ui/src/components/Button/Button.meta.ts
+++ b/design-system/packages/ui/src/components/Button/Button.meta.ts
@@ -40,10 +40,10 @@ export const buttonMeta = {
     "control.button.xsLeadingIconSize",
     "control.button.xsTrailingIconSize",
     "type.meta.fontSize",
-    "font.family.control",
-    "font.size.sm",
-    "font.weight.regular",
-    "font.weight.semibold",
+    "type.label.sm.fontSize",
+    "type.label.md.fontSize",
+    "type.label.lg.fontSize",
+    "type.label.selected.fontWeight",
     "radius.pill",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Button/Button.module.css b/design-system/packages/ui/src/components/Button/Button.module.css
index f1ca42b849..aae5ce6fdb 100644
--- a/design-system/packages/ui/src/components/Button/Button.module.css
+++ b/design-system/packages/ui/src/components/Button/Button.module.css
@@ -5,7 +5,7 @@
     --_button-background-active: var(--bf-color-action-neutral-surface);
     --_button-border: var(--bf-color-action-neutral-border);
     --_button-content: var(--bf-color-action-neutral-content);
-    --_button-font-size: var(--bf-font-size-sm);
+    --_button-font-size: var(--bf-type-label-md-font-size);
     --_button-height: var(--bf-control-height-md);
     --_button-leading-icon-size: 16px;
     --_button-padding-block: var(--bf-space-component-block);
@@ -24,11 +24,11 @@
     border-radius: var(--bf-radius-pill);
     color: var(--_button-content);
     background: var(--_button-background);
-    font-family:var(--bf-font-family-sans);
+    font-family: var(--bf-type-label-md-font-family);
     font-size: var(--_button-font-size);
-    font-weight: var(--bf-font-weight-regular);
-    letter-spacing: var(--bf-letter-spacing-normal);
-    line-height: var(--bf-line-height-tight);
+    font-weight: var(--bf-type-label-md-font-weight);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
+    line-height: var(--bf-type-label-md-line-height);
     white-space: nowrap;
     cursor: pointer;
     transition:
@@ -43,7 +43,7 @@
 
   .button:is(:active, [data-bf-preview-state="active"]):not(:disabled) {
     background: var(--_button-background-active);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .button:focus-visible {
@@ -146,7 +146,7 @@
   }
 
   .button[data-size="sm"] {
-    --_button-font-size: var(--bf-font-size-xs);
+    --_button-font-size: var(--bf-type-label-sm-font-size);
     --_button-height: var(--bf-control-height-sm);
     --_button-leading-icon-size: 12px;
     --_button-padding-block: var(--bf-space-1);
@@ -155,7 +155,7 @@
   }
 
   .button[data-size="lg"] {
-    --_button-font-size: var(--bf-font-size-base);
+    --_button-font-size: var(--bf-type-label-lg-font-size);
     --_button-height: var(--bf-control-height-lg);
     --_button-leading-icon-size: 20px;
     --_button-padding-inline: var(--bf-space-6);
@@ -174,7 +174,7 @@
     align-items: center;
     min-inline-size: 0;
     gap: var(--bf-space-1);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
     overflow: hidden;
     text-overflow: ellipsis;
   }
diff --git a/design-system/packages/ui/src/components/Card/Card.meta.ts b/design-system/packages/ui/src/components/Card/Card.meta.ts
index 75bba8e34d..aaf8741640 100644
--- a/design-system/packages/ui/src/components/Card/Card.meta.ts
+++ b/design-system/packages/ui/src/components/Card/Card.meta.ts
@@ -37,10 +37,7 @@ export const cardMeta = {
     "layout.card.titleDescriptionGap",
     "layout.card.footerGap",
     "layout.card.mediaMinBlockSize",
-    "font.family.control",
-    "font.size.lg",
-    "font.size.sm",
-    "font.weight.regular",
-    "font.weight.semibold",
+    "type.heading.card.fontSize",
+    "type.body.sm.fontSize",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Card/Card.module.css b/design-system/packages/ui/src/components/Card/Card.module.css
index fc0ebd1829..06513c6517 100644
--- a/design-system/packages/ui/src/components/Card/Card.module.css
+++ b/design-system/packages/ui/src/components/Card/Card.module.css
@@ -123,20 +123,22 @@
     min-inline-size: 0;
     overflow-wrap: anywhere;
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-lg);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-heading-card-font-family);
+    font-size: var(--bf-type-heading-card-font-size);
+    font-weight: var(--bf-type-heading-card-font-weight);
+    line-height: var(--bf-type-heading-card-line-height);
+    letter-spacing: var(--bf-type-heading-card-letter-spacing);
   }
 
   .description,
   .body {
     min-inline-size: 0;
     color: var(--bf-color-content-secondary);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   .body[data-align="start"] {
diff --git a/design-system/packages/ui/src/components/Checkbox/Checkbox.module.css b/design-system/packages/ui/src/components/Checkbox/Checkbox.module.css
index 84dc7427cf..6d8dc03c26 100644
--- a/design-system/packages/ui/src/components/Checkbox/Checkbox.module.css
+++ b/design-system/packages/ui/src/components/Checkbox/Checkbox.module.css
@@ -7,9 +7,11 @@
     min-inline-size: 0;
     gap: var(--bf-space-2);
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-label-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-md-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
     cursor: pointer;
   }
 
@@ -77,7 +79,7 @@
   .input:is(:checked, :indeterminate) + .box .icon { opacity: 1; }
   .content { display: inline-flex; min-inline-size: 0; flex-direction: column; gap: var(--bf-space-1); }
   .label { color: inherit; }
-  .description { color: var(--bf-color-content-muted); font-size: var(--bf-font-size-xs); }
+  .description { color: var(--bf-color-content-muted); font-family: var(--bf-type-support-font-family); font-size: var(--bf-type-support-font-size); font-weight: var(--bf-type-support-font-weight); line-height: var(--bf-type-support-line-height); letter-spacing: var(--bf-type-support-letter-spacing); }
 
   @media (prefers-reduced-motion: reduce) { .box { transition: none; } }
   @media (forced-colors: active) {
diff --git a/design-system/packages/ui/src/components/Combobox/Combobox.module.css b/design-system/packages/ui/src/components/Combobox/Combobox.module.css
index 6d0ccfcfbc..b59129e3ba 100644
--- a/design-system/packages/ui/src/components/Combobox/Combobox.module.css
+++ b/design-system/packages/ui/src/components/Combobox/Combobox.module.css
@@ -40,10 +40,11 @@
 
   .visibleLabel {
     color: var(--bf-color-content-secondary);
-    font-family: var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-label-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-md-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
   }
 
   .error {
@@ -52,6 +53,7 @@
     font-size: var(--bf-type-support-font-size);
     font-weight: var(--bf-type-support-font-weight);
     line-height: var(--bf-type-support-line-height);
+    letter-spacing: var(--bf-type-support-letter-spacing);
   }
 
   .control {
@@ -81,10 +83,11 @@
     outline: 0;
     color: inherit;
     background: var(--bf-color-field-background);
-    font-family: var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-label-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-md-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
     text-align: start;
     cursor: pointer;
     transition:
diff --git a/design-system/packages/ui/src/components/Composer/Composer.meta.ts b/design-system/packages/ui/src/components/Composer/Composer.meta.ts
index 953be42114..1e9e23cf72 100644
--- a/design-system/packages/ui/src/components/Composer/Composer.meta.ts
+++ b/design-system/packages/ui/src/components/Composer/Composer.meta.ts
@@ -36,9 +36,7 @@ export const composerMeta = {
     "control.composer.editorPadding",
     "control.composer.toolbarGap",
     "control.composer.dividerBlockSize",
-    "font.family.control",
-    "font.size.sm",
-    "font.weight.regular",
+    "type.body.sm.fontSize",
     "shadow.composer",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Composer/Composer.module.css b/design-system/packages/ui/src/components/Composer/Composer.module.css
index d013bde23f..2e8d0eb72f 100644
--- a/design-system/packages/ui/src/components/Composer/Composer.module.css
+++ b/design-system/packages/ui/src/components/Composer/Composer.module.css
@@ -99,10 +99,11 @@
     min-block-size: 0;
     padding: var(--bf-control-composer-editor-padding);
     color: inherit;
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   .editor > :where(textarea, input, [contenteditable="true"]) {
diff --git a/design-system/packages/ui/src/components/ConfirmDialog/ConfirmDialog.meta.ts b/design-system/packages/ui/src/components/ConfirmDialog/ConfirmDialog.meta.ts
index b6b033c650..13d4d83aa6 100644
--- a/design-system/packages/ui/src/components/ConfirmDialog/ConfirmDialog.meta.ts
+++ b/design-system/packages/ui/src/components/ConfirmDialog/ConfirmDialog.meta.ts
@@ -45,9 +45,7 @@ export const confirmDialogMeta = {
     "layout.confirmDialog.previewPaddingBlock",
     "layout.confirmDialog.previewPaddingInline",
     "layout.confirmDialog.previewRadius",
-    "font.family.control",
-    "font.family.mono",
-    "font.size.base",
-    "font.size.xs",
+    "type.body.md.fontSize",
+    "type.code.sm.fontSize",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/ConfirmDialog/ConfirmDialog.module.css b/design-system/packages/ui/src/components/ConfirmDialog/ConfirmDialog.module.css
index 3098f0ebe6..d43e468a0e 100644
--- a/design-system/packages/ui/src/components/ConfirmDialog/ConfirmDialog.module.css
+++ b/design-system/packages/ui/src/components/ConfirmDialog/ConfirmDialog.module.css
@@ -58,10 +58,11 @@
     min-inline-size: 0;
     flex: 1 1 auto;
     color: var(--bf-color-content-secondary);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-body-md-font-family);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-body-md-font-weight);
+    line-height: var(--bf-type-body-md-line-height);
+    letter-spacing: var(--bf-type-body-md-letter-spacing);
   }
 
   .message > :first-child {
@@ -89,9 +90,11 @@
   .preview pre {
     margin: 0;
     color: inherit;
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-code-sm-font-family);
+    font-size: var(--bf-type-code-sm-font-size);
+    font-weight: var(--bf-type-code-sm-font-weight);
+    line-height: var(--bf-type-code-sm-line-height);
+    letter-spacing: var(--bf-type-code-sm-letter-spacing);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
diff --git a/design-system/packages/ui/src/components/Dialog/Dialog.module.css b/design-system/packages/ui/src/components/Dialog/Dialog.module.css
index 5e44f77d97..a862d85a23 100644
--- a/design-system/packages/ui/src/components/Dialog/Dialog.module.css
+++ b/design-system/packages/ui/src/components/Dialog/Dialog.module.css
@@ -95,7 +95,8 @@
     font-family: var(--bf-type-heading-dialog-font-family);
     font-size: var(--bf-type-heading-dialog-font-size);
     font-weight: var(--bf-type-heading-dialog-font-weight);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
diff --git a/design-system/packages/ui/src/components/Disclosure/Disclosure.meta.ts b/design-system/packages/ui/src/components/Disclosure/Disclosure.meta.ts
index fabda08258..1445a926cb 100644
--- a/design-system/packages/ui/src/components/Disclosure/Disclosure.meta.ts
+++ b/design-system/packages/ui/src/components/Disclosure/Disclosure.meta.ts
@@ -24,10 +24,9 @@ export const disclosureMeta = {
     "color.action.neutral.surfacePressed",
     "color.content.muted",
     "color.focus.ring",
-    "font.family.control",
-    "font.size.xs",
-    "font.size.sm",
-    "font.weight.medium",
+    "type.label.md.fontSize",
+    "type.body.sm.lineHeight",
+    "type.support.fontSize",
     "layout.disclosure.triggerMinBlockSize",
     "layout.disclosure.triggerPaddingBlock",
     "layout.disclosure.triggerPaddingInline",
@@ -37,8 +36,6 @@ export const disclosureMeta = {
     "layout.disclosure.actionsGap",
     "layout.disclosure.contentPaddingBlock",
     "layout.disclosure.contentPaddingInline",
-    "lineHeight.base",
-    "lineHeight.tight",
     "space.1",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Disclosure/Disclosure.module.css b/design-system/packages/ui/src/components/Disclosure/Disclosure.module.css
index c0af055772..6477ff0162 100644
--- a/design-system/packages/ui/src/components/Disclosure/Disclosure.module.css
+++ b/design-system/packages/ui/src/components/Disclosure/Disclosure.module.css
@@ -2,7 +2,6 @@
   .root {
     min-inline-size: 0;
     color: var(--bf-color-action-neutral-content);
-    font-family:var(--bf-font-family-sans);
   }
 
   .header {
@@ -81,17 +80,22 @@
 
   .summary {
     overflow: hidden;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-label-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-md-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .description {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-support-font-family);
+    font-size: var(--bf-type-support-font-size);
+    font-weight: var(--bf-type-support-font-weight);
+    line-height: var(--bf-type-support-line-height);
+    letter-spacing: var(--bf-type-support-letter-spacing);
   }
 
   .actions {
diff --git a/design-system/packages/ui/src/components/Empty/Empty.module.css b/design-system/packages/ui/src/components/Empty/Empty.module.css
index cabf3463d5..d761235107 100644
--- a/design-system/packages/ui/src/components/Empty/Empty.module.css
+++ b/design-system/packages/ui/src/components/Empty/Empty.module.css
@@ -39,18 +39,21 @@
 
   .title {
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-heading-card-font-family);
+    font-size: var(--bf-type-heading-card-font-size);
+    font-weight: var(--bf-type-heading-card-font-weight);
+    line-height: var(--bf-type-heading-card-line-height);
+    letter-spacing: var(--bf-type-heading-card-letter-spacing);
   }
 
   .description {
     max-inline-size: 42ch;
     color: var(--bf-color-content-muted);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   .actions {
diff --git a/design-system/packages/ui/src/components/Field/Field.meta.ts b/design-system/packages/ui/src/components/Field/Field.meta.ts
index d90cdbaf8c..ef5c7bd81a 100644
--- a/design-system/packages/ui/src/components/Field/Field.meta.ts
+++ b/design-system/packages/ui/src/components/Field/Field.meta.ts
@@ -35,10 +35,7 @@ export const fieldMeta = {
     "layout.field.labelGap",
     "layout.field.labelActionGap",
     "layout.field.controlGap",
-    "font.family.control",
-    "font.size.xs",
-    "font.size.sm",
-    "font.weight.regular",
-    "font.weight.semibold",
+    "type.label.md.fontSize",
+    "type.support.fontSize",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Field/Field.module.css b/design-system/packages/ui/src/components/Field/Field.module.css
index f8764cfe83..d4c2180adb 100644
--- a/design-system/packages/ui/src/components/Field/Field.module.css
+++ b/design-system/packages/ui/src/components/Field/Field.module.css
@@ -66,10 +66,11 @@
     align-items: center;
     gap: var(--bf-layout-field-label-gap);
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-label-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-md-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
   }
 
   .required {
@@ -85,19 +86,21 @@
 
   .description {
     color: var(--bf-color-content-muted);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-support-font-family);
+    font-size: var(--bf-type-support-font-size);
+    font-weight: var(--bf-type-support-font-weight);
+    line-height: var(--bf-type-support-line-height);
+    letter-spacing: var(--bf-type-support-letter-spacing);
   }
 
   .error {
     grid-column: 1 / -1;
     color: var(--bf-color-status-danger-content);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-support-font-family);
+    font-size: var(--bf-type-support-font-size);
+    font-weight: var(--bf-type-support-font-weight);
+    line-height: var(--bf-type-support-line-height);
+    letter-spacing: var(--bf-type-support-letter-spacing);
   }
 
   .control {
diff --git a/design-system/packages/ui/src/components/FieldGroup/FieldGroup.meta.ts b/design-system/packages/ui/src/components/FieldGroup/FieldGroup.meta.ts
index a5e296a20c..eee40d9b75 100644
--- a/design-system/packages/ui/src/components/FieldGroup/FieldGroup.meta.ts
+++ b/design-system/packages/ui/src/components/FieldGroup/FieldGroup.meta.ts
@@ -25,13 +25,10 @@ export const fieldGroupMeta = {
     "layout.formSection.gap",
     "layout.formSection.headerGap",
     "layout.formSection.titleDescriptionGap",
-    "type.body.lg.fontSize",
+    "type.heading.section.fontSize",
+    "type.body.sm.fontSize",
     "layout.fieldGroup.radius",
     "layout.fieldGroup.rowPaddingBlock",
     "layout.fieldGroup.rowPaddingInline",
-    "font.family.control",
-    "font.size.sm",
-    "font.weight.regular",
-    "font.weight.semibold",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/FieldGroup/FieldGroup.module.css b/design-system/packages/ui/src/components/FieldGroup/FieldGroup.module.css
index 75f83d1135..4311e06f6c 100644
--- a/design-system/packages/ui/src/components/FieldGroup/FieldGroup.module.css
+++ b/design-system/packages/ui/src/components/FieldGroup/FieldGroup.module.css
@@ -55,18 +55,20 @@
   .title {
     margin: 0;
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-type-body-lg-font-size);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-heading-section-font-family);
+    font-size: var(--bf-type-heading-section-font-size);
+    font-weight: var(--bf-type-heading-section-font-weight);
+    line-height: var(--bf-type-heading-section-line-height);
+    letter-spacing: var(--bf-type-heading-section-letter-spacing);
   }
 
   .description {
     color: var(--bf-color-content-muted);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   .actions {
diff --git a/design-system/packages/ui/src/components/Input/Input.meta.ts b/design-system/packages/ui/src/components/Input/Input.meta.ts
index 0d14c5b3eb..3fe09eb07f 100644
--- a/design-system/packages/ui/src/components/Input/Input.meta.ts
+++ b/design-system/packages/ui/src/components/Input/Input.meta.ts
@@ -32,9 +32,7 @@ export const inputMeta = {
     "control.height.sm",
     "control.height.md",
     "control.height.lg",
-    "font.family.control",
-    "font.size.sm",
-    "font.weight.regular",
+    "type.label.md.fontSize",
     "radius.base",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Input/Input.module.css b/design-system/packages/ui/src/components/Input/Input.module.css
index 046587241b..4ab7e33059 100644
--- a/design-system/packages/ui/src/components/Input/Input.module.css
+++ b/design-system/packages/ui/src/components/Input/Input.module.css
@@ -63,10 +63,11 @@
     caret-color: var(--bf-color-accent-default);
     color: inherit;
     background: transparent;
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-label-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-md-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
   }
 
   .input::placeholder {
diff --git a/design-system/packages/ui/src/components/KeyHint/KeyHint.meta.ts b/design-system/packages/ui/src/components/KeyHint/KeyHint.meta.ts
index 362864a587..6b2ef77c68 100644
--- a/design-system/packages/ui/src/components/KeyHint/KeyHint.meta.ts
+++ b/design-system/packages/ui/src/components/KeyHint/KeyHint.meta.ts
@@ -13,9 +13,7 @@ export const keyHintMeta = {
   tokens: [
     "color.content.muted",
     "color.keyHint.background",
-    "font.family.control",
-    "font.size.micro",
-    "font.weight.regular",
+    "type.micro.fontSize",
     "radius.xs",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/KeyHint/KeyHint.module.css b/design-system/packages/ui/src/components/KeyHint/KeyHint.module.css
index 927a2a7507..2a6b7adc50 100644
--- a/design-system/packages/ui/src/components/KeyHint/KeyHint.module.css
+++ b/design-system/packages/ui/src/components/KeyHint/KeyHint.module.css
@@ -13,11 +13,11 @@
     border-radius: var(--bf-radius-xs);
     color: var(--bf-color-content-muted);
     background: var(--bf-color-key-hint-background);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-regular);
-    letter-spacing: var(--bf-letter-spacing-normal);
-    line-height: var(--bf-line-height-none);
+    font-family: var(--bf-type-micro-font-family);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-micro-font-weight);
+    letter-spacing: var(--bf-type-micro-letter-spacing);
+    line-height: var(--bf-type-micro-line-height);
     text-decoration: none;
     vertical-align: middle;
     white-space: nowrap;
diff --git a/design-system/packages/ui/src/components/Listbox/Listbox.module.css b/design-system/packages/ui/src/components/Listbox/Listbox.module.css
index 243531a658..229c4ef8b8 100644
--- a/design-system/packages/ui/src/components/Listbox/Listbox.module.css
+++ b/design-system/packages/ui/src/components/Listbox/Listbox.module.css
@@ -48,10 +48,11 @@
     min-block-size: var(--bf-overlay-menu-heading-height);
     padding-inline: var(--bf-overlay-menu-heading-padding-inline);
     color: var(--bf-color-content-muted);
-    font-family: var(--bf-font-family-sans);
+    font-family: var(--bf-type-meta-font-family);
     font-size: var(--bf-type-meta-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-meta-font-weight);
     line-height: var(--bf-type-meta-line-height);
+    letter-spacing: var(--bf-type-meta-letter-spacing);
   }
 
   .option {
@@ -129,14 +130,15 @@
   .description,
   .metadata {
     overflow: hidden;
-    font-family: var(--bf-font-family-sans);
+    font-family: var(--bf-type-label-md-font-family);
     text-overflow: ellipsis;
   }
 
   .label {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-md-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
     white-space: nowrap;
   }
 
@@ -144,7 +146,9 @@
   .metadata {
     color: var(--bf-color-content-muted);
     font-size: var(--bf-type-meta-font-size);
-    line-height: var(--bf-line-height-tight);
+    font-weight: var(--bf-type-meta-font-weight);
+    line-height: var(--bf-type-meta-line-height);
+    letter-spacing: var(--bf-type-meta-letter-spacing);
   }
 
   .description {
@@ -163,9 +167,11 @@
   .empty {
     padding: var(--bf-space-3);
     color: var(--bf-color-content-muted);
-    font-family: var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
     text-align: center;
   }
 
diff --git a/design-system/packages/ui/src/components/Menu/Menu.module.css b/design-system/packages/ui/src/components/Menu/Menu.module.css
index d0d92d439a..81c2c5fac5 100644
--- a/design-system/packages/ui/src/components/Menu/Menu.module.css
+++ b/design-system/packages/ui/src/components/Menu/Menu.module.css
@@ -78,10 +78,11 @@
     flex: 1 1 auto;
     min-inline-size: 0;
     color: var(--bf-color-content-muted);
-    font-family:var(--bf-font-family-sans);
+    font-family: var(--bf-type-meta-font-family);
     font-size: var(--bf-type-meta-font-size);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-base);
+    font-weight: var(--bf-type-meta-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-meta-letter-spacing);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
diff --git a/design-system/packages/ui/src/components/NavigationPanel/NavigationPanel.meta.ts b/design-system/packages/ui/src/components/NavigationPanel/NavigationPanel.meta.ts
index e17a2a2fed..8fd1c9c069 100644
--- a/design-system/packages/ui/src/components/NavigationPanel/NavigationPanel.meta.ts
+++ b/design-system/packages/ui/src/components/NavigationPanel/NavigationPanel.meta.ts
@@ -19,9 +19,7 @@ export const navigationPanelMeta = {
     "color.action.neutral.surface",
     "color.action.neutral.surfacePressed",
     "color.focus.ring",
-    "font.family.control",
-    "font.weight.medium",
-    "font.weight.semibold",
+    "type.label.selected.fontWeight",
     "layout.navigationPanel.inlineSize",
     "layout.navigationPanel.surfacePadding",
     "layout.navigationPanel.contentGap",
diff --git a/design-system/packages/ui/src/components/NavigationPanel/NavigationPanel.module.css b/design-system/packages/ui/src/components/NavigationPanel/NavigationPanel.module.css
index de44f667c3..cd5ece3406 100644
--- a/design-system/packages/ui/src/components/NavigationPanel/NavigationPanel.module.css
+++ b/design-system/packages/ui/src/components/NavigationPanel/NavigationPanel.module.css
@@ -90,7 +90,8 @@
     font-family: var(--bf-type-meta-font-family);
     font-size: var(--bf-type-meta-font-size);
     font-weight: var(--bf-type-meta-font-weight);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-meta-letter-spacing);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -132,7 +133,7 @@
   }
 
   .item > [data-bf-part="trigger"][aria-current] > [data-bf-part="label"] {
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .separator {
diff --git a/design-system/packages/ui/src/components/NumberBadge/NumberBadge.meta.ts b/design-system/packages/ui/src/components/NumberBadge/NumberBadge.meta.ts
index 34fb5eaf90..f4942f8bf4 100644
--- a/design-system/packages/ui/src/components/NumberBadge/NumberBadge.meta.ts
+++ b/design-system/packages/ui/src/components/NumberBadge/NumberBadge.meta.ts
@@ -11,8 +11,7 @@ export const numberBadgeMeta = {
   ],
   states: ["default"],
   tokens: [
-    "space.1", "space.5", "space.6", "font.family.control", "font.size.meta",
-    "font.weight.medium", "lineHeight.tight", "radius.pill",
+    "space.1", "space.5", "space.6", "type.meta.fontSize", "radius.pill",
     "color.action.neutral.content", "color.action.neutral.surface",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/NumberBadge/NumberBadge.module.css b/design-system/packages/ui/src/components/NumberBadge/NumberBadge.module.css
index adf098d3d3..ce29b83f54 100644
--- a/design-system/packages/ui/src/components/NumberBadge/NumberBadge.module.css
+++ b/design-system/packages/ui/src/components/NumberBadge/NumberBadge.module.css
@@ -10,10 +10,11 @@
     padding: calc(var(--bf-space-1) / 2);
     vertical-align: middle;
     color: var(--bf-color-action-neutral-content);
-    font-family: var(--bf-font-family-control);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-meta-font-family);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-meta-font-weight);
+    line-height: var(--bf-type-meta-line-height);
+    letter-spacing: var(--bf-type-meta-letter-spacing);
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
diff --git a/design-system/packages/ui/src/components/NumberInput/NumberInput.module.css b/design-system/packages/ui/src/components/NumberInput/NumberInput.module.css
index 5638145ecb..ab84cdcaec 100644
--- a/design-system/packages/ui/src/components/NumberInput/NumberInput.module.css
+++ b/design-system/packages/ui/src/components/NumberInput/NumberInput.module.css
@@ -1,19 +1,19 @@
 @layer bf.components {
-  .root { --_height: var(--bf-control-height-md); display: inline-flex; min-inline-size: 0; flex-direction: column; gap: var(--bf-space-2); color: var(--bf-color-content-primary); font-family:var(--bf-font-family-sans); }
+  .root { --_height: var(--bf-control-height-md); display: inline-flex; min-inline-size: 0; flex-direction: column; gap: var(--bf-space-2); color: var(--bf-color-content-primary); }
   .root[data-size="sm"] { --_height: var(--bf-control-height-sm); }
   .root[data-size="lg"] { --_height: var(--bf-control-height-lg); }
-  .label { font-size: var(--bf-font-size-sm); font-weight: var(--bf-font-weight-medium); }
+  .label { font-family: var(--bf-type-label-md-font-family); font-size: var(--bf-type-label-md-font-size); font-weight: var(--bf-type-label-md-font-weight); line-height: var(--bf-type-label-md-line-height); letter-spacing: var(--bf-type-label-md-letter-spacing); }
   .control { display: inline-flex; align-items: stretch; min-inline-size: 0; block-size: var(--_height); overflow: hidden; border: var(--bf-border-width-default) solid var(--bf-color-field-border); border-radius: var(--bf-radius-base); background: var(--bf-color-field-background); transition: border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard), box-shadow var(--bf-motion-duration-fast) var(--bf-motion-easing-standard); }
   .control:hover { border-color: var(--bf-color-field-border-hover); }
   .control:focus-within { border-color: var(--bf-color-field-border-focus); box-shadow: 0 0 0 var(--bf-focus-width) var(--bf-color-focus-ring); }
-  .input { min-inline-size: 0; inline-size: 100%; padding-inline: var(--bf-space-3); border: 0; outline: 0; color: inherit; background: transparent; font: inherit; font-size: var(--bf-font-size-sm); text-align: end; }
-  .unit { display: inline-flex; align-items: center; padding-inline-end: var(--bf-space-2); color: var(--bf-color-content-muted); font-size: var(--bf-font-size-xs); }
+  .input { min-inline-size: 0; inline-size: 100%; padding-inline: var(--bf-space-3); border: 0; outline: 0; color: inherit; background: transparent; font-family: var(--bf-type-label-md-font-family); font-size: var(--bf-type-label-md-font-size); font-weight: var(--bf-type-label-md-font-weight); line-height: var(--bf-type-label-md-line-height); letter-spacing: var(--bf-type-label-md-letter-spacing); text-align: end; }
+  .unit { display: inline-flex; align-items: center; padding-inline-end: var(--bf-space-2); color: var(--bf-color-content-muted); font-family: var(--bf-type-support-font-family); font-size: var(--bf-type-support-font-size); font-weight: var(--bf-type-support-font-weight); line-height: var(--bf-type-support-line-height); letter-spacing: var(--bf-type-support-letter-spacing); }
   .buttons { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-inline-start: var(--bf-border-width-default) solid var(--bf-color-field-border); }
   .buttons button { min-inline-size: 22px; padding: 0; border: 0; color: var(--bf-color-content-muted); background: transparent; font: inherit; cursor: pointer; }
   .buttons button:hover:not(:disabled) { color: var(--bf-color-content-primary); background: var(--bf-color-action-neutral-surface-hover); }
   .buttons button:disabled, .root[data-disabled="true"] { color: var(--bf-color-content-disabled); cursor: not-allowed; }
   .root[data-variant="default"] .buttons { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
-  .root[data-variant="default"] .buttons button { min-inline-size: 20px; font-size: var(--bf-font-size-xs); line-height: var(--bf-line-height-none); }
+  .root[data-variant="default"] .buttons button { min-inline-size: 20px; font-size: var(--bf-type-meta-font-size); line-height: var(--bf-type-meta-line-height); }
   @media (prefers-reduced-motion: reduce) { .control { transition: none; } }
   @media (forced-colors: active) { .control { border-color: ButtonText; } .control:focus-within { border-color: Highlight; box-shadow: 0 0 0 var(--bf-focus-width) Highlight; } }
 }
diff --git a/design-system/packages/ui/src/components/PageHeader/PageHeader.meta.ts b/design-system/packages/ui/src/components/PageHeader/PageHeader.meta.ts
index b533befb7a..7a26915413 100644
--- a/design-system/packages/ui/src/components/PageHeader/PageHeader.meta.ts
+++ b/design-system/packages/ui/src/components/PageHeader/PageHeader.meta.ts
@@ -20,14 +20,11 @@ export const pageHeaderMeta = {
     "color.accent.default",
     "color.content.primary",
     "color.content.muted",
-    "font.family.sans",
-    "font.size.sm",
-    "font.size.base",
-    "font.size.lg",
-    "font.size.2xl",
-    "font.size.3xl",
-    "font.size.4xl",
-    "font.weight.regular",
-    "font.weight.semibold",
+    "type.heading.page.fontSize",
+    "type.heading.section.fontSize",
+    "type.heading.display.fontSize",
+    "type.display.sm.fontSize",
+    "type.body.lg.fontSize",
+    "type.body.sm.fontSize",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/PageHeader/PageHeader.module.css b/design-system/packages/ui/src/components/PageHeader/PageHeader.module.css
index eb415fe5b1..429dd70760 100644
--- a/design-system/packages/ui/src/components/PageHeader/PageHeader.module.css
+++ b/design-system/packages/ui/src/components/PageHeader/PageHeader.module.css
@@ -36,22 +36,35 @@
   .heading {
     margin: 0;
     color: inherit;
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-2xl);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-heading-page-font-family);
+    font-size: var(--bf-type-heading-page-font-size);
+    font-weight: var(--bf-type-heading-page-font-weight);
+    line-height: var(--bf-type-heading-page-line-height);
+    letter-spacing: var(--bf-type-heading-page-letter-spacing);
   }
 
   .root[data-size="sm"] .heading {
-    font-size: var(--bf-font-size-lg);
+    font-family: var(--bf-type-heading-section-font-family);
+    font-size: var(--bf-type-heading-section-font-size);
+    font-weight: var(--bf-type-heading-section-font-weight);
+    line-height: var(--bf-type-heading-section-line-height);
+    letter-spacing: var(--bf-type-heading-section-letter-spacing);
   }
 
   .root[data-size="lg"] .heading {
-    font-size: var(--bf-font-size-3xl);
+    font-family: var(--bf-type-heading-display-font-family);
+    font-size: var(--bf-type-heading-display-font-size);
+    font-weight: var(--bf-type-heading-display-font-weight);
+    line-height: var(--bf-type-heading-display-line-height);
+    letter-spacing: var(--bf-type-heading-display-letter-spacing);
   }
 
   .root[data-size="display"] .heading {
-    font-size: var(--bf-font-size-4xl);
+    font-family: var(--bf-type-display-sm-font-family);
+    font-size: var(--bf-type-display-sm-font-size);
+    font-weight: var(--bf-type-display-sm-font-weight);
+    line-height: var(--bf-type-display-sm-line-height);
+    letter-spacing: var(--bf-type-display-sm-letter-spacing);
   }
 
   .required {
@@ -61,14 +74,19 @@
 
   .description {
     color: var(--bf-color-content-muted);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-body-lg-font-family);
+    font-size: var(--bf-type-body-lg-font-size);
+    font-weight: var(--bf-type-body-lg-font-weight);
+    line-height: var(--bf-type-body-lg-line-height);
+    letter-spacing: var(--bf-type-body-lg-letter-spacing);
   }
 
   .root[data-size="sm"] .description {
-    font-size: var(--bf-font-size-sm);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   .action {
diff --git a/design-system/packages/ui/src/components/Radio/Radio.module.css b/design-system/packages/ui/src/components/Radio/Radio.module.css
index b6e146e8ea..25c003fcdf 100644
--- a/design-system/packages/ui/src/components/Radio/Radio.module.css
+++ b/design-system/packages/ui/src/components/Radio/Radio.module.css
@@ -7,7 +7,6 @@
     align-items: flex-start;
     gap: var(--bf-space-2);
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
     cursor: pointer;
   }
 
@@ -99,15 +98,20 @@
   }
 
   .label {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-label-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-md-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
   }
 
   .description {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-support-font-family);
+    font-size: var(--bf-type-support-font-size);
+    font-weight: var(--bf-type-support-font-weight);
+    line-height: var(--bf-type-support-line-height);
+    letter-spacing: var(--bf-type-support-letter-spacing);
   }
 
   @media (prefers-reduced-motion: reduce) {
diff --git a/design-system/packages/ui/src/components/SearchField/SearchField.meta.ts b/design-system/packages/ui/src/components/SearchField/SearchField.meta.ts
index 8d4088bf3c..7efa01f9dd 100644
--- a/design-system/packages/ui/src/components/SearchField/SearchField.meta.ts
+++ b/design-system/packages/ui/src/components/SearchField/SearchField.meta.ts
@@ -35,9 +35,8 @@ export const searchFieldMeta = {
     "control.height.sm",
     "control.height.md",
     "control.height.lg",
-    "font.family.control",
-    "font.size.xs",
-    "font.size.sm",
+    "type.label.md.fontSize",
+    "type.meta.fontSize",
     "radius.pill",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/SearchField/SearchField.module.css b/design-system/packages/ui/src/components/SearchField/SearchField.module.css
index e67a6265c2..195924aa35 100644
--- a/design-system/packages/ui/src/components/SearchField/SearchField.module.css
+++ b/design-system/packages/ui/src/components/SearchField/SearchField.module.css
@@ -26,9 +26,11 @@
     justify-content: center;
     min-inline-size: 0;
     color: var(--bf-color-content-muted);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-meta-font-family);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-meta-font-weight);
+    line-height: var(--bf-type-meta-line-height);
+    letter-spacing: var(--bf-type-meta-letter-spacing);
     white-space: nowrap;
   }
 
diff --git a/design-system/packages/ui/src/components/SegmentedControl/SegmentedControl.meta.ts b/design-system/packages/ui/src/components/SegmentedControl/SegmentedControl.meta.ts
index f3f795be61..2f18b7e4a4 100644
--- a/design-system/packages/ui/src/components/SegmentedControl/SegmentedControl.meta.ts
+++ b/design-system/packages/ui/src/components/SegmentedControl/SegmentedControl.meta.ts
@@ -11,6 +11,9 @@ export const segmentedControlMeta = {
     { name: "defaultValue", type: "string" },
     { name: "onValueChange", type: "(value: string) => void" },
     { defaultValue: "false", name: "disabled", type: "boolean" },
+    { defaultValue: '"content"', name: "distribution", type: '"content" | "fill"' },
+    { defaultValue: '"sm"', name: "size", type: '"sm" | "md"' },
+    { defaultValue: '"bar"', name: "variant", type: '"bar" | "pills"' },
   ],
   states: ["selected", "unselected", "hover", "disabled"],
   tokens: [
@@ -25,15 +28,18 @@ export const segmentedControlMeta = {
     "color.surface.subtle",
     "control.segmentedControl.gap",
     "control.segmentedControl.padding",
+    "control.segmentedControl.paddingMd",
     "control.segmentedControl.radius",
     "control.segmentedControl.segmentHeight",
+    "control.segmentedControl.segmentHeightMd",
+    "control.segmentedControl.pillSegmentHeight",
     "control.segmentedControl.segmentPaddingInline",
     "control.segmentedControl.segmentGap",
     "control.segmentedControl.segmentRadius",
+    "control.segmentedControl.pillSegmentRadius",
     "control.segmentedControl.iconSize",
-    "type.meta.fontSize",
-    "font.family.control",
-    "font.weight.regular",
-    "font.weight.medium",
+    "control.segmentedControl.iconSizeMd",
+    "type.label.md.fontSize",
+    "type.label.selected.fontWeight",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/SegmentedControl/SegmentedControl.module.css b/design-system/packages/ui/src/components/SegmentedControl/SegmentedControl.module.css
index b665a46160..1debc685a8 100644
--- a/design-system/packages/ui/src/components/SegmentedControl/SegmentedControl.module.css
+++ b/design-system/packages/ui/src/components/SegmentedControl/SegmentedControl.module.css
@@ -16,6 +16,15 @@
     background: var(--bf-color-action-neutral-surface);
   }
 
+  .root[data-distribution="fill"] {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  .root[data-distribution="fill"] .segment {
+    flex: 1 1 0;
+  }
+
   .segment {
     display: inline-flex;
     align-items: center;
@@ -30,10 +39,11 @@
     border-radius: var(--bf-control-segmented-control-segment-radius);
     color: var(--bf-color-action-neutral-content);
     background: transparent;
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-type-meta-font-size);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-label-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-md-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
     white-space: nowrap;
     cursor: pointer;
     transition:
@@ -44,7 +54,41 @@
   .segment[aria-checked="true"] {
     color: var(--bf-color-content-primary);
     background: var(--bf-color-surface-raised);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-selected-font-weight);
+  }
+
+  .root[data-size="md"] {
+    padding: var(--bf-control-segmented-control-padding-md);
+  }
+
+  .root[data-size="md"] .segment {
+    block-size: var(--bf-control-segmented-control-segment-height-md);
+  }
+
+  .root[data-size="md"] .icon {
+    inline-size: var(--bf-control-segmented-control-icon-size-md);
+    block-size: var(--bf-control-segmented-control-icon-size-md);
+  }
+
+  .root[data-variant="pills"] {
+    gap: var(--bf-space-2);
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  .root[data-variant="pills"] .segment {
+    block-size: var(--bf-control-segmented-control-pill-segment-height);
+    border: var(--bf-border-width-default) solid var(--bf-color-action-neutral-border);
+    border-radius: var(--bf-control-segmented-control-pill-segment-radius);
+    background: var(--bf-color-surface-raised);
+  }
+
+  .root[data-variant="pills"] .segment[aria-checked="true"] {
+    border-color: var(--bf-color-action-primary-background);
+    color: var(--bf-color-action-primary-content);
+    background: var(--bf-color-action-primary-background);
   }
 
   .segment:hover:not(:disabled)[aria-checked="false"],
@@ -85,7 +129,7 @@
 
   .label {
     min-inline-size: 0;
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
     overflow: hidden;
     text-overflow: ellipsis;
   }
diff --git a/design-system/packages/ui/src/components/SegmentedControl/SegmentedControl.tsx b/design-system/packages/ui/src/components/SegmentedControl/SegmentedControl.tsx
index e74807b630..7dd030d95f 100644
--- a/design-system/packages/ui/src/components/SegmentedControl/SegmentedControl.tsx
+++ b/design-system/packages/ui/src/components/SegmentedControl/SegmentedControl.tsx
@@ -23,9 +23,12 @@ export interface SegmentedControlProps
   > {
   defaultValue?: string;
   disabled?: boolean;
+  distribution?: "content" | "fill";
   onValueChange?: (value: string) => void;
   options: readonly SegmentedControlOption[];
+  size?: "sm" | "md";
   value?: string;
+  variant?: "bar" | "pills";
 }
 
 function getFirstEnabledValue(options: readonly SegmentedControlOption[]): string {
@@ -47,9 +50,12 @@ export const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps
     className,
     defaultValue,
     disabled = false,
+    distribution = "content",
     onValueChange,
     options,
+    size = "sm",
     value,
+    variant = "bar",
     ...props
   }, ref) {
     const segmentRefs = useRef<Array<HTMLButtonElement | null>>([]);
@@ -122,6 +128,9 @@ export const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps
         data-bf-component="segmented-control"
         data-bf-part="root"
         data-disabled={disabled ? "true" : "false"}
+        data-distribution={distribution}
+        data-size={size}
+        data-variant={variant}
         ref={ref}
         role="radiogroup"
       >
diff --git a/design-system/packages/ui/src/components/Select/Select.meta.ts b/design-system/packages/ui/src/components/Select/Select.meta.ts
index 925b36fe63..39617b8b01 100644
--- a/design-system/packages/ui/src/components/Select/Select.meta.ts
+++ b/design-system/packages/ui/src/components/Select/Select.meta.ts
@@ -37,8 +37,6 @@ export const selectMeta = {
     "control.select.contentGap",
     "control.select.indicatorSize",
     "control.select.radius",
-    "font.family.control",
-    "font.size.sm",
-    "font.weight.regular",
+    "type.label.md.fontSize",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Select/Select.module.css b/design-system/packages/ui/src/components/Select/Select.module.css
index a20d4878d2..f2a8d074eb 100644
--- a/design-system/packages/ui/src/components/Select/Select.module.css
+++ b/design-system/packages/ui/src/components/Select/Select.module.css
@@ -53,10 +53,11 @@
     outline: 0;
     color: inherit;
     background: var(--bf-color-field-background);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-label-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-md-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
     appearance: none;
     cursor: pointer;
     transition:
diff --git a/design-system/packages/ui/src/components/Spinner/Spinner.module.css b/design-system/packages/ui/src/components/Spinner/Spinner.module.css
index b7c2c62889..44a266ba6a 100644
--- a/design-system/packages/ui/src/components/Spinner/Spinner.module.css
+++ b/design-system/packages/ui/src/components/Spinner/Spinner.module.css
@@ -62,12 +62,12 @@
     align-items: center;
     justify-content: center;
     gap: 0.2em;
-    font-size: var(--bf-font-size-2xl);
+    font-size: var(--bf-type-flow-section-title-font-size);
   }
 
-  .root[data-variant="bars"][data-size="xs"] { font-size: var(--bf-font-size-meta); }
-  .root[data-variant="bars"][data-size="sm"] { font-size: var(--bf-font-size-base); }
-  .root[data-variant="bars"][data-size="lg"] { font-size: var(--bf-font-size-3xl); }
+  .root[data-variant="bars"][data-size="xs"] { font-size: var(--bf-type-support-font-size); }
+  .root[data-variant="bars"][data-size="sm"] { font-size: var(--bf-type-body-md-font-size); }
+  .root[data-variant="bars"][data-size="lg"] { font-size: var(--bf-type-flow-page-title-font-size); }
 
   .root[data-variant="bars"] .cell {
     inline-size: 0.22em;
diff --git a/design-system/packages/ui/src/components/StatusPill/StatusPill.meta.ts b/design-system/packages/ui/src/components/StatusPill/StatusPill.meta.ts
index 182e9ffa15..7e4a865c71 100644
--- a/design-system/packages/ui/src/components/StatusPill/StatusPill.meta.ts
+++ b/design-system/packages/ui/src/components/StatusPill/StatusPill.meta.ts
@@ -29,7 +29,5 @@ export const statusPillMeta = {
     "control.statusPill.radius",
     "control.statusPill.iconSize",
     "type.meta.fontSize",
-    "font.family.control",
-    "font.weight.regular",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/StatusPill/StatusPill.module.css b/design-system/packages/ui/src/components/StatusPill/StatusPill.module.css
index 924c199d37..f0e6a4f03a 100644
--- a/design-system/packages/ui/src/components/StatusPill/StatusPill.module.css
+++ b/design-system/packages/ui/src/components/StatusPill/StatusPill.module.css
@@ -15,10 +15,11 @@
     border-radius: var(--bf-control-status-pill-radius);
     color: var(--bf-color-status-success-content);
     background: var(--bf-color-status-success-surface);
-    font-family:var(--bf-font-family-sans);
+    font-family: var(--bf-type-meta-font-family);
     font-size: var(--bf-type-meta-font-size);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-tight);
+    font-weight: var(--bf-type-meta-font-weight);
+    line-height: var(--bf-type-meta-line-height);
+    letter-spacing: var(--bf-type-meta-letter-spacing);
     white-space: nowrap;
   }
 
diff --git a/design-system/packages/ui/src/components/TabGroup/TabGroup.meta.ts b/design-system/packages/ui/src/components/TabGroup/TabGroup.meta.ts
index 53b4baa045..059649056e 100644
--- a/design-system/packages/ui/src/components/TabGroup/TabGroup.meta.ts
+++ b/design-system/packages/ui/src/components/TabGroup/TabGroup.meta.ts
@@ -28,10 +28,9 @@ export const tabGroupMeta = {
     "control.tabGroup.itemActionSize",
     "control.tabGroup.itemActionInset",
     "control.tabGroup.itemRadius",
-    "font.family.control",
-    "font.size.sm",
-    "font.weight.regular",
-    "font.weight.semibold",
+    "type.label.md.fontSize",
+    "type.label.selected.fontWeight",
+    "type.body.sm.lineHeight",
     "radius.pill",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/TabGroup/TabGroup.module.css b/design-system/packages/ui/src/components/TabGroup/TabGroup.module.css
index 6be393354e..790b045b45 100644
--- a/design-system/packages/ui/src/components/TabGroup/TabGroup.module.css
+++ b/design-system/packages/ui/src/components/TabGroup/TabGroup.module.css
@@ -31,11 +31,11 @@
     border-radius: var(--bf-control-tab-group-item-radius);
     color: var(--_tab-content);
     background: var(--_tab-background);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
-    letter-spacing: var(--bf-letter-spacing-normal);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-label-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-md-font-weight);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
+    line-height: var(--bf-type-label-md-line-height);
     white-space: nowrap;
     cursor: pointer;
     transition:
@@ -57,7 +57,7 @@
     --_tab-background-hover: var(--bf-color-action-neutral-surface-hover);
     --_tab-border: transparent;
 
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .tab:hover:not(:disabled),
@@ -69,7 +69,7 @@
   .tab:active:not(:disabled),
   .tabGroup[data-bf-preview-state="active"] .tab[aria-selected="false"]:not(:disabled) {
     background: var(--_tab-background-active);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .tab:focus-visible {
@@ -102,7 +102,7 @@
 
   .label {
     min-inline-size: 0;
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
     overflow: hidden;
     text-overflow: ellipsis;
   }
diff --git a/design-system/packages/ui/src/components/Textarea/Textarea.meta.ts b/design-system/packages/ui/src/components/Textarea/Textarea.meta.ts
index cf54844c2d..304bf0bd90 100644
--- a/design-system/packages/ui/src/components/Textarea/Textarea.meta.ts
+++ b/design-system/packages/ui/src/components/Textarea/Textarea.meta.ts
@@ -11,5 +11,5 @@ export const textareaMeta = {
     { name: "autoResize", type: "boolean", defaultValue: "false" }, { name: "showCount", type: "boolean", defaultValue: "false" },
   ],
   states: ["default", "hover", "focus-visible", "invalid", "disabled"],
-  tokens: ["color.content.primary", "color.content.muted", "color.content.disabled", "color.field.background", "color.field.border", "color.field.borderFocus", "color.focus.ring", "color.status.danger.border"],
+  tokens: ["color.content.primary", "color.content.muted", "color.content.disabled", "color.field.background", "color.field.border", "color.field.borderFocus", "color.focus.ring", "color.status.danger.border", "type.label.md.fontSize", "type.body.sm.fontSize", "type.support.fontSize", "type.code.md.fontSize"],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Textarea/Textarea.module.css b/design-system/packages/ui/src/components/Textarea/Textarea.module.css
index 9387d60df7..e266af2cb8 100644
--- a/design-system/packages/ui/src/components/Textarea/Textarea.module.css
+++ b/design-system/packages/ui/src/components/Textarea/Textarea.module.css
@@ -1,7 +1,7 @@
 @layer bf.components {
-  .root { display: inline-flex; min-inline-size: 0; flex-direction: column; gap: var(--bf-space-2); color: var(--bf-color-content-primary); font-family:var(--bf-font-family-sans); }
+  .root { display: inline-flex; min-inline-size: 0; flex-direction: column; gap: var(--bf-space-2); color: var(--bf-color-content-primary); }
   .root[data-layout="fill"] { flex: 1 1 auto; min-block-size: 0; }
-  .label { font-size: var(--bf-font-size-sm); font-weight: var(--bf-font-weight-medium); line-height: var(--bf-line-height-tight); }
+  .label { font-family: var(--bf-type-label-md-font-family); font-size: var(--bf-type-label-md-font-size); font-weight: var(--bf-type-label-md-font-weight); line-height: var(--bf-type-label-md-line-height); letter-spacing: var(--bf-type-label-md-letter-spacing); }
   .required, .error { color: var(--bf-color-status-danger-content); }
   .textarea {
     min-block-size: calc(var(--bf-control-height-lg) * 2);
@@ -15,13 +15,15 @@
     caret-color: var(--bf-color-accent-default);
     color: var(--bf-color-content-primary);
     background: var(--bf-color-field-background);
-    font: inherit;
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
     transition: background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard), border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard), box-shadow var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
   }
   .root[data-auto-resize="true"] .textarea { overflow: hidden; resize: none; }
-  .root[data-font="mono"] .textarea { font-family: var(--bf-font-family-mono); }
+  .root[data-font="mono"] .textarea { font-family: var(--bf-type-code-md-font-family); font-size: var(--bf-type-code-md-font-size); font-weight: var(--bf-type-code-md-font-weight); line-height: var(--bf-type-code-md-line-height); letter-spacing: var(--bf-type-code-md-letter-spacing); }
   .root[data-layout="fill"] .textarea { flex: 1 1 auto; min-block-size: 0; }
   .root[data-resize="none"] .textarea { resize: none; }
   .root[data-variant="filled"] .textarea { border-color: transparent; }
@@ -30,7 +32,7 @@
   .root[data-invalid="true"] .textarea { border-color: var(--bf-color-status-danger-border); }
   .textarea:disabled { color: var(--bf-color-content-disabled); cursor: not-allowed; }
   .textarea::placeholder, .hint, .count { color: var(--bf-color-content-muted); }
-  .support { display: flex; justify-content: space-between; gap: var(--bf-space-3); font-size: var(--bf-font-size-xs); line-height: var(--bf-line-height-tight); }
+  .support { display: flex; justify-content: space-between; gap: var(--bf-space-3); font-family: var(--bf-type-support-font-family); font-size: var(--bf-type-support-font-size); font-weight: var(--bf-type-support-font-weight); line-height: var(--bf-type-support-line-height); letter-spacing: var(--bf-type-support-letter-spacing); }
   .count { margin-inline-start: auto; white-space: nowrap; }
   @media (prefers-reduced-motion: reduce) { .textarea { transition: none; } }
   @media (forced-colors: active) { .textarea { border-color: ButtonText; } .textarea:focus { border-color: Highlight; box-shadow: 0 0 0 var(--bf-focus-width) Highlight; } }
diff --git a/design-system/packages/ui/src/components/Toolbar/Toolbar.meta.ts b/design-system/packages/ui/src/components/Toolbar/Toolbar.meta.ts
index a4bbaaa3f5..453a41f7aa 100644
--- a/design-system/packages/ui/src/components/Toolbar/Toolbar.meta.ts
+++ b/design-system/packages/ui/src/components/Toolbar/Toolbar.meta.ts
@@ -35,8 +35,6 @@ export const toolbarMeta = {
     "type.meta.fontSize",
     "layout.toolbar.separatorBlockSize",
     "layout.toolbar.overflowFadeExtent",
-    "font.family.control",
-    "font.weight.medium",
     "radius.pill",
   ],
 } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/components/Tooltip/Tooltip.meta.ts b/design-system/packages/ui/src/components/Tooltip/Tooltip.meta.ts
index 8f81b7512c..e7a5c8e334 100644
--- a/design-system/packages/ui/src/components/Tooltip/Tooltip.meta.ts
+++ b/design-system/packages/ui/src/components/Tooltip/Tooltip.meta.ts
@@ -23,8 +23,6 @@ export const tooltipMeta = {
     "color.border.subtle",
     "color.border.default",
     "color.border.strong",
-    "font.family.sans",
-    "font.weight.regular",
     "shadow.sm",
     "overlay.tooltip.maxInlineSize",
     "overlay.tooltip.maxBlockSize",
diff --git a/design-system/packages/ui/src/components/Tooltip/Tooltip.module.css b/design-system/packages/ui/src/components/Tooltip/Tooltip.module.css
index f2ce60cccf..dd52be8baf 100644
--- a/design-system/packages/ui/src/components/Tooltip/Tooltip.module.css
+++ b/design-system/packages/ui/src/components/Tooltip/Tooltip.module.css
@@ -41,10 +41,11 @@
     border-radius: var(--bf-overlay-tooltip-surface-radius);
     background: color-mix(in srgb, var(--bf-color-surface-raised) 96%, transparent);
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
+    font-family: var(--bf-type-support-font-family);
     font-size: var(--bf-type-support-font-size);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-base);
+    font-weight: var(--bf-type-support-font-weight);
+    line-height: var(--bf-type-support-line-height);
+    letter-spacing: var(--bf-type-support-letter-spacing);
     overflow-wrap: break-word;
     user-select: text;
     box-shadow: var(--bf-shadow-sm);
diff --git a/design-system/packages/ui/src/flow-chat/ask-user/AskUser.module.css b/design-system/packages/ui/src/flow-chat/ask-user/AskUser.module.css
index 91a32c8d71..d87525025d 100644
--- a/design-system/packages/ui/src/flow-chat/ask-user/AskUser.module.css
+++ b/design-system/packages/ui/src/flow-chat/ask-user/AskUser.module.css
@@ -10,8 +10,8 @@
     background: var(--bf-color-surface-panel);
     box-shadow: none;
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
-    line-height: var(--bf-line-height-tight);
+    font-family:var(--bf-type-body-md-font-family);
+    line-height: var(--bf-type-heading-page-line-height);
   }
 
   .header,
@@ -29,8 +29,8 @@
     padding-block: var(--bf-control-ask-user-summary-padding-block);
     padding-inline: var(--bf-control-ask-user-summary-padding-inline-start);
     border-block-end: var(--bf-border-width-default) solid var(--bf-color-border-subtle);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-label-lg-font-weight);
   }
 
   .summaryButton {
@@ -70,9 +70,9 @@
   .summaryCopy {
     flex: 1 1 auto;
     gap: var(--bf-space-1);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-label-lg-font-weight);
+    line-height: var(--bf-type-heading-page-line-height);
   }
 
   .summaryIcon,
@@ -175,9 +175,9 @@
     inline-size: 100%;
     padding-inline: var(--bf-control-ask-user-question-padding-inline);
     color: var(--bf-color-action-neutral-content);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-heading-page-line-height);
   }
 
   .options {
@@ -252,15 +252,15 @@
 
   .optionLabel,
   .optionDescription {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .optionLabel {
     flex: 0 1 auto;
     min-inline-size: 0;
     color: var(--bf-color-action-neutral-content);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-tight);
+    font-weight: var(--bf-type-label-lg-font-weight);
+    line-height: var(--bf-type-heading-page-line-height);
   }
 
   .optionDescription {
@@ -269,7 +269,7 @@
     max-inline-size: var(--bf-control-ask-user-description-max-width);
     min-inline-size: 0;
     color: var(--bf-color-content-muted);
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-md-font-weight);
     line-height: var(--bf-type-body-sm-line-height);
     text-align: end;
     text-overflow: ellipsis;
@@ -322,9 +322,9 @@
   }
 
   .statusText {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-body-xs-font-size);
+    font-weight: var(--bf-type-label-lg-font-weight);
+    line-height: var(--bf-type-body-md-line-height);
   }
 
   .root[data-bf-state="asking"] .statusIcon,
diff --git a/design-system/packages/ui/src/flow-chat/composer/ChatComposer.module.css b/design-system/packages/ui/src/flow-chat/composer/ChatComposer.module.css
index 5c197980d9..ddcd8fec9d 100644
--- a/design-system/packages/ui/src/flow-chat/composer/ChatComposer.module.css
+++ b/design-system/packages/ui/src/flow-chat/composer/ChatComposer.module.css
@@ -7,7 +7,7 @@
     border-radius: var(--bf-radius-2xl);
     color: var(--bf-color-content-primary);
     background: transparent;
-    font-family:var(--bf-font-family-sans);
+    font-family:var(--bf-type-body-md-font-family);
   }
 
   .root[data-has-context="true"] {
@@ -133,9 +133,9 @@
     align-self: stretch;
     align-items: center;
     padding: var(--bf-space-1);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-md-font-weight);
+    line-height: var(--bf-type-body-md-line-height);
   }
 
   .surface[data-bf-layout="expanded"] .content {
diff --git a/design-system/packages/ui/src/flow-chat/composer/ChatComposerQueue.module.css b/design-system/packages/ui/src/flow-chat/composer/ChatComposerQueue.module.css
index 52ebbe49c6..f5a535a850 100644
--- a/design-system/packages/ui/src/flow-chat/composer/ChatComposerQueue.module.css
+++ b/design-system/packages/ui/src/flow-chat/composer/ChatComposerQueue.module.css
@@ -11,7 +11,7 @@
     border-radius: var(--bf-radius-lg);
     color: var(--bf-color-content-primary);
     background: var(--bf-color-surface-subtle);
-    font-family:var(--bf-font-family-sans);
+    font-family:var(--bf-type-body-md-font-family);
   }
 
   .header {
@@ -20,9 +20,9 @@
     align-items: center;
     gap: var(--bf-space-1);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-md-font-weight);
+    line-height: var(--bf-type-body-md-line-height);
   }
 
   .header > :where(svg, img) {
@@ -105,9 +105,9 @@
     flex-direction: column;
     gap: var(--bf-space-1);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-body-md-font-weight);
+    line-height: var(--bf-type-body-md-line-height);
     transition: color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
   }
 
@@ -127,10 +127,10 @@
     border-radius: var(--bf-radius-pill);
     color: var(--bf-color-content-secondary);
     background: var(--bf-color-surface-raised);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-label-lg-font-weight);
     font-variant-numeric: tabular-nums;
-    line-height: var(--bf-line-height-none);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
   }
 
   .actions {
diff --git a/design-system/packages/ui/src/flow-chat/tool-cards/CommandToolCard.module.css b/design-system/packages/ui/src/flow-chat/tool-cards/CommandToolCard.module.css
index 366f6d0bde..9c4fc5330e 100644
--- a/design-system/packages/ui/src/flow-chat/tool-cards/CommandToolCard.module.css
+++ b/design-system/packages/ui/src/flow-chat/tool-cards/CommandToolCard.module.css
@@ -13,9 +13,9 @@
     border-radius: 0;
     color: var(--bf-color-content-secondary);
     background: transparent;
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-label-lg-font-weight);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -23,7 +23,7 @@
   .command[data-empty="true"] {
     color: var(--bf-color-content-muted);
     font-style: italic;
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-md-font-weight);
   }
 
   .statusSummary {
@@ -32,7 +32,7 @@
     align-items: center;
     gap: var(--bf-space-1);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .statusLabel {
@@ -42,8 +42,8 @@
     padding-inline: var(--bf-space-2);
     border-radius: var(--bf-radius-sm);
     background: var(--bf-color-action-neutral-surface);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     white-space: nowrap;
   }
 
@@ -116,7 +116,7 @@
     justify-content: center;
     padding: var(--bf-space-3);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
     font-style: italic;
     text-align: center;
   }
@@ -149,7 +149,7 @@
     border-radius: var(--bf-radius-sm);
     color: var(--bf-color-content-muted);
     background: var(--bf-color-surface-raised);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .footerItem {
@@ -170,8 +170,8 @@
 
   .footerLabel {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .footerValue {
@@ -181,7 +181,7 @@
   }
 
   .footerItem[data-monospace="true"] .footerValue {
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
   }
 
   .footerItem[data-tone="success"] .footerValue {
@@ -198,8 +198,8 @@
 
   .error {
     color: var(--bf-color-status-danger-content);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-body-sm-font-size);
+    line-height: var(--bf-type-body-md-line-height);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
diff --git a/design-system/packages/ui/src/flow-chat/tool-cards/ContextCompressionToolCard.module.css b/design-system/packages/ui/src/flow-chat/tool-cards/ContextCompressionToolCard.module.css
index d213f65200..9be73ab281 100644
--- a/design-system/packages/ui/src/flow-chat/tool-cards/ContextCompressionToolCard.module.css
+++ b/design-system/packages/ui/src/flow-chat/tool-cards/ContextCompressionToolCard.module.css
@@ -9,13 +9,13 @@
     overflow: hidden;
     min-inline-size: 0;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .summary {
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
     font-variant-numeric: tabular-nums;
   }
 
@@ -25,8 +25,8 @@
   }
 
   .error {
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-body-sm-font-size);
+    line-height: var(--bf-type-body-md-line-height);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
     color: var(--bf-color-status-danger-content);
diff --git a/design-system/packages/ui/src/flow-chat/tool-cards/FileOperationToolCard.module.css b/design-system/packages/ui/src/flow-chat/tool-cards/FileOperationToolCard.module.css
index 1467267aca..c741a16671 100644
--- a/design-system/packages/ui/src/flow-chat/tool-cards/FileOperationToolCard.module.css
+++ b/design-system/packages/ui/src/flow-chat/tool-cards/FileOperationToolCard.module.css
@@ -8,8 +8,8 @@
     overflow: hidden;
     min-inline-size: 0;
     color: var(--bf-color-content-secondary);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -36,7 +36,7 @@
     border-radius: var(--bf-radius-sm);
     color: var(--bf-color-content-muted);
     background: var(--bf-color-action-neutral-surface);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
     white-space: nowrap;
   }
 
@@ -56,8 +56,8 @@
     flex-direction: column;
     gap: var(--bf-space-2);
     color: var(--bf-color-status-danger-content);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-body-sm-font-size);
+    line-height: var(--bf-type-body-md-line-height);
   }
 
   .error[data-guidance="true"] {
@@ -68,7 +68,7 @@
     display: inline-flex;
     align-items: center;
     gap: var(--bf-space-2);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .errorMessage {
diff --git a/design-system/packages/ui/src/flow-chat/tool-cards/FlowChatToolCard.module.css b/design-system/packages/ui/src/flow-chat/tool-cards/FlowChatToolCard.module.css
index a74901e09c..882dd8beb7 100644
--- a/design-system/packages/ui/src/flow-chat/tool-cards/FlowChatToolCard.module.css
+++ b/design-system/packages/ui/src/flow-chat/tool-cards/FlowChatToolCard.module.css
@@ -11,7 +11,7 @@
     min-inline-size: 0;
     flex-direction: column;
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
+    font-family:var(--bf-type-body-md-font-family);
   }
 
   .prominentRoot {
@@ -68,26 +68,26 @@
     gap: var(--bf-space-2);
     padding-block: var(--bf-space-1);
     padding-inline: var(--bf-space-3) var(--bf-space-1);
-    line-height: var(--bf-line-height-tight);
+    line-height: var(--bf-type-heading-page-line-height);
   }
 
   .actionLabel,
   .content,
   .extra {
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 
   .ambientAction,
   .ambientContent,
   .ambientExtra {
     min-inline-size: 0;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .actionLabel {
     flex: 0 0 auto;
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     white-space: nowrap;
   }
 
@@ -98,7 +98,7 @@
     align-items: center;
     gap: var(--bf-space-2);
     color: var(--bf-color-content-secondary);
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-md-font-weight);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -121,7 +121,7 @@
     gap: var(--bf-space-1);
     margin-inline-start: auto;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .changeSummary {
@@ -130,10 +130,10 @@
     align-items: center;
     gap: var(--bf-space-1);
     color: var(--bf-color-content-muted);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
     font-variant-numeric: tabular-nums;
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     white-space: nowrap;
   }
 
@@ -380,8 +380,8 @@
     padding: var(--bf-space-3);
     border-block-start: var(--bf-border-width-default) solid var(--bf-color-border-subtle);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-body-sm-font-size);
+    line-height: var(--bf-type-body-md-line-height);
   }
 
   .error {
@@ -391,7 +391,7 @@
   .ambientRoot {
     gap: 0;
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-md-line-height);
   }
 
   .ambientRoot[data-bf-direct-action="true"] {
@@ -438,7 +438,7 @@
   .ambientAction {
     flex: 0 0 auto;
     color: inherit;
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-lg-font-weight);
     white-space: nowrap;
   }
 
@@ -446,7 +446,7 @@
     overflow: hidden;
     flex: 1 1 auto;
     color: inherit;
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-md-font-weight);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
diff --git a/design-system/packages/ui/src/flow-chat/tool-cards/ProminentToolCards.module.css b/design-system/packages/ui/src/flow-chat/tool-cards/ProminentToolCards.module.css
index fc9120e315..3984483d8d 100644
--- a/design-system/packages/ui/src/flow-chat/tool-cards/ProminentToolCards.module.css
+++ b/design-system/packages/ui/src/flow-chat/tool-cards/ProminentToolCards.module.css
@@ -4,8 +4,8 @@
     min-inline-size: 0;
     overflow: hidden;
     color: var(--bf-color-content-secondary);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -17,7 +17,7 @@
     align-items: center;
     gap: var(--bf-space-1);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .summary {
@@ -50,9 +50,9 @@
     border-radius: var(--bf-radius-sm);
     background: var(--bf-color-surface-canvas);
     color: var(--bf-color-content-secondary);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    line-height: var(--bf-type-body-md-line-height);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
@@ -66,10 +66,10 @@
   .outputLabel,
   .sectionLabel {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   }
 
   .outputGroup[data-tone="warning"] .outputBlock {
@@ -92,7 +92,7 @@
     border-radius: var(--bf-radius-sm);
     background: var(--bf-color-surface-raised);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .footerItem {
@@ -107,7 +107,7 @@
   }
 
   .footerLabel {
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .footerValue {
@@ -119,7 +119,7 @@
   }
 
   .footerItem[data-monospace="true"] .footerValue {
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
   }
 
   .footerItem[data-tone="success"] .footerValue {
@@ -132,8 +132,8 @@
 
   .error {
     color: var(--bf-color-status-danger-content);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-body-sm-font-size);
+    line-height: var(--bf-type-body-md-line-height);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
@@ -141,8 +141,8 @@
   .errorMeta {
     margin-block-start: var(--bf-space-2);
     color: var(--bf-color-content-muted);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .diffPath {
@@ -150,8 +150,8 @@
     overflow: hidden;
     min-inline-size: 0;
     color: var(--bf-color-content-secondary);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -167,7 +167,7 @@
     padding-block-end: var(--bf-space-2);
     border-block-end: 1px solid var(--bf-color-border-subtle);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .reviewDetails,
@@ -181,8 +181,8 @@
   .reviewSummary {
     margin: 0;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-body-sm-font-size);
+    line-height: var(--bf-type-body-md-line-height);
   }
 
   .fileList {
@@ -191,9 +191,9 @@
     margin: 0;
     padding-inline-start: var(--bf-space-4);
     color: var(--bf-color-content-secondary);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    line-height: var(--bf-type-body-md-line-height);
   }
 
   .actions {
@@ -209,12 +209,12 @@
     grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
     gap: var(--bf-space-2);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .fieldLabel {
     color: var(--bf-color-content-muted);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .fieldValue {
@@ -223,7 +223,7 @@
   }
 
   .field[data-monospace="true"] .fieldValue {
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
   }
 
   .agentHeader {
@@ -276,13 +276,13 @@
   }
 
   .agentName {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-label-lg-font-weight);
   }
 
   .agentStatus {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .agentStatus[data-tone="success"] {
@@ -323,8 +323,8 @@
     border-radius: var(--bf-radius-sm);
     background: var(--bf-color-surface-canvas);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-body-sm-font-size);
+    line-height: var(--bf-type-body-md-line-height);
   }
 
   @media (prefers-reduced-motion: reduce) {
diff --git a/design-system/packages/ui/src/flow-chat/tool-cards/SearchResultsToolCards.module.css b/design-system/packages/ui/src/flow-chat/tool-cards/SearchResultsToolCards.module.css
index c20dec4651..644b0b7fbc 100644
--- a/design-system/packages/ui/src/flow-chat/tool-cards/SearchResultsToolCards.module.css
+++ b/design-system/packages/ui/src/flow-chat/tool-cards/SearchResultsToolCards.module.css
@@ -15,13 +15,13 @@
     align-items: baseline;
     gap: var(--bf-space-1);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .detailLabel {
     flex: 0 0 auto;
     color: var(--bf-color-content-secondary);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .detailValue {
@@ -30,7 +30,7 @@
   }
 
   .detail[data-monospace="true"] .detailValue {
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
   }
 
   .results {
@@ -49,7 +49,7 @@
     gap: var(--bf-space-2);
     padding-block: var(--bf-space-2);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .result + .result {
@@ -79,7 +79,7 @@
     min-inline-size: 0;
     color: var(--bf-color-content-primary);
     font: inherit;
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-lg-font-weight);
     text-align: start;
     overflow-wrap: anywhere;
   }
@@ -102,13 +102,13 @@
   .resultUrl,
   .resultMeta {
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-md-line-height);
     overflow-wrap: anywhere;
   }
 
   .resultUrl {
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-body-xs-font-size);
   }
 
   .resultMeta {
@@ -120,9 +120,9 @@
     margin: 0;
     overflow: auto;
     color: var(--bf-color-content-secondary);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    line-height: var(--bf-type-body-md-line-height);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
@@ -130,7 +130,7 @@
   .overflowLabel {
     padding-block: var(--bf-space-2);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
     font-style: italic;
     text-align: center;
   }
diff --git a/design-system/packages/ui/src/flow-chat/tool-cards/SessionToolCards.module.css b/design-system/packages/ui/src/flow-chat/tool-cards/SessionToolCards.module.css
index 9fad85de87..bfe894a38c 100644
--- a/design-system/packages/ui/src/flow-chat/tool-cards/SessionToolCards.module.css
+++ b/design-system/packages/ui/src/flow-chat/tool-cards/SessionToolCards.module.css
@@ -12,13 +12,13 @@
     grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
     gap: var(--bf-space-2);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .fieldLabel,
   .sectionLabel {
     color: var(--bf-color-content-muted);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .fieldValue {
@@ -27,7 +27,7 @@
   }
 
   .field[data-monospace="true"] .fieldValue {
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
   }
 
   .sessionList {
@@ -45,13 +45,13 @@
     border-radius: var(--bf-radius-sm);
     background: var(--bf-color-surface-raised);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .sessionId {
     overflow-wrap: anywhere;
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
   }
 
   .sessionName {
@@ -84,21 +84,21 @@
     border-radius: var(--bf-radius-sm);
     background: var(--bf-color-surface-raised);
     color: var(--bf-color-content-secondary);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    line-height: var(--bf-type-body-md-line-height);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
 
   .empty {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .error {
     color: var(--bf-color-status-danger-content);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
diff --git a/design-system/packages/ui/src/flow-chat/tool-cards/StandardAmbientToolCards.module.css b/design-system/packages/ui/src/flow-chat/tool-cards/StandardAmbientToolCards.module.css
index c4c919b1a0..b7d7308693 100644
--- a/design-system/packages/ui/src/flow-chat/tool-cards/StandardAmbientToolCards.module.css
+++ b/design-system/packages/ui/src/flow-chat/tool-cards/StandardAmbientToolCards.module.css
@@ -15,16 +15,16 @@
 
   .sectionLabel {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-wider);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     text-transform: uppercase;
   }
 
   .error {
     color: var(--bf-color-status-danger-content);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-body-sm-font-size);
+    line-height: var(--bf-type-body-md-line-height);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
@@ -40,9 +40,9 @@
     border-radius: var(--bf-radius-sm);
     background: var(--bf-color-surface-canvas);
     color: var(--bf-color-content-secondary);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    line-height: var(--bf-type-body-md-line-height);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
@@ -67,18 +67,18 @@
     border-radius: var(--bf-radius-pill);
     background: var(--bf-color-surface-raised);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .metaLabel {
-    font-family:var(--bf-font-family-mono);
-    font-weight: var(--bf-font-weight-semibold);
+    font-family:var(--bf-type-code-md-font-family);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .metaDescription {
     min-inline-size: 0;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .fetchTitle {
@@ -107,7 +107,7 @@
     color: var(--bf-color-action-primary-content);
     background: transparent;
     font: inherit;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
     text-align: start;
     cursor: pointer;
   }
@@ -182,7 +182,7 @@
     inline-size: 100%;
     padding: var(--bf-space-3);
     color: var(--bf-color-status-danger-content);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
     text-align: center;
   }
 
@@ -215,7 +215,7 @@
     align-items: center;
     gap: var(--bf-space-2);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .todoCompactIcon {
@@ -230,7 +230,7 @@
   }
 
   .todoCompactMeta {
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
     white-space: nowrap;
   }
 
@@ -264,7 +264,7 @@
     gap: var(--bf-space-2);
     padding-block: var(--bf-space-2);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-body-sm-font-size);
   }
 
   .todoItem + .todoItem {
diff --git a/design-system/packages/ui/src/primitives/ThemeRoot/ThemeRoot.module.css b/design-system/packages/ui/src/primitives/ThemeRoot/ThemeRoot.module.css
index 75097d917c..164f2dd4ab 100644
--- a/design-system/packages/ui/src/primitives/ThemeRoot/ThemeRoot.module.css
+++ b/design-system/packages/ui/src/primitives/ThemeRoot/ThemeRoot.module.css
@@ -3,9 +3,9 @@
     min-inline-size: 0;
     color: var(--bf-color-content-primary);
     background: var(--bf-color-surface-canvas);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-base);
-    line-height: var(--bf-line-height-base);
+    font-family:var(--bf-type-body-md-font-family);
+    font-size: var(--bf-type-body-md-font-size);
+    line-height: var(--bf-type-body-md-line-height);
   }
 
   .root[data-color-scheme="light"] {
diff --git a/design-system/packages/ui/tests/ask-user.test.mjs b/design-system/packages/ui/tests/ask-user.test.mjs
index d86c250b06..9a0fd4f51b 100644
--- a/design-system/packages/ui/tests/ask-user.test.mjs
+++ b/design-system/packages/ui/tests/ask-user.test.mjs
@@ -83,7 +83,7 @@ test("AskUser styles use public semantic and component geometry tokens", async (
   assert.match(styles, /--bf-color-action-neutral-content/);
   assert.match(styles, /--bf-color-content-muted/);
   assert.match(styles, /--bf-color-status-success-content/);
-  assert.match(styles, /--bf-line-height-tight/);
+  assert.match(styles, /--bf-type-heading-page-line-height/);
   assert.match(
     styles,
     /circle:nth-of-type\(2\)\s*\{\s*fill:\s*currentColor/,
diff --git a/design-system/packages/ui/tests/button.test.mjs b/design-system/packages/ui/tests/button.test.mjs
index 88b366e000..b050c45eae 100644
--- a/design-system/packages/ui/tests/button.test.mjs
+++ b/design-system/packages/ui/tests/button.test.mjs
@@ -90,14 +90,14 @@ test("primary and text variants expose semantic emphasis without changing button
 test("Button owns the reference pill geometry and typography", async () => {
   const styles = await readFile(new URL("../dist/styles.css", import.meta.url), "utf8");
 
-  assert.match(styles, /letter-spacing:var\(--bf-letter-spacing-normal\)/);
+  assert.match(styles, /letter-spacing:var\(--bf-type-label-md-letter-spacing\)/);
   assert.match(styles, /border-radius:var\(--bf-radius-pill\)/);
   assert.match(styles, /--_button-height:\s*var\(--bf-control-height-md\)/);
   assert.match(styles, /--_button-leading-icon-size:\s*16px/);
   assert.match(styles, /--_button-trailing-icon-size:\s*14px/);
-  assert.match(styles, /--_button-font-size:\s*var\(--bf-font-size-sm\)/);
-  assert.match(styles, /font-family:var\(--bf-font-family-sans\)/);
-  assert.match(styles, /font-weight:var\(--bf-font-weight-regular\)/);
+  assert.match(styles, /--_button-font-size:\s*var\(--bf-type-label-md-font-size\)/);
+  assert.match(styles, /font-family:var\(--bf-type-label-md-font-family\)/);
+  assert.match(styles, /font-weight:var\(--bf-type-label-md-font-weight\)/);
   assert.match(styles, /padding-block:var\(--_button-padding-block\)/);
   assert.match(styles, /padding-inline:var\(--_button-padding-inline\)/);
   assert.match(styles, /--_button-padding-inline:\s*var\(--bf-space-5\)/);
@@ -155,8 +155,8 @@ test("real and preview active states share the semibold component rule", async (
     styles,
     /:is\(:active,\s*\[data-bf-preview-state=(?:"active"|active)\]\):not\(:disabled\)/,
   );
-  assert.match(styles, /font-weight:\s*var\(--bf-font-weight-semibold\)/);
-  assert.equal((styles.match(/--bf-font-weight-semibold/g) ?? []).length, 1);
+  assert.match(styles, /font-weight:\s*var\(--bf-type-label-selected-font-weight\)/);
+  assert.equal((styles.match(/--bf-type-label-selected-font-weight/g) ?? []).length, 1);
 });
 
 test("fill uses neutral semantic state colors and icons inherit content color", async () => {
diff --git a/design-system/packages/ui/tests/confirm-dialog.test.mjs b/design-system/packages/ui/tests/confirm-dialog.test.mjs
index 49ee8345cd..7b9648d286 100644
--- a/design-system/packages/ui/tests/confirm-dialog.test.mjs
+++ b/design-system/packages/ui/tests/confirm-dialog.test.mjs
@@ -53,5 +53,5 @@ test("ConfirmDialog styles use public status, layout, and typography tokens", as
   assert.match(styles, /--bf-layout-confirm-dialog-preview-padding-inline/);
   assert.match(styles, /--bf-color-status-warning-content/);
   assert.match(styles, /--bf-color-status-danger-surface/);
-  assert.match(styles, /--bf-font-family-mono/);
+  assert.match(styles, /--bf-type-code-sm-font-family/);
 });
diff --git a/design-system/packages/ui/tests/field.test.mjs b/design-system/packages/ui/tests/field.test.mjs
index d35c0f34db..39d3aad52c 100644
--- a/design-system/packages/ui/tests/field.test.mjs
+++ b/design-system/packages/ui/tests/field.test.mjs
@@ -100,8 +100,8 @@ test("Field styles consume shared content and typography tokens", async () => {
   assert.match(styles, /--bf-color-content-primary/);
   assert.match(styles, /--bf-color-content-muted/);
   assert.match(styles, /--bf-color-accent-default/);
-  assert.match(styles, /--bf-font-size-xs/);
-  assert.match(styles, /--bf-font-weight-semibold/);
+  assert.match(styles, /--bf-type-label-md-font-size/);
+  assert.match(styles, /--bf-type-support-font-size/);
   assert.match(styles, /--bf-layout-field-root-gap/);
   assert.match(styles, /--bf-layout-field-label-action-gap/);
   assert.match(styles, /--bf-layout-field-control-gap/);
diff --git a/design-system/packages/ui/tests/flow-chat-tool-card.test.mjs b/design-system/packages/ui/tests/flow-chat-tool-card.test.mjs
index cf66db66a1..3150943e33 100644
--- a/design-system/packages/ui/tests/flow-chat-tool-card.test.mjs
+++ b/design-system/packages/ui/tests/flow-chat-tool-card.test.mjs
@@ -434,8 +434,8 @@ test("file diff header matches the compact file-operation information hierarchy"
   assert.doesNotMatch(markup, /Git HEAD|data-bf-part="diffType"/);
   assert.ok(pathRule, "file-diff path rule should exist");
   assert.match(pathRule, /var\(--bf-color-content-secondary\)/);
-  assert.match(pathRule, /var\(--bf-font-family-mono\)/);
-  assert.match(pathRule, /var\(--bf-font-size-sm\)/);
+  assert.match(pathRule, /var\(--bf-type-code-md-font-family\)/);
+  assert.match(pathRule, /var\(--bf-type-body-sm-font-size\)/);
 });
 
 test("concrete tool views expose semantic parts instead of legacy CSS selectors", () => {
diff --git a/design-system/packages/ui/tests/key-hint.test.mjs b/design-system/packages/ui/tests/key-hint.test.mjs
index f664e0ea8e..74f83d2886 100644
--- a/design-system/packages/ui/tests/key-hint.test.mjs
+++ b/design-system/packages/ui/tests/key-hint.test.mjs
@@ -29,16 +29,16 @@ test("KeyHint preserves textual platform modifiers in the icon slot", () => {
   assert.match(markup, /data-bf-part="label">K<\/span>/);
 });
 
-test("KeyHint styles use shared primitive tokens", async () => {
+test("KeyHint styles use the shared micro typography role", async () => {
   const styles = await readFile(new URL("../dist/styles.css", import.meta.url), "utf8");
 
   assert.match(styles, /--bf-color-key-hint-background/);
   assert.match(styles, /--bf-color-action-neutral-surface/);
   assert.match(styles, /--bf-color-content-muted/);
-  assert.match(styles, /--bf-font-family-sans/);
-  assert.match(styles, /--bf-font-size-micro/);
-  assert.match(styles, /--bf-letter-spacing-normal/);
-  assert.match(styles, /--bf-line-height-none/);
+  assert.match(styles, /--bf-type-micro-font-family/);
+  assert.match(styles, /--bf-type-micro-font-size/);
+  assert.match(styles, /--bf-type-micro-letter-spacing/);
+  assert.match(styles, /--bf-type-micro-line-height/);
   assert.match(styles, /--bf-radius-xs/);
   assert.match(styles, /--bf-radius-sm/);
   assert.match(styles, /flex:\s*0 0 auto/);
diff --git a/design-system/packages/ui/tests/navigation-panel.test.mjs b/design-system/packages/ui/tests/navigation-panel.test.mjs
index 68ec71d092..2797b68108 100644
--- a/design-system/packages/ui/tests/navigation-panel.test.mjs
+++ b/design-system/packages/ui/tests/navigation-panel.test.mjs
@@ -88,11 +88,11 @@ test("NavigationPanel separates group captions, destinations, and the selected d
   assert.match(heading, /font-family: var\(--bf-type-meta-font-family\)/);
   assert.match(heading, /font-size: var\(--bf-type-meta-font-size\)/);
   assert.match(heading, /font-weight: var\(--bf-type-meta-font-weight\)/);
-  assert.match(heading, /line-height: var\(--bf-line-height-base\)/);
+  assert.match(heading, /line-height: var\(--bf-type-body-sm-line-height\)/);
   assert.match(styles, /\.item\[data-bf-tone="neutral"\]:not\(\[data-disabled="true"\]\)\s*\{\s*color: var\(--bf-color-content-primary\)/);
-  assert.match(actionStyles, /\.label\s*\{[^}]*font-size: var\(--bf-font-size-sm\)/);
-  assert.match(actionStyles, /\.label\s*\{[^}]*font-weight: var\(--bf-font-weight-regular\)/);
-  assert.match(styles, /\.item > \[data-bf-part="trigger"\]\[aria-current\] > \[data-bf-part="label"\]\s*\{\s*font-weight: var\(--bf-font-weight-semibold\)/);
+  assert.match(actionStyles, /\.label\s*\{[^}]*font-size: var\(--bf-type-label-md-font-size\)/);
+  assert.match(actionStyles, /\.label\s*\{[^}]*font-weight: var\(--bf-type-label-md-font-weight\)/);
+  assert.match(styles, /\.item > \[data-bf-part="trigger"\]\[aria-current\] > \[data-bf-part="label"\]\s*\{\s*font-weight: var\(--bf-type-label-selected-font-weight\)/);
   assert.match(styles, /@media \(prefers-contrast: more\)[\s\S]*?color: var\(--bf-color-content-muted\)/);
   assert.match(styles, /:global\(\[data-contrast="high"\]\) \.headingLabel\s*\{\s*color: var\(--bf-color-content-muted\)/);
   assert.match(styles, /@media \(forced-colors: active\)[\s\S]*?color: CanvasText/);
diff --git a/design-system/packages/ui/tests/number-badge.test.mjs b/design-system/packages/ui/tests/number-badge.test.mjs
index cc18e8683a..eb7b809d90 100644
--- a/design-system/packages/ui/tests/number-badge.test.mjs
+++ b/design-system/packages/ui/tests/number-badge.test.mjs
@@ -25,7 +25,7 @@ test("ToolbarBadge preserves its slot hook and delegates to NumberBadge", () =>
 
 test("NumberBadge uses a 24px slot, 20px surface and 11px control typography without clipping", async () => {
   const source = await readFile(new URL("../src/components/NumberBadge/NumberBadge.module.css", import.meta.url), "utf8");
-  for (const token of ["space-6", "space-5", "font-size-meta", "font-family-control", "font-weight-medium", "color-action-neutral-content", "color-action-neutral-surface"]) assert.ok(source.includes(`--bf-${token}`), token);
+  for (const token of ["space-6", "space-5", "type-meta-font-size", "type-meta-font-family", "type-meta-font-weight", "color-action-neutral-content", "color-action-neutral-surface"]) assert.ok(source.includes(`--bf-${token}`), token);
   assert.doesNotMatch(source, /overflow:\s*(hidden|clip)|text-overflow:\s*ellipsis/);
   assert.match(source, /forced-colors: active/);
 });
diff --git a/design-system/packages/ui/tests/page-header.test.mjs b/design-system/packages/ui/tests/page-header.test.mjs
index 1f3f5e2f7d..931a114a52 100644
--- a/design-system/packages/ui/tests/page-header.test.mjs
+++ b/design-system/packages/ui/tests/page-header.test.mjs
@@ -66,9 +66,11 @@ test("PageHeader omits the required marker by default", () => {
 test("PageHeader styles use shared typography and content tokens", async () => {
   const styles = await readFile(new URL("../dist/styles.css", import.meta.url), "utf8");
 
-  assert.match(styles, /--bf-font-size-2xl/);
-  assert.match(styles, /--bf-font-size-4xl/);
-  assert.match(styles, /--bf-font-family-sans/);
+  assert.match(styles, /--bf-type-heading-page-font-size/);
+  assert.match(styles, /--bf-type-heading-section-font-size/);
+  assert.match(styles, /--bf-type-heading-display-font-size/);
+  assert.match(styles, /--bf-type-display-sm-font-size/);
+  assert.match(styles, /--bf-type-body-lg-font-size/);
   assert.match(styles, /--bf-color-content-primary/);
   assert.match(styles, /--bf-color-content-muted/);
   assert.match(styles, /--bf-color-accent-default/);
diff --git a/design-system/packages/ui/tests/search-field.test.mjs b/design-system/packages/ui/tests/search-field.test.mjs
index 00fd8aa567..391e5dd0d4 100644
--- a/design-system/packages/ui/tests/search-field.test.mjs
+++ b/design-system/packages/ui/tests/search-field.test.mjs
@@ -69,7 +69,8 @@ test("SearchField owns pill composition while reusing Input behavior", async ()
   const styles = await readFile(new URL("../dist/styles.css", import.meta.url), "utf8");
 
   assert.match(styles, /border-radius:var\(--bf-radius-pill\)/);
-  assert.match(styles, /--bf-font-size-xs/);
+  assert.match(styles, /--bf-type-label-md-font-size/);
+  assert.match(styles, /--bf-type-meta-font-size/);
 });
 
 test("SearchField focus changes only the existing border color", async () => {
diff --git a/design-system/packages/ui/tests/segmented-control.test.mjs b/design-system/packages/ui/tests/segmented-control.test.mjs
index b2bbb5f8cd..73f338f523 100644
--- a/design-system/packages/ui/tests/segmented-control.test.mjs
+++ b/design-system/packages/ui/tests/segmented-control.test.mjs
@@ -56,11 +56,28 @@ test("SegmentedControl disables every segment as one contract", () => {
   assert.equal((markup.match(/disabled=""/g) ?? []).length, 2);
 });
 
+test("SegmentedControl exposes stable layout and visual variants", () => {
+  const markup = renderToStaticMarkup(
+    createElement(SegmentedControl, {
+      distribution: "fill",
+      options,
+      size: "md",
+      variant: "pills",
+    }),
+  );
+
+  assert.match(markup, /data-distribution="fill"/);
+  assert.match(markup, /data-size="md"/);
+  assert.match(markup, /data-variant="pills"/);
+});
+
 test("SegmentedControl styles bind pill geometry and shared action tokens", async () => {
   const styles = await readFile(new URL("../dist/styles.css", import.meta.url), "utf8");
 
   assert.match(styles, /--bf-control-segmented-control-padding/);
   assert.match(styles, /--bf-control-segmented-control-segment-height/);
+  assert.match(styles, /--bf-control-segmented-control-segment-height-md/);
+  assert.match(styles, /--bf-control-segmented-control-pill-segment-height/);
   assert.match(styles, /--bf-control-segmented-control-segment-padding-inline/);
   assert.match(styles, /--bf-control-segmented-control-icon-size/);
   assert.match(styles, /--bf-type-meta-font-size/);
@@ -69,4 +86,6 @@ test("SegmentedControl styles bind pill geometry and shared action tokens", asyn
   assert.match(styles, /--bf-color-action-neutral-surface-hover/);
   assert.match(styles, /--bf-color-action-neutral-content-disabled/);
   assert.match(styles, /--bf-color-focus-ring/);
+  assert.match(styles, /data-distribution=fill/);
+  assert.match(styles, /data-variant=pills/);
 });
diff --git a/design-system/packages/ui/tests/tab-group.test.mjs b/design-system/packages/ui/tests/tab-group.test.mjs
index 775d1a0da1..bb3fccc9f5 100644
--- a/design-system/packages/ui/tests/tab-group.test.mjs
+++ b/design-system/packages/ui/tests/tab-group.test.mjs
@@ -105,8 +105,8 @@ test("TabGroup styling uses its geometry contract and Button semantic colors", a
   assert.match(styles, /--bf-color-action-neutral-border/);
   assert.match(styles, /--bf-color-action-neutral-content/);
   assert.match(styles, /--bf-color-action-neutral-surface/);
-  assert.match(styles, /--bf-font-weight-regular/);
-  assert.match(styles, /--bf-font-weight-semibold/);
+  assert.match(styles, /--bf-type-label-md-font-weight/);
+  assert.match(styles, /--bf-type-label-selected-font-weight/);
   assert.doesNotMatch(styles, /#[0-9a-f]{3,8}/i);
 });
 
diff --git a/design-system/packages/ui/tests/text-clipping.test.mjs b/design-system/packages/ui/tests/text-clipping.test.mjs
index 3b6f93fb12..34d2799500 100644
--- a/design-system/packages/ui/tests/text-clipping.test.mjs
+++ b/design-system/packages/ui/tests/text-clipping.test.mjs
@@ -29,7 +29,7 @@ for (const [component, selector] of [
         declarations[declaration.slice(0, colon).trim()] = declaration.slice(colon + 1).trim();
       }
     }
-    assert.equal(declarations["line-height"], "var(--bf-line-height-base)");
+    assert.match(declarations["line-height"], /^var\(--bf-(?:line-height-base|type-body-sm-line-height)\)$/);
     assert.equal(declarations.overflow, "hidden");
     assert.equal(declarations["text-overflow"], "ellipsis");
     assert.equal(declarations["block-size"], undefined);
diff --git a/scripts/audit-typography-tokens.mjs b/scripts/audit-typography-tokens.mjs
index b3d8d927df..c4f534d786 100644
--- a/scripts/audit-typography-tokens.mjs
+++ b/scripts/audit-typography-tokens.mjs
@@ -13,6 +13,8 @@ const SOURCE_GROUPS = Object.freeze({
   ],
   'web-ui': [
     'src/web-ui/src',
+    'src/mobile-web/src',
+    'BitFun-Installer/src',
   ],
 });
 
@@ -31,6 +33,26 @@ const WEB_FONT_PROFILE_STACK_PROPERTIES = new Set([
   '--bf-font-family-mono',
 ]);
 
+const SEMANTIC_ROLE_COMPONENT_STYLE_ROOT = 'design-system/packages/ui/src/';
+const SEMANTIC_ROLE_COMPONENT_STYLE_EXCEPTIONS = new Set([
+  // The bars variant uses the font-size property as a scalable graphic cell,
+  // while its user-visible label already consumes type.support.
+  'design-system/packages/ui/src/components/Spinner/Spinner.module.css',
+]);
+
+const SEMANTIC_ROLE_PRODUCT_STYLE_ROOTS = [
+  'src/web-ui/src/',
+  'src/mobile-web/src/',
+  'BitFun-Installer/src/',
+  'design-system/apps/design-lab/src/',
+];
+
+const COMPLETE_PRODUCT_STYLE_ROOTS = [
+  'src/web-ui/src/',
+  'src/mobile-web/src/',
+  'BitFun-Installer/src/',
+];
+
 const TYPOGRAPHY_PROPERTIES = new Set([
   'font',
   'fontFamily',
@@ -548,6 +570,11 @@ function isRawTypographyLiteral(property, literal) {
   }
 }
 
+function isFoundationTypographyLiteral(literal) {
+  return literal?.kind === 'string'
+    && /^var\(--bf-(?:font-(?:family|size|weight)|line-height|letter-spacing)-[a-z0-9-]+\)$/i.test(literal.value.trim());
+}
+
 function scriptKindForPath(relativePath) {
   if (relativePath.endsWith('.tsx')) return ts.ScriptKind.TSX;
   if (relativePath.endsWith('.jsx')) return ts.ScriptKind.JSX;
@@ -566,6 +593,18 @@ function auditScriptTypography(text, relativePath) {
   );
 
   function report(node, property, literal) {
+    if (requiresSemanticRoleConsumption(relativePath) && isFoundationTypographyLiteral(literal)) {
+      const start = node.getStart(sourceFile);
+      const { line } = sourceFile.getLineAndCharacterOfPosition(start);
+      issues.push(createIssue(
+        relativePath,
+        line + 1,
+        'foundation-typography-in-semantic-consumer',
+        'Product frontend inline text styles must consume a semantic --bf-type-* role.',
+        node.getText(sourceFile),
+      ));
+      return;
+    }
     if (!isRawTypographyLiteral(property, literal)) return;
     const start = node.getStart(sourceFile);
     const { line } = sourceFile.getLineAndCharacterOfPosition(start);
@@ -632,6 +671,55 @@ function auditRetiredReferences(text, relativePath) {
   return issues;
 }
 
+function requiresSemanticRoleConsumption(relativePath) {
+  if (relativePath.startsWith(WEB_FONT_PROFILE_STYLE_ROOT)) return false;
+
+  return (
+    relativePath.startsWith(SEMANTIC_ROLE_COMPONENT_STYLE_ROOT)
+    && relativePath.endsWith('.module.css')
+    && !SEMANTIC_ROLE_COMPONENT_STYLE_EXCEPTIONS.has(relativePath)
+  )
+    || SEMANTIC_ROLE_PRODUCT_STYLE_ROOTS.some(root => relativePath.startsWith(root));
+}
+
+function auditSemanticRoleConsumption(text, relativePath) {
+  if (!requiresSemanticRoleConsumption(relativePath)) return [];
+
+  const issues = [];
+  const source = stripCommentsPreservingLines(text);
+  const lines = text.split(/\r?\n/);
+  const governsCompleteProductStyle = COMPLETE_PRODUCT_STYLE_ROOTS.some(root => relativePath.startsWith(root))
+    && STYLE_EXTENSIONS.has(path.extname(relativePath).toLowerCase());
+  const foundationPattern = governsCompleteProductStyle
+    ? /(--bf-(?:font-family|font-size|font-weight|line-height|letter-spacing)-[a-z0-9-]+)/gi
+    : /(?:font-family|font-size|font-weight|line-height|letter-spacing)\s*:\s*[^;{}\r\n]*?(--bf-(?:font-family|font-size|font-weight|line-height|letter-spacing)-[a-z0-9-]+)/gi;
+  for (const match of source.matchAll(foundationPattern)) {
+    const token = match[1];
+    const tokenOffset = match[0].lastIndexOf(token);
+    const line = lineNumberAt(source, (match.index ?? 0) + Math.max(0, tokenOffset));
+    if (hasLocalTypographyException(lines, line)) continue;
+    issues.push(createIssue(
+      relativePath,
+      line,
+      'foundation-typography-in-semantic-consumer',
+      'Text-bearing public components and migrated product surfaces must consume a semantic --bf-type-* role.',
+      token,
+    ));
+  }
+
+  const hasTypographyDeclaration = /(?:^|[;{}\r\n])\s*(?:font-family|font-size|font-weight|letter-spacing|line-height)\s*:/im.test(source);
+  if (hasTypographyDeclaration && !/--bf-type-[a-z0-9-]+-(?:font-family|font-size|font-weight|letter-spacing|line-height)/i.test(source)) {
+    issues.push(createIssue(
+      relativePath,
+      1,
+      'semantic-typography-role-missing',
+      'A governed text-bearing stylesheet must identify its typography through a semantic --bf-type-* role.',
+    ));
+  }
+
+  return issues;
+}
+
 export function auditTypographyText(text, relativePath, options = {}) {
   const normalizedPath = normalizePath(relativePath);
   const extension = path.extname(normalizedPath).toLowerCase();
@@ -641,9 +729,11 @@ export function auditTypographyText(text, relativePath, options = {}) {
   if (options.retiredOnly) return issues;
   if (STYLE_EXTENSIONS.has(extension) && productionSource) {
     issues.push(...auditCssDeclarations(text, normalizedPath));
+    issues.push(...auditSemanticRoleConsumption(text, normalizedPath));
   }
   if (SCRIPT_EXTENSIONS.has(extension) && productionSource) {
     issues.push(...auditCssDeclarations(text, normalizedPath));
+    issues.push(...auditSemanticRoleConsumption(text, normalizedPath));
     issues.push(...auditScriptTypography(text, normalizedPath));
   }
 
diff --git a/scripts/audit-typography-tokens.test.mjs b/scripts/audit-typography-tokens.test.mjs
index acda53afe4..06b2b8aa74 100644
--- a/scripts/audit-typography-tokens.test.mjs
+++ b/scripts/audit-typography-tokens.test.mjs
@@ -76,6 +76,90 @@ test('rejects unrelated raw typography inside Web font profiles', () => {
   assert.equal(codes.filter(code => code === 'raw-private-typography-token').length, 1);
 });
 
+test('requires semantic roles in the complete component library and every React product frontend', () => {
+  const primitiveCodes = codesFor(`
+    .title {
+      font-family: var(--bf-font-family-control);
+      font-size: var(--bf-font-size-sm);
+      font-weight: var(--bf-font-weight-semibold);
+      line-height: var(--bf-line-height-tight);
+      letter-spacing: var(--bf-letter-spacing-normal);
+    }
+  `, 'design-system/packages/ui/src/components/Card/Card.module.css');
+
+  assert.equal(
+    primitiveCodes.filter(code => code === 'foundation-typography-in-semantic-consumer').length,
+    5,
+  );
+
+  const semanticIssues = auditTypographyText(`
+    .title {
+      font-family: var(--bf-type-heading-card-font-family);
+      font-size: var(--bf-type-heading-card-font-size);
+      font-weight: var(--bf-type-heading-card-font-weight);
+      line-height: var(--bf-type-heading-card-line-height);
+      letter-spacing: var(--bf-type-heading-card-letter-spacing);
+    }
+  `, 'design-system/packages/ui/src/components/Card/Card.module.css');
+
+  assert.deepEqual(semanticIssues, []);
+
+  const geometryIssues = auditTypographyText(`
+    .icon { inline-size: var(--bf-font-size-sm); block-size: var(--bf-font-size-sm); }
+  `, 'design-system/packages/ui/src/components/ActionItem/ActionItem.module.css');
+
+  assert.deepEqual(geometryIssues, []);
+
+  const flowChatCodes = codesFor(`
+    .message { font-size: var(--bf-font-size-sm); }
+  `, 'design-system/packages/ui/src/flow-chat/Message.module.css');
+
+  assert.equal(
+    flowChatCodes.filter(code => code === 'foundation-typography-in-semantic-consumer').length,
+    1,
+  );
+
+  const webUiCodes = codesFor(`
+    .label {
+      font-size: var(--bf-font-size-xs);
+      line-height: var(--bf-line-height-tight);
+    }
+  `, 'src/web-ui/src/app/components/LegacyLabel.scss');
+
+  assert.equal(
+    webUiCodes.filter(code => code === 'foundation-typography-in-semantic-consumer').length,
+    2,
+  );
+
+  const webUiIndirectCodes = codesFor(`
+    .title {
+      --local-title-font: var(--bf-font-family-sans);
+      min-height: calc(var(--bf-font-size-sm) * var(--bf-line-height-base));
+    }
+  `, 'src/web-ui/src/app/components/LegacyTitle.scss');
+
+  assert.equal(
+    webUiIndirectCodes.filter(code => code === 'foundation-typography-in-semantic-consumer').length,
+    3,
+  );
+
+  for (const productPath of [
+    'src/mobile-web/src/styles/LegacyLabel.scss',
+    'BitFun-Installer/src/styles/LegacyLabel.css',
+    'design-system/apps/design-lab/src/LegacyLabel.css',
+  ]) {
+    const productCodes = codesFor(`
+      .label { font-size: var(--bf-font-size-xs); }
+    `, productPath);
+
+    assert.equal(
+      productCodes.filter(code => code === 'foundation-typography-in-semantic-consumer').length,
+      1,
+      productPath,
+    );
+  }
+});
+
 test('rejects static TypeScript typography but accepts tokens, adapters, and dynamic previews', () => {
   const codes = codesFor(`
     const RAW_FONT_SIZE = 12;
@@ -92,6 +176,39 @@ test('rejects static TypeScript typography but accepts tokens, adapters, and dyn
   assert.equal(codes.filter(code => code === 'raw-script-typography').length, 5);
 });
 
+test('requires semantic roles in product frontend inline styles and embedded CSS', () => {
+  const codes = codesFor(`
+    const style = { fontSize: 'var(--bf-font-size-sm)' };
+    const shell = \`<style>.title { font-weight: var(--bf-font-weight-semibold); }</style>\`;
+  `, 'src/web-ui/src/fixture.tsx');
+
+  assert.equal(
+    codes.filter(code => code === 'foundation-typography-in-semantic-consumer').length,
+    2,
+  );
+
+  const semanticIssues = auditTypographyText(`
+    const style = { fontSize: 'var(--bf-type-label-md-font-size)' };
+    const shell = \`<style>.title { font-weight: var(--bf-type-heading-card-font-weight); }</style>\`;
+  `, 'src/web-ui/src/fixture.tsx');
+
+  assert.deepEqual(semanticIssues, []);
+
+  for (const productPath of [
+    'src/mobile-web/src/fixture.tsx',
+    'BitFun-Installer/src/fixture.tsx',
+  ]) {
+    const productCodes = codesFor(`
+      const style = { fontSize: 'var(--bf-font-size-sm)' };
+    `, productPath);
+    assert.equal(
+      productCodes.filter(code => code === 'foundation-typography-in-semantic-consumer').length,
+      1,
+      productPath,
+    );
+  }
+});
+
 test('rejects retired aliases and FlowChat font APIs', () => {
   const codes = codesFor(`
     const oldToken = 'font.size.body';
diff --git a/src/apps/mobile/design-system/README.md b/src/apps/mobile/design-system/README.md
index e73fea7906..b8a84ebd7f 100644
--- a/src/apps/mobile/design-system/README.md
+++ b/src/apps/mobile/design-system/README.md
@@ -41,6 +41,22 @@ platform presentation primitives.
   scale. Validate the standard size and at least one enlarged accessibility size
   without changing display zoom, and prefer wrapping or ellipsis over clipping.
 
+The native role names map to the product's formal content purposes as follows:
+
+| Content purpose | Native role |
+| --- | --- |
+| Page title | `display_large`, or `headline_large` in a compact container |
+| Section title | `headline_small` |
+| Card or row title | `title_small` / `title_medium` |
+| Body copy | `body_medium`, with `body_large` for reading emphasis |
+| Supporting text | `body_small` |
+| Control label | `label_medium` / `label_large` |
+| Compact metadata | `label_small` |
+
+Platform renderers may choose the listed size variant for available width, but
+must not substitute a different content purpose merely to obtain a preferred
+metric.
+
 ## Simulator captures
 
 The native galleries can be launched without changing the normal app path:
diff --git a/src/crates/contracts/product-domains/src/miniapp/generated/default_appearance_style.html b/src/crates/contracts/product-domains/src/miniapp/generated/default_appearance_style.html
index 5758e1a8c2..7675d78d52 100644
--- a/src/crates/contracts/product-domains/src/miniapp/generated/default_appearance_style.html
+++ b/src/crates/contracts/product-domains/src/miniapp/generated/default_appearance_style.html
@@ -4,8 +4,8 @@
     background: transparent;
     --bitfun-radius: 8px;
     --bitfun-radius-lg: 12px;
-    --bitfun-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    --bitfun-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, 'Cascadia Mono', 'Cascadia Code', Consolas, 'Liberation Mono', 'Courier New', monospace;
+    --bitfun-font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    --bitfun-font-mono: 'JetBrains Mono', 'FiraCode', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, 'Cascadia Mono', 'Cascadia Code', Consolas, 'Liberation Mono', 'Courier New', monospace;
     --bitfun-bg: #0e0e10;
     --bitfun-bg-secondary: #1c1c1f;
     --bitfun-bg-tertiary: #0e0e10;
diff --git a/src/mobile-web/src/components/ErrorBoundary.tsx b/src/mobile-web/src/components/ErrorBoundary.tsx
index 822fe3a770..d896de6092 100644
--- a/src/mobile-web/src/components/ErrorBoundary.tsx
+++ b/src/mobile-web/src/components/ErrorBoundary.tsx
@@ -41,14 +41,24 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
             textAlign: 'center',
             background: 'var(--bf-color-surface-canvas)',
             color: 'var(--bf-color-content-primary)',
-            fontFamily: 'system-ui, sans-serif',
+            fontFamily: 'var(--bf-type-body-md-font-family)',
           }}
         >
+          {/* typography-audit: allow -- warning glyph geometry, not product text */}
           <div style={{ fontSize: '48px', marginBottom: '16px' }}>⚠</div>
-          <h2 style={{ fontSize: '18px', fontWeight: 600, margin: '0 0 8px' }}>
+          <h2 style={{
+            fontSize: 'var(--bf-type-flow-section-title-font-size)',
+            fontWeight: 'var(--bf-type-flow-section-title-font-weight)',
+            margin: '0 0 8px',
+          }}>
             Something went wrong
           </h2>
-          <p style={{ fontSize: '13px', color: 'var(--bf-color-content-muted)', margin: '0 0 24px', maxWidth: '280px' }}>
+          <p style={{
+            fontSize: 'var(--bf-type-body-sm-font-size)',
+            color: 'var(--bf-color-content-muted)',
+            margin: '0 0 24px',
+            maxWidth: '280px',
+          }}>
             {this.state.error?.message || 'An unexpected error occurred.'}
           </p>
           <button
@@ -59,8 +69,8 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
               borderRadius: '14px',
               background: 'var(--bf-color-accent-default)',
               color: 'var(--bf-color-action-primary-content)',
-              fontSize: '15px',
-              fontWeight: 600,
+              fontSize: 'var(--bf-type-body-lg-font-size)',
+              fontWeight: 'var(--bf-type-label-selected-font-weight)',
               cursor: 'pointer',
             }}
           >
diff --git a/src/mobile-web/src/pages/ChatPage.tsx b/src/mobile-web/src/pages/ChatPage.tsx
index d35f09e8f8..06daa917d8 100644
--- a/src/mobile-web/src/pages/ChatPage.tsx
+++ b/src/mobile-web/src/pages/ChatPage.tsx
@@ -380,7 +380,7 @@ const FileCard: React.FC<FileCardProps> = ({ path, onGetFileInfo, onDownload })
     return (
       <span className="file-card" style={cardStyle}>
         <FileTextIcon size={20} style={{ color: iconColor, flexShrink: 0 }} />
-        <span style={{ fontSize: '0.8rem', opacity: 0.5 }}>{t('chat.fileLoading')}</span>
+        <span style={{ fontSize: 'var(--bf-type-body-xs-font-size)', opacity: 0.5 }}>{t('chat.fileLoading')}</span>
       </span>
     );
   }
@@ -388,7 +388,7 @@ const FileCard: React.FC<FileCardProps> = ({ path, onGetFileInfo, onDownload })
     return (
       <span className="file-card" style={{ ...cardStyle, cursor: 'default', opacity: 0.5 }} title={state.message}>
         <FileTextIcon size={20} style={{ color: iconColor, flexShrink: 0 }} />
-        <span style={{ fontSize: '0.8rem' }}>{t('chat.fileUnavailable')}</span>
+        <span style={{ fontSize: 'var(--bf-type-body-xs-font-size)' }}>{t('chat.fileUnavailable')}</span>
       </span>
     );
   }
@@ -411,8 +411,8 @@ const FileCard: React.FC<FileCardProps> = ({ path, onGetFileInfo, onDownload })
       <span style={{ minWidth: 0, overflow: 'hidden' }}>
         <span style={{
           display: 'block',
-          fontSize: '0.85rem',
-          fontWeight: 500,
+          fontSize: 'var(--bf-type-body-xs-font-size)',
+          fontWeight: 'var(--bf-type-label-lg-font-weight)',
           overflow: 'hidden',
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
@@ -422,7 +422,7 @@ const FileCard: React.FC<FileCardProps> = ({ path, onGetFileInfo, onDownload })
         </span>
         <span style={{
           display: 'block',
-          fontSize: '0.75rem',
+          fontSize: 'var(--bf-type-support-font-size)',
           color: 'var(--bf-color-content-muted)',
           marginTop: '2px',
         }}>
@@ -431,7 +431,7 @@ const FileCard: React.FC<FileCardProps> = ({ path, onGetFileInfo, onDownload })
       </span>
       <span style={{
         flexShrink: 0,
-        fontSize: '0.75rem',
+        fontSize: 'var(--bf-type-support-font-size)',
         color: isDone ? 'var(--bf-color-status-success-content)' : 'var(--bf-color-content-muted)',
       }}>
         {isDownloading ? `${Math.round((state as any).progress * 100)}%` : isDone ? '✓' : '↓'}
@@ -475,12 +475,12 @@ const MarkdownContent: React.FC<MarkdownContentProps> = ({ content, onFileDownlo
             customStyle={{
               margin: 0,
               borderRadius: '8px',
-              fontSize: '0.8rem',
-              lineHeight: '1.5',
+              fontSize: 'var(--bf-type-code-sm-font-size)',
+              lineHeight: 'var(--bf-type-body-md-line-height)',
             }}
             codeTagProps={{
               style: {
-                fontFamily: 'var(--font-family-mono)',
+                fontFamily: 'var(--bf-type-code-md-font-family)',
               },
             }}
             lineNumberStyle={{
@@ -1139,7 +1139,11 @@ const ReadFilesToggle: React.FC<{ tools: RemoteToolStatus[] }> = ({ tools }) =>
             {tools.map(t => {
               const preview = t.input_preview || '';
               return (
-                <div key={t.id} style={{ fontSize: '12px', padding: '2px 0', opacity: 0.8 }}>
+                <div key={t.id} style={{
+                  fontSize: 'var(--bf-type-body-xs-font-size)',
+                  padding: '2px 0',
+                  opacity: 0.8,
+                }}>
                   {t.status === 'completed' ? '✓' : '⋯'} {t.name} {preview}
                 </div>
               );
diff --git a/src/mobile-web/src/styles/components/chat-input.scss b/src/mobile-web/src/styles/components/chat-input.scss
index 4f45c30b20..5f739c58d7 100644
--- a/src/mobile-web/src/styles/components/chat-input.scss
+++ b/src/mobile-web/src/styles/components/chat-input.scss
@@ -105,15 +105,15 @@
   background: transparent;
   border: none;
   color: var(--bf-color-content-primary);
-  font-size: 14px;
+  font-size: var(--bf-type-body-md-font-size);
   padding: 0;
   padding-right: 28px;
   resize: none;
   min-height: 36px;
   max-height: 120px;
   outline: none;
-  font-family: var(--font-family-sans);
-  line-height: 1.5;
+  font-family: var(--bf-type-body-md-font-family);
+  line-height: var(--bf-type-body-md-line-height);
 
   &::placeholder { color: var(--bf-color-content-primary); opacity: 0.6; }
   &:disabled { opacity: var(--bf-opacity-disabled); cursor: not-allowed; }
@@ -123,10 +123,10 @@
   display: block;
   width: 100%;
   min-width: 0;
-  font-size: 14px;
+  font-size: var(--bf-type-body-md-font-size);
   color: var(--bf-color-content-primary);
   opacity: 0.6;
-  line-height: 24px;
+  line-height: var(--bf-type-modifier-leading-spacious-line-height);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -225,8 +225,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 9px;
-  letter-spacing: 0.3px;
+  font-size: var(--bf-type-overline-sm-font-size);
+  letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
 }
 
 .chat-model-selector__effort {
@@ -237,9 +237,9 @@
   border-radius: 4px;
   background: var(--bf-color-status-success-surface);
   color: var(--bf-color-status-success-content);
-  font-size: 7px;
-  font-weight: 600;
-  line-height: 1;
+  font-size: var(--bf-type-overline-micro-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
   text-transform: uppercase;
 }
 
@@ -264,9 +264,9 @@
 
 .chat-model-selector__header {
   padding: 10px 12px 8px;
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   text-transform: uppercase;
   color: var(--bf-color-content-muted);
   border-bottom: 1px solid var(--bf-color-border-subtle);
@@ -325,8 +325,8 @@
   min-width: 0;
   max-width: 100%;
   width: 100%;
-  font-size: 11px;
-  font-weight: 500;
+  font-size: var(--bf-type-support-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   color: var(--bf-color-content-primary);
 }
 
@@ -341,7 +341,7 @@
 
 .chat-model-selector__option-thinking {
   color: var(--bf-color-accent-secondary);
-  font-size: 9px;
+  font-size: var(--bf-type-overline-sm-font-size);
   flex-shrink: 0;
 }
 
@@ -349,7 +349,7 @@
   display: block;
   min-width: 0;
   max-width: 100%;
-  font-size: 9px;
+  font-size: var(--bf-type-overline-sm-font-size);
   color: var(--bf-color-content-muted);
   white-space: nowrap;
   overflow: hidden;
@@ -498,8 +498,8 @@
   background: var(--bf-color-overlay-scrim);
   color: var(--bf-color-content-on-dark);
   border: none;
-  font-size: 11px;
-  line-height: 1;
+  font-size: var(--bf-type-support-font-size);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
   cursor: pointer;
   display: flex;
   align-items: center;
diff --git a/src/mobile-web/src/styles/components/chat.scss b/src/mobile-web/src/styles/components/chat.scss
index 2e7977e86c..0ec38ce034 100644
--- a/src/mobile-web/src/styles/components/chat.scss
+++ b/src/mobile-web/src/styles/components/chat.scss
@@ -59,8 +59,8 @@
 }
 
 .chat-page__title {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -99,7 +99,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  font-size: 11px;
+  font-size: var(--bf-type-support-font-size);
   color: var(--bf-color-content-muted);
   overflow: hidden;
   white-space: nowrap;
@@ -112,15 +112,15 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--bf-color-accent-default);
-  font-weight: var(--font-weight-medium);
-  font-size: 11px;
+  font-weight: var(--bf-type-label-lg-font-weight);
+  font-size: var(--bf-type-support-font-size);
 }
 
 .chat-page__workspace-branch {
   color: var(--bf-color-content-muted);
-  font-weight: var(--font-weight-normal);
+  font-weight: var(--bf-type-body-md-font-weight);
   flex-shrink: 0;
-  font-size: 11px;
+  font-size: var(--bf-type-support-font-size);
   display: inline-flex;
   align-items: center;
   gap: 3px;
@@ -140,7 +140,7 @@
 
 .chat-page__load-more-indicator {
   text-align: center;
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-content-muted);
   padding: var(--size-gap-2) 0;
 }
@@ -214,8 +214,8 @@
 
 .chat-msg__user-content {
   width: 100%;
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-relaxed);
+  font-size: var(--bf-type-body-md-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
   color: var(--bf-color-content-primary);
   word-break: break-word;
   white-space: pre-wrap;
@@ -258,7 +258,7 @@
   background: none;
   border: none;
   color: var(--bf-color-content-muted);
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   cursor: pointer;
   padding: 3px 0;
   text-align: left;
@@ -279,7 +279,7 @@
 .chat-msg__response-label {
   color: var(--bf-color-content-muted);
   font-style: italic;
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 // Image analysis indicator
@@ -288,7 +288,7 @@
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
-  font-size: var(--font-size-sm);
+  font-size: var(--bf-type-body-md-font-size);
   color: var(--bf-color-content-secondary);
   background: var(--bf-color-surface-subtle);
   border-radius: 10px;
@@ -325,8 +325,8 @@
   border-radius: 10px;
   background: var(--bf-color-status-danger-content);
   color: var(--bf-color-action-primary-content);
-  font-size: 13px;
-  line-height: 1.4;
+  font-size: var(--bf-type-body-sm-font-size);
+  line-height: var(--bf-type-modifier-leading-ui-line-height);
   z-index: 9999;
   white-space: pre-line;
   animation: toastSlideIn 0.25s ease-out;
@@ -397,8 +397,8 @@
   border-radius: 16px;
   background: var(--bf-color-surface-panel);
   color: var(--bf-color-content-primary);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-body-lg-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   cursor: pointer;
   text-align: left;
 
@@ -433,8 +433,8 @@
   border-radius: 14px;
   background: var(--bf-color-surface-panel);
   color: var(--bf-color-content-secondary);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-body-lg-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   cursor: pointer;
 
   &:active {
diff --git a/src/mobile-web/src/styles/components/devices.scss b/src/mobile-web/src/styles/components/devices.scss
index 8106dd7a28..ffaf92bc48 100644
--- a/src/mobile-web/src/styles/components/devices.scss
+++ b/src/mobile-web/src/styles/components/devices.scss
@@ -62,10 +62,10 @@
 .devices-page__title {
   flex: 1;
   margin: 0;
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-bold);
+  font-size: var(--bf-type-flow-title-font-size);
+  font-weight: var(--bf-type-heading-page-font-weight);
   color: var(--bf-color-content-primary);
-  letter-spacing: 0.01em;
+  letter-spacing: var(--bf-type-modifier-tracking-subtle-letter-spacing);
 }
 
 .devices-page__body {
@@ -156,8 +156,8 @@
 }
 
 .devices-page__device-name {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-body-lg-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   color: var(--bf-color-content-primary);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -171,9 +171,9 @@
   border-radius: var(--size-radius-full);
   background: var(--bf-color-surface-subtle);
   color: var(--bf-color-content-secondary);
-  font-size: 10px;
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: 0.03em;
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
 
   &--current {
     border-color: var(--bf-color-accent-surface-strong);
@@ -186,7 +186,7 @@
   display: flex;
   align-items: center;
   gap: 5px;
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-content-muted);
 }
 
@@ -208,8 +208,8 @@
 
 .devices-page__device-id {
   margin-left: var(--size-gap-1);
-  font-family: var(--font-family-mono);
-  letter-spacing: 0.02em;
+  font-family: var(--bf-type-code-md-font-family);
+  letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
 }
 
 .devices-page__device-spinner {
@@ -225,14 +225,14 @@
   align-items: center;
   gap: var(--size-gap-3);
   padding: var(--size-gap-10) 0;
-  font-size: var(--font-size-sm);
+  font-size: var(--bf-type-body-md-font-size);
   color: var(--bf-color-content-muted);
 }
 
 .devices-page__empty {
   padding: var(--size-gap-10) 0;
   text-align: center;
-  font-size: var(--font-size-sm);
+  font-size: var(--bf-type-body-md-font-size);
   color: var(--bf-color-content-muted);
 }
 
@@ -255,8 +255,8 @@
 
 .devices-page__empty-text {
   margin: 0;
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-relaxed);
+  font-size: var(--bf-type-body-md-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
   color: var(--bf-color-content-secondary);
   text-align: center;
 }
@@ -267,8 +267,8 @@
   border-radius: var(--size-radius-full);
   background: var(--bf-color-action-secondary-background);
   color: var(--bf-color-content-primary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   cursor: pointer;
   transition: all var(--motion-fast) var(--easing-standard);
 
@@ -280,7 +280,7 @@
 .devices-page__error {
   margin: var(--size-gap-3) var(--size-gap-4) 0;
   padding: var(--size-gap-2) var(--size-gap-3);
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-status-danger-content);
   background: var(--bf-color-status-danger-surface);
   border: 1px solid var(--bf-color-status-danger-border);
diff --git a/src/mobile-web/src/styles/components/language-toggle.scss b/src/mobile-web/src/styles/components/language-toggle.scss
index d2672ecade..0131b93b7c 100644
--- a/src/mobile-web/src/styles/components/language-toggle.scss
+++ b/src/mobile-web/src/styles/components/language-toggle.scss
@@ -9,9 +9,9 @@
   border-radius: 999px;
   background: var(--bf-color-surface-subtle);
   color: var(--bf-color-content-secondary);
-  font-size: 11px;
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: 0.04em;
+  font-size: var(--bf-type-support-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   cursor: pointer;
   transition: all var(--motion-fast) var(--easing-standard);
 
diff --git a/src/mobile-web/src/styles/components/markdown.scss b/src/mobile-web/src/styles/components/markdown.scss
index 32ef6863b9..8235079d24 100644
--- a/src/mobile-web/src/styles/components/markdown.scss
+++ b/src/mobile-web/src/styles/components/markdown.scss
@@ -1,9 +1,9 @@
 // Markdown content styling — aligned with desktop Markdown.scss
 .chat-msg__assistant-content {
   color: var(--bf-color-content-primary);
-  line-height: var(--line-height-relaxed);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
+  line-height: var(--bf-type-body-lg-line-height);
+  font-family: var(--bf-type-body-md-font-family);
+  font-size: var(--bf-type-body-md-font-size);
   word-wrap: break-word;
   overflow-wrap: break-word;
   max-width: 100%;
@@ -31,8 +31,8 @@
     margin-top: 0;
     margin-bottom: 0.5rem;
     display: block;
-    line-height: 1.5;
-    font-size: var(--font-size-sm);
+    line-height: var(--bf-type-body-md-line-height);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-content-primary);
     &:last-child { margin-bottom: 0; }
 
@@ -42,38 +42,38 @@
   // ─── Headings ───────────────────────────────────────────────────────────────
 
   h1, h2, h3, h4, h5, h6 {
-    font-family: var(--font-family-sans);
+    font-family: var(--bf-type-body-md-font-family);
     color: var(--bf-color-content-primary);
     margin-top: 1.25rem;
     margin-bottom: 0.6rem;
-    font-weight: var(--font-weight-semibold);
-    line-height: var(--line-height-tight);
-    letter-spacing: 0.015em;
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-heading-page-line-height);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
     &:first-child { margin-top: 0; }
   }
 
   h1 {
-    font-size: var(--font-size-xl);
+    font-size: var(--bf-type-flow-section-title-font-size);
     margin: 1.25rem 0 0.75rem 0;
     padding-bottom: 0.5rem;
     border-bottom: 1px solid var(--bf-color-border-subtle);
   }
 
   h2 {
-    font-size: var(--font-size-lg);
+    font-size: var(--bf-type-flow-title-font-size);
     margin: 1rem 0 0.6rem 0;
     padding-bottom: 0.35rem;
     border-bottom: 1px solid var(--bf-color-border-subtle);
   }
 
   h3 {
-    font-size: var(--font-size-base);
+    font-size: var(--bf-type-body-lg-font-size);
     margin: 0.85rem 0 0.5rem 0;
   }
 
-  h4 { font-size: var(--font-size-sm); margin: 0.7rem 0 0.4rem 0; color: var(--bf-color-content-secondary); }
-  h5 { font-size: var(--font-size-sm); margin: 0.6rem 0 0.4rem 0; color: var(--bf-color-content-secondary); }
-  h6 { font-size: var(--font-size-xs); margin: 0.5rem 0 0.35rem 0; color: var(--bf-color-content-muted); opacity: 0.85; }
+  h4 { font-size: var(--bf-type-body-md-font-size); margin: 0.7rem 0 0.4rem 0; color: var(--bf-color-content-secondary); }
+  h5 { font-size: var(--bf-type-body-md-font-size); margin: 0.6rem 0 0.4rem 0; color: var(--bf-color-content-secondary); }
+  h6 { font-size: var(--bf-type-body-xs-font-size); margin: 0.5rem 0 0.35rem 0; color: var(--bf-color-content-muted); opacity: 0.85; }
 
   // ─── Lists ──────────────────────────────────────────────────────────────────
 
@@ -81,15 +81,15 @@
     margin-top: 0;
     margin-bottom: 0.5rem;
     padding-left: 1.5rem;
-    line-height: 1.5;
-    font-size: var(--font-size-sm);
+    line-height: var(--bf-type-body-md-line-height);
+    font-size: var(--bf-type-body-md-font-size);
   }
 
   li {
     word-wrap: break-word;
     margin-bottom: 0.1rem;
     position: relative;
-    line-height: 1.5;
+    line-height: var(--bf-type-body-md-line-height);
     color: var(--bf-color-content-primary);
     &:last-child { margin-bottom: 0; }
 
@@ -100,8 +100,9 @@
     }
   }
 
-  ul > li::marker { color: var(--bf-color-content-muted); font-size: 1.2em; font-weight: bold; }
-  ol > li::marker { color: var(--bf-color-content-muted); font-weight: bold; }
+  /* typography-audit: allow -- list marker geometry scales with its owning text */
+  ul > li::marker { color: var(--bf-color-content-muted); font-size: 1.2em; font-weight: var(--bf-type-heading-page-font-weight); }
+  ol > li::marker { color: var(--bf-color-content-muted); font-weight: var(--bf-type-heading-page-font-weight); }
 
   ul ul, ol ol, ul ol, ol ul {
     margin-top: 0.1rem;
@@ -124,16 +125,16 @@
   .inline-code {
     padding: 0.15em 0.35em;
     margin: 0 0.05em;
-    font-size: 0.85em;
+    font-size: var(--bf-type-body-xs-font-size);
     background: var(--bf-color-action-neutral-surface-hover);
     border: 1px solid var(--bf-color-border-subtle);
     border-radius: 4px;
-    font-family: var(--font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
     white-space: nowrap;
     vertical-align: baseline;
-    line-height: 1.4;
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     color: var(--bf-color-content-primary);
-    font-weight: 500;
+    font-weight: var(--bf-type-label-lg-font-weight);
   }
 
   // ─── Code blocks ────────────────────────────────────────────────────────────
@@ -168,13 +169,13 @@
       padding: 1rem !important;
       background: var(--bf-color-surface-canvas) !important;
       box-shadow: none !important;
-      font-size: 0.75rem !important;
+      font-size: var(--bf-type-body-xs-font-size) !important;
     }
 
     pre code {
-      font-family: var(--font-family-mono) !important;
+      font-family: var(--bf-type-code-md-font-family) !important;
       background: var(--bf-color-surface-canvas) !important;
-      font-size: 0.75rem !important;
+      font-size: var(--bf-type-body-xs-font-size) !important;
     }
 
     pre[style] {
@@ -223,8 +224,8 @@
     padding: 1rem;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
-    font-size: 0.75rem;
-    line-height: 1.5;
+    font-size: var(--bf-type-body-xs-font-size);
+    line-height: var(--bf-type-body-md-line-height);
     background: var(--bf-color-surface-canvas);
     border: 1px dashed var(--bf-color-border-subtle);
     border-radius: var(--size-radius-base);
@@ -235,7 +236,7 @@
     code {
       background: none;
       padding: 0;
-      font-size: var(--font-size-xs);
+      font-size: var(--bf-type-body-xs-font-size);
     }
   }
 
@@ -282,7 +283,7 @@
       border-spacing: 0;
       border-collapse: collapse;
       width: 100%;
-      font-size: var(--font-size-xs);
+      font-size: var(--bf-type-body-xs-font-size);
     }
   }
 
@@ -294,7 +295,7 @@
   }
 
   .table-wrapper th {
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-primary);
     white-space: nowrap;
@@ -334,7 +335,7 @@
   // ─── Typography ─────────────────────────────────────────────────────────────
 
   strong {
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
diff --git a/src/mobile-web/src/styles/components/pairing.scss b/src/mobile-web/src/styles/components/pairing.scss
index ab7df2b416..a2309b32c0 100644
--- a/src/mobile-web/src/styles/components/pairing.scss
+++ b/src/mobile-web/src/styles/components/pairing.scss
@@ -61,14 +61,14 @@
 }
 
 .pairing-page__brand {
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-heading-compact-page-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-accent-default);
-  letter-spacing: 0.5px;
+  letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
 }
 
 .pairing-page__state {
-  font-size: var(--font-size-sm);
+  font-size: var(--bf-type-body-md-font-size);
   color: var(--bf-color-content-muted);
   text-align: center;
 }
@@ -87,9 +87,9 @@
 }
 
 .pairing-page__field-label {
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-content-secondary);
-  letter-spacing: 0.04em;
+  letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   text-transform: uppercase;
 }
 
@@ -101,7 +101,7 @@
   border-radius: var(--size-radius-base);
   background: var(--bf-color-surface-raised);
   color: var(--bf-color-content-primary);
-  font-size: var(--font-size-base);
+  font-size: var(--bf-type-body-lg-font-size);
   outline: none;
 
   &:focus {
@@ -112,8 +112,8 @@
 
 .pairing-page__note {
   margin: 0;
-  font-size: var(--font-size-xs);
-  line-height: 1.5;
+  font-size: var(--bf-type-body-xs-font-size);
+  line-height: var(--bf-type-body-md-line-height);
   color: var(--bf-color-content-muted);
   text-align: left;
 }
@@ -126,7 +126,7 @@
 }
 
 .pairing-page__error {
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-status-danger-content);
   text-align: center;
   max-width: 280px;
@@ -142,8 +142,8 @@
   color: var(--bf-color-content-primary);
   border: 1px solid var(--bf-color-border-default);
   border-radius: var(--size-radius-base);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   cursor: pointer;
   transition: all var(--motion-fast) var(--easing-standard);
 
diff --git a/src/mobile-web/src/styles/components/sessions.scss b/src/mobile-web/src/styles/components/sessions.scss
index 86ac7f894c..17fa8ca705 100644
--- a/src/mobile-web/src/styles/components/sessions.scss
+++ b/src/mobile-web/src/styles/components/sessions.scss
@@ -44,19 +44,19 @@
 
   h1 {
     margin: 0;
-    font-size: var(--font-size-lg);
-    font-weight: var(--font-weight-bold);
+    font-size: var(--bf-type-flow-title-font-size);
+    font-weight: var(--bf-type-heading-page-font-weight);
     color: var(--bf-color-content-primary);
-    letter-spacing: 0.01em;
+    letter-spacing: var(--bf-type-modifier-tracking-subtle-letter-spacing);
     width: fit-content;
   }
 }
 
 .session-list__header-account-name {
-  font-size: 11px;
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-support-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   color: var(--bf-color-content-muted);
-  letter-spacing: 0.02em;
+  letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
 }
 
 .session-list__health-dot {
@@ -85,9 +85,9 @@
 }
 
 .session-list__header-kicker {
-  font-size: 10px;
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: 0.16em;
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-caps-letter-spacing);
   text-transform: uppercase;
   color: var(--bf-color-accent-default);
   width: fit-content;
@@ -163,10 +163,10 @@
   border-radius: var(--size-radius-full);
   background: var(--bf-color-accent-surface);
   color: var(--bf-color-accent-default);
-  font-size: 10px;
-  font-weight: var(--font-weight-semibold);
-  line-height: 16px;
-  letter-spacing: 0.02em;
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-body-lg-line-height);
+  letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -243,15 +243,15 @@
 }
 
 .session-list__resume-label {
-  font-size: 10px;
-  letter-spacing: 0.12em;
+  font-size: var(--bf-type-micro-font-size);
+  letter-spacing: var(--bf-type-modifier-tracking-caps-letter-spacing);
   text-transform: uppercase;
   color: var(--bf-color-accent-default);
 }
 
 .session-list__resume-name {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -268,7 +268,7 @@
 }
 
 .session-list__resume-time {
-  font-size: 11px;
+  font-size: var(--bf-type-support-font-size);
   color: var(--bf-color-content-muted);
   white-space: nowrap;
   flex-shrink: 0;
@@ -302,8 +302,8 @@
   @include squircle(12px);
   background: transparent;
   color: var(--bf-color-content-secondary);
-  font-size: 13px;
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-body-sm-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   cursor: pointer;
   transition: all var(--motion-fast) var(--easing-standard);
 
@@ -353,15 +353,15 @@
 }
 
 .session-list__workspace-label {
-  font-size: 10px;
-  letter-spacing: 0.14em;
+  font-size: var(--bf-type-micro-font-size);
+  letter-spacing: var(--bf-type-modifier-tracking-caps-letter-spacing);
   text-transform: uppercase;
   color: var(--bf-color-accent-default);
 }
 
 .session-list__workspace-name {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -376,7 +376,7 @@
   @include squircle(999px);
   background: var(--bf-color-accent-surface);
   color: var(--bf-color-accent-default);
-  font-size: 11px;
+  font-size: var(--bf-type-support-font-size);
   flex-shrink: 1;
   min-width: 0;
   white-space: nowrap;
@@ -421,8 +421,8 @@
 }
 
 .session-list__section-kicker {
-  font-size: 9px;
-  letter-spacing: 0.14em;
+  font-size: var(--bf-type-overline-sm-font-size);
+  letter-spacing: var(--bf-type-modifier-tracking-caps-letter-spacing);
   text-transform: uppercase;
   color: var(--bf-color-accent-default);
 
@@ -433,15 +433,15 @@
 
 .session-list__section-title {
   margin-top: 4px;
-  font-size: var(--font-size-lg);
-  line-height: 1.1;
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-flow-title-font-size);
+  line-height: var(--bf-type-display-xxl-line-height);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
-  letter-spacing: -0.02em;
+  letter-spacing: var(--bf-type-display-xxl-letter-spacing);
 }
 
 .session-list__section-meta {
-  font-size: 11px;
+  font-size: var(--bf-type-support-font-size);
   color: var(--bf-color-content-muted);
   flex-shrink: 0;
 }
@@ -500,15 +500,15 @@
 }
 
 .session-list__assistant-label {
-  font-size: 10px;
-  letter-spacing: 0.14em;
+  font-size: var(--bf-type-micro-font-size);
+  letter-spacing: var(--bf-type-modifier-tracking-caps-letter-spacing);
   text-transform: uppercase;
   color: var(--bf-color-identity-assistant-content);
 }
 
 .session-list__assistant-name {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -601,15 +601,15 @@
 }
 
 .session-list__create-title {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
-  letter-spacing: -0.01em;
+  letter-spacing: var(--bf-type-flow-title-letter-spacing);
 }
 
 .session-list__create-desc {
-  font-size: 11px;
-  line-height: 1.35;
+  font-size: var(--bf-type-support-font-size);
+  line-height: var(--bf-type-modifier-leading-balanced-line-height);
   color: var(--bf-color-content-secondary);
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -697,9 +697,9 @@
 }
 
 .session-list__item-name {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-  line-height: 1.25;
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-modifier-leading-dense-line-height);
   color: var(--bf-color-content-primary);
   min-width: 0;
   flex: 1;
@@ -710,7 +710,7 @@
 }
 
 .session-list__item-time {
-  font-size: 10px;
+  font-size: var(--bf-type-micro-font-size);
   color: var(--bf-color-content-muted);
   margin-top: 2px;
 }
@@ -721,8 +721,8 @@
   min-height: 18px;
   padding: 0 8px;
   @include squircle(999px);
-  font-size: 10px;
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   border: 1px solid var(--bf-color-border-subtle);
   background: var(--bf-color-surface-subtle);
   color: var(--bf-color-content-secondary);
@@ -753,8 +753,8 @@
 .session-list__empty {
   padding: var(--size-gap-10) var(--size-gap-4);
   text-align: center;
-  font-size: var(--font-size-sm);
-  line-height: 1.6;
+  font-size: var(--bf-type-body-md-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
   color: var(--bf-color-content-muted);
   border: 1px solid var(--bf-color-border-subtle);
   @include squircle(18px);
@@ -782,7 +782,7 @@
 .session-list__load-more {
   padding: var(--size-gap-3) 0 var(--size-gap-1);
   text-align: center;
-  font-size: 12px;
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-content-muted);
 }
 
@@ -819,8 +819,8 @@
 
   h3 {
     margin: 0;
-    font-size: 16px;
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--bf-type-flow-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 }
@@ -852,7 +852,7 @@
   padding: var(--size-gap-6);
   text-align: center;
   color: var(--bf-color-content-muted);
-  font-size: var(--font-size-sm);
+  font-size: var(--bf-type-body-md-font-size);
 }
 
 .session-list__picker-item {
@@ -931,8 +931,8 @@
 
 .session-list__picker-item-name {
   flex: 1;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   color: var(--bf-color-content-primary);
 }
 
@@ -986,7 +986,7 @@
   flex: 1;
   border: none;
   background: none;
-  font-size: var(--font-size-sm);
+  font-size: var(--bf-type-body-md-font-size);
   color: var(--bf-color-content-primary);
   outline: none;
   padding: 0;
@@ -1058,8 +1058,8 @@
 
 .session-list__menu-title {
   text-align: center;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
   padding: var(--size-gap-1) 0;
   white-space: nowrap;
@@ -1083,8 +1083,8 @@
   @include squircle(16px);
   background: var(--bf-color-surface-panel);
   color: var(--bf-color-content-primary);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-body-lg-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   cursor: pointer;
   text-align: left;
 
@@ -1114,8 +1114,8 @@
   @include squircle(14px);
   background: var(--bf-color-surface-panel);
   color: var(--bf-color-content-secondary);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-body-lg-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   cursor: pointer;
 
   &:active {
@@ -1143,8 +1143,8 @@
 
 .session-list__rename-title {
   margin: 0;
-  font-size: 18px;
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-flow-section-title-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
   text-align: center;
 }
@@ -1155,7 +1155,7 @@
   @include squircle(12px);
   background: var(--bf-color-surface-panel);
   color: var(--bf-color-content-primary);
-  font-size: var(--font-size-base);
+  font-size: var(--bf-type-body-lg-font-size);
   outline: none;
 
   &:focus {
@@ -1174,8 +1174,8 @@
   padding: 12px;
   border: none;
   @include squircle(14px);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-body-lg-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   cursor: pointer;
   transition: all var(--motion-fast) var(--easing-standard);
 
@@ -1225,16 +1225,16 @@
 
 .session-list__confirm-title {
   margin: 0;
-  font-size: 17px;
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-heading-navigation-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
 }
 
 .session-list__confirm-desc {
   margin: 0;
-  font-size: var(--font-size-sm);
+  font-size: var(--bf-type-body-md-font-size);
   color: var(--bf-color-content-secondary);
-  line-height: 1.5;
+  line-height: var(--bf-type-body-md-line-height);
 }
 
 .session-list__confirm-actions {
@@ -1249,8 +1249,8 @@
   padding: 12px;
   border: none;
   @include squircle(14px);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-body-lg-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   cursor: pointer;
   transition: all var(--motion-fast) var(--easing-standard);
 
@@ -1288,8 +1288,8 @@
   border-radius: 999px;
   background: var(--bf-color-content-primary);
   color: var(--bf-color-surface-canvas);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   z-index: 9999;
   box-shadow: var(--bf-shadow-base);
   pointer-events: none;
diff --git a/src/mobile-web/src/styles/components/thinking.scss b/src/mobile-web/src/styles/components/thinking.scss
index d759f5a333..18cdea110f 100644
--- a/src/mobile-web/src/styles/components/thinking.scss
+++ b/src/mobile-web/src/styles/components/thinking.scss
@@ -13,7 +13,7 @@
   background: none;
   border: none;
   color: var(--bf-color-content-muted);
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   cursor: pointer;
   padding: 3px 0;
   text-align: left;
@@ -34,7 +34,7 @@
 .chat-thinking__label {
   color: var(--bf-color-content-muted);
   font-style: italic;
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 // Expand/collapse container using grid animation
@@ -88,17 +88,17 @@
 
 .chat-thinking__content {
   padding: var(--size-gap-2) 0;
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-content-muted);
-  line-height: var(--line-height-relaxed);
+  line-height: var(--bf-type-body-lg-line-height);
 
   p { margin-bottom: 6px; &:last-child { margin-bottom: 0; } }
   code {
     background: var(--bf-color-action-neutral-surface-hover);
     padding: 1px 4px;
     border-radius: 3px;
-    font-size: 11px;
-    font-family: var(--font-family-mono);
+    font-size: var(--bf-type-support-font-size);
+    font-family: var(--bf-type-code-md-font-family);
   }
 }
 
diff --git a/src/mobile-web/src/styles/components/tool-card.scss b/src/mobile-web/src/styles/components/tool-card.scss
index b3b907b15f..e1e7c9439d 100644
--- a/src/mobile-web/src/styles/components/tool-card.scss
+++ b/src/mobile-web/src/styles/components/tool-card.scss
@@ -41,8 +41,8 @@
 }
 
 .chat-tool-list__count {
-  font-size: 12px;
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-body-xs-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   color: var(--bf-color-content-secondary);
 }
 
@@ -53,7 +53,7 @@
 }
 
 .chat-tool-list__stat {
-  font-size: 11px;
+  font-size: var(--bf-type-support-font-size);
   font-variant-numeric: tabular-nums;
 
   &--done {
@@ -184,17 +184,17 @@
 
 .chat-tool-card__name {
   flex: 1;
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-content-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--bf-type-label-lg-font-weight);
   min-width: 0;
 }
 
 .chat-tool-card__preview {
-  font-weight: var(--font-weight-normal);
+  font-weight: var(--bf-type-body-md-font-weight);
   color: var(--bf-color-content-muted);
 }
 
@@ -203,19 +203,19 @@
   align-items: center;
   padding: 1px 6px;
   border-radius: var(--size-radius-sm);
-  font-size: 11px;
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-support-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   background: var(--bf-color-accent-surface);
   color: var(--bf-color-accent-default);
   flex-shrink: 0;
 }
 
 .chat-tool-card__duration {
-  font-size: 11px;
+  font-size: var(--bf-type-support-font-size);
   color: var(--bf-color-content-muted);
   flex-shrink: 0;
   font-variant-numeric: tabular-nums;
-  font-family: var(--font-family-mono);
+  font-family: var(--bf-type-code-md-font-family);
 }
 
 .chat-tool-card__cancel {
@@ -248,12 +248,12 @@
 .chat-tool-card__expanded {
   border-top: 1px solid var(--bf-color-border-subtle);
   padding: var(--size-gap-2) var(--size-gap-3);
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-content-muted);
   max-height: 200px;
   overflow-y: auto;
-  font-family: var(--font-family-mono);
-  line-height: var(--line-height-relaxed);
+  font-family: var(--bf-type-code-md-font-family);
+  line-height: var(--bf-type-body-lg-line-height);
   white-space: pre-wrap;
   word-break: break-all;
 }
@@ -321,8 +321,8 @@
 }
 
 .chat-task-card__stat {
-  font-size: 11px;
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-support-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   color: var(--bf-color-content-muted);
 }
 
@@ -333,13 +333,13 @@
 }
 
 .chat-task-card__stat--done {
-  font-size: 11px;
+  font-size: var(--bf-type-support-font-size);
   color: var(--bf-color-status-success-content);
   font-variant-numeric: tabular-nums;
 }
 
 .chat-task-card__stat--running {
-  font-size: 11px;
+  font-size: var(--bf-type-support-font-size);
   color: var(--bf-color-status-warning-content);
   font-variant-numeric: tabular-nums;
 }
@@ -376,7 +376,7 @@
   align-items: center;
   gap: var(--size-gap-2);
   padding: 3px 0;
-  font-size: 11px;
+  font-size: var(--bf-type-support-font-size);
   color: var(--bf-color-content-muted);
   min-height: 22px;
 
@@ -406,7 +406,7 @@
 }
 
 .chat-task-card__step-name {
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--bf-type-label-lg-font-weight);
   color: var(--bf-color-content-secondary);
   flex-shrink: 0;
 }
@@ -423,7 +423,7 @@
 .chat-task-card__step-duration {
   flex-shrink: 0;
   font-variant-numeric: tabular-nums;
-  font-family: var(--font-family-mono);
+  font-family: var(--bf-type-code-md-font-family);
   color: var(--bf-color-content-muted);
 }
 
@@ -447,8 +447,8 @@
 }
 
 .chat-ask-card__count {
-  font-size: 12px;
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-body-xs-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   color: var(--bf-color-content-secondary);
   flex: 1;
 }
@@ -462,8 +462,8 @@
   border: 1px solid var(--bf-color-accent-default);
   background: transparent;
   color: var(--bf-color-accent-default);
-  font-size: 12px;
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-body-xs-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   cursor: pointer;
   transition: all var(--motion-fast) var(--easing-standard);
 
@@ -481,7 +481,7 @@
     justify-content: center;
     padding: 10px;
     margin-top: 8px;
-    font-size: 13px;
+    font-size: var(--bf-type-body-sm-font-size);
   }
 }
 
@@ -489,7 +489,7 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  font-size: 11px;
+  font-size: var(--bf-type-support-font-size);
   color: var(--bf-color-status-warning-content);
 
   &::before {
@@ -527,17 +527,17 @@
   display: inline-flex;
   padding: 1px 6px;
   border-radius: var(--size-radius-sm);
-  font-size: 11px;
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-support-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   background: var(--bf-color-accent-surface);
   color: var(--bf-color-accent-default);
   flex-shrink: 0;
 }
 
 .chat-ask-card__question-text {
-  font-size: 13px;
+  font-size: var(--bf-type-body-sm-font-size);
   color: var(--bf-color-content-primary);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--bf-type-label-lg-font-weight);
 }
 
 .chat-ask-card__options {
@@ -598,14 +598,14 @@
 }
 
 .chat-ask-card__option-label {
-  font-size: 13px;
+  font-size: var(--bf-type-body-sm-font-size);
   color: var(--bf-color-content-primary);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--bf-type-label-lg-font-weight);
   flex-shrink: 0;
 }
 
 .chat-ask-card__option-desc {
-  font-size: 11px;
+  font-size: var(--bf-type-support-font-size);
   color: var(--bf-color-content-muted);
   flex: 1;
   text-align: right;
@@ -618,7 +618,7 @@
   border: 1px solid var(--bf-color-border-default);
   background: var(--bf-color-surface-scene);
   color: var(--bf-color-content-primary);
-  font-size: 13px;
+  font-size: var(--bf-type-body-sm-font-size);
   outline: none;
 
   &:focus {
@@ -664,7 +664,7 @@
 .chat-todo-card__current {
   flex: 1;
   min-width: 0;
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-content-secondary);
   white-space: nowrap;
   overflow: hidden;
@@ -672,7 +672,7 @@
 
   &--done {
     color: var(--bf-color-status-success-content);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--bf-type-label-lg-font-weight);
   }
 }
 
@@ -723,8 +723,8 @@
 }
 
 .chat-todo-card__stats {
-  font-size: 11px;
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-support-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   color: var(--bf-color-content-muted);
   font-variant-numeric: tabular-nums;
   flex-shrink: 0;
@@ -771,12 +771,12 @@
 }
 
 .chat-todo-card__item-text {
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-content-primary);
-  line-height: var(--line-height-base);
+  line-height: var(--bf-type-body-md-line-height);
 
   .chat-todo-card__item--in_progress & {
     color: var(--bf-color-accent-default);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--bf-type-label-lg-font-weight);
   }
 }
diff --git a/src/mobile-web/src/styles/components/workspace.scss b/src/mobile-web/src/styles/components/workspace.scss
index b076579013..7b2d1b9dff 100644
--- a/src/mobile-web/src/styles/components/workspace.scss
+++ b/src/mobile-web/src/styles/components/workspace.scss
@@ -27,8 +27,8 @@
   flex-shrink: 0;
 
   h1 {
-    font-size: var(--font-size-lg);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--bf-type-flow-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 }
@@ -48,7 +48,7 @@
   height: 100%;
   gap: var(--size-gap-4);
   color: var(--bf-color-content-muted);
-  font-size: var(--font-size-sm);
+  font-size: var(--bf-type-body-md-font-size);
 }
 
 .workspace-page__current {
@@ -59,11 +59,11 @@
 
 .workspace-page__current-label,
 .workspace-page__recent-label {
-  font-size: 9px;
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-overline-sm-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-accent-default);
   text-transform: uppercase;
-  letter-spacing: 0.14em;
+  letter-spacing: var(--bf-type-modifier-tracking-caps-letter-spacing);
 }
 
 .workspace-page__current-card {
@@ -76,25 +76,25 @@
 }
 
 .workspace-page__project-name {
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--bf-type-flow-title-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
   margin-bottom: var(--size-gap-1);
 }
 
 .workspace-page__project-path {
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-content-muted);
   word-break: break-all;
   margin-bottom: var(--size-gap-2);
-  font-family: var(--font-family-mono);
+  font-family: var(--bf-type-code-md-font-family);
 }
 
 .workspace-page__git-branch {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-accent-default);
   background: var(--bf-color-accent-surface);
   padding: 3px var(--size-gap-2);
@@ -112,8 +112,8 @@
   padding: var(--size-gap-3) var(--size-gap-4);
   border: none;
   @include squircle(12px);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   cursor: pointer;
   transition: all var(--motion-fast) var(--easing-standard);
 
@@ -161,13 +161,13 @@
 }
 
 .workspace-page__no-workspace-text {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-body-lg-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   color: var(--bf-color-content-primary);
 }
 
 .workspace-page__no-workspace-hint {
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-content-muted);
   max-width: 280px;
 }
@@ -183,7 +183,7 @@
 .workspace-page__recent-empty {
   text-align: center;
   color: var(--bf-color-content-muted);
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   padding: var(--size-gap-6) 0;
 }
 
@@ -226,17 +226,17 @@
 }
 
 .workspace-page__recent-item-name {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   color: var(--bf-color-content-primary);
   margin-bottom: 2px;
 }
 
 .workspace-page__recent-item-path {
-  font-size: 11px;
+  font-size: var(--bf-type-support-font-size);
   color: var(--bf-color-content-muted);
   word-break: break-all;
-  font-family: var(--font-family-mono);
+  font-family: var(--bf-type-code-md-font-family);
 }
 
 .workspace-page__switching {
@@ -246,12 +246,12 @@
   gap: var(--size-gap-2);
   padding: var(--size-gap-4);
   color: var(--bf-color-content-muted);
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
 }
 
 .workspace-page__error {
   margin-top: var(--size-gap-3);
-  font-size: var(--font-size-xs);
+  font-size: var(--bf-type-body-xs-font-size);
   color: var(--bf-color-status-danger-content);
   text-align: center;
   padding: var(--size-gap-2) var(--size-gap-3);
diff --git a/src/mobile-web/src/styles/global.scss b/src/mobile-web/src/styles/global.scss
index 5db17e69ed..8b3b1b771a 100644
--- a/src/mobile-web/src/styles/global.scss
+++ b/src/mobile-web/src/styles/global.scss
@@ -24,24 +24,6 @@
   --motion-slow: 0.6s;
   --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
 
-  --font-family-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Roboto, sans-serif;
-  --font-family-mono: 'Menlo', 'SF Mono', 'Cascadia Code', 'Consolas', 'Liberation Mono', 'Courier New', 'Noto Sans Mono CJK SC', 'Noto Sans Mono', monospace;
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  --font-size-xs: 12px;
-  --font-size-sm: 14px;
-  --font-size-base: 15px;
-  --font-size-lg: 16px;
-  --font-size-xl: 18px;
-  --font-size-2xl: 20px;
-  --font-size-3xl: 24px;
-
-  --line-height-tight: 1.2;
-  --line-height-base: 1.5;
-  --line-height-relaxed: 1.6;
 }
 
 * {
@@ -59,9 +41,9 @@ html, body, #root {
 }
 
 body {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-base);
+  font-family: var(--bf-type-body-md-font-family);
+  font-size: var(--bf-type-body-md-font-size);
+  line-height: var(--bf-type-body-md-line-height);
   color: var(--bf-color-content-primary);
   background: var(--bf-color-surface-canvas);
   -webkit-font-smoothing: antialiased;
@@ -242,8 +224,8 @@ html.theme-switching {
   padding: 8px 16px;
   background: var(--bf-color-status-warning-content);
   color: var(--bf-color-action-primary-content);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-lg-font-weight);
   animation: slideDown var(--motion-fast) var(--easing-standard);
 
   button {
diff --git a/src/web-ui/src/app/components/AboutDialog/AboutDialog.scss b/src/web-ui/src/app/components/AboutDialog/AboutDialog.scss
index c819731c59..e7a9c36fb0 100644
--- a/src/web-ui/src/app/components/AboutDialog/AboutDialog.scss
+++ b/src/web-ui/src/app/components/AboutDialog/AboutDialog.scss
@@ -49,18 +49,18 @@
 .bitfun-about-dialog__title {
   margin: 0;
   color: var(--bf-color-content-primary);
-  font-family:var(--bf-font-family-sans);
-  font-size: var(--bf-font-size-8xl);
-  font-weight: var(--bf-font-weight-regular);
-  line-height: var(--bf-line-height-none);
-  letter-spacing: var(--bf-letter-spacing-tighter);
+  font-family:var(--bf-type-body-sm-font-family);
+  font-size: var(--bf-type-display-xl-font-size);
+  font-weight: var(--bf-type-body-sm-font-weight);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
+  letter-spacing: var(--bf-type-modifier-tracking-tighter-letter-spacing);
 }
 
 .bitfun-about-dialog__tagline {
   margin: 16px 0 0;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-base);
-  line-height: var(--bf-line-height-comfortable);
+  font-size: var(--bf-type-body-md-font-size);
+  line-height: var(--bf-type-support-line-height);
 }
 
 .bitfun-about-dialog__release {
@@ -77,9 +77,9 @@
 
 .bitfun-about-dialog__release-version {
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-xl);
+  font-size: var(--bf-type-flow-title-font-size);
   font-variant-numeric: tabular-nums;
-  line-height: var(--bf-line-height-tight);
+  line-height: var(--bf-type-label-md-line-height);
 }
 
 .bitfun-about-dialog__channel-badge {
@@ -91,8 +91,8 @@
   border-radius: var(--bf-radius-sm);
   background: var(--bf-color-surface-subtle);
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-none);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
   white-space: nowrap;
 }
 
@@ -159,15 +159,15 @@
   justify-content: space-between;
   gap: 12px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-ui);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-modifier-leading-ui-line-height);
 }
 
 .bitfun-about-dialog__download-hint {
   margin: 0;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-support);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-flow-support-line-height);
 }
 
 .bitfun-about-dialog__update-installed {
@@ -182,8 +182,8 @@
   align-items: flex-start;
   gap: 8px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-support);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-flow-support-line-height);
 
   svg {
     flex-shrink: 0;
@@ -245,9 +245,9 @@
   gap: 13px;
   min-width: 0;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-base);
-  font-weight: var(--bf-font-weight-medium);
-  line-height: var(--bf-line-height-support);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
+  line-height: var(--bf-type-flow-support-line-height);
 
   svg {
     flex-shrink: 0;
@@ -258,24 +258,24 @@
 .bitfun-about-dialog__info-value {
   min-width: 0;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-lg);
-  font-weight: var(--bf-font-weight-regular);
-  line-height: var(--bf-line-height-support);
+  font-size: var(--bf-type-body-lg-font-size);
+  font-weight: var(--bf-type-body-sm-font-weight);
+  line-height: var(--bf-type-flow-support-line-height);
   text-align: right;
   overflow-wrap: anywhere;
 
   &--version {
-    font-size: var(--bf-font-size-xl);
+    font-size: var(--bf-type-flow-title-font-size);
     font-variant-numeric: tabular-nums;
   }
 
   &--mono {
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
     font-variant-numeric: tabular-nums;
   }
 
   &--branch {
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 }
 
@@ -347,9 +347,9 @@
   gap: 6px;
   margin: 0;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-base);
-  font-weight: var(--bf-font-weight-medium);
-  line-height: var(--bf-line-height-ui);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
+  line-height: var(--bf-type-modifier-leading-ui-line-height);
 
   svg {
     flex: 0 0 auto;
@@ -359,8 +359,8 @@
 .bitfun-about-dialog__star-description {
   margin: 4px 0 0;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-support);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-flow-support-line-height);
 }
 
 .bitfun-about-dialog__star-rule {
@@ -386,8 +386,8 @@
 .bitfun-about-dialog__copyright {
   margin: 0;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-body-sm-line-height);
 }
 
 @media (max-width: 900px) {
@@ -442,7 +442,7 @@
   }
 
   .bitfun-about-dialog__title {
-    font-size: var(--bf-font-size-7xl);
+    font-size: var(--bf-type-display-lg-font-size);
   }
 
   .bitfun-about-dialog__release {
@@ -485,12 +485,12 @@
   }
 
   .bitfun-about-dialog__title {
-    font-size: var(--bf-font-size-6xl);
+    font-size: var(--bf-type-display-md-font-size);
   }
 
   .bitfun-about-dialog__tagline {
     margin-top: 10px;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   .bitfun-about-dialog__metadata {
@@ -504,7 +504,7 @@
 
   .bitfun-about-dialog__info-label {
     gap: 8px;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
 
     svg {
       width: 18px;
@@ -513,14 +513,14 @@
   }
 
   .bitfun-about-dialog__info-value {
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
 
     &--version {
-      font-size: var(--bf-font-size-lg);
+      font-size: var(--bf-type-body-lg-font-size);
     }
 
     &--branch {
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
     }
   }
 
@@ -554,7 +554,7 @@
   }
 
   .bitfun-about-dialog__title {
-    font-size: var(--bf-font-size-7xl);
+    font-size: var(--bf-type-display-lg-font-size);
   }
 
   .bitfun-about-dialog__release {
diff --git a/src/web-ui/src/app/components/AgentCompanionDesktopPet/AgentCompanionDesktopPet.scss b/src/web-ui/src/app/components/AgentCompanionDesktopPet/AgentCompanionDesktopPet.scss
index 4652425418..c0fbaab60b 100644
--- a/src/web-ui/src/app/components/AgentCompanionDesktopPet/AgentCompanionDesktopPet.scss
+++ b/src/web-ui/src/app/components/AgentCompanionDesktopPet/AgentCompanionDesktopPet.scss
@@ -108,8 +108,8 @@
     background: color-mix(in srgb, var(--bf-color-content-on-dark) 95%, transparent);
     color: inherit;
     font: inherit;
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-snug);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
     user-select: text;
     -webkit-user-select: text;
 
@@ -354,16 +354,16 @@
     box-sizing: border-box;
     max-width: 100%;
     padding-right: 8px;
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-dense);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-modifier-leading-dense-line-height);
+    font-weight: var(--bf-type-label-selected-font-weight);
     min-width: 0;
   }
 
   &__bubble-status {
     margin-top: 2px;
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-dense);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-modifier-leading-dense-line-height);
     color: color-mix(in srgb, var(--bf-color-content-on-light) 70%, transparent);
   }
 
@@ -373,8 +373,8 @@
     min-height: 0;
     flex: 0 0 calc(12px * 4);
     height: calc(12px * 4);
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-label-md-line-height);
     color: color-mix(in srgb, var(--bf-color-content-on-light) 82%, transparent);
     white-space: pre-wrap;
     word-break: break-word;
diff --git a/src/web-ui/src/app/components/AssistantAvatar/AssistantAvatar.scss b/src/web-ui/src/app/components/AssistantAvatar/AssistantAvatar.scss
index be2c4228f9..e6709040b9 100644
--- a/src/web-ui/src/app/components/AssistantAvatar/AssistantAvatar.scss
+++ b/src/web-ui/src/app/components/AssistantAvatar/AssistantAvatar.scss
@@ -38,7 +38,7 @@
     display: block;
     /* typography-audit: allow -- emoji is graphic content scaled from the avatar box */
     font-size: calc(var(--assistant-avatar-size) * 0.5);
-    line-height: var(--bf-line-height-none);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     transform: translateY(-1%);
   }
 
diff --git a/src/web-ui/src/app/components/GalleryLayout/GalleryDetailModal.scss b/src/web-ui/src/app/components/GalleryLayout/GalleryDetailModal.scss
index 50523db9c3..6b45205db9 100644
--- a/src/web-ui/src/app/components/GalleryLayout/GalleryDetailModal.scss
+++ b/src/web-ui/src/app/components/GalleryLayout/GalleryDetailModal.scss
@@ -49,9 +49,11 @@
     max-width: 100%;
     margin: 0;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-2xl);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-heading-section-font-family);
+    font-size: var(--bf-type-heading-section-font-size);
+    font-weight: var(--bf-type-heading-section-font-weight);
+    line-height: var(--bf-type-heading-section-line-height);
+    letter-spacing: var(--bf-type-heading-section-letter-spacing);
   }
 
   &__details {
@@ -72,8 +74,11 @@
   &__description {
     margin: 0;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-relaxed);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   &__meta {
@@ -82,7 +87,11 @@
     gap: var(--bf-space-2);
     flex-wrap: wrap;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-family: var(--bf-type-meta-font-family);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-meta-font-weight);
+    line-height: var(--bf-type-meta-line-height);
+    letter-spacing: var(--bf-type-meta-letter-spacing);
   }
 
   &__content {
@@ -125,7 +134,11 @@
   }
 
   .gallery-detail-modal__title {
-    font-size: var(--bf-font-size-3xl);
+    font-family: var(--bf-type-heading-page-font-family);
+    font-size: var(--bf-type-heading-page-font-size);
+    font-weight: var(--bf-type-heading-page-font-weight);
+    line-height: var(--bf-type-heading-page-line-height);
+    letter-spacing: var(--bf-type-heading-page-letter-spacing);
   }
 
   .gallery-detail-modal__hero-actions {
@@ -153,7 +166,7 @@
       border-radius: var(--bf-radius-pill);
       background: var(--bf-color-surface-subtle);
       color: var(--bf-color-content-secondary);
-      line-height: var(--bf-line-height-none);
+      line-height: var(--bf-type-meta-line-height);
     }
   }
 
diff --git a/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss b/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss
index 0e5a1f2446..9be5358d8d 100644
--- a/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss
+++ b/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss
@@ -62,18 +62,22 @@ $content-max: 1360px;
 
   &__title {
     margin: 0 0 var(--bf-space-1);
-    font-size: var(--bf-font-size-3xl);
-    font-weight: var(--bf-font-weight-semibold);
+    font-family: var(--bf-type-heading-page-font-family);
+    font-size: var(--bf-type-heading-page-font-size);
+    font-weight: var(--bf-type-heading-page-font-weight);
     color: var(--bf-color-content-primary);
-    letter-spacing: var(--bf-letter-spacing-tight);
-    line-height: var(--bf-line-height-tight);
+    letter-spacing: var(--bf-type-heading-page-letter-spacing);
+    line-height: var(--bf-type-heading-page-line-height);
   }
 
   &__subtitle {
     margin: 0;
-    font-size: var(--bf-font-size-xs);
+    font-family: var(--bf-type-body-lg-font-family);
+    font-size: var(--bf-type-body-lg-font-size);
+    font-weight: var(--bf-type-body-lg-font-weight);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
+    letter-spacing: var(--bf-type-body-lg-letter-spacing);
 
     a {
       color: inherit;
@@ -126,15 +130,33 @@ $content-max: 1360px;
   }
 
   &__title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-family: var(--bf-type-heading-section-font-family);
+    font-size: var(--bf-type-heading-section-font-size);
+    font-weight: var(--bf-type-heading-section-font-weight);
+    line-height: var(--bf-type-heading-section-line-height);
+    letter-spacing: var(--bf-type-heading-section-letter-spacing);
     color: var(--bf-color-content-primary);
   }
 
+  &__title-row {
+    display: flex;
+    align-items: center;
+    gap: var(--bf-space-2);
+    min-width: 0;
+  }
+
+  &__title-adornment {
+    display: inline-flex;
+    flex: 0 0 auto;
+  }
+
   &__subtitle {
-    font-size: var(--bf-font-size-xs);
+    font-family: var(--bf-type-support-font-family);
+    font-size: var(--bf-type-support-font-size);
+    font-weight: var(--bf-type-support-font-weight);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-support-line-height);
+    letter-spacing: var(--bf-type-support-letter-spacing);
   }
 
   &__tools {
@@ -195,7 +217,11 @@ $content-max: 1360px;
   justify-content: center;
   gap: var(--bf-space-3);
   padding: var(--bf-space-8) var(--bf-space-6);
-  font-size: var(--bf-font-size-sm);
+  font-family: var(--bf-type-body-sm-font-family);
+  font-size: var(--bf-type-body-sm-font-size);
+  font-weight: var(--bf-type-body-sm-font-weight);
+  line-height: var(--bf-type-body-sm-line-height);
+  letter-spacing: var(--bf-type-body-sm-letter-spacing);
   color: var(--bf-color-content-muted);
   text-align: center;
 
@@ -301,8 +327,11 @@ $content-max: 1360px;
   border-radius: var(--bf-radius-base);
   background: transparent;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-medium);
+  font-family: var(--bf-type-label-sm-font-family);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
+  line-height: var(--bf-type-label-sm-line-height);
+  letter-spacing: var(--bf-type-label-sm-letter-spacing);
   cursor: pointer;
 
   &:hover {
@@ -345,7 +374,7 @@ $content-max: 1360px;
   align-items: center;
   justify-content: center;
   min-width: 16px;
-  line-height: var(--bf-line-height-none);
+  line-height: var(--bf-type-meta-line-height);
 }
 
 .gallery-filter-count {
@@ -354,7 +383,10 @@ $content-max: 1360px;
   border-radius: var(--bf-radius-pill);
   background: var(--bf-color-action-neutral-surface-hover);
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-micro);
+  font-family: var(--bf-type-micro-font-family);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-micro-font-weight);
+  letter-spacing: var(--bf-type-micro-letter-spacing);
 }
 
 .gallery-zone-count {
@@ -364,8 +396,10 @@ $content-max: 1360px;
   border-radius: var(--bf-radius-pill);
   background: var(--bf-color-action-neutral-surface-hover);
   border: 1px solid var(--bf-color-border-subtle);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-semibold);
+  font-family: var(--bf-type-meta-font-family);
+  font-size: var(--bf-type-meta-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  letter-spacing: var(--bf-type-meta-letter-spacing);
   color: var(--bf-color-content-muted);
   white-space: nowrap;
 }
@@ -378,12 +412,19 @@ $content-max: 1360px;
   background: color-mix(in srgb, var(--bf-color-status-success-content) 12%, transparent);
   border: 1px solid color-mix(in srgb, var(--bf-color-status-success-content) 28%, transparent);
   color: var(--bf-color-status-success-content);
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-semibold);
+  font-family: var(--bf-type-meta-font-family);
+  font-size: var(--bf-type-meta-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-meta-line-height);
+  letter-spacing: var(--bf-type-meta-letter-spacing);
 }
 
 .gallery-run-empty {
-  font-size: var(--bf-font-size-xs);
+  font-family: var(--bf-type-support-font-family);
+  font-size: var(--bf-type-support-font-size);
+  font-weight: var(--bf-type-support-font-weight);
+  line-height: var(--bf-type-support-line-height);
+  letter-spacing: var(--bf-type-support-letter-spacing);
   color: var(--bf-color-content-muted);
   padding: var(--bf-space-3) 0;
   text-align: center;
diff --git a/src/web-ui/src/app/components/GalleryLayout/GalleryZone.tsx b/src/web-ui/src/app/components/GalleryLayout/GalleryZone.tsx
index 83da738e93..2b6d9da351 100644
--- a/src/web-ui/src/app/components/GalleryLayout/GalleryZone.tsx
+++ b/src/web-ui/src/app/components/GalleryLayout/GalleryZone.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 interface GalleryZoneProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
   id?: string;
   title: string;
+  titleAdornment?: React.ReactNode;
   subtitle?: React.ReactNode;
   tools?: React.ReactNode;
   children: React.ReactNode;
@@ -12,6 +13,7 @@ interface GalleryZoneProps extends Omit<React.HTMLAttributes<HTMLElement>, 'titl
 const GalleryZone: React.FC<GalleryZoneProps> = ({
   id,
   title,
+  titleAdornment,
   subtitle,
   tools,
   children,
@@ -21,7 +23,12 @@ const GalleryZone: React.FC<GalleryZoneProps> = ({
   <section {...sectionProps} id={id} className={['gallery-zone', className].filter(Boolean).join(' ')}>
     <div className="gallery-zone__header">
       <div className="gallery-zone__heading">
-        <span className="gallery-zone__title">{title}</span>
+        <div className="gallery-zone__title-row">
+          <span className="gallery-zone__title">{title}</span>
+          {titleAdornment ? (
+            <span className="gallery-zone__title-adornment">{titleAdornment}</span>
+          ) : null}
+        </div>
         {subtitle ? <span className="gallery-zone__subtitle">{subtitle}</span> : null}
       </div>
       {tools ? <div className="gallery-zone__tools">{tools}</div> : null}
diff --git a/src/web-ui/src/app/components/MCPInteractionDialog/MCPInteractionDialog.scss b/src/web-ui/src/app/components/MCPInteractionDialog/MCPInteractionDialog.scss
index a1abab8800..ca99c6ed55 100644
--- a/src/web-ui/src/app/components/MCPInteractionDialog/MCPInteractionDialog.scss
+++ b/src/web-ui/src/app/components/MCPInteractionDialog/MCPInteractionDialog.scss
@@ -10,7 +10,7 @@
   justify-content: space-between;
   align-items: center;
   gap: 8px;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-secondary);
 }
 
@@ -31,7 +31,7 @@
 }
 
 .mcp-interaction-dialog__label {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-secondary);
 }
 
@@ -42,8 +42,8 @@
   background: var(--bf-color-surface-tertiary);
   border: 1px solid var(--bf-color-border-default);
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-body-sm-line-height);
   white-space: pre-wrap;
   word-break: break-word;
   max-height: 180px;
diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.scss b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
index 07fd57db0d..588f4febbb 100644
--- a/src/web-ui/src/app/components/NavPanel/NavPanel.scss
+++ b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
@@ -166,8 +166,8 @@ $_section-header-height: 22px;
   &__mode-pill-caption {
     margin: 0;
     padding: 0 4px;
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-compact);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-meta-line-height);
     color: var(--bf-color-content-muted);
     opacity: 0.78;
     overflow-wrap: break-word;
@@ -286,9 +286,9 @@ $_section-header-height: 22px;
     gap: 4px;
     min-width: 0;
     padding: 6px 4px;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
     color: var(--bf-color-content-muted);
     transition: color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
 
@@ -387,8 +387,8 @@ $_section-header-height: 22px;
     border-radius: var(--bf-radius-base) 0 0 var(--bf-radius-base);
     background: var(--bf-color-action-quiet-hover);
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     cursor: pointer;
     transition: background var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
                 color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -544,9 +544,9 @@ $_section-header-height: 22px;
   }
 
   &__section-label {
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-wider);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     text-transform: uppercase;
     color: var(--bf-color-content-muted);
     flex: 1;
@@ -581,8 +581,8 @@ $_section-header-height: 22px;
     background: transparent;
     color: var(--bf-color-content-secondary);
     cursor: pointer;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
     transition: background var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
                 color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
                 transform var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -664,9 +664,9 @@ $_section-header-height: 22px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-display);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-display-sm-line-height);
   }
 
   &__miniapp-entry-wrap {
@@ -764,9 +764,9 @@ $_section-header-height: 22px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-display);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-display-sm-line-height);
   }
 
   &__miniapp-entry-apps {
@@ -838,9 +838,9 @@ $_section-header-height: 22px;
     &--more {
       background: color-mix(in srgb, var(--bf-color-action-neutral-surface-hover) 92%, transparent);
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-micro);
-      font-weight: var(--bf-font-weight-bold);
-      letter-spacing: var(--bf-letter-spacing-subtle);
+      font-size: var(--bf-type-micro-font-size);
+      font-weight: var(--bf-type-heading-page-font-weight);
+      letter-spacing: var(--bf-type-modifier-tracking-subtle-letter-spacing);
       filter: none;
       opacity: 1;
 
@@ -1011,14 +1011,14 @@ $_section-header-height: 22px;
     overflow: hidden;
     text-overflow: ellipsis;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__workspace-menu-item-host-sep {
     flex: 0 0 auto;
     color: var(--bf-color-content-muted);
     opacity: 0.55;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__workspace-menu-item-name {
@@ -1031,7 +1031,7 @@ $_section-header-height: 22px;
   &__workspace-menu-empty {
     padding: var(--bf-space-2) var(--bf-space-3);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__workspace-menu-workspaces {
@@ -1132,8 +1132,8 @@ $_section-header-height: 22px;
     color: var(--bf-color-content-secondary);
     cursor: pointer;
     text-align: left;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
     width: 100%;
     position: relative;
     opacity: 1;
@@ -1156,7 +1156,7 @@ $_section-header-height: 22px;
       opacity: 1;
       color: var(--bf-color-content-primary);
       background: var(--bf-color-action-quiet-hover);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
 
       &::before {
         content: '';
@@ -1209,7 +1209,7 @@ $_section-header-height: 22px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    line-height: var(--bf-line-height-none);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
   }
 
   // ──────────────────────────────────────────────
@@ -1218,14 +1218,14 @@ $_section-header-height: 22px;
 
   &__item-badge {
     flex-shrink: 0;
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     color: var(--bf-color-content-muted);
     margin-left: auto;
     max-width: 80px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    line-height: var(--bf-line-height-tight);
+    line-height: var(--bf-type-label-md-line-height);
 
     &--clickable {
       cursor: pointer;
@@ -1438,7 +1438,7 @@ $_section-header-height: 22px;
   background: transparent;
   color: var(--bf-color-content-muted);
   cursor: pointer;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   text-align: left;
   transition: color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
               background var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
@@ -1467,9 +1467,9 @@ $_section-header-height: 22px;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-dense);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-modifier-leading-dense-line-height);
 }
 
 // Attached remote parties are shown once per device kind. Message-app marks
@@ -1495,7 +1495,7 @@ $_section-header-height: 22px;
   border: 1px solid var(--bf-color-border-subtle);
   border-radius: var(--bf-radius-sm);
   background: var(--bf-color-surface-subtle);
-  line-height: var(--bf-line-height-none);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
 
   &[data-bf-device-kind='message-app'] {
     border: 0;
@@ -1505,9 +1505,9 @@ $_section-header-height: 22px;
 }
 
 .bitfun-nav-panel__footer-device-status-attached-count {
-  font-size: var(--bf-font-size-2xs);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-none);
+  font-size: var(--bf-type-overline-sm-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
 }
 
 // Footer notification: yellow only when there are unread messages (BellDot)
@@ -1721,16 +1721,16 @@ $_section-header-height: 22px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-snug);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
   }
 }
 
 .bitfun-device-overview__detail {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-compact);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-meta-line-height);
 }
 
 .bitfun-device-overview__tag {
@@ -1741,9 +1741,9 @@ $_section-header-height: 22px;
   border-radius: var(--bf-radius-pill);
   background: transparent;
   color: var(--bf-color-accent-default);
-  font-size: var(--bf-font-size-micro);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-compact);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-meta-line-height);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -1754,9 +1754,9 @@ $_section-header-height: 22px;
   h3 {
     margin: 0 0 10px;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-snug);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
   }
 }
 
@@ -1782,9 +1782,9 @@ $_section-header-height: 22px;
   min-width: 0;
   overflow: hidden;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-medium);
-  line-height: var(--bf-line-height-snug);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
+  line-height: var(--bf-type-modifier-leading-snug-line-height);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -1797,8 +1797,8 @@ $_section-header-height: 22px;
   box-sizing: border-box;
   margin-top: 20px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-compact);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-meta-line-height);
 }
 
 .bitfun-device-overview__backup.is-done {
@@ -1847,10 +1847,10 @@ $_section-header-height: 22px;
 
   .bitfun-device-overview__title {
     color: var(--bf-color-content-primary);
-    font-family: var(--bf-font-family-control);
-    font-size: var(--bf-font-size-lg);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-label-md-font-family);
+    font-size: var(--bf-type-body-lg-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
     text-align: center;
     overflow-wrap: anywhere;
   }
@@ -1907,17 +1907,17 @@ $_section-header-height: 22px;
   box-sizing: border-box;
   padding-inline: var(--bf-space-5);
   color: var(--bf-color-content-secondary);
-  font-family: var(--bf-font-family-control);
-  font-size: var(--bf-font-size-meta);
-  line-height: var(--bf-line-height-base);
+  font-family: var(--bf-type-label-md-font-family);
+  font-size: var(--bf-type-meta-font-size);
+  line-height: var(--bf-type-body-sm-line-height);
   overflow-wrap: anywhere;
 }
 
 .bitfun-device-overview__activity {
   padding: var(--bf-space-1) var(--bf-space-5) 0;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-meta);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-meta-font-size);
+  line-height: var(--bf-type-body-sm-line-height);
   overflow-wrap: anywhere;
 }
 
@@ -1927,9 +1927,9 @@ $_section-header-height: 22px;
   h3 {
     margin: 0 6px 7px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-compact);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-meta-line-height);
   }
 }
 
@@ -1958,8 +1958,8 @@ $_section-header-height: 22px;
     min-width: 0;
     overflow: hidden;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -1967,8 +1967,8 @@ $_section-header-height: 22px;
   > span:not(.bitfun-device-overview__device-icon) {
     grid-column: 2;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     overflow-wrap: anywhere;
 
     // Green dot plus muted label, the live-state pairing the workspace list
@@ -2015,15 +2015,15 @@ $_section-header-height: 22px;
   border-radius: var(--bf-radius-sm);
   background: var(--bf-color-surface-subtle);
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
 
   strong {
     grid-column: 2;
     min-width: 0;
     overflow: hidden;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-align: left;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -2034,7 +2034,7 @@ $_section-header-height: 22px;
     min-width: 0;
     overflow: hidden;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-2xs);
+    font-size: var(--bf-type-overline-sm-font-size);
     text-align: left;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -2051,8 +2051,8 @@ $_section-header-height: 22px;
 
 .bitfun-nav-panel__remote-disclaimer-text {
   margin: 0;
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-tight);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-label-md-line-height);
   color: var(--bf-color-content-muted);
 }
 
@@ -2064,8 +2064,8 @@ $_section-header-height: 22px;
   gap: 0;
 
   li {
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-label-md-line-height);
     color: var(--bf-color-content-secondary);
     padding-right: 0;
   }
@@ -2085,7 +2085,7 @@ $_section-header-height: 22px;
   border: 1px solid transparent;
   min-width: 112px;
   padding: 7px 16px;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   cursor: pointer;
   transition:
     background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -2251,9 +2251,9 @@ $_section-header-height: 22px;
   border-radius: var(--bf-radius-pill);
   background: var(--bf-color-action-quiet-hover);
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-none);
+  font-size: var(--bf-type-meta-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
 
 }
 
@@ -2322,8 +2322,8 @@ $_section-header-height: 22px;
   border-radius: var(--bf-radius-base);
   background: transparent;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   cursor: pointer;
   text-align: left;
   transition: background var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -2507,8 +2507,8 @@ $_section-header-height: 22px;
     gap: var(--bf-space-1);
     padding: 0 var(--bf-space-2) 0 38px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
 
     > span:first-child {
       flex: 1;
@@ -2896,7 +2896,7 @@ $_section-header-height: 22px;
 .bitfun-nav-panel {
   @include nav-font.nav-panel-text-body;
 
-  line-height: var(--bf-line-height-compact);
+  line-height: var(--bf-type-meta-line-height);
 
   &__search-trigger {
     @include nav-font.nav-panel-text-meta;
@@ -2909,10 +2909,10 @@ $_section-header-height: 22px;
     height: 34px;
     padding: 0 var(--bf-space-2);
     border: 0;
-    font-family: var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
     text-align: left;
   }
 
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
index 8e657b5cae..c26dba0e81 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
@@ -37,7 +37,7 @@
   }
 
   &__inline-empty {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     padding: 4px var(--bf-space-1);
     font-style: italic;
@@ -59,14 +59,14 @@
     flex: 1;
     flex-direction: column;
     gap: 1px;
-    line-height: var(--bf-line-height-tight);
+    line-height: var(--bf-type-label-md-line-height);
   }
 
   &__inline-empty-name {
     overflow: hidden;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -79,7 +79,7 @@
     height: 24px;
     padding: 0 var(--bf-space-1);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
 
     svg {
       flex: 0 0 auto;
@@ -106,8 +106,8 @@
     border-radius: 4px;
     background: transparent;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
     cursor: pointer;
     width: 100%;
     overflow: hidden;
@@ -146,7 +146,7 @@
     &.is-child {
       margin-top: 0;
       min-height: 24px;
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       padding-left: calc(var(--bf-nav-session-rail) + 14px);
       position: relative;
 
@@ -224,8 +224,8 @@
   &__inline-item-assistant-name {
     overflow: hidden;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -236,8 +236,8 @@
     margin-left: auto;
     overflow: hidden;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -266,9 +266,9 @@
     border-radius: 999px;
     background: color-mix(in srgb, color-mix(in srgb, var(--bf-color-accent-default) 40%, transparent) 13%, var(--bf-color-action-quiet-hover));
     color: color-mix(in srgb, color-mix(in srgb, var(--bf-color-accent-default) 40%, transparent) 62%, var(--bf-color-content-primary));
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-wide);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
     opacity: 0.96;
     overflow: visible;
     white-space: nowrap;
@@ -287,8 +287,8 @@
     border-radius: 999px;
     background: color-mix(in srgb, color-mix(in srgb, var(--bf-color-accent-default) 40%, transparent) 12%, var(--bf-color-action-quiet-hover));
     color: color-mix(in srgb, color-mix(in srgb, var(--bf-color-accent-default) 40%, transparent) 76%, var(--bf-color-content-primary));
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-overflow: ellipsis;
     white-space: nowrap;
 
@@ -318,9 +318,9 @@
     border-radius: 999px;
     background: color-mix(in srgb, color-mix(in srgb, var(--bf-color-accent-default) 40%, transparent) 18%, var(--bf-color-action-quiet-hover));
     color: color-mix(in srgb, color-mix(in srgb, var(--bf-color-accent-default) 40%, transparent) 82%, var(--bf-color-content-primary));
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-wide);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
     white-space: nowrap;
 
     svg {
@@ -382,9 +382,9 @@
     border-radius: 999px;
     background: color-mix(in srgb, var(--bf-color-status-warning-content) 14%, transparent);
     color: color-mix(in srgb, var(--bf-color-status-warning-content) 80%, var(--bf-color-content-primary));
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-wide);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
     white-space: nowrap;
   }
 
@@ -396,17 +396,17 @@
   }
 
   &__inline-item-tooltip-title {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     word-break: break-word;
   }
 
   &__inline-item-tooltip-meta {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     word-break: break-word;
   }
 
@@ -487,7 +487,7 @@
     border-radius: 4px;
     background: transparent;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     text-align: left;
     cursor: pointer;
     width: 100%;
@@ -545,10 +545,10 @@
     border-radius: 999px;
     background: color-mix(in srgb, var(--bf-color-content-primary) 9%, transparent);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     font-variant-numeric: tabular-nums;
-    line-height: var(--bf-line-height-none);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     transition: background var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
                 color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
   }
@@ -617,8 +617,8 @@
   // Inline item badge (count / status text)
   &__inline-item-badge {
     flex-shrink: 0;
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     color: var(--bf-color-content-muted);
     margin-left: auto;
     padding: 1px 4px;
@@ -826,7 +826,7 @@
     &.is-child {
       height: 30px;
       margin-top: 0;
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
     }
 
     &.is-assistant-session {
@@ -850,16 +850,16 @@
   &__inline-item-workspace-name {
     @include nav-font.nav-panel-text-meta;
 
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__inline-toggle {
     height: 32px;
     @include nav-font.nav-panel-text-meta;
 
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
 
     &:hover,
     &:focus-visible {
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSectionLayout.test.ts b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSectionLayout.test.ts
index 9f407e405b..5f43d35156 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSectionLayout.test.ts
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSectionLayout.test.ts
@@ -168,11 +168,11 @@ describe('SessionsSection layout styles', () => {
     expect(btwBadgeBlock).toContain('white-space: nowrap;');
     expect(btwBadgeBlock).toContain('overflow: visible;');
     expect(btwBadgeBlock).toContain('color: color-mix(in srgb, color-mix(in srgb, var(--bf-color-accent-default) 40%, transparent) 62%, var(--bf-color-content-primary));');
-    expect(btwBadgeBlock).toContain('font-weight: var(--bf-font-weight-semibold);');
+    expect(btwBadgeBlock).toContain('font-weight: var(--bf-type-label-selected-font-weight);');
     expect(btwBadgeBlock).toContain('opacity: 0.96;');
     expect(reviewBadgeBlock).toContain('white-space: nowrap;');
     expect(reviewBadgeBlock).toContain('color: color-mix(in srgb, color-mix(in srgb, var(--bf-color-accent-default) 40%, transparent) 82%, var(--bf-color-content-primary));');
-    expect(reviewBadgeBlock).toContain('font-weight: var(--bf-font-weight-semibold);');
+    expect(reviewBadgeBlock).toContain('font-weight: var(--bf-type-label-selected-font-weight);');
     expect(backgroundSubagentBadgeBlock).toContain('flex: 0 0 auto;');
     expect(backgroundSubagentBadgeBlock).toContain('display: inline-grid;');
     expect(backgroundSubagentBadgeBlock).toContain('place-items: center;');
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
index 6855f310b7..0a50d1ab52 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
@@ -47,9 +47,9 @@
     justify-content: space-between;
     gap: var(--bf-space-1);
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-bold);
-    letter-spacing: var(--bf-letter-spacing-widest);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-heading-page-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-widest-letter-spacing);
     text-transform: uppercase;
   }
 
@@ -85,7 +85,7 @@
     padding: var(--bf-space-2);
     border-radius: var(--bf-radius-base);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     background: color-mix(in srgb, var(--bf-color-action-quiet-hover) 55%, transparent);
   }
 
@@ -370,9 +370,9 @@
     overflow: hidden;
 
     .bitfun-nav-panel__workspace-item-avatar-letter {
-      font-size: var(--bf-font-size-lg);
-      font-weight: var(--bf-font-weight-bold);
-      line-height: var(--bf-line-height-none);
+      font-size: var(--bf-type-body-lg-font-size);
+      font-weight: var(--bf-type-heading-page-font-weight);
+      line-height: var(--bf-type-modifier-leading-none-line-height);
       text-transform: uppercase;
       transition: opacity var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
                   transform var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
@@ -449,16 +449,16 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__workspace-item:not(.is-active) &__workspace-item-label {
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__workspace-item.is-active &__workspace-item-label {
-    font-weight: var(--bf-font-weight-bold);
+    font-weight: var(--bf-type-heading-page-font-weight);
     color: var(--bf-color-content-primary);
   }
 
@@ -492,8 +492,8 @@
     min-width: 0;
     max-width: 100%;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-label-md-line-height);
     opacity: 0.75;
 
     svg {
@@ -518,8 +518,8 @@
     border-radius: 999px;
     background: color-mix(in srgb, var(--bf-color-action-neutral-surface-hover) 62%, transparent);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-relaxed);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
     cursor: default;
     transition:
       background var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -706,9 +706,9 @@
   }
 
   &__workspace-index-tooltip-title {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-bold);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-heading-page-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
     color: var(--bf-color-content-primary);
   }
 
@@ -717,9 +717,9 @@
     align-items: center;
     padding: 3px 8px;
     border-radius: 999px;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-ui);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     white-space: nowrap;
     border: 1px solid color-mix(in srgb, var(--bitfun-index-tone) 24%, transparent);
     background: color-mix(in srgb, var(--bitfun-index-tone) 10%, transparent);
@@ -743,9 +743,9 @@
   }
 
   &__workspace-index-tooltip-phase {
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-compact);
+    line-height: var(--bf-type-meta-line-height);
   }
 
   &__workspace-index-tooltip-summary {
@@ -759,8 +759,8 @@
         color-mix(in srgb, var(--bf-color-surface-subtle) 92%, transparent)
       );
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-support);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
   }
 
   &__workspace-index-tooltip-progress {
@@ -771,7 +771,7 @@
     border-radius: 10px;
     background: color-mix(in srgb, var(--bf-color-action-neutral-surface-hover) 56%, transparent);
     border: 1px solid color-mix(in srgb, var(--bf-color-border-subtle) 76%, transparent);
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     color: var(--bf-color-content-secondary);
   }
 
@@ -785,7 +785,7 @@
   &__workspace-index-tooltip-progress-value {
     font-variant-numeric: tabular-nums;
     color: color-mix(in srgb, var(--bitfun-index-tone) 76%, var(--bf-color-content-primary));
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__workspace-index-tooltip-progress-bar {
@@ -844,8 +844,8 @@
   &__workspace-index-tooltip-error {
     padding: 8px 10px;
     border-radius: 9px;
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-support);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
     border: 1px solid color-mix(in srgb, var(--bf-color-border-subtle) 78%, transparent);
     background: color-mix(in srgb, var(--bf-color-surface-subtle) 92%, transparent);
   }
@@ -886,9 +886,9 @@
     border-radius: 999px;
     background: color-mix(in srgb, var(--bf-color-action-secondary-hover) 88%, transparent);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-bold);
-    line-height: var(--bf-line-height-ui);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-heading-page-font-weight);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     white-space: nowrap;
   }
 
@@ -903,7 +903,7 @@
     border-radius: 999px;
     background: color-mix(in srgb, var(--bf-color-action-neutral-surface-hover) 75%, transparent);
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     transition: max-width var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
                 padding var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
                 opacity var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -1274,16 +1274,16 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__assistant-item:not(.is-active) &__assistant-item-label {
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__assistant-item.is-active &__assistant-item-label {
-    font-weight: var(--bf-font-weight-bold);
+    font-weight: var(--bf-type-heading-page-font-weight);
     color: var(--bf-color-content-primary);
   }
 
@@ -1436,12 +1436,12 @@
 
   &__workspace-item-label,
   &__assistant-item-label {
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-sm-font-weight);
   }
 
   &__workspace-item.is-active &__workspace-item-label,
   &__assistant-item.is-active &__assistant-item-label {
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__workspace-item-collapse-btn,
@@ -1568,7 +1568,7 @@
   &__workspace-item-badge {
     @include nav-font.nav-panel-text-meta;
 
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__workspace-item-menu-trigger,
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.scss b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.scss
index 7c9bbae2d1..ce97a2b0b8 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.scss
@@ -19,8 +19,8 @@
     border-radius: 6px;
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
 
     svg {
       flex-shrink: 0;
@@ -50,8 +50,8 @@
     min-height: 44px;
     padding: 8px 12px;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     background: var(--bf-color-surface-subtle);
   }
 
@@ -86,14 +86,14 @@
       min-width: 0;
       overflow: hidden;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
     span {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       white-space: nowrap;
     }
   }
@@ -111,7 +111,7 @@
   &__rule-heading {
     min-height: 32px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     background: var(--bf-color-surface-subtle);
     border-bottom: 1px solid var(--bf-color-border-subtle);
   }
@@ -143,8 +143,8 @@
   &__empty {
     padding: 18px 12px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     text-align: center;
   }
 }
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.scss b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.scss
index 78d1c956e9..d2bcbc703a 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.scss
@@ -59,17 +59,17 @@
   }
 
   &__intro-title {
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-compact);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-meta-line-height);
     color: var(--bf-color-content-primary);
-    letter-spacing: var(--bf-letter-spacing-snug);
+    letter-spacing: var(--bf-type-flow-title-letter-spacing);
   }
 
   &__intro-text,
   &__scope {
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-comfortable);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-support-line-height);
     color: var(--bf-color-content-secondary);
   }
 
@@ -93,8 +93,8 @@
   }
 
   &__intro-badge-label {
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__empty {
@@ -107,8 +107,8 @@
     border-radius: 14px;
     background: color-mix(in srgb, var(--bf-color-surface-subtle) 64%, transparent);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     text-align: center;
   }
 
@@ -124,14 +124,14 @@
     justify-content: space-between;
     gap: 8px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__section-description {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__external-section {
@@ -142,13 +142,13 @@
 
   &__read-only {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__diagnostics {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
 
     summary {
       cursor: pointer;
@@ -160,7 +160,7 @@
     }
 
     code {
-      font-family:var(--bf-font-family-mono);
+      font-family:var(--bf-type-code-md-font-family);
       overflow-wrap: anywhere;
     }
   }
@@ -188,22 +188,22 @@
 
   &__external-alias {
     color: var(--bf-color-accent-default);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__external-source {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__external-path {
     overflow-wrap: anywhere;
     color: var(--bf-color-content-secondary);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-support);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
   }
 
   &__card-header {
@@ -221,9 +221,9 @@
     border-radius: 999px;
     background: color-mix(in srgb, var(--bf-color-action-neutral-surface) 62%, transparent);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
   }
 
   &__remove {
@@ -271,8 +271,8 @@
     border-radius: 10px;
     background: color-mix(in srgb, var(--bf-color-status-danger-content) 8%, transparent);
     color: color-mix(in srgb, var(--bf-color-status-danger-content) 88%, var(--bf-color-content-primary));
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-support);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
   }
 
   &__footer {
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.scss b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.scss
index 4b1426b35b..921bc140e3 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.scss
@@ -72,15 +72,15 @@
   }
 
   &__workspace {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-bold);
-    line-height: var(--bf-line-height-dense);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-heading-page-font-weight);
+    line-height: var(--bf-type-modifier-leading-dense-line-height);
     color: var(--bf-color-content-primary);
   }
 
   &__description {
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-support);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
     color: var(--bf-color-content-secondary);
     max-width: 56ch;
   }
@@ -116,7 +116,7 @@
   &__toolbar-summary {
     min-width: 0;
     flex: 1 1 180px;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-secondary);
     white-space: nowrap;
     overflow: hidden;
@@ -237,18 +237,18 @@
 
   &__row-title {
     min-width: 0;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    letter-spacing: var(--bf-letter-spacing-snug);
+    letter-spacing: var(--bf-type-flow-title-letter-spacing);
   }
 
   &__row-updated {
     flex-shrink: 0;
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     color: var(--bf-color-content-muted);
     white-space: nowrap;
   }
@@ -267,9 +267,9 @@
     border-radius: 999px;
     background: color-mix(in srgb, var(--bf-color-surface-subtle) 78%, transparent);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
 
   }
 
diff --git a/src/web-ui/src/app/components/NavPanel/unifiedSessionCreation.test.ts b/src/web-ui/src/app/components/NavPanel/unifiedSessionCreation.test.ts
index 93fa05aad6..176ae6b3ff 100644
--- a/src/web-ui/src/app/components/NavPanel/unifiedSessionCreation.test.ts
+++ b/src/web-ui/src/app/components/NavPanel/unifiedSessionCreation.test.ts
@@ -32,7 +32,7 @@ describe('unified project session creation', () => {
     expect(voiceLauncherStyles).toContain('bottom: 0;');
     expect(voiceLauncherStyles).toContain('width: 84px;');
     expect(voiceLauncherStyles).toContain('height: 40px;');
-    expect(voiceLauncherStyles).toContain('font-weight: var(--bf-font-weight-regular);');
+    expect(voiceLauncherStyles).toContain('font-weight: var(--bf-type-body-sm-font-weight);');
     expect(voiceLauncherStyles).toContain('font-synthesis: none;');
     expect(voiceLauncherStyles).toContain('opacity: 0.22;');
     expect(voiceLauncherStyles).toMatch(/&\.is-active\s*\{\s*opacity: 1;/);
diff --git a/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.scss b/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.scss
index 7af98ea470..400da2c4a2 100644
--- a/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.scss
+++ b/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.scss
@@ -47,8 +47,8 @@
   }
 
   &__title {
-    font-size: var(--bf-font-size-2xl);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-flow-section-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     margin: 0 0 6px 0;
     position: relative;
@@ -56,7 +56,7 @@
   }
 
   &__subtitle {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     margin: 0;
     position: relative;
@@ -99,8 +99,8 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
     margin: 0;
 
@@ -127,7 +127,7 @@
       width: 100%;
       cursor: default;
       user-select: none;
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       padding: 10px 12px;
       background: color-mix(in srgb, var(--bf-color-content-on-dark) 4%, transparent);
       border: 1px dashed var(--bf-color-border-subtle);
@@ -136,7 +136,7 @@
 
       &::placeholder {
         color: var(--bf-color-content-muted);
-        font-size: var(--bf-font-size-xs);
+        font-size: var(--bf-type-label-sm-font-size);
       }
 
       &:focus {
@@ -157,7 +157,7 @@
   &__name-input {
     input {
       width: 100%;
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       padding: 10px 12px;
       background: color-mix(in srgb, var(--bf-color-content-on-dark) 4%, transparent);
       border: 1px solid var(--bf-color-border-subtle);
@@ -171,7 +171,7 @@
 
       &::placeholder {
         color: var(--bf-color-content-muted);
-        font-size: var(--bf-font-size-xs);
+        font-size: var(--bf-type-label-sm-font-size);
       }
 
       &:focus {
@@ -233,15 +233,15 @@
   }
 
   &__preview-label {
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     color: var(--bf-color-content-muted);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   }
 
   &__preview-path {
-    font-size: var(--bf-font-size-meta);
-    font-family: var(--bf-font-family-mono);
+    font-size: var(--bf-type-meta-font-size);
+    font-family: var(--bf-type-code-md-font-family);
     color: var(--bf-color-content-secondary);
     white-space: nowrap;
     overflow: hidden;
@@ -268,7 +268,7 @@
     }
 
     span {
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       color: var(--bf-color-status-danger-content);
     }
   }
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/AccountPanel.scss b/src/web-ui/src/app/components/RemoteConnectDialog/AccountPanel.scss
index 2621c05464..bfea53b9cf 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/AccountPanel.scss
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/AccountPanel.scss
@@ -6,7 +6,7 @@
   flex: 1;
   min-height: 0;
   flex-direction: column;
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
 
   &__scroll {
     flex: 1;
@@ -32,8 +32,8 @@
     max-width: 520px;
     margin: 0 0 16px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-comfortable);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-support-line-height);
   }
 
   &__form {
@@ -68,14 +68,14 @@
     gap: 10px;
     padding-top: 3px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
   }
 
   &__security-note {
     margin: -4px 0 0;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__actions {
@@ -105,7 +105,7 @@
     border-radius: var(--bf-radius-base);
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
 
     svg {
       flex-shrink: 0;
@@ -117,7 +117,7 @@
     min-width: 0;
     flex: 1;
     overflow: hidden;
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -135,8 +135,8 @@
 
     p {
       margin: 0;
-      font-size: var(--bf-font-size-sm);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-label-md-font-size);
+      line-height: var(--bf-type-body-lg-line-height);
     }
   }
 
@@ -195,14 +195,14 @@
   }
 
   &__sync-option-title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__sync-option-desc {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-support);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
   }
 
   &__sync-indicator {
@@ -214,7 +214,7 @@
     border-radius: var(--bf-radius-base);
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
 
     &.done {
       color: var(--bf-color-status-success-content);
@@ -276,7 +276,7 @@
     border: var(--bf-border-width-default) dashed var(--bf-color-border-subtle);
     border-radius: var(--bf-radius-base);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     text-align: center;
 
     &--loading {
@@ -363,8 +363,8 @@
   &__device-name {
     overflow: hidden;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -373,18 +373,18 @@
     display: inline-flex;
     align-items: baseline;
     color: var(--bf-color-content-muted);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-ui);
+    font-family:var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
   }
 
   &__device-id {
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
     font-variant-numeric: tabular-nums;
   }
 
   &__device-status {
-    font-family:var(--bf-font-family-sans);
+    font-family:var(--bf-type-body-sm-font-family);
   }
 
   &__device-badge {
@@ -398,8 +398,8 @@
       transparent
     );
     color: var(--bf-color-accent-default);
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     vertical-align: middle;
   }
 
@@ -415,7 +415,7 @@
     border-radius: inherit;
     background: color-mix(in srgb, var(--bf-color-surface-raised) 92%, transparent);
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     backdrop-filter: var(--bf-effect-blur-subtle);
   }
 
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
index 94ef72a769..00cc0a2713 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
@@ -69,10 +69,10 @@
 .bitfun-remote-connect__sidebar-title {
   margin: 0;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-4xl);
-  font-weight: var(--bf-font-weight-semibold);
-  letter-spacing: var(--bf-letter-spacing-tight);
-  line-height: var(--bf-line-height-tight);
+  font-size: var(--bf-type-heading-display-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
+  line-height: var(--bf-type-label-md-line-height);
 }
 
 .bitfun-remote-connect__title-extra {
@@ -92,8 +92,8 @@
   max-width: 172px;
   margin: 0;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-relaxed);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
 }
 
 .bitfun-remote-connect__sidebar-decoration {
@@ -148,9 +148,9 @@
   gap: 12px;
   margin: 0;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-2xl);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-ui);
+  font-size: var(--bf-type-flow-section-title-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-modifier-leading-ui-line-height);
 }
 
 .bitfun-remote-connect__section-marker {
@@ -169,8 +169,8 @@
 .bitfun-remote-connect__overview-section-description {
   margin: 0;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-body-sm-line-height);
 }
 
 .bitfun-remote-connect__overview-actions {
@@ -294,16 +294,16 @@
 
 .bitfun-remote-connect__overview-action-title {
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-lg);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-compact);
+  font-size: var(--bf-type-body-lg-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-meta-line-height);
 }
 
 .bitfun-remote-connect__overview-action-description {
   max-width: 410px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-comfortable);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-support-line-height);
 }
 
 .bitfun-remote-connect__overview-action-status {
@@ -318,7 +318,7 @@
   max-width: 150px;
   overflow: hidden;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -512,8 +512,8 @@
 .bitfun-remote-connect__pairing-label {
   margin-bottom: 7px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-ui);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-modifier-leading-ui-line-height);
 }
 
 .bitfun-remote-connect__pairing-url-row {
@@ -527,10 +527,10 @@
     flex: 1;
     overflow: hidden;
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-support);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-flow-support-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -550,8 +550,8 @@
 
   p {
     margin: 0;
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-relaxed);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
   }
 }
 
@@ -573,10 +573,10 @@
   border-radius: var(--bf-radius-lg);
   background: var(--bf-color-surface-panel);
   color: var(--bf-color-content-primary);
-  font-family:var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-4xl);
-  font-weight: var(--bf-font-weight-bold);
-  letter-spacing: var(--bf-letter-spacing-expanded);
+  font-family:var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-heading-display-font-size);
+  font-weight: var(--bf-type-heading-page-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-expanded-letter-spacing);
   user-select: all;
 }
 
@@ -618,16 +618,16 @@
 .bitfun-remote-connect__bot-identity-title {
   margin: 0;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-2xl);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-ui);
+  font-size: var(--bf-type-flow-section-title-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-modifier-leading-ui-line-height);
 }
 
 .bitfun-remote-connect__bot-identity-description {
   margin: 9px 0 0;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-relaxed);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
 }
 
 .bitfun-remote-connect__bot-setup {
@@ -682,8 +682,8 @@
   gap: 12px;
   margin: 0;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-relaxed);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
   text-align: left;
 }
 
@@ -696,9 +696,9 @@
   border-radius: var(--bf-radius-pill);
   background: var(--bf-color-status-success-content);
   color: var(--bf-color-content-inverse);
-  font-size: var(--bf-font-size-micro);
-  font-weight: var(--bf-font-weight-bold);
-  line-height: var(--bf-line-height-none);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-heading-page-font-weight);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
 }
 
 // ==================== Shared detail primitives ====================
@@ -718,8 +718,8 @@
 .bitfun-remote-connect__info-meta {
   margin: 0;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-relaxed);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
   text-align: left;
 }
 
@@ -740,7 +740,7 @@
 
 .bitfun-remote-connect__info-meta-label {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   white-space: nowrap;
 }
 
@@ -789,7 +789,7 @@
 
 .bitfun-remote-connect__peer-username {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
 }
 
 .bitfun-remote-connect__connected {
@@ -842,16 +842,16 @@
 
   strong {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-ui);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
   }
 
   > span {
     max-width: 470px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 }
 
@@ -873,8 +873,8 @@
 
   p {
     margin: 0;
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-relaxed);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
   }
 }
 
@@ -905,8 +905,8 @@
   max-width: 480px;
   margin: 0;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-relaxed);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
 }
 
 .bitfun-remote-connect__hint {
@@ -920,15 +920,15 @@
 .bitfun-remote-connect__ngrok-usage-link {
   margin: 0;
   padding: 14px 40px 0;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   text-align: right;
 }
 
 .bitfun-remote-connect__error {
   margin: 0;
   color: var(--bf-color-status-danger-content);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-body-sm-line-height);
   text-align: center;
 }
 
@@ -944,12 +944,12 @@
   align-items: center;
   gap: var(--bf-space-2);
   color: var(--bf-color-content-muted);
-  font-family:var(--bf-font-family-sans);
-  font-size: var(--bf-font-size-xs);
+  font-family:var(--bf-type-body-sm-font-family);
+  font-size: var(--bf-type-label-sm-font-size);
 
   > span[data-active='true'] {
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 }
 
@@ -1070,7 +1070,7 @@
   }
 
   .bitfun-remote-connect__sidebar-title {
-    font-size: var(--bf-font-size-2xl);
+    font-size: var(--bf-type-flow-section-title-font-size);
   }
 
   .bitfun-remote-connect__title-extra {
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDisclaimer.scss b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDisclaimer.scss
index 8d32d12a89..db4608b45d 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDisclaimer.scss
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDisclaimer.scss
@@ -13,16 +13,16 @@
 
 .bitfun-remote-disclaimer__text {
   margin: 0;
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-ui);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-modifier-leading-ui-line-height);
   color: var(--bf-color-content-muted);
 }
 
 .bitfun-remote-disclaimer__section-title {
   margin: 2px 0 0;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .bitfun-remote-disclaimer__list {
@@ -33,8 +33,8 @@
   gap: 4px;
 
   li {
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-support);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
     color: var(--bf-color-content-secondary);
   }
 }
@@ -51,8 +51,8 @@
   summary {
     padding: 9px 12px;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     cursor: pointer;
   }
 
diff --git a/src/web-ui/src/app/components/SceneBar/SceneBar.scss b/src/web-ui/src/app/components/SceneBar/SceneBar.scss
index fa3069552f..c8f6d5ba84 100644
--- a/src/web-ui/src/app/components/SceneBar/SceneBar.scss
+++ b/src/web-ui/src/app/components/SceneBar/SceneBar.scss
@@ -164,13 +164,13 @@
   &__tab-separator {
     flex: 0 0 auto;
     color: var(--bf-color-content-disabled);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__tab-subtitle {
     flex: 1 1 auto;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 }
 
diff --git a/src/web-ui/src/app/components/SplashScreen/SplashScreen.scss b/src/web-ui/src/app/components/SplashScreen/SplashScreen.scss
index d41ec12c07..b51739b09b 100644
--- a/src/web-ui/src/app/components/SplashScreen/SplashScreen.scss
+++ b/src/web-ui/src/app/components/SplashScreen/SplashScreen.scss
@@ -63,8 +63,8 @@
   min-width: 220px;
   max-width: min(360px, calc(100vw - 48px));
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-ui);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-modifier-leading-ui-line-height);
   text-align: center;
   opacity: 0;
   transform: translate(-50%, -2px);
diff --git a/src/web-ui/src/app/components/TitleBar/NotificationButton.scss b/src/web-ui/src/app/components/TitleBar/NotificationButton.scss
index 2dc72647ab..3c1784c283 100644
--- a/src/web-ui/src/app/components/TitleBar/NotificationButton.scss
+++ b/src/web-ui/src/app/components/TitleBar/NotificationButton.scss
@@ -11,7 +11,7 @@
   cursor: pointer;
   padding: 4px 6px;
   border-radius: var(--bf-radius-sm);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   flex-shrink: 0;
   position: relative;
   transition:
@@ -45,7 +45,7 @@
   }
 
   &__progress-text {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     white-space: nowrap;
   }
@@ -64,7 +64,7 @@
   &__menu-count {
     flex-shrink: 0;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     font-variant-numeric: tabular-nums;
   }
 
@@ -74,7 +74,7 @@
     border-radius: var(--bf-radius-pill);
     background: var(--bf-color-action-neutral-surface-hover);
     color: var(--bf-color-content-primary);
-    line-height: var(--bf-line-height-tight);
+    line-height: var(--bf-type-label-md-line-height);
     text-align: center;
   }
 
@@ -94,7 +94,7 @@
     border: 1px solid var(--bf-color-field-border-hover);
     border-radius: var(--bf-radius-sm);
     padding: 4px 8px;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-primary);
     box-shadow: var(--bf-shadow-base);
     max-width: 300px;
diff --git a/src/web-ui/src/app/components/panels/BranchSelectModal.scss b/src/web-ui/src/app/components/panels/BranchSelectModal.scss
index e2f716b921..c59ab46e9f 100644
--- a/src/web-ui/src/app/components/panels/BranchSelectModal.scss
+++ b/src/web-ui/src/app/components/panels/BranchSelectModal.scss
@@ -83,11 +83,11 @@
 }
 
 .branch-select-dialog__title {
-  font-size: var(--bf-font-size-base);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   margin: 0;
   color: var(--bf-color-content-primary);
-  line-height: var(--bf-line-height-snug);
+  line-height: var(--bf-type-modifier-leading-snug-line-height);
 }
 
 // ==================== Content Area ====================
@@ -120,7 +120,7 @@
   border: 1px solid var(--bf-color-status-danger-border);
   border-radius: 6px;
   color: var(--bf-color-status-danger-content);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
 }
 
 // ==================== Branch List ====================
@@ -143,7 +143,7 @@
   align-items: center;
   gap: 10px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
 }
 
 .branch-select-dialog__loading-dots {
@@ -171,7 +171,7 @@
   padding: 24px;
   text-align: center;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
 }
 
 // ==================== Branch Item ====================
@@ -194,7 +194,7 @@
 
   &.current {
     .branch-select-dialog__item-name {
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
   }
 
@@ -228,7 +228,7 @@
 
 .branch-select-dialog__item-name {
   flex: 1;
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
   color: var(--bf-color-content-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -242,8 +242,8 @@
 .branch-select-dialog__item-badge {
   flex-shrink: 0;
   padding: 2px 6px;
-  font-size: var(--bf-font-size-micro);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   text-transform: uppercase;
   color: var(--bf-color-accent-default);
   background: var(--bf-color-action-secondary-background);
diff --git a/src/web-ui/src/app/components/panels/DiffFullscreenViewer.css b/src/web-ui/src/app/components/panels/DiffFullscreenViewer.css
index 048ec45d18..512cb931d2 100644
--- a/src/web-ui/src/app/components/panels/DiffFullscreenViewer.css
+++ b/src/web-ui/src/app/components/panels/DiffFullscreenViewer.css
@@ -92,16 +92,16 @@
 
 .file-name {
   color: color-mix(in srgb, var(--bf-color-content-on-dark) 95%, transparent);
-  font-size: var(--bf-font-size-base);
-  font-weight: var(--bf-font-weight-semibold);
-  font-family: var(--bf-font-family-mono);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  font-family: var(--bf-type-code-md-font-family);
   margin-bottom: 2px;
 }
 
 .file-path-full {
   color: color-mix(in srgb, var(--bf-color-content-on-dark) 50%, transparent);
-  font-size: var(--bf-font-size-xs);
-  font-family: var(--bf-font-family-mono);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-family: var(--bf-type-code-md-font-family);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -180,7 +180,7 @@
   justify-content: center;
   gap: 12px;
   color: color-mix(in srgb, var(--bf-color-content-on-dark) 90%, transparent);
-  font-size: var(--bf-font-size-base);
+  font-size: var(--bf-type-body-md-font-size);
   backdrop-filter: blur(4px);
   z-index: 1000;
 }
@@ -234,11 +234,11 @@
   }
   
   .file-name {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
   
   .file-path-full {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 }
 
diff --git a/src/web-ui/src/app/components/panels/FilesPanel.scss b/src/web-ui/src/app/components/panels/FilesPanel.scss
index 1c54928b62..9115bb6779 100644
--- a/src/web-ui/src/app/components/panels/FilesPanel.scss
+++ b/src/web-ui/src/app/components/panels/FilesPanel.scss
@@ -31,7 +31,7 @@
   &__sync-indicator {
     display: inline-flex;
     align-items: center;
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     opacity: 0.6;
     animation: subtle-spin 2s linear infinite;
   }
@@ -122,9 +122,9 @@
     flex-direction: column;
     gap: 2px;
     min-width: 0;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
 
     span {
       overflow: hidden;
@@ -178,9 +178,9 @@
   }
 
   &__search-backend-summary {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
   }
 
   &__search-status {
@@ -190,7 +190,7 @@
     padding: var(--bf-space-2) var(--bf-space-3);
     background: var(--bf-color-surface-subtle);
     border-bottom: 1px solid var(--bf-color-border-default);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-accent-hover);
     flex-shrink: 0;
   }
@@ -200,8 +200,8 @@
     border-bottom: 1px solid var(--bf-color-border-default);
     background: color-mix(in srgb, var(--bf-color-surface-subtle) 72%, var(--bf-color-action-secondary-background) 28%);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-ui);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     flex-shrink: 0;
   }
 
@@ -241,8 +241,8 @@
     background: transparent;
     color: var(--bf-color-content-muted);
     cursor: pointer;
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     transition:
       transform var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
       background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -355,7 +355,7 @@
     align-items: center;
     justify-content: space-between;
     gap: var(--bf-space-2);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     margin-bottom: var(--bf-space-1);
   }
@@ -373,10 +373,10 @@
   }
 
   &__transfer-detail {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     white-space: nowrap;
-    line-height: var(--bf-line-height-spacious);
+    line-height: var(--bf-type-modifier-leading-spacious-line-height);
   }
 
   &__transfer-bottom {
@@ -431,7 +431,7 @@
     text-align: center;
 
     p {
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
       color: var(--bf-color-content-muted);
       margin: 0;
     }
@@ -459,7 +459,7 @@
     padding: var(--bf-space-5);
 
     p {
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
       margin: 0 0 var(--bf-space-3) 0;
     }
   }
@@ -476,7 +476,7 @@
     padding: var(--bf-space-5);
 
     p {
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
       color: var(--bf-color-content-muted);
       margin: 0;
     }
@@ -521,7 +521,7 @@
 
     &__search-status {
       padding: 4px 6px;
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
       gap: 4px;
     }
 
@@ -529,7 +529,7 @@
       padding: 16px 8px;
 
       p {
-        font-size: var(--bf-font-size-meta);
+        font-size: var(--bf-type-meta-font-size);
       }
     }
 
@@ -540,7 +540,7 @@
 
     &__loading {
       p {
-        font-size: var(--bf-font-size-meta);
+        font-size: var(--bf-type-meta-font-size);
       }
     }
 
@@ -553,7 +553,7 @@
       padding: 16px 8px;
 
       p {
-        font-size: var(--bf-font-size-meta);
+        font-size: var(--bf-type-meta-font-size);
       }
     }
 
@@ -587,14 +587,14 @@
 
     &__search-status {
       padding: var(--bf-space-3) var(--bf-space-4);
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
     }
 
     &__placeholder {
       padding: var(--bf-space-8);
 
       p {
-        font-size: var(--bf-font-size-base);
+        font-size: var(--bf-type-body-md-font-size);
       }
     }
 
@@ -605,7 +605,7 @@
 
     &__loading {
       p {
-        font-size: var(--bf-font-size-base);
+        font-size: var(--bf-type-body-md-font-size);
       }
     }
 
@@ -618,7 +618,7 @@
       padding: var(--bf-space-8);
 
       p {
-        font-size: var(--bf-font-size-base);
+        font-size: var(--bf-type-body-md-font-size);
       }
     }
 
diff --git a/src/web-ui/src/app/components/panels/TerminalEditModal.scss b/src/web-ui/src/app/components/panels/TerminalEditModal.scss
index 50a24f5b6a..29ef30b5ef 100644
--- a/src/web-ui/src/app/components/panels/TerminalEditModal.scss
+++ b/src/web-ui/src/app/components/panels/TerminalEditModal.scss
@@ -25,8 +25,8 @@
 
 .terminal-edit-dialog__btn {
   padding: 7px 14px;
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   border: none;
   border-radius: 6px;
   cursor: pointer;
diff --git a/src/web-ui/src/app/components/panels/base/FlexiblePanel.scss b/src/web-ui/src/app/components/panels/base/FlexiblePanel.scss
index 30f2d398d8..4ee22fd892 100644
--- a/src/web-ui/src/app/components/panels/base/FlexiblePanel.scss
+++ b/src/web-ui/src/app/components/panels/base/FlexiblePanel.scss
@@ -18,7 +18,7 @@
     background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
     border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
     opacity var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
-  font-family: var(--bf-font-family-sans);
+  font-family: var(--bf-type-body-sm-font-family);
   position: relative;
 
   &.is-collapsed {
@@ -118,8 +118,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: var(--bf-font-size-base);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
 }
 
@@ -127,7 +127,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
   color: var(--bf-color-content-secondary);
 }
 
@@ -179,7 +179,7 @@
 
   p {
     margin: 0;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
   }
 }
@@ -207,14 +207,14 @@
 
   h3 {
     margin: 0 0 var(--bf-space-2) 0;
-    font-size: var(--bf-font-size-xl);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-flow-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
   p {
     margin: 0;
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-content-secondary);
   }
 }
@@ -239,9 +239,9 @@
     background: var(--bf-color-surface-panel);
     border: none;
     border-radius: 0;
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-relaxed);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
     overflow: auto;
   }
 
@@ -313,9 +313,9 @@
   border-radius: var(--bf-radius-base);
   background: var(--bf-color-surface-panel);
   color: var(--bf-color-content-primary);
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-base);
-  line-height: var(--bf-line-height-relaxed);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-body-md-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
   resize: vertical;
   outline: none;
   transition: border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
@@ -341,9 +341,9 @@
     background: var(--bf-color-surface-panel);
     border: 1px solid var(--bf-color-border-default);
     border-radius: var(--bf-radius-base);
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-base);
-    line-height: var(--bf-line-height-relaxed);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-body-md-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
     white-space: pre-wrap;
     word-break: break-word;
     overflow: auto;
@@ -377,14 +377,14 @@
 
   h3 {
     margin: 0;
-    font-size: var(--bf-font-size-xl);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-flow-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
   p {
     margin: 0;
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-content-secondary);
     max-width: 400px;
   }
@@ -395,10 +395,10 @@
     background: var(--bf-color-surface-panel);
     border: 1px solid var(--bf-color-border-default);
     border-radius: var(--bf-radius-base);
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
 
     code {
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
       color: var(--bf-color-content-primary);
       background: transparent;
       padding: 0;
@@ -428,7 +428,7 @@
 
   p {
     margin: 0;
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-status-danger-content);
   }
 }
@@ -447,7 +447,7 @@
 
   p {
     margin: 0;
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-content-muted);
     font-style: italic;
   }
@@ -464,7 +464,7 @@
 
   p {
     margin: 0;
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-content-secondary);
   }
 
@@ -474,9 +474,9 @@
     background: var(--bf-color-surface-panel);
     border: 1px solid var(--bf-color-border-default);
     border-radius: var(--bf-radius-base);
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-relaxed);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
     overflow: auto;
     max-width: 100%;
   }
@@ -500,17 +500,17 @@
 
   h4 {
     margin: 0 0 4px 0;
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 }
 
 .bitfun-flexible-panel__file-path {
   margin: 0;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-secondary);
-  font-family: var(--bf-font-family-mono);
+  font-family: var(--bf-type-code-md-font-family);
 }
 
 .bitfun-flexible-panel__file-content {
@@ -520,9 +520,9 @@
 
   pre {
     margin: 0;
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-relaxed);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
     color: var(--bf-color-content-primary);
     white-space: pre-wrap;
     word-wrap: break-word;
@@ -640,11 +640,11 @@
   }
   
   .bitfun-flexible-panel__content-title {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
   
   .bitfun-flexible-panel__content-type {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
   
   .bitfun-flexible-panel__code-content,
diff --git a/src/web-ui/src/app/components/panels/base/PanelHeader.scss b/src/web-ui/src/app/components/panels/base/PanelHeader.scss
index 3db84584d9..b2c0d1597c 100644
--- a/src/web-ui/src/app/components/panels/base/PanelHeader.scss
+++ b/src/web-ui/src/app/components/panels/base/PanelHeader.scss
@@ -12,8 +12,8 @@
 
   &__title {
     margin: 0;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     text-align: center;
     overflow: hidden;
diff --git a/src/web-ui/src/app/components/panels/content-canvas/anchor-zone/AnchorZone.scss b/src/web-ui/src/app/components/panels/content-canvas/anchor-zone/AnchorZone.scss
index f00ced0f0e..15cce269a2 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/anchor-zone/AnchorZone.scss
+++ b/src/web-ui/src/app/components/panels/content-canvas/anchor-zone/AnchorZone.scss
@@ -114,8 +114,8 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
 
     svg {
diff --git a/src/web-ui/src/app/components/panels/content-canvas/editor-area/DropZone.scss b/src/web-ui/src/app/components/panels/content-canvas/editor-area/DropZone.scss
index f272c290b4..c213c6b08f 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/editor-area/DropZone.scss
+++ b/src/web-ui/src/app/components/panels/content-canvas/editor-area/DropZone.scss
@@ -102,8 +102,8 @@
     pointer-events: none;
 
     span {
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-on-dark);
       white-space: nowrap;
       text-shadow: 0 1px 2px color-mix(in srgb, var(--bf-color-content-on-light) 20%, transparent);
diff --git a/src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorGroup.scss b/src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorGroup.scss
index 1f732703f1..894773be4a 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorGroup.scss
+++ b/src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorGroup.scss
@@ -66,7 +66,7 @@
     color: var(--bf-color-content-muted);
 
     span {
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
     }
   }
 }
diff --git a/src/web-ui/src/app/components/panels/content-canvas/empty-state/EmptyState.scss b/src/web-ui/src/app/components/panels/content-canvas/empty-state/EmptyState.scss
index 9b58ab22b7..84bb82a9f1 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/empty-state/EmptyState.scss
+++ b/src/web-ui/src/app/components/panels/content-canvas/empty-state/EmptyState.scss
@@ -68,7 +68,7 @@
   &__message {
     p {
       margin: 0;
-      font-size: var(--bf-font-size-xl);
+      font-size: var(--bf-type-flow-title-font-size);
       color: var(--bf-color-content-secondary);
     }
   }
diff --git a/src/web-ui/src/app/components/panels/content-canvas/mission-control/MissionControl.scss b/src/web-ui/src/app/components/panels/content-canvas/mission-control/MissionControl.scss
index 16e25b33c9..ed1ce7914a 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/mission-control/MissionControl.scss
+++ b/src/web-ui/src/app/components/panels/content-canvas/mission-control/MissionControl.scss
@@ -40,8 +40,8 @@
 
   &__title {
     margin: 0;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
   }
 
@@ -96,8 +96,8 @@
     color: var(--bf-color-content-muted);
     cursor: pointer;
     border-radius: 3px;
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     transition:
       transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
       background-color 140ms ease,
@@ -144,7 +144,7 @@
     &-text {
       position: relative;
       z-index: 1;
-      line-height: var(--bf-line-height-none);
+      line-height: var(--bf-type-modifier-leading-none-line-height);
     }
   }
 
@@ -184,7 +184,7 @@
     justify-content: center;
     padding: 40px 30px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     border: 1px dashed var(--bf-color-border-default);
     border-radius: 6px;
   }
@@ -196,7 +196,7 @@
     justify-content: center;
     gap: 12px;
     padding: 6px 16px;
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     color: var(--bf-color-content-muted);
     border-top: 1px dashed var(--bf-color-border-default);
     flex-shrink: 0;
diff --git a/src/web-ui/src/app/components/panels/content-canvas/mission-control/SearchFilter.scss b/src/web-ui/src/app/components/panels/content-canvas/mission-control/SearchFilter.scss
index 95b295c09d..bf174de437 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/mission-control/SearchFilter.scss
+++ b/src/web-ui/src/app/components/panels/content-canvas/mission-control/SearchFilter.scss
@@ -11,7 +11,7 @@
   }
 
   &__count {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
     white-space: nowrap;
     padding: 0 8px;
diff --git a/src/web-ui/src/app/components/panels/content-canvas/mission-control/ThumbnailCard.scss b/src/web-ui/src/app/components/panels/content-canvas/mission-control/ThumbnailCard.scss
index f5ee0c3595..7497c55e21 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/mission-control/ThumbnailCard.scss
+++ b/src/web-ui/src/app/components/panels/content-canvas/mission-control/ThumbnailCard.scss
@@ -88,13 +88,13 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      font-size: var(--bf-font-size-meta);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-meta-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
       color: var(--bf-color-content-primary);
 
       &.is-preview {
         font-style: italic;
-        font-weight: var(--bf-font-weight-regular);
+        font-weight: var(--bf-type-body-sm-font-weight);
         opacity: 0.65;
       }
     }
@@ -107,7 +107,7 @@
   &__dirty {
     display: none;
     flex-shrink: 0;
-    font-size: var(--bf-font-size-3xs);
+    font-size: var(--bf-type-overline-xs-font-size);
     color: var(--bf-color-status-warning-content);
   }
 
@@ -166,10 +166,10 @@
     padding: 0;
     background: transparent;
     border: none;
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-base);
-    letter-spacing: var(--bf-letter-spacing-tight);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
     color: var(--bf-color-content-secondary);
     tab-size: 2;
   }
@@ -210,8 +210,8 @@
     }
 
     span {
-      font-size: var(--bf-font-size-2xs);
-      letter-spacing: var(--bf-letter-spacing-wider);
+      font-size: var(--bf-type-overline-sm-font-size);
+      letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
       text-transform: uppercase;
     }
   }
@@ -244,8 +244,8 @@
     bottom: 6px;
     right: 6px;
     padding: 2px 6px;
-    font-size: var(--bf-font-size-2xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-overline-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     background: color-mix(in srgb, var(--bf-color-surface-canvas) 82%, var(--private-thumbnail-group-color) 18%);
     border: 1px solid var(--private-thumbnail-group-color);
diff --git a/src/web-ui/src/app/components/panels/content-canvas/quick-look/QuickLook.scss b/src/web-ui/src/app/components/panels/content-canvas/quick-look/QuickLook.scss
index fd12c990d3..2dded81bc3 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/quick-look/QuickLook.scss
+++ b/src/web-ui/src/app/components/panels/content-canvas/quick-look/QuickLook.scss
@@ -48,8 +48,8 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
       color: var(--bf-color-content-primary);
     }
   }
@@ -136,7 +136,7 @@
     justify-content: center;
     gap: 4px;
     padding: 6px 12px;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
     background: var(--bf-color-surface-panel);
     border-top: 1px solid var(--bf-color-border-subtle);
diff --git a/src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.scss b/src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.scss
index f2cbf435f5..d6d92a5ae7 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.scss
+++ b/src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.scss
@@ -83,10 +83,10 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     // Inactive state: lighter text color
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     transition: color 0.15s ease;
   }
 
@@ -99,7 +99,7 @@
   &__dirty-indicator {
     display: none;
     flex-shrink: 0;
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     color: var(--bf-color-status-warning-content);
     margin-left: 2px;
   }
diff --git a/src/web-ui/src/app/components/panels/content-canvas/tab-bar/TabOverflowMenu.scss b/src/web-ui/src/app/components/panels/content-canvas/tab-bar/TabOverflowMenu.scss
index 042afd407e..aa13984405 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/tab-bar/TabOverflowMenu.scss
+++ b/src/web-ui/src/app/components/panels/content-canvas/tab-bar/TabOverflowMenu.scss
@@ -60,8 +60,8 @@
 
   // Overflow count badge
   &__badge {
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-accent-default);
     margin-left: 2px;
     transition: color 0.15s ease;
@@ -101,8 +101,8 @@
   &__mission-control {
     > span {
       flex: 1;
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
     svg {
@@ -128,7 +128,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       color: var(--bf-color-content-primary);
 
       em {
@@ -139,7 +139,7 @@
 
     &-dirty {
       flex-shrink: 0;
-      font-size: var(--bf-font-size-3xs);
+      font-size: var(--bf-type-overline-xs-font-size);
       color: var(--bf-color-status-warning-content);
     }
 
diff --git a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss
index 8e143b0c87..b62007eff7 100644
--- a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss
+++ b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss
@@ -74,9 +74,9 @@
   }
 
   &__title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-normal);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   &__subtitle,
@@ -86,7 +86,7 @@
   &__thread-anchor,
   &__status-line {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__topbar-actions {
@@ -110,7 +110,7 @@
     border-radius: 6px;
     background: color-mix(in srgb, var(--bf-color-action-quiet-hover) 64%, transparent);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
 
     span {
       min-width: 0;
@@ -174,14 +174,14 @@
 
     span {
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-meta);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-meta-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
     strong {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
   }
 
@@ -197,7 +197,7 @@
     flex-direction: column;
     gap: 8px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     code {
       overflow-x: auto;
@@ -206,7 +206,7 @@
       border-radius: 6px;
       background: var(--bf-color-action-quiet-hover);
       color: var(--bf-color-content-primary);
-      font-family:var(--bf-font-family-mono);
+      font-family:var(--bf-type-code-md-font-family);
       white-space: nowrap;
     }
   }
@@ -253,14 +253,14 @@
 
     strong {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     span {
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-ui);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-modifier-leading-ui-line-height);
       overflow-wrap: anywhere;
     }
   }
@@ -346,7 +346,7 @@
     border-radius: 999px;
     background: transparent;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     cursor: pointer;
     transition: border-color var(--bf-motion-duration-base) var(--bf-motion-easing-standard), background var(--bf-motion-duration-base) var(--bf-motion-easing-standard), color var(--bf-motion-duration-base) var(--bf-motion-easing-standard);
 
@@ -376,7 +376,7 @@
     border-top: 1px solid var(--bf-color-border-default);
     color: var(--bf-color-content-secondary);
     background: color-mix(in srgb, var(--bf-color-surface-raised) 62%, transparent);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     font-variant-numeric: tabular-nums;
   }
 
@@ -393,8 +393,8 @@
     min-height: 160px;
     padding: 20px 16px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__empty-state,
@@ -460,8 +460,8 @@
   }
 
   &__pr-title {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__pr-meta--secondary {
@@ -481,7 +481,7 @@
     display: inline-flex;
     align-items: center;
     gap: 7px;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     font-variant-numeric: tabular-nums;
     color: var(--bf-color-content-secondary);
   }
@@ -493,9 +493,9 @@
     width: fit-content;
     padding: 2px 6px;
     border-radius: 5px;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
   }
 
   &__decision--approved {
@@ -557,9 +557,9 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      font-size: var(--bf-font-size-lg);
-      font-weight: var(--bf-font-weight-semibold);
-      letter-spacing: var(--bf-letter-spacing-normal);
+      font-size: var(--bf-type-body-lg-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      letter-spacing: var(--bf-type-body-sm-letter-spacing);
     }
   }
 
@@ -570,8 +570,8 @@
     min-height: 20px;
     padding: 0 7px;
     border-radius: 5px;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__detail-state--open,
@@ -637,7 +637,7 @@
     align-items: center;
     gap: 8px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
 
     svg {
       flex: 0 0 auto;
@@ -651,11 +651,11 @@
     align-items: center;
     gap: 8px;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     strong {
       min-width: 0;
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     > span:not(.review-platform__additions, .review-platform__deletions) {
@@ -705,8 +705,8 @@
     > span {
       min-width: 0;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     > :last-child {
@@ -717,7 +717,7 @@
   &__section-count {
     flex: 0 0 auto;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__tabs {
@@ -770,8 +770,8 @@
 
     > span:first-child {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
   }
 
@@ -785,7 +785,7 @@
 
   &__section-empty {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__body-copy,
@@ -794,8 +794,8 @@
     max-width: 100%;
     margin: 0 0 14px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-comfortable);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-support-line-height);
   }
 
   &__review-sessions {
@@ -819,13 +819,13 @@
 
     span:first-child {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     span:last-child {
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-meta);
+      font-size: var(--bf-type-meta-font-size);
     }
   }
 
@@ -896,21 +896,21 @@
 
     strong {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     span {
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-meta);
+      font-size: var(--bf-type-meta-font-size);
     }
   }
 
   &__review-session-empty {
     padding: 10px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__body-markdown {
@@ -921,8 +921,8 @@
 
     .markdown-renderer {
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-lg-line-height);
 
       > :first-child {
         margin-top: 0;
@@ -938,8 +938,8 @@
       h4 {
         margin: 12px 0 8px;
         color: var(--bf-color-content-primary);
-        font-size: var(--bf-font-size-sm);
-        letter-spacing: var(--bf-letter-spacing-normal);
+        font-size: var(--bf-type-label-md-font-size);
+        letter-spacing: var(--bf-type-body-sm-letter-spacing);
       }
 
       p,
@@ -1010,7 +1010,7 @@
     border: 0;
     background: transparent;
     color: inherit;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     text-align: left;
     cursor: pointer;
 
@@ -1050,7 +1050,7 @@
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     font-variant-numeric: tabular-nums;
   }
 
@@ -1064,9 +1064,9 @@
     padding: 8px 0;
     background: color-mix(in srgb, var(--bf-color-surface-canvas) 72%, transparent);
     color: var(--bf-color-content-secondary);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-comfortable);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-support-line-height);
     tab-size: 2;
   }
 
@@ -1099,7 +1099,7 @@
   &__diff-empty {
     padding: 10px 12px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__detail-error {
@@ -1112,7 +1112,7 @@
     border-radius: 7px;
     background: var(--bf-color-status-danger-surface);
     color: var(--bf-color-status-danger-content);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
 
     span {
       min-width: 0;
@@ -1136,7 +1136,7 @@
     code {
       margin-left: auto;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-meta);
+      font-size: var(--bf-type-meta-font-size);
     }
   }
 
@@ -1193,15 +1193,15 @@
 
     strong {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
       white-space: nowrap;
     }
 
     span {
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-meta);
-      line-height: var(--bf-line-height-support);
+      font-size: var(--bf-type-meta-font-size);
+      line-height: var(--bf-type-flow-support-line-height);
       white-space: normal;
     }
   }
@@ -1213,9 +1213,9 @@
     width: fit-content;
     padding: 2px 6px;
     border-radius: 5px;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
   }
 
   &__ci-actions {
@@ -1270,19 +1270,19 @@
       display: block;
       margin-bottom: 3px;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-micro);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-micro-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
       text-transform: uppercase;
-      letter-spacing: var(--bf-letter-spacing-wider);
+      letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     }
 
     strong {
       display: block;
       overflow-wrap: anywhere;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-meta);
-      font-weight: var(--bf-font-weight-medium);
-      line-height: var(--bf-line-height-support);
+      font-size: var(--bf-type-meta-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
+      line-height: var(--bf-type-flow-support-line-height);
     }
   }
 
@@ -1296,9 +1296,9 @@
     border-radius: 6px;
     background: color-mix(in srgb, var(--bf-color-surface-canvas) 86%, transparent);
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-support);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
     white-space: pre-wrap;
     word-break: break-word;
   }
@@ -1309,8 +1309,8 @@
     border-radius: 6px;
     color: var(--bf-color-content-secondary);
     background: color-mix(in srgb, var(--bf-color-action-quiet-hover) 48%, transparent);
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-support);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
   }
 
   &__thread {
@@ -1326,8 +1326,8 @@
     p {
       margin: 8px 0;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
     }
   }
 
@@ -1339,7 +1339,7 @@
     border: 1px solid var(--bf-color-border-default);
     border-radius: 7px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     background: color-mix(in srgb, var(--bf-color-surface-raised) 66%, transparent);
 
     svg {
@@ -1369,7 +1369,7 @@
     justify-content: space-between;
     gap: 12px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__thread-tags {
@@ -1387,9 +1387,9 @@
     padding: 0 7px;
     border-radius: 999px;
     border: 1px solid transparent;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-normal);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
     text-transform: uppercase;
   }
 
@@ -1427,8 +1427,8 @@
     strong {
       min-width: 0;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
   }
 
@@ -1452,32 +1452,32 @@
 
   &__thread-reply-label {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-normal);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
     text-transform: uppercase;
   }
 
   &__thread-reply-author {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__thread-reply-body {
     min-width: 0;
     padding: 10px 12px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-support);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
   }
 
   &__thread-body {
     min-width: 0;
     margin-top: 8px;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__thread-reply-body,
@@ -1507,7 +1507,7 @@
   &__loading {
     padding: 18px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   @keyframes review-platform-spin {
diff --git a/src/web-ui/src/app/components/scheduled-jobs/LocalizedDateTimeField.scss b/src/web-ui/src/app/components/scheduled-jobs/LocalizedDateTimeField.scss
index 5a62594887..ffef188e3e 100644
--- a/src/web-ui/src/app/components/scheduled-jobs/LocalizedDateTimeField.scss
+++ b/src/web-ui/src/app/components/scheduled-jobs/LocalizedDateTimeField.scss
@@ -35,8 +35,8 @@
   &__month {
     flex: 1 1 auto;
     text-align: center;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
@@ -50,8 +50,8 @@
   &__weekday {
     padding: 2px 0;
     text-align: center;
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-muted);
   }
 
@@ -65,7 +65,7 @@
     border-radius: var(--bf-radius-base);
     background: transparent;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     font-variant-numeric: tabular-nums;
     cursor: pointer;
     transition: background var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
diff --git a/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss b/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss
index 4ef8a5c585..4d24cf34fa 100644
--- a/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss
+++ b/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss
@@ -22,10 +22,10 @@
 
   &__head-title {
     flex: 1;
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-widest);
+    letter-spacing: var(--bf-type-modifier-tracking-widest-letter-spacing);
     color: var(--bf-color-content-muted);
   }
 
@@ -47,10 +47,10 @@
     border: 1px solid var(--bf-color-border-subtle);
     border-radius: var(--bf-radius-base);
     background: color-mix(in srgb, var(--bf-color-action-neutral-surface) 78%, transparent);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-none);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     white-space: nowrap;
   }
 
@@ -65,14 +65,14 @@
   &__target-main {
     flex: 0 1 auto;
     max-width: 42%;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
   &__target-sub {
     flex: 1 1 auto;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
   }
 
@@ -98,16 +98,16 @@
 
   &__empty-title {
     margin: 0;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-secondary);
   }
 
   &__empty-text {
     margin: 0;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
   }
 
   // ── Job list ────────────────────────────────────────────────────────────────
@@ -183,8 +183,8 @@
   &__item-name {
     flex: 1 1 auto;
     min-width: 0;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -200,9 +200,9 @@
   }
 
   &__item-meta {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -219,9 +219,9 @@
   }
 
   &__item-error {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-status-danger-content);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     word-break: break-word;
   }
 
@@ -301,18 +301,18 @@
   }
 
   &__field-label {
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-compact);
-    letter-spacing: var(--bf-letter-spacing-wider);
+    line-height: var(--bf-type-meta-line-height);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     text-transform: uppercase;
   }
 
   &__field-note {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
   }
 
   &__control-grid {
@@ -352,8 +352,8 @@
   }
 
   &__toggle-label {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
   }
 
@@ -377,21 +377,21 @@
   &__agent-option-label {
     flex: 0 0 auto;
     max-width: 40%;
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
   }
 
   &__agent-option-description {
     flex: 1 1 auto;
     text-align: right;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
   }
 
   &__warning {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-status-danger-content);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     padding: var(--bf-space-2) var(--bf-space-3);
     border-radius: var(--bf-radius-base);
     background: color-mix(in srgb, var(--bf-color-status-danger-content) 6%, transparent);
diff --git a/src/web-ui/src/app/global-search/GlobalSearchRoot.scss b/src/web-ui/src/app/global-search/GlobalSearchRoot.scss
index f28783ab83..9fcdde8d19 100644
--- a/src/web-ui/src/app/global-search/GlobalSearchRoot.scss
+++ b/src/web-ui/src/app/global-search/GlobalSearchRoot.scss
@@ -61,9 +61,9 @@
       background: transparent;
       color: var(--bf-color-content-primary);
       font: inherit;
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-regular);
-      line-height: var(--bf-line-height-compact);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-body-sm-font-weight);
+      line-height: var(--bf-type-meta-line-height);
 
       &::placeholder {
         color: var(--bf-color-content-muted);
@@ -103,8 +103,8 @@
     background: transparent;
     color: var(--bf-color-content-muted);
     font: inherit;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     cursor: pointer;
 
     &:hover:not(:disabled) {
@@ -147,7 +147,7 @@
     justify-content: center;
     padding: 32px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     text-align: center;
   }
 
@@ -168,9 +168,9 @@
   }
 
   &__group-title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-subtle);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-subtle-letter-spacing);
   }
 
   &__group-meta {
@@ -178,8 +178,8 @@
     align-items: center;
     gap: 7px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__group-drilldown,
@@ -210,8 +210,8 @@
     margin: -2px -4px -2px 0;
     padding: 2px 3px 2px 5px;
     border-radius: 6px;
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__detail-header {
@@ -229,8 +229,8 @@
     margin-left: -5px;
     padding: 3px 6px 3px 4px;
     border-radius: 7px;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__detail-heading {
@@ -242,15 +242,15 @@
     padding: 5px 2px 0;
 
     .global-search__group-title {
-      font-size: var(--bf-font-size-lg);
+      font-size: var(--bf-type-body-lg-font-size);
     }
   }
 
   &__group-count {
     flex: 0 0 auto;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__group-items {
@@ -360,26 +360,26 @@
 
   &__result-title {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-compact);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-meta-line-height);
   }
 
   &__result--action &__result-title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__result-subtitle,
   &__result-context {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-support);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-flow-support-line-height);
   }
 
   &__result--action &__result-subtitle {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__result-context {
@@ -403,9 +403,9 @@
     border-radius: var(--bf-radius-pill);
     background: var(--bf-color-action-neutral-surface-hover);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
   }
 
   &__footer {
@@ -419,7 +419,7 @@
     border-top: 0;
     background: var(--global-search-surface);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__footer-keys {
@@ -487,8 +487,8 @@
   box-shadow: inset 0 0 0 1px var(--bf-color-border-subtle);
   cursor: text;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   text-align: left;
 
   &:hover,
@@ -563,7 +563,7 @@
       padding-inline: 14px;
 
       input {
-        font-size: var(--bf-font-size-lg);
+        font-size: var(--bf-type-body-lg-font-size);
       }
     }
 
@@ -581,7 +581,7 @@
     .global-search__scope {
       min-height: 36px;
       padding-inline: 13px;
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
     }
 
     .global-search__prefix-hint,
@@ -665,7 +665,7 @@
   flex: 1 1 auto;
   background: transparent;
   color: var(--bf-color-content-primary);
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
 
   .global-search__header {
     padding: 0;
@@ -693,9 +693,9 @@
 
     input {
       color: var(--bf-color-content-primary);
-      font-family:var(--bf-font-family-sans);
-      font-size: var(--bf-font-size-base);
-      font-weight: var(--bf-font-weight-regular);
+      font-family:var(--bf-type-body-sm-font-family);
+      font-size: var(--bf-type-body-md-font-size);
+      font-weight: var(--bf-type-body-sm-font-weight);
 
       &::placeholder {
         color: var(--bf-color-content-muted);
@@ -715,7 +715,7 @@
 
   .global-search__scope--system {
     min-height: var(--bf-control-height-sm);
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 
   .global-search__results {
@@ -736,7 +736,7 @@
     grid-column: 1 / -1;
     min-height: 240px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 
   .global-search__group,
@@ -767,16 +767,16 @@
 
   .global-search__group-title {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-normal);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   .global-search__group-meta,
   .global-search__group-count {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
   }
 
   .global-search__group-drilldown {
@@ -877,18 +877,18 @@
 
   .global-search__result-title {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .global-search__result--action .global-search__result-title {
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 
   .global-search__result-subtitle,
   .global-search__result-context {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   .global-search__result-tools {
@@ -962,7 +962,7 @@
       padding: 0;
 
       input {
-        font-size: var(--bf-font-size-base);
+        font-size: var(--bf-type-body-md-font-size);
       }
     }
 
@@ -974,7 +974,7 @@
     .global-search__scope--system {
       min-height: var(--bf-control-height-sm);
       padding-inline: var(--bf-space-4);
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
     }
 
     .global-search__results {
diff --git a/src/web-ui/src/app/layout/AppLayout.scss b/src/web-ui/src/app/layout/AppLayout.scss
index a84dc0e097..24e64cfdde 100644
--- a/src/web-ui/src/app/layout/AppLayout.scss
+++ b/src/web-ui/src/app/layout/AppLayout.scss
@@ -42,7 +42,7 @@ html, body {
   background: var(--bf-color-surface-canvas);
 
   color: var(--bf-color-content-primary);
-  font-family: var(--bf-font-family-sans);
+  font-family: var(--bf-type-body-sm-font-family);
   position: relative;
 
   // Ensure layout stability
@@ -51,7 +51,7 @@ html, body {
   overflow: hidden;
   background: var(--bf-color-surface-canvas);
   color: var(--bf-color-content-primary);
-  font-family: var(--bf-font-family-sans);
+  font-family: var(--bf-type-body-sm-font-family);
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -163,17 +163,17 @@ html, body {
   &__title {
     flex: 0 0 auto;
     min-width: 0;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-compact);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-meta-line-height);
     white-space: nowrap;
   }
 
   &__detail {
     min-width: 0;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-compact);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-meta-line-height);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/src/web-ui/src/app/layout/FloatingMiniChat.scss b/src/web-ui/src/app/layout/FloatingMiniChat.scss
index dc69b528aa..431fb29808 100644
--- a/src/web-ui/src/app/layout/FloatingMiniChat.scss
+++ b/src/web-ui/src/app/layout/FloatingMiniChat.scss
@@ -334,8 +334,8 @@ $panel-height: 680px;
   border: none;
   background: transparent;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   cursor: pointer;
   border-radius: 6px;
   transition: background 0.15s ease;
@@ -431,10 +431,10 @@ $panel-height: 680px;
   h2 {
     max-width: 420px;
     margin: 8px 0 0;
-    font-size: var(--bf-font-size-3xl);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-dense);
-    letter-spacing: var(--bf-letter-spacing-tight);
+    font-size: var(--bf-type-heading-dialog-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-modifier-leading-dense-line-height);
+    letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
   }
 }
 
@@ -455,8 +455,8 @@ $panel-height: 680px;
   margin-top: 18px;
   color: var(--bf-color-content-muted);
   font-size: var(--bf-type-flow-support-font-size);
-  font-weight: var(--bf-font-weight-medium);
-  letter-spacing: var(--bf-letter-spacing-wider);
+  font-weight: var(--bf-type-label-sm-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
 }
 
 .bitfun-fmc__miniapp-welcome-description {
@@ -464,7 +464,7 @@ $panel-height: 680px;
   margin: 12px 0 0;
   color: var(--bf-color-content-secondary);
   font-size: var(--bf-type-flow-control-font-size);
-  line-height: var(--bf-line-height-relaxed);
+  line-height: var(--bf-type-body-lg-line-height);
 }
 
 .bitfun-fmc__miniapp-workspace {
@@ -520,7 +520,7 @@ $panel-height: 680px;
   color: var(--bf-color-content-secondary);
   font: inherit;
   font-size: var(--bf-type-flow-control-font-size);
-  line-height: var(--bf-line-height-compact);
+  line-height: var(--bf-type-meta-line-height);
   text-align: left;
   cursor: pointer;
   transition:
diff --git a/src/web-ui/src/app/scenes/agents/AgentsScene.scss b/src/web-ui/src/app/scenes/agents/AgentsScene.scss
index 72efb2f67b..743d06d365 100644
--- a/src/web-ui/src/app/scenes/agents/AgentsScene.scss
+++ b/src/web-ui/src/app/scenes/agents/AgentsScene.scss
@@ -31,7 +31,7 @@
   }
 
   .gallery-zone__subtitle {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
   }
 
@@ -53,8 +53,8 @@
   }
 
   &__agent-filter-label {
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-muted);
     white-space: nowrap;
   }
@@ -82,12 +82,12 @@
     }
 
     .gallery-zone__title {
-      font-size: var(--bf-font-size-base);
+      font-size: var(--bf-type-body-md-font-size);
     }
 
     .gallery-zone__subtitle {
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-lg-line-height);
     }
   }
 
@@ -151,8 +151,8 @@
     text-align: center;
 
     strong {
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     span {
@@ -160,8 +160,8 @@
       max-width: 180px;
       overflow: hidden;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-lg-line-height);
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
     }
@@ -199,15 +199,15 @@
 
     span {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       white-space: nowrap;
     }
 
     strong {
       overflow: hidden;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -217,8 +217,8 @@
     display: -webkit-box;
     overflow: hidden;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-relaxed);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
diff --git a/src/web-ui/src/app/scenes/agents/AgentsView.scss b/src/web-ui/src/app/scenes/agents/AgentsView.scss
index 8a7790ab2c..50fd590ba9 100644
--- a/src/web-ui/src/app/scenes/agents/AgentsView.scss
+++ b/src/web-ui/src/app/scenes/agents/AgentsView.scss
@@ -54,11 +54,11 @@
   &__panel-label {
     flex-shrink: 0;
     padding: 10px var(--bf-space-4);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-muted);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-widest);
+    letter-spacing: var(--bf-type-modifier-tracking-widest-letter-spacing);
     border-bottom: 1px solid var(--bf-color-border-subtle);
   }
 
@@ -104,25 +104,25 @@
 
   &__title {
     margin: 0;
-    font-size: var(--bf-font-size-2xl);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-flow-section-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
-    letter-spacing: var(--bf-letter-spacing-tight);
+    letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
   }
 
   &__sub {
     margin: 0;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-spacious);
+    line-height: var(--bf-type-modifier-leading-spacious-line-height);
   }
 
   &__section-label {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-muted);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-widest);
+    letter-spacing: var(--bf-type-modifier-tracking-widest-letter-spacing);
     align-self: flex-start;
     width: 100%;
     max-width: 520px;
@@ -151,7 +151,7 @@
       border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
       color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
     text-align: left;
-    font-family: var(--bf-font-family-sans);
+    font-family: var(--bf-type-body-sm-font-family);
 
     &:hover {
       background: var(--bf-color-surface-subtle);
@@ -179,13 +179,13 @@
   }
 
   &__tpl-name {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
   &__tpl-desc {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     white-space: nowrap;
     overflow: hidden;
@@ -194,7 +194,7 @@
 
   &__tpl-cnt {
     flex-shrink: 0;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-disabled);
     background: var(--bf-color-action-neutral-surface-hover);
     padding: 2px 7px;
@@ -219,14 +219,14 @@
     border-radius: var(--bf-radius-sm);
     padding: 7px var(--bf-space-6);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     cursor: pointer;
     transition:
       transform var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
       background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
       border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
       color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
-    font-family: var(--bf-font-family-sans);
+    font-family: var(--bf-type-body-sm-font-family);
 
     &:hover {
       color: var(--bf-color-content-secondary);
diff --git a/src/web-ui/src/app/scenes/agents/components/AgentCapabilityTooltip.scss b/src/web-ui/src/app/scenes/agents/components/AgentCapabilityTooltip.scss
index eaf08fade5..5427376583 100644
--- a/src/web-ui/src/app/scenes/agents/components/AgentCapabilityTooltip.scss
+++ b/src/web-ui/src/app/scenes/agents/components/AgentCapabilityTooltip.scss
@@ -6,16 +6,16 @@
 
   &__title {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-ui);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     overflow-wrap: anywhere;
   }
 
   &__description {
     margin-top: var(--bf-space-1);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-support);
+    line-height: var(--bf-type-flow-support-line-height);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
@@ -36,22 +36,22 @@
 
     dt {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-ui);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-modifier-leading-ui-line-height);
     }
 
     dd {
       min-width: 0;
       margin: 0;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-ui);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-modifier-leading-ui-line-height);
       overflow-wrap: anywhere;
       text-align: right;
     }
   }
 
   .is-monospace {
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
   }
 }
diff --git a/src/web-ui/src/app/scenes/agents/components/AgentCard.scss b/src/web-ui/src/app/scenes/agents/components/AgentCard.scss
index a6952f737b..64141e030b 100644
--- a/src/web-ui/src/app/scenes/agents/components/AgentCard.scss
+++ b/src/web-ui/src/app/scenes/agents/components/AgentCard.scss
@@ -114,10 +114,10 @@
   }
 
   &__name {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -137,7 +137,7 @@
     border-color: transparent;
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     text-overflow: ellipsis;
   }
 
@@ -151,10 +151,10 @@
 
   &__desc {
     margin: 0;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-regular);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
@@ -183,14 +183,14 @@
       min-width: 0;
       overflow: hidden;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-meta);
+      font-size: var(--bf-type-meta-font-size);
       font-variant-numeric: tabular-nums;
-      line-height: var(--bf-line-height-none);
+      line-height: var(--bf-type-modifier-leading-none-line-height);
       text-overflow: ellipsis;
       white-space: nowrap;
 
       &.agent-card__meta-value--text {
-        font-size: var(--bf-font-size-2xs);
+        font-size: var(--bf-type-overline-sm-font-size);
       }
     }
   }
@@ -209,8 +209,8 @@
   &__meta-label {
     overflow: hidden;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-2xs);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-overline-sm-font-size);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -233,8 +233,8 @@
     border: 1px solid transparent;
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     white-space: nowrap;
   }
 
@@ -315,7 +315,7 @@
     border-radius: var(--bf-radius-base);
     background: transparent;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     text-align: start;
     cursor: pointer;
     transition:
@@ -336,7 +336,7 @@
     &.is-active {
       background: var(--bf-color-action-neutral-surface-hover);
       color: var(--bf-color-content-primary);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
   }
 
@@ -347,7 +347,7 @@
     border-radius: var(--bf-radius-pill);
     background: var(--bf-color-surface-raised);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-2xs);
+    font-size: var(--bf-type-overline-sm-font-size);
     font-variant-numeric: tabular-nums;
     text-align: center;
   }
@@ -390,15 +390,15 @@
 
     h3 {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     p {
       margin-top: 3px;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-micro);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-micro-font-size);
+      line-height: var(--bf-type-body-lg-line-height);
     }
   }
 
@@ -428,16 +428,16 @@
 
     > span {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-2xs);
+      font-size: var(--bf-type-overline-sm-font-size);
     }
 
     > strong,
     > p {
       margin: 5px 0 0;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-meta);
-      font-weight: var(--bf-font-weight-medium);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-meta-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
+      line-height: var(--bf-type-body-lg-line-height);
     }
 
     &--wide {
@@ -462,8 +462,8 @@
   &__cap-label {
     flex-shrink: 0;
     width: 72px;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -488,7 +488,7 @@
     flex-shrink: 0;
     width: 28px;
     text-align: right;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     font-variant-numeric: tabular-nums;
   }
@@ -526,8 +526,8 @@
     display: inline-flex;
     align-items: center;
     gap: var(--bf-space-2);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
@@ -539,12 +539,12 @@
     border-radius: var(--bf-radius-pill);
     min-width: 20px;
     background: var(--bf-color-surface-raised);
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-muted);
     font-variant-numeric: tabular-nums;
     text-transform: none;
-    letter-spacing: var(--bf-letter-spacing-normal);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   &__section-actions {
@@ -556,9 +556,9 @@
 
   &__section-note {
     margin: 0;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__tab-list {
@@ -587,9 +587,9 @@
     border-radius: 6px;
     background: transparent;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-wide);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
     white-space: nowrap;
     cursor: pointer;
     transition:
@@ -626,9 +626,9 @@
     border-radius: 999px;
     background: var(--bf-color-action-neutral-surface-hover);
     color: inherit;
-    font-size: var(--bf-font-size-2xs);
-    line-height: var(--bf-line-height-ui);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-overline-sm-font-size);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
+    font-weight: var(--bf-type-label-selected-font-weight);
     font-variant-numeric: tabular-nums;
     border: 1px solid var(--bf-color-border-subtle);
   }
@@ -665,11 +665,11 @@
   }
 
   &__skill-group-title {
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-secondary);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wide);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
   }
 
   &__skill-group-count {
@@ -680,7 +680,7 @@
     padding: 1px 6px;
     border-radius: var(--bf-radius-pill);
     background: var(--bf-color-action-neutral-surface-hover);
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     color: var(--bf-color-content-muted);
     font-variant-numeric: tabular-nums;
   }
@@ -707,7 +707,7 @@
     border-radius: var(--bf-radius-pill);
     border: 1px solid var(--bf-color-border-subtle);
     background: var(--bf-color-surface-subtle);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-secondary);
     white-space: nowrap;
     max-width: 320px;
@@ -724,9 +724,9 @@
   &__token-state {
     flex-shrink: 0;
     margin-left: var(--bf-space-1);
-    font-family: var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-medium);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-muted);
   }
 
@@ -754,8 +754,8 @@
     border-radius: var(--bf-radius-pill);
     border: 1px solid transparent;
     background: transparent;
-    font-size: var(--bf-font-size-meta);
-    font-family: var(--bf-font-family-mono);
+    font-size: var(--bf-type-meta-font-size);
+    font-family: var(--bf-type-code-md-font-family);
     color: var(--bf-color-content-muted);
     cursor: pointer;
     transition:
@@ -811,7 +811,7 @@
 
   // ── Empty inline state ───────────────────────────────────────────────────
   &__empty-inline {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     font-style: italic;
   }
diff --git a/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.scss b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.scss
index ffcc8d0512..7b3d660517 100644
--- a/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.scss
+++ b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.scss
@@ -77,10 +77,10 @@
   }
 
   &__name {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -93,7 +93,7 @@
     border-color: transparent;
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     text-overflow: ellipsis;
   }
 
@@ -106,8 +106,8 @@
     padding-top: 2px;
     overflow: hidden;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     white-space: nowrap;
 
     .core-agent-card__status-icon {
@@ -136,10 +136,10 @@
 
   &__desc {
     margin: 0;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-regular);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
@@ -176,14 +176,14 @@
       min-width: 0;
       overflow: hidden;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-meta);
+      font-size: var(--bf-type-meta-font-size);
       font-variant-numeric: tabular-nums;
-      line-height: var(--bf-line-height-none);
+      line-height: var(--bf-type-modifier-leading-none-line-height);
       text-overflow: ellipsis;
       white-space: nowrap;
 
       &.core-agent-card__meta-value--text {
-        font-size: var(--bf-font-size-2xs);
+        font-size: var(--bf-type-overline-sm-font-size);
       }
     }
   }
@@ -202,8 +202,8 @@
   &__meta-label {
     overflow: hidden;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-2xs);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-overline-sm-font-size);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
diff --git a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss
index e5bdb5a6f4..baeb278065 100644
--- a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss
+++ b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss
@@ -18,16 +18,16 @@
 .th__title {
   margin: 0;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-xl);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-tight);
+  font-size: var(--bf-type-flow-title-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-label-md-line-height);
 }
 
 .th__title-sub {
   margin: 0;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-relaxed);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
 }
 
 .th-create-page__head {
@@ -48,7 +48,7 @@
 }
 
 .th-create-page .th__title {
-  letter-spacing: var(--bf-letter-spacing-tight);
+  letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
 }
 
 .th-create-page__heading {
@@ -120,9 +120,9 @@
   h3 {
     margin: 0;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
   }
 
   &--tools {
@@ -166,9 +166,9 @@
   h3 {
     margin: 0;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
   }
 
   .th-create-panel__label-hint {
@@ -235,7 +235,7 @@
 
   .tool-group-summary__label {
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 }
 
@@ -263,8 +263,8 @@
 
 .th-create-panel__prompt-context-label {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   white-space: nowrap;
 }
 
@@ -286,13 +286,13 @@
   border-radius: var(--bf-radius-pill);
   background: var(--bf-color-surface-scene);
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-body-sm-line-height);
 }
 
 .th-create-panel__prompt-context-empty {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
 }
 
 .th-create-panel__prompt-control {
@@ -309,27 +309,27 @@
 
 .th-create-panel__label {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
 
   &--strong {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 }
 
 .th-create-panel__label-hint {
   margin-left: 4px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-regular);
-  line-height: var(--bf-line-height-relaxed);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-body-sm-font-weight);
+  line-height: var(--bf-type-body-lg-line-height);
 }
 
 .th-create-panel__error {
   color: var(--bf-color-status-danger-content);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
 }
 
 .th-create-panel__readonly-row {
@@ -357,9 +357,9 @@
   border-radius: var(--bf-radius-pill);
   background: var(--bf-color-surface-scene);
   color: var(--bf-color-content-secondary);
-  font-family:var(--bf-font-family-sans);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-medium);
+  font-family:var(--bf-type-body-sm-font-family);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   cursor: pointer;
   transition:
     border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -381,7 +381,7 @@
     border-color: var(--bf-color-content-primary);
     background: var(--bf-color-content-primary);
     color: var(--bf-color-surface-scene);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     box-shadow: var(--bf-shadow-xs);
   }
 
@@ -414,9 +414,9 @@
   border-radius: var(--bf-radius-base);
   background: var(--bf-color-surface-scene);
   color: var(--bf-color-content-secondary);
-  font-family:var(--bf-font-family-sans);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-medium);
+  font-family:var(--bf-type-body-sm-font-family);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   cursor: pointer;
   transition:
     border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -445,7 +445,7 @@
     border-color: var(--bf-color-border-default);
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     box-shadow: none;
   }
 }
diff --git a/src/web-ui/src/app/scenes/agents/components/SkillGroupPicker.scss b/src/web-ui/src/app/scenes/agents/components/SkillGroupPicker.scss
index 0f0eff8a93..d6d7013e65 100644
--- a/src/web-ui/src/app/scenes/agents/components/SkillGroupPicker.scss
+++ b/src/web-ui/src/app/scenes/agents/components/SkillGroupPicker.scss
@@ -19,7 +19,7 @@
 
   &__selected-count {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     font-variant-numeric: tabular-nums;
   }
 
@@ -37,10 +37,10 @@
 
   &__section-label {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   }
 
   &__group {
@@ -71,10 +71,10 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wide);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
   }
 
   &__group-count {
@@ -86,7 +86,7 @@
     border-radius: var(--bf-radius-pill);
     background: var(--bf-color-action-neutral-surface-hover);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
@@ -115,8 +115,8 @@
     border-radius: var(--bf-radius-pill);
     background: transparent;
     color: var(--bf-color-content-muted);
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-meta);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-meta-font-size);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -157,8 +157,8 @@
 
   &__label {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__skills {
@@ -188,7 +188,7 @@
     justify-content: space-between;
     gap: var(--bf-space-3);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__list {
@@ -215,14 +215,14 @@
 
   &__group-name {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__group-meta,
   &__empty {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__group-actions {
@@ -243,8 +243,8 @@
     flex-direction: column;
     gap: var(--bf-space-1);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__token-grid {
@@ -267,8 +267,8 @@
     border-radius: var(--bf-radius-pill);
     background: transparent;
     color: var(--bf-color-content-muted);
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-meta);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-meta-font-size);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/src/web-ui/src/app/scenes/agents/components/ToolGroupPicker.scss b/src/web-ui/src/app/scenes/agents/components/ToolGroupPicker.scss
index d4d8c09228..327b894023 100644
--- a/src/web-ui/src/app/scenes/agents/components/ToolGroupPicker.scss
+++ b/src/web-ui/src/app/scenes/agents/components/ToolGroupPicker.scss
@@ -19,7 +19,7 @@
 
   &__selected-count {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     font-variant-numeric: tabular-nums;
   }
 
@@ -37,10 +37,10 @@
 
   &__section-label {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   }
 
   &__group {
@@ -71,10 +71,10 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wide);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
   }
 
   &__group-count {
@@ -86,7 +86,7 @@
     border-radius: var(--bf-radius-pill);
     background: var(--bf-color-action-neutral-surface-hover);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
@@ -114,8 +114,8 @@
     border-radius: var(--bf-radius-pill);
     background: transparent;
     color: var(--bf-color-content-muted);
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-meta);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-meta-font-size);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -156,8 +156,8 @@
 
   &__label {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__tools {
@@ -187,7 +187,7 @@
     justify-content: space-between;
     gap: var(--bf-space-3);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__list {
@@ -214,14 +214,14 @@
 
   &__group-name {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__group-meta,
   &__empty {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__group-actions {
@@ -242,8 +242,8 @@
     flex-direction: column;
     gap: var(--bf-space-1);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__token-grid {
@@ -266,8 +266,8 @@
     border-radius: var(--bf-radius-pill);
     background: transparent;
     color: var(--bf-color-content-muted);
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-meta);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-meta-font-size);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/src/web-ui/src/app/scenes/browser/BrowserPanel.scss b/src/web-ui/src/app/scenes/browser/BrowserPanel.scss
index 3791d480c4..273c7ce2cb 100644
--- a/src/web-ui/src/app/scenes/browser/BrowserPanel.scss
+++ b/src/web-ui/src/app/scenes/browser/BrowserPanel.scss
@@ -42,7 +42,7 @@
       box-shadow: none;
       background: transparent;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
       appearance: none;
       -webkit-appearance: none;
       border-radius: 0;
@@ -72,7 +72,7 @@
     border-radius: var(--bf-radius-base);
     background: color-mix(in srgb, var(--bf-color-status-warning-content) 12%, transparent);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     flex-shrink: 0;
 
     svg {
@@ -108,7 +108,7 @@
     justify-content: center;
     gap: var(--bf-space-2);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     background:
       radial-gradient(circle at top, color-mix(in srgb, var(--bf-color-accent-default) 8%, transparent), transparent 42%),
       var(--bf-color-surface-canvas);
diff --git a/src/web-ui/src/app/scenes/browser/BrowserScene.scss b/src/web-ui/src/app/scenes/browser/BrowserScene.scss
index 00667cd0b5..e76a8f2681 100644
--- a/src/web-ui/src/app/scenes/browser/BrowserScene.scss
+++ b/src/web-ui/src/app/scenes/browser/BrowserScene.scss
@@ -42,7 +42,7 @@
       box-shadow: none;
       background: transparent;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
       appearance: none;
       -webkit-appearance: none;
       border-radius: 0;
@@ -72,7 +72,7 @@
     border-radius: var(--bf-radius-base);
     background: color-mix(in srgb, var(--bf-color-status-warning-content) 12%, transparent);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     svg {
       color: var(--bf-color-status-warning-content);
@@ -107,7 +107,7 @@
     justify-content: center;
     gap: var(--bf-space-2);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     background:
       radial-gradient(circle at top, color-mix(in srgb, var(--bf-color-accent-default) 8%, transparent), transparent 42%),
       var(--bf-color-surface-canvas);
diff --git a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss
index 6bc42e559b..f02a316b01 100644
--- a/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss
+++ b/src/web-ui/src/app/scenes/ecosystem-compatibility/EcosystemCompatibilityScene.scss
@@ -39,8 +39,8 @@ $compatibility-sidebar-width: 236px;
     border-radius: var(--bf-radius-base);
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-xs);
+    font-family:var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
     text-align: left;
     cursor: pointer;
 
@@ -59,7 +59,7 @@ $compatibility-sidebar-width: 236px;
 
     strong {
       overflow: hidden;
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
       text-align: right;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -85,10 +85,10 @@ $compatibility-sidebar-width: 236px;
       margin: 0 0 var(--bf-space-2);
       padding-inline: var(--bf-space-2);
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-micro);
-      font-weight: var(--bf-font-weight-semibold);
-      letter-spacing: var(--bf-letter-spacing-wider);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-micro-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
+      line-height: var(--bf-type-body-lg-line-height);
     }
   }
 
@@ -173,14 +173,14 @@ $compatibility-sidebar-width: 236px;
     }
 
     strong {
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
     small {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-micro);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-micro-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
     }
   }
 
@@ -189,7 +189,7 @@ $compatibility-sidebar-width: 236px;
     align-items: center;
     gap: 4px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-2xs);
+    font-size: var(--bf-type-overline-sm-font-size);
     white-space: nowrap;
 
     &.is-connected,
@@ -214,7 +214,7 @@ $compatibility-sidebar-width: 236px;
   &__sidebar-empty {
     padding: var(--bf-space-5) var(--bf-space-3);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     text-align: center;
   }
 
@@ -225,8 +225,8 @@ $compatibility-sidebar-width: 236px;
     padding: var(--bf-space-3) var(--bf-space-4);
     border-top: 1px solid var(--bf-color-border-subtle);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-relaxed);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
 
     svg {
       margin-top: 1px;
@@ -281,10 +281,10 @@ $compatibility-sidebar-width: 236px;
 
     h1 {
       margin: 0;
-      font-size: var(--bf-font-size-3xl);
-      font-weight: var(--bf-font-weight-semibold);
-      letter-spacing: var(--bf-letter-spacing-tight);
-      line-height: var(--bf-line-height-tight);
+      font-size: var(--bf-type-heading-dialog-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
+      line-height: var(--bf-type-label-md-line-height);
     }
 
     > span {
@@ -292,7 +292,7 @@ $compatibility-sidebar-width: 236px;
       border: 1px solid var(--bf-color-border-subtle);
       border-radius: var(--bf-radius-pill);
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
       white-space: nowrap;
     }
   }
@@ -310,7 +310,7 @@ $compatibility-sidebar-width: 236px;
     dt {
       margin-bottom: 2px;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
     }
 
     dd {
@@ -321,7 +321,7 @@ $compatibility-sidebar-width: 236px;
       margin: 0;
       overflow: hidden;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       text-overflow: ellipsis;
       white-space: nowrap;
 
@@ -351,15 +351,15 @@ $compatibility-sidebar-width: 236px;
 
     span {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
     }
 
     strong {
       margin-top: 3px;
       overflow: hidden;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -384,7 +384,7 @@ $compatibility-sidebar-width: 236px;
     align-items: center;
     gap: var(--bf-space-2);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__loading {
@@ -451,16 +451,16 @@ $compatibility-sidebar-width: 236px;
 
     h2 {
       margin: 0;
-      font-size: var(--bf-font-size-base);
-      font-weight: var(--bf-font-weight-semibold);
-      line-height: var(--bf-line-height-tight);
+      font-size: var(--bf-type-body-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      line-height: var(--bf-type-label-md-line-height);
     }
 
     p {
       margin: var(--bf-space-1) 0 0;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-lg-line-height);
     }
   }
 
@@ -487,15 +487,15 @@ $compatibility-sidebar-width: 236px;
 
     strong {
       display: block;
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
     p {
       margin: var(--bf-space-1) 0 0;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-lg-line-height);
     }
   }
 
@@ -518,7 +518,7 @@ $compatibility-sidebar-width: 236px;
     min-width: 700px;
     min-height: 52px;
     padding: var(--bf-space-2) var(--bf-space-4);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     & + & {
       border-top: 1px solid var(--bf-color-border-subtle);
@@ -538,8 +538,8 @@ $compatibility-sidebar-width: 236px;
       padding-block: 0;
       background: var(--bf-color-surface-subtle);
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-micro);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-micro-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
 
       > span:last-child {
         text-align: right;
@@ -582,19 +582,19 @@ $compatibility-sidebar-width: 236px;
 
     strong {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
     small {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
     }
   }
 
   &__import-state {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
 
     &.is-ready,
     &.is-readyRename,
@@ -646,7 +646,7 @@ $compatibility-sidebar-width: 236px;
       max-width: 220px;
       overflow: hidden;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -667,13 +667,13 @@ $compatibility-sidebar-width: 236px;
     gap: 2px;
 
     strong {
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
     span {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
     }
   }
 
@@ -719,8 +719,8 @@ $compatibility-sidebar-width: 236px;
     > strong,
     .ecosystem-compatibility__runtime-mode-title strong {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
     p {
@@ -728,7 +728,7 @@ $compatibility-sidebar-width: 236px;
       margin: 3px 0 0;
       overflow: hidden;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
     }
@@ -737,7 +737,7 @@ $compatibility-sidebar-width: 236px;
       margin-top: 2px;
       overflow: hidden;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -750,7 +750,7 @@ $compatibility-sidebar-width: 236px;
 
     > span {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-2xs);
+      font-size: var(--bf-type-overline-sm-font-size);
 
       &.is-configured,
       &.is-defaultProfile {
@@ -777,14 +777,14 @@ $compatibility-sidebar-width: 236px;
     gap: var(--bf-space-4);
 
     strong {
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     p {
       margin: 3px 0 0;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
     }
   }
 
@@ -794,7 +794,7 @@ $compatibility-sidebar-width: 236px;
     gap: var(--bf-space-2);
     flex: none;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
   }
 
   &__subagent-fields {
@@ -810,8 +810,8 @@ $compatibility-sidebar-width: 236px;
         display: block;
         margin-bottom: var(--bf-space-1);
         color: var(--bf-color-content-secondary);
-        font-size: var(--bf-font-size-micro);
-        font-weight: var(--bf-font-weight-medium);
+        font-size: var(--bf-type-micro-font-size);
+        font-weight: var(--bf-type-label-sm-font-weight);
       }
     }
 
@@ -833,7 +833,7 @@ $compatibility-sidebar-width: 236px;
       align-items: center;
       gap: var(--bf-space-1);
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
     }
 
     > div {
diff --git a/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss b/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss
index a5771f07b5..2dc01ab8d5 100644
--- a/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss
+++ b/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss
@@ -66,8 +66,8 @@
     background: var(--bf-color-action-quiet-hover);
     margin: 0 var(--bf-space-2);
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     flex-shrink: 0;
   }
 
@@ -83,7 +83,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    line-height: var(--bf-line-height-none);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
   }
 
   &__actions {
diff --git a/src/web-ui/src/app/scenes/git/GitNav.scss b/src/web-ui/src/app/scenes/git/GitNav.scss
index 4bfd3d52b8..a1a2741998 100644
--- a/src/web-ui/src/app/scenes/git/GitNav.scss
+++ b/src/web-ui/src/app/scenes/git/GitNav.scss
@@ -31,8 +31,8 @@
   }
 
   &__title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     white-space: nowrap;
     overflow: hidden;
@@ -55,13 +55,13 @@
     display: flex;
     align-items: center;
     gap: var(--bf-space-2);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
     margin-bottom: var(--bf-space-1);
   }
 
   &__branch-name {
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -72,7 +72,7 @@
     display: flex;
     align-items: center;
     gap: var(--bf-space-1);
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     color: var(--bf-color-content-muted);
   }
 
@@ -95,8 +95,8 @@
     color: var(--bf-color-content-secondary);
     cursor: pointer;
     text-align: left;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
     width: 100%;
     position: relative;
     transition: color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -114,7 +114,7 @@
     &.is-active {
       color: var(--bf-color-content-primary);
       background: var(--bf-color-action-quiet-hover);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
 
       &::before {
         content: '';
@@ -136,7 +136,7 @@
   }
 
   &__item-badge {
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     color: var(--bf-color-content-muted);
     margin-left: var(--bf-space-1);
   }
diff --git a/src/web-ui/src/app/scenes/git/GitScene.scss b/src/web-ui/src/app/scenes/git/GitScene.scss
index cbc78c5e7e..e63a0929ed 100644
--- a/src/web-ui/src/app/scenes/git/GitScene.scss
+++ b/src/web-ui/src/app/scenes/git/GitScene.scss
@@ -75,19 +75,19 @@
 
     h3 {
       margin: 0 0 4px;
-      font-size: var(--bf-font-size-base);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-body-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-primary);
     }
     p {
       margin: 0;
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       color: var(--bf-color-content-secondary);
     }
   }
 
   &__init-hint {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
   }
 
@@ -105,7 +105,7 @@
   }
 
   &__loading-hint {
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     margin: 0;
     opacity: 0.6;
   }
diff --git a/src/web-ui/src/app/scenes/git/views/BranchesView.scss b/src/web-ui/src/app/scenes/git/views/BranchesView.scss
index 85e21060a0..acfbf72642 100644
--- a/src/web-ui/src/app/scenes/git/views/BranchesView.scss
+++ b/src/web-ui/src/app/scenes/git/views/BranchesView.scss
@@ -77,7 +77,7 @@
   }
 
   &__name {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-primary);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -86,8 +86,8 @@
 
   &__current-badge {
     flex-shrink: 0;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-accent-default);
     text-transform: uppercase;
   }
@@ -101,7 +101,7 @@
     padding: 16px;
     text-align: center;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__placeholder {
@@ -112,11 +112,11 @@
     flex: 1;
     gap: 8px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 
   &__hint {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     opacity: 0.8;
   }
 
@@ -132,8 +132,8 @@
   }
 
   &__history-title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     margin-right: auto;
   }
@@ -177,7 +177,7 @@
   }
 
   &__commit-message {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-primary);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -185,7 +185,7 @@
   }
 
   &__commit-meta {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
     margin-top: 2px;
   }
@@ -198,7 +198,7 @@
   &__commit-detail {
     padding: 8px 10px 10px 34px;
     border-top: 1px solid var(--bf-color-border-subtle);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__commit-body {
@@ -206,11 +206,11 @@
     white-space: pre-wrap;
     word-break: break-word;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__files {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
 
     ul {
diff --git a/src/web-ui/src/app/scenes/git/views/GraphView.scss b/src/web-ui/src/app/scenes/git/views/GraphView.scss
index 7e0a32ede1..abcaee47f7 100644
--- a/src/web-ui/src/app/scenes/git/views/GraphView.scss
+++ b/src/web-ui/src/app/scenes/git/views/GraphView.scss
@@ -9,6 +9,6 @@
     align-items: center;
     justify-content: center;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 }
diff --git a/src/web-ui/src/app/scenes/git/views/WorkingCopyView.scss b/src/web-ui/src/app/scenes/git/views/WorkingCopyView.scss
index 71882a5ae0..46c9b38d30 100644
--- a/src/web-ui/src/app/scenes/git/views/WorkingCopyView.scss
+++ b/src/web-ui/src/app/scenes/git/views/WorkingCopyView.scss
@@ -18,16 +18,16 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__branch {
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
   }
 
   &__badge {
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     color: var(--bf-color-content-muted);
   }
 
@@ -47,7 +47,7 @@
     flex: 1;
     min-height: 56px;
     resize: none;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__commit-actions {
@@ -88,12 +88,12 @@
     align-items: center;
     gap: 6px;
     padding: 4px 8px;
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-muted);
     cursor: pointer;
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   }
 
   &__file-row {
@@ -101,7 +101,7 @@
     align-items: center;
     gap: 6px;
     padding: 4px 8px;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     cursor: pointer;
     color: var(--bf-color-content-secondary);
 
@@ -128,15 +128,15 @@
   }
 
   &__file-dir {
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     color: var(--bf-color-content-muted);
     flex-shrink: 0;
   }
 
   &__file-status {
     flex-shrink: 0;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
 
     &.wcv-status--modified { color: var(--bf-color-status-warning-content); }
     &.wcv-status--added { color: var(--bf-color-status-success-content); }
@@ -146,16 +146,16 @@
 
   &__empty {
     padding: 12px;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
   }
 
   &__file-list-placeholder {
     padding: 12px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
-    span { font-weight: var(--bf-font-weight-medium); color: var(--bf-color-content-secondary); }
+    span { font-weight: var(--bf-type-label-sm-font-weight); color: var(--bf-color-content-secondary); }
   }
 
   &__diff-area {
@@ -174,11 +174,11 @@
     flex: 1;
     gap: 8px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 
   &__hint {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     opacity: 0.8;
   }
 }
diff --git a/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.scss b/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.scss
index 349aa119fd..a8546333a2 100644
--- a/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.scss
+++ b/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.scss
@@ -1,7 +1,3 @@
-// Gutter aligned with GalleryLayout ($gutter) so the tab strip lines up
-// with the page header content of every tab pane.
-$scene-gutter: clamp(28px, 4vw, 64px);
-
 .miniapp-gallery-scene {
   display: flex;
   flex-direction: column;
@@ -13,13 +9,6 @@ $scene-gutter: clamp(28px, 4vw, 64px);
   overflow: hidden;
   background: var(--bf-color-surface-scene);
 
-  &__nav {
-    flex: 0 0 auto;
-    padding: var(--bf-space-3) $scene-gutter;
-    background: var(--bf-color-surface-scene);
-    border-bottom: 1px solid var(--bf-color-border-subtle);
-  }
-
   // Layout glue: keep the active pane in the flex sizing chain so each
   // pane's GalleryLayout keeps its own internal scroll.
   &__content {
@@ -38,8 +27,15 @@ $scene-gutter: clamp(28px, 4vw, 64px);
   }
 }
 
-@media (max-width: 560px) {
-  .miniapp-gallery-scene__nav {
-    padding-inline: var(--bf-space-3);
+.miniapp-gallery-tabs {
+  width: min(calc(100% - var(--bf-space-6)), 680px);
+  margin: var(--bf-space-6) auto 0;
+  box-sizing: border-box;
+}
+
+@media (max-width: 720px) {
+  .miniapp-gallery-tabs {
+    width: calc(100% - var(--bf-space-8));
+    margin-top: var(--bf-space-4);
   }
 }
diff --git a/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.tsx b/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.tsx
index b2cc8deea8..16d13d769a 100644
--- a/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/MiniAppGalleryScene.tsx
@@ -4,7 +4,7 @@
  */
 import React, { Suspense, lazy, useState } from 'react';
 
-import { Icon, TabGroup, type TabGroupItem } from '@bitfun/ui';
+import { Icon, SegmentedControl } from '@bitfun/ui';
 import { useI18n } from '@/infrastructure/i18n';
 import './MiniAppGalleryScene.scss';
 
@@ -17,39 +17,41 @@ type MiniAppGalleryTab = 'installed' | 'market' | 'submissions';
 const MiniAppGalleryScene: React.FC = () => {
   const { t } = useI18n('scenes/miniapp');
   const [activeTab, setActiveTab] = useState<MiniAppGalleryTab>('installed');
-
-  const tabItems: TabGroupItem[] = [
-    {
-      value: 'installed',
-      icon: <Icon name="download" size="sm" />,
-      label: t('market.tabs.installed'),
-    },
-    {
-      value: 'market',
-      icon: <Icon name="store" size="sm" />,
-      label: t('market.tabs.market'),
-    },
-    {
-      value: 'submissions',
-      icon: <Icon name="upload" size="sm" />,
-      label: t('market.tabs.submissions'),
-    },
-  ];
+  const tabs = (
+    <SegmentedControl
+      aria-label={t('title')}
+      className="miniapp-gallery-tabs"
+      distribution="fill"
+      options={[
+        {
+          value: 'installed',
+          icon: <Icon name="download" size="sm" />,
+          label: t('market.tabs.installed'),
+        },
+        {
+          value: 'market',
+          icon: <Icon name="store" size="sm" />,
+          label: t('market.tabs.market'),
+        },
+        {
+          value: 'submissions',
+          icon: <Icon name="upload" size="sm" />,
+          label: t('market.tabs.submissions'),
+        },
+      ]}
+      size="md"
+      value={activeTab}
+      onValueChange={(value) => setActiveTab(value as MiniAppGalleryTab)}
+    />
+  );
 
   return (
     <div className="miniapp-gallery-scene" data-bf-scene="miniapp-gallery" data-bf-part="root">
-      <div className="miniapp-gallery-scene__nav">
-        <TabGroup
-          items={tabItems}
-          value={activeTab}
-          onValueChange={(value) => setActiveTab(value as MiniAppGalleryTab)}
-        />
-      </div>
       <div className="miniapp-gallery-scene__content">
         <Suspense fallback={null}>
-          {activeTab === 'installed' && <MiniAppGalleryView />}
-          {activeTab === 'market' && <MiniAppMarketView />}
-          {activeTab === 'submissions' && <MiniAppSubmissionsView />}
+          {activeTab === 'installed' && <MiniAppGalleryView tabs={tabs} />}
+          {activeTab === 'market' && <MiniAppMarketView tabs={tabs} />}
+          {activeTab === 'submissions' && <MiniAppSubmissionsView tabs={tabs} />}
         </Suspense>
       </div>
     </div>
diff --git a/src/web-ui/src/app/scenes/miniapps/MiniAppScene.scss b/src/web-ui/src/app/scenes/miniapps/MiniAppScene.scss
index bc2ce63fad..d188616add 100644
--- a/src/web-ui/src/app/scenes/miniapps/MiniAppScene.scss
+++ b/src/web-ui/src/app/scenes/miniapps/MiniAppScene.scss
@@ -27,8 +27,11 @@
   }
 
   &__title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-family: var(--bf-type-heading-card-font-family);
+    font-size: var(--bf-type-heading-card-font-size);
+    font-weight: var(--bf-type-heading-card-font-weight);
+    line-height: var(--bf-type-heading-card-line-height);
+    letter-spacing: var(--bf-type-heading-card-letter-spacing);
     color: var(--bf-color-content-primary);
     white-space: nowrap;
     overflow: hidden;
@@ -37,7 +40,7 @@
 
     &--loading {
       color: var(--bf-color-content-muted);
-      font-weight: var(--bf-font-weight-regular);
+      font-weight: var(--bf-type-label-md-font-weight);
     }
   }
 
@@ -123,14 +126,21 @@
 
     span {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
+      font-family: var(--bf-type-heading-card-font-family);
+      font-size: var(--bf-type-heading-card-font-size);
+      font-weight: var(--bf-type-heading-card-font-weight);
+      line-height: var(--bf-type-heading-card-line-height);
+      letter-spacing: var(--bf-type-heading-card-letter-spacing);
     }
 
     small {
       margin-top: 2px;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-family: var(--bf-type-support-font-family);
+      font-size: var(--bf-type-support-font-size);
+      font-weight: var(--bf-type-support-font-weight);
+      line-height: var(--bf-type-support-line-height);
+      letter-spacing: var(--bf-type-support-letter-spacing);
     }
   }
 
@@ -156,7 +166,11 @@
     height: 100%;
     gap: var(--bf-space-3);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   &__error {
@@ -169,7 +183,11 @@
     height: 100%;
     gap: var(--bf-space-3);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
     text-align: center;
     padding: var(--bf-space-6);
 
@@ -180,7 +198,7 @@
     p {
       margin: 0;
       max-width: 320px;
-      line-height: var(--bf-line-height-relaxed);
+      line-height: var(--bf-type-body-lg-line-height);
     }
   }
 
@@ -203,7 +221,11 @@
     background: var(--bf-color-surface-panel);
     color: var(--bf-color-content-primary);
     box-shadow: var(--bf-shadow-base);
-    font-size: var(--bf-font-size-sm);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
 
     svg {
       flex: 0 0 auto;
@@ -250,15 +272,22 @@
 
     h3 {
       margin: 0;
-      font-size: var(--bf-font-size-base);
-      line-height: var(--bf-line-height-snug);
+      font-family: var(--bf-type-heading-section-font-family);
+      font-size: var(--bf-type-heading-section-font-size);
+      font-weight: var(--bf-type-heading-section-font-weight);
+      line-height: var(--bf-type-heading-section-line-height);
+      letter-spacing: var(--bf-type-heading-section-letter-spacing);
     }
 
     span {
       display: block;
       margin-top: 2px;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-family: var(--bf-type-support-font-family);
+      font-size: var(--bf-type-support-font-size);
+      font-weight: var(--bf-type-support-font-weight);
+      line-height: var(--bf-type-support-line-height);
+      letter-spacing: var(--bf-type-support-letter-spacing);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -282,14 +311,21 @@
     strong {
       display: block;
       margin-bottom: 2px;
-      font-size: var(--bf-font-size-sm);
+      font-family: var(--bf-type-heading-card-font-family);
+      font-size: var(--bf-type-heading-card-font-size);
+      font-weight: var(--bf-type-heading-card-font-weight);
+      line-height: var(--bf-type-heading-card-line-height);
+      letter-spacing: var(--bf-type-heading-card-letter-spacing);
     }
 
     p {
       margin: 0;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-relaxed);
+      font-family: var(--bf-type-support-font-family);
+      font-size: var(--bf-type-support-font-size);
+      font-weight: var(--bf-type-support-font-weight);
+      line-height: var(--bf-type-support-line-height);
+      letter-spacing: var(--bf-type-support-letter-spacing);
     }
 
     &-actions {
@@ -312,8 +348,11 @@
     padding: var(--bf-space-3);
 
     span {
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-medium);
+      font-family: var(--bf-type-label-sm-font-family);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
+      line-height: var(--bf-type-label-sm-line-height);
+      letter-spacing: var(--bf-type-label-sm-letter-spacing);
       color: var(--bf-color-content-muted);
     }
 
@@ -326,9 +365,11 @@
       padding: var(--bf-space-2);
       background: var(--bf-color-surface-subtle);
       color: var(--bf-color-content-primary);
-      font: inherit;
-      font-size: var(--bf-font-size-sm);
-      line-height: var(--bf-line-height-relaxed);
+      font-family: var(--bf-type-body-sm-font-family);
+      font-size: var(--bf-type-body-sm-font-size);
+      font-weight: var(--bf-type-body-sm-font-weight);
+      line-height: var(--bf-type-body-sm-line-height);
+      letter-spacing: var(--bf-type-body-sm-letter-spacing);
 
       &:focus {
         outline: 2px solid var(--bf-color-accent-default);
@@ -350,8 +391,11 @@
     margin: 0 var(--bf-space-3) var(--bf-space-3);
     padding: var(--bf-space-2);
     border-radius: var(--bf-radius-base);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-relaxed);
+    font-family: var(--bf-type-support-font-family);
+    font-size: var(--bf-type-support-font-size);
+    font-weight: var(--bf-type-support-font-weight);
+    line-height: var(--bf-type-support-line-height);
+    letter-spacing: var(--bf-type-support-letter-spacing);
   }
 
   &__error {
@@ -399,7 +443,11 @@
     gap: var(--bf-space-2);
     width: 100%;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   &__preview {
@@ -414,10 +462,14 @@
     justify-content: space-between;
     gap: var(--bf-space-2);
     margin-bottom: var(--bf-space-2);
-    font-size: var(--bf-font-size-xs);
+    font-family: var(--bf-type-meta-font-family);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-meta-font-weight);
+    line-height: var(--bf-type-meta-line-height);
+    letter-spacing: var(--bf-type-meta-letter-spacing);
 
     span:first-child {
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     span:last-child {
@@ -463,8 +515,11 @@
     display: flex;
     gap: var(--bf-space-2);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-relaxed);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
 
     svg {
       flex: 0 0 auto;
@@ -479,10 +534,13 @@
   &__section {
     h4 {
       margin: 0 0 var(--bf-space-1);
-      font-size: var(--bf-font-size-xs);
+      font-family: var(--bf-type-meta-font-family);
+      font-size: var(--bf-type-meta-font-size);
+      font-weight: var(--bf-type-meta-font-weight);
+      line-height: var(--bf-type-meta-line-height);
       color: var(--bf-color-content-muted);
       text-transform: uppercase;
-      letter-spacing: var(--bf-letter-spacing-normal);
+      letter-spacing: var(--bf-type-meta-letter-spacing);
     }
 
     &__list {
@@ -498,8 +556,11 @@
       border: 1px solid var(--bf-color-border-subtle);
       border-radius: var(--bf-radius-base);
       background: var(--bf-color-surface-subtle);
-      font-family:var(--bf-font-family-mono);
-      font-size: var(--bf-font-size-xs);
+      font-family: var(--bf-type-code-sm-font-family);
+      font-size: var(--bf-type-code-sm-font-size);
+      font-weight: var(--bf-type-code-sm-font-weight);
+      line-height: var(--bf-type-code-sm-line-height);
+      letter-spacing: var(--bf-type-code-sm-letter-spacing);
     }
   }
 
diff --git a/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.presentation.test.ts b/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.presentation.test.ts
index 3ad17e0317..6611881856 100644
--- a/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.presentation.test.ts
+++ b/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.presentation.test.ts
@@ -13,9 +13,10 @@ function readRelative(filename: string): string {
 const cardCss = compile(fileURLToPath(new URL('./MiniAppCard.scss', import.meta.url))).css;
 
 describe('Mini App card presentation', () => {
-  it('uses the catalog deletion glyph and shared running-count badge', () => {
-    expect(readRelative('./MiniAppCard.tsx')).toContain('icon={<Icon name="delete" size="lg" />}');
-    expect(readRelative('../views/MiniAppGalleryView.tsx')).toContain('<NumberBadge value={activeApps.length} />');
+  it('keeps destructive actions in details and places counts beside section titles', () => {
+    expect(readRelative('./MiniAppCard.tsx')).not.toContain('name="delete"');
+    expect(readRelative('../views/MiniAppGalleryView.tsx')).toContain('titleAdornment={<NumberBadge value={activeApps.length} />}');
+    expect(readRelative('../views/MiniAppGalleryView.tsx')).toContain('titleAdornment={<NumberBadge value={filtered.length} />}');
     expect(readRelative('../views/MiniAppGalleryView.tsx')).not.toContain('gallery-zone-badge');
   });
 
@@ -23,9 +24,13 @@ describe('Mini App card presentation', () => {
     const gallery = readRelative('../views/MiniAppGalleryView.tsx');
     const market = readRelative('../views/MiniAppMarketView.tsx');
     const submissions = readRelative('../views/MiniAppSubmissionsView.tsx');
+    const tabs = readRelative('../MiniAppGalleryScene.tsx');
 
     expect(gallery).toContain('<SegmentedControl');
+    expect(gallery).toContain('variant="pills"');
     expect(gallery).not.toContain('gallery-cat-chip');
+    expect(tabs).toContain('distribution="fill"');
+    expect(tabs).toContain('size="md"');
     expect(market).toContain('<SegmentedControl');
     expect(market).toContain('<Card');
     expect(market).toContain('<CardMedia');
@@ -36,16 +41,17 @@ describe('Mini App card presentation', () => {
     expect(submissions).toContain('<IconButton');
     expect(submissions).not.toContain('miniapp-submissions__advanced-toggle');
   });
-  it('bounds the card without coupling its height to its width', () => {
+  it('uses the compact vertical catalog-card geometry', () => {
     const stylesheet = readRelative('./MiniAppCard.scss');
     const rootStart = stylesheet.indexOf('.miniapp-card {');
     const rootEnd = stylesheet.indexOf('&:hover {', rootStart);
     const rootGeometry = stylesheet.slice(rootStart, rootEnd);
 
-    expect(rootGeometry).toContain('max-width: 400px;');
-    expect(rootGeometry).toContain('min-height: 152px;');
+    expect(rootGeometry).not.toContain('max-width:');
+    expect(rootGeometry).toContain('min-height: 193px;');
     expect(rootGeometry).not.toContain('aspect-ratio:');
-    expect(stylesheet).toContain('grid-template-columns: clamp(60px, 18%, 72px) minmax(0, 1fr);');
+    expect(stylesheet).toMatch(/&__main \{[\s\S]*?flex-direction: column;/);
+    expect(stylesheet).toContain('-webkit-line-clamp: 3;');
     expect(stylesheet).toMatch(/&__footer \{[\s\S]*?margin-top: auto;/);
   });
 
@@ -55,52 +61,62 @@ describe('Mini App card presentation', () => {
 
     expect(source).toContain('const MINIAPP_CARD_MIN_WIDTH = 280;');
     expect(source.match(/minCardWidth=\{MINIAPP_CARD_MIN_WIDTH\}/g)).toHaveLength(3);
-    expect(stylesheet).toMatch(/&__card-grid \{\s+justify-items: start;/);
+    expect(stylesheet).toMatch(/&__card-grid \{[\s\S]*?grid-template-columns: repeat\(2, minmax\(0, 1fr\)\);[\s\S]*?justify-items: stretch;/);
     expect(stylesheet).toMatch(
-      /&__card-grid\.gallery-grid--skeleton \.gallery-skeleton-card \{[\s\S]*?max-width: 400px;[\s\S]*?height: 152px;/,
-    );
-    expect(stylesheet).toMatch(
-      /@media \(max-width: 480px\) \{[\s\S]*?\.miniapp-card,[\s\S]*?\.gallery-skeleton-card \{\s+max-width: 100%;/,
+      /&__card-grid\.gallery-grid--skeleton \.gallery-skeleton-card \{[\s\S]*?height: 193px;/,
     );
+    expect(stylesheet).toMatch(/@media \(max-width: 720px\) \{[\s\S]*?grid-template-columns: 1fr;/);
+    expect(stylesheet).toContain('container-type: inline-size;');
+    expect(stylesheet).toMatch(/@container \(max-width: 760px\) \{[\s\S]*?\.gallery-page-header \{[\s\S]*?flex-direction: column;/);
+    expect(stylesheet).toMatch(/@container \(max-width: 760px\) \{[\s\S]*?grid-template-columns: 1fr;/);
     expect(stylesheet).not.toContain('aspect-ratio: 12 / 5;');
   });
 
-  it('lets actions move to a new line instead of squeezing tags into the remaining width', () => {
+  it('uses dedicated artwork for built-in catalog cards and keeps a glyph fallback', () => {
+    const card = readRelative('./MiniAppCard.tsx');
+    const icons = readRelative('../utils/miniAppIcons.tsx');
+
+    expect(card).toContain('getMiniAppIconAsset(app.id)');
+    expect(card).toContain('className="miniapp-card__icon-image"');
+    expect(card).toContain("renderMiniAppIcon(app.icon || 'box', 40)");
+    expect(icons).toContain("'builtin-ppt-live': pptLiveIcon");
+    expect(icons).toContain("'builtin-coding-selfie': codingFootprintIcon");
+    expect(icons).toContain("'builtin-regex-playground': regexPlaygroundIcon");
+    expect(icons).toContain("'builtin-daily-divination': dailyDivinationIcon");
+    expect(icons).toContain("'builtin-gomoku': gomokuIcon");
+  });
+
+  it('keeps tags and the circular run action on one footer row', () => {
+    const stylesheet = readRelative('./MiniAppCard.scss');
     const footer = cardCss.match(/\.miniapp-card__footer \{([^}]+)\}/)?.[1];
-    const actions = cardCss.match(/\.miniapp-card__actions \{([^}]+)\}/)?.[1];
+    const actionsStart = stylesheet.lastIndexOf('&__actions {');
+    const actions = stylesheet.slice(actionsStart, stylesheet.indexOf('}', actionsStart));
+    const source = readRelative('./MiniAppCard.tsx');
 
-    expect(footer).toContain('display: flex;');
-    expect(footer).toContain('flex-wrap: wrap;');
+    expect(footer).toContain('margin-top: auto;');
+    expect(footer).not.toContain('flex-wrap: wrap;');
     expect(footer).not.toContain('grid-template-columns:');
     expect(actions).toContain('margin-inline-start: auto;');
-    expect(actions).toContain('flex-shrink: 0;');
+    expect(actions).toContain('flex: 0 0 auto;');
     expect(actions).not.toContain('grid-column:');
+    expect(source).toContain('shape="circle"');
+    expect(source).toContain('variant="primary"');
   });
 
-  it('wraps whole tag pills and applies ellipsis in a block formatting context', () => {
+  it('keeps version and tags in a clipped single-line metadata rail', () => {
     const tags = cardCss.match(/\.miniapp-card__tags \{([^}]+)\}/)?.[1];
     const tag = cardCss.match(/\.miniapp-card__tag \{([^}]+)\}/)?.[1];
-    const sharedTag = cardCss.match(/\.miniapp-card__tag,\s*\.miniapp-card__tag-overflow \{([^}]+)\}/)?.[1];
+    const source = readRelative('./MiniAppCard.tsx');
 
     expect(tags).toContain('flex: 1 1 auto;');
-    expect(tags).toContain('flex-wrap: wrap;');
-    expect(tags).toContain('max-width: 100%;');
-    expect(tags).not.toContain('overflow: hidden;');
+    expect(tags).toContain('overflow: hidden;');
+    expect(tags).toContain('white-space: nowrap;');
     expect(tag).toContain('display: block;');
-    expect(tag).toContain('flex: 0 0 auto;');
+    expect(tag).toContain('flex: 0 1 auto;');
     expect(tag).toContain('box-sizing: border-box;');
-    expect(tag).toContain('max-width: min(100%, 16ch);');
-    expect(sharedTag).toContain('white-space: nowrap;');
-    expect(sharedTag).toContain('overflow: hidden;');
-    expect(sharedTag).toContain('text-overflow: ellipsis;');
-  });
-
-  it('keeps the overflow count intact and retains the compact tag summary', () => {
-    const overflow = cardCss.match(/(?:^|\})\s*\.miniapp-card__tag-overflow \{([^}]+)\}/)?.[1];
-
-    expect(overflow).toContain('flex: 0 0 auto;');
-    expect(cardCss).toMatch(/@container miniapp-card \(max-width: 519px\) \{\s*\.miniapp-card__tag--compact-hidden,\s*\.miniapp-card__tag-overflow--wide \{\s*display: none;/);
-    expect(cardCss).toMatch(/@container miniapp-card[\s\S]*?\.miniapp-card__tag-overflow--compact \{\s*display: inline-flex;/);
+    expect(tag).toContain('text-overflow: ellipsis;');
+    expect(source).toContain('V{marketReleaseNumber ?? app.version}');
+    expect(source).toContain('localizedTags.slice(0, 4)');
   });
 
   it('bounds market cards while preserving the media preview ratio', () => {
diff --git a/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.scss b/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.scss
index a5d1a88fbd..3b772016cd 100644
--- a/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.scss
+++ b/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.scss
@@ -2,21 +2,15 @@
 
 .miniapp-card {
   width: 100%;
-  max-width: 400px;
   min-width: 0;
-  min-height: 152px;
+  min-height: 193px;
   box-sizing: border-box;
   border: 1px solid var(--bf-color-border-subtle);
-  border-radius: var(--bf-radius-lg);
+  border-radius: var(--bf-radius-xl);
   background-color: var(--bf-color-surface-raised);
-  display: flex;
-  flex-direction: column;
-  container-name: miniapp-card;
-  container-type: inline-size;
   position: relative;
   overflow: hidden;
   cursor: pointer;
-  box-shadow: var(--bf-shadow-xs);
   animation: miniapp-card-in 0.22s var(--bf-motion-easing-decelerate) both;
   @include surface-stagger.animation-delay(35ms);
   transition:
@@ -26,10 +20,10 @@
     box-shadow var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
 
   &:hover {
-    transform: translateY(-3px);
+    transform: translateY(-2px);
     background-color: var(--bf-color-surface-subtle);
     border-color: var(--bf-color-border-default);
-    box-shadow: var(--bf-shadow-sm);
+    box-shadow: var(--bf-shadow-xs);
   }
 
   &:active {
@@ -42,89 +36,80 @@
     outline-offset: 2px;
   }
 
-  &--running {
-    // Running state - green border removed, relies on run-dot indicator
-  }
-
   &--customizing {
     border-color: color-mix(in srgb, var(--bf-color-accent-default) 42%, var(--bf-color-border-subtle));
   }
 
   &__main {
-    display: grid;
-    grid-template-columns: clamp(60px, 18%, 72px) minmax(0, 1fr);
+    display: flex;
+    flex-direction: column;
     gap: var(--bf-space-3);
-    flex: 1;
-    min-height: 0;
-    padding: var(--bf-space-3) var(--bf-space-4);
+    min-height: 193px;
+    padding: var(--bf-space-4);
+    box-sizing: border-box;
   }
 
-  &__content {
+  &__header,
+  &__header-actions,
+  &__status-dots,
+  &__footer,
+  &__tags,
+  &__actions {
     display: flex;
-    flex-direction: column;
-    min-width: 0;
-    min-height: 0;
+    align-items: center;
   }
 
   &__header {
-    display: flex;
-    align-items: flex-start;
     justify-content: space-between;
     gap: var(--bf-space-3);
-    position: relative;
-    z-index: 1;
+    min-height: 40px;
   }
 
-  &__title-group {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-  }
-
-  &__meta {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--bf-space-2);
-    flex-shrink: 0;
-    min-height: 24px;
+  &__header-actions {
+    align-self: flex-start;
+    gap: var(--bf-space-1);
   }
 
-  &__icon-area {
+  &__icon-area,
+  &__icon {
     display: flex;
     align-items: center;
     justify-content: center;
-    align-self: center;
-    justify-self: center;
-    width: 100%;
-    max-width: 72px;
-    aspect-ratio: 1;
-    border: 1px solid var(--bf-color-border-subtle);
-    border-radius: var(--bf-radius-pill);
-    background: var(--bf-color-surface-subtle);
-    box-shadow: inset 0 0 0 5px var(--bf-color-surface-raised);
+    width: 40px;
+    height: 40px;
+    flex: 0 0 40px;
   }
 
   &__icon {
+    overflow: hidden;
     color: var(--bf-color-content-primary);
     animation: miniapp-icon-pop 0.5s var(--bf-motion-easing-decelerate) both;
     @include surface-stagger.animation-delay(35ms, 60ms);
-    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    transition: transform var(--bf-motion-duration-base) var(--bf-motion-easing-decelerate);
+  }
+
+  &__icon-image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    transform: scale(1.62);
+  }
+
+  &[data-miniapp-id='builtin-ppt-live'] {
+    .miniapp-card__icon-image {
+      transform: scale(1.85);
+    }
   }
 
   &__status-dots {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    flex-shrink: 0;
+    gap: var(--bf-space-1);
   }
 
   &__run-dot,
   &__customize-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
+    width: 7px;
+    height: 7px;
+    border-radius: var(--bf-radius-pill);
   }
 
   &__run-dot {
@@ -138,145 +123,106 @@
     box-shadow: 0 0 6px color-mix(in srgb, var(--bf-color-accent-default) 68%, transparent);
   }
 
+  &__content,
   &__body {
-    flex: 1;
-    min-height: 0;
-    padding-top: var(--bf-space-2);
     display: flex;
     flex-direction: column;
-    gap: var(--bf-space-2);
-    overflow: hidden;
-    position: relative;
-    z-index: 1;
+    min-width: 0;
   }
 
-  &__name {
-    font-size: var(--bf-font-size-xl);
-    font-weight: var(--bf-font-weight-semibold);
-    color: var(--bf-color-content-primary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 1;
+  &__content {
+    gap: var(--bf-space-1);
+  }
+
+  &__title-group {
+    display: flex;
     min-width: 0;
-    line-height: var(--bf-line-height-base);
   }
 
-  &__version {
-    font-size: var(--bf-font-size-xs);
-    color: var(--bf-color-content-muted);
+  &__name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--bf-color-content-primary);
+    font-family: var(--bf-type-heading-card-font-family);
+    font-size: var(--bf-type-heading-card-font-size);
+    font-weight: var(--bf-type-heading-card-font-weight);
+    line-height: var(--bf-type-heading-card-line-height);
+    letter-spacing: var(--bf-type-heading-card-letter-spacing);
+    text-overflow: ellipsis;
     white-space: nowrap;
-    flex-shrink: 0;
-    line-height: var(--bf-line-height-base);
   }
 
   &__desc {
-    flex: 0 1 auto;
     min-height: 0;
     overflow: hidden;
   }
 
   &__desc-inner {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-regular);
-    color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-relaxed);
     display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
     overflow: hidden;
+    color: var(--bf-color-content-secondary);
+    font-family: var(--bf-type-support-font-family);
+    font-size: var(--bf-type-support-font-size);
+    font-weight: var(--bf-type-support-font-weight);
+    line-height: var(--bf-type-support-line-height);
+    letter-spacing: var(--bf-type-support-letter-spacing);
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
   }
 
-  &__tags {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
+  &__footer {
+    gap: var(--bf-space-2);
+    width: 100%;
+    margin-top: auto;
     min-width: 0;
-    max-width: 100%;
-    flex-wrap: wrap;
-    gap: var(--bf-space-1);
   }
 
-  &__tag,
-  &__tag-overflow {
-    display: inline-flex;
-    align-items: center;
-    min-height: 24px;
-    padding: 2px var(--bf-space-1);
-    border-radius: var(--bf-radius-pill);
-    font-size: var(--bf-font-size-xs);
-    color: var(--bf-color-content-secondary);
-    background: var(--bf-color-surface-subtle);
-    border: 1px solid var(--bf-color-border-subtle);
-    white-space: nowrap;
+  &__tags {
+    flex: 1 1 auto;
+    gap: var(--bf-space-1);
     min-width: 0;
-    max-width: 100%;
     overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &__tag {
-    // Keep pills from shrinking; bound long labels and ellipsize their text.
     display: block;
-    flex: 0 0 auto;
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: 14ch;
+    min-height: 21px;
+    padding: 2px var(--bf-space-2);
     box-sizing: border-box;
-    max-width: min(100%, 16ch);
+    overflow: hidden;
+    border-radius: var(--bf-radius-xs);
+    background: var(--bf-color-surface-subtle);
+    color: var(--bf-color-content-secondary);
+    font-family: var(--bf-type-support-font-family);
+    font-size: var(--bf-type-support-font-size);
+    font-weight: var(--bf-type-support-font-weight);
+    line-height: var(--bf-type-support-line-height);
+    letter-spacing: var(--bf-type-support-letter-spacing);
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &__tag-overflow {
     flex: 0 0 auto;
-
-    &--compact {
-      display: none;
-    }
-  }
-
-  &__footer {
-    // Let actions wrap instead of taking width away from the tag labels.
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--bf-space-2);
-    width: 100%;
-    padding-top: var(--bf-space-2);
-    margin-top: auto;
-    box-sizing: border-box;
-    flex-shrink: 0;
-    position: relative;
-    z-index: 1;
-    background: transparent;
   }
 
   &__actions {
-    display: flex;
+    flex: 0 0 auto;
     margin-inline-start: auto;
-    align-items: center;
-    gap: var(--bf-space-1);
-    flex-shrink: 0;
-    position: relative;
-    z-index: 1;
   }
 }
 
-@container miniapp-card (max-width: 519px) {
-  .miniapp-card {
-    &__tag--compact-hidden,
-    &__tag-overflow--wide {
-      display: none;
-    }
-
-    &__tag-overflow--compact {
-      display: inline-flex;
-    }
-  }
-}
-
-// ── Animations ──
 @keyframes miniapp-card-in {
   from {
     opacity: 0;
-    transform: translateY(10px) scale(0.98);
+    transform: translateY(8px) scale(0.99);
   }
+
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
@@ -284,11 +230,9 @@
 }
 
 @keyframes miniapp-icon-pop {
-  0%   { opacity: 0; transform: scale(0.5) rotate(-12deg); }
-  55%  { opacity: 1; transform: scale(1.25) rotate(4deg); }
-  75%  { transform: scale(0.92) rotate(-2deg); }
-  90%  { transform: scale(1.06) rotate(1deg); }
-  100% { transform: scale(1) rotate(0deg); }
+  0% { opacity: 0; transform: scale(0.65); }
+  70% { opacity: 1; transform: scale(1.06); }
+  100% { transform: scale(1); }
 }
 
 @keyframes miniapp-card-status-pulse {
@@ -297,19 +241,8 @@
 }
 
 @media (max-width: 480px) {
-  .miniapp-card {
-    max-width: 100%;
-
-    &__main {
-      grid-template-columns: 56px minmax(0, 1fr);
-      gap: var(--bf-space-2);
-      padding: var(--bf-space-3);
-    }
-
-    &__icon-area {
-      max-width: 56px;
-    }
-
+  .miniapp-card__main {
+    padding: var(--bf-space-3);
   }
 }
 
diff --git a/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.tsx b/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.tsx
index 6e2b880ce4..e78f1094af 100644
--- a/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/components/MiniAppCard.tsx
@@ -1,8 +1,8 @@
-import { Icon, Button, IconButton } from '@bitfun/ui';
+import { Icon, IconButton } from '@bitfun/ui';
 import React from 'react';
 import { Play, Square } from 'lucide-react';
 import type { MiniAppMeta } from '@/infrastructure/api/service-api/MiniAppAPI';
-import { renderMiniAppIcon } from '../utils/miniAppIcons';
+import { getMiniAppIconAsset, renderMiniAppIcon } from '../utils/miniAppIcons';
 import { pickLocalizedString, pickLocalizedTags } from '../utils/pickLocalizedString';
 import { useI18n } from '@/infrastructure/i18n';
 import './MiniAppCard.scss';
@@ -21,7 +21,6 @@ interface MiniAppCardProps {
   marketReleaseNumber?: number;
   onOpenDetails: (app: MiniAppMeta) => void;
   onOpen: (id: string) => void;
-  onDelete: (id: string) => void;
   onStop?: (id: string) => void;
 }
 
@@ -33,20 +32,15 @@ const MiniAppCard: React.FC<MiniAppCardProps> = ({
   marketReleaseNumber,
   onOpenDetails,
   onOpen,
-  onDelete,
   onStop,
 }) => {
   const { t, currentLanguage } = useI18n('scenes/miniapp');
   const localizedName = pickLocalizedString(app, currentLanguage, 'name');
   const localizedDescription = pickLocalizedString(app, currentLanguage, 'description');
   const localizedTags = pickLocalizedTags(app, currentLanguage);
-  const displayedTags = localizedTags.slice(0, 3);
-  const compactOverflowTags = localizedTags.slice(2);
-  const wideOverflowTags = localizedTags.slice(3);
-  const handleDeleteClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onDelete(app.id);
-  };
+  const displayedTags = localizedTags.slice(0, 4);
+  const overflowTags = localizedTags.slice(4);
+  const iconAsset = getMiniAppIconAsset(app.id);
 
   const handleStopClick = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -62,6 +56,11 @@ const MiniAppCard: React.FC<MiniAppCardProps> = ({
     onOpenDetails(app);
   };
 
+  const handleMoreClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    handleOpenDetails();
+  };
+
   const handleCardKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (event.target !== event.currentTarget) return;
     if (event.key === 'Enter' || event.key === ' ') {
@@ -89,26 +88,34 @@ const MiniAppCard: React.FC<MiniAppCardProps> = ({
       aria-label={localizedName}
     >
       <div className="miniapp-card__main">
-        <div className="miniapp-card__icon-area" data-bf-component="mini-app-card" data-bf-part="iconArea">
-          <div className="miniapp-card__icon" data-bf-component="mini-app-card" data-bf-part="icon">
-            {renderMiniAppIcon(app.icon || 'box', 34)}
+        <div className="miniapp-card__header" data-bf-component="mini-app-card" data-bf-part="header">
+          <div className="miniapp-card__icon-area" data-bf-component="mini-app-card" data-bf-part="iconArea">
+            <div className="miniapp-card__icon" data-bf-component="mini-app-card" data-bf-part="icon">
+              {iconAsset ? (
+                <img className="miniapp-card__icon-image" src={iconAsset} alt="" aria-hidden="true" />
+              ) : renderMiniAppIcon(app.icon || 'box', 40)}
+            </div>
+          </div>
+          <div className="miniapp-card__header-actions">
+            {(isRunning || isCustomizing) && (
+              <span className="miniapp-card__status-dots" data-bf-component="mini-app-card" data-bf-part="status" aria-hidden="true">
+                {isRunning && <span className="miniapp-card__run-dot" />}
+                {isCustomizing && <span className="miniapp-card__customize-dot" />}
+              </span>
+            )}
+            <IconButton
+              aria-label={localizedName}
+              icon={<Icon name="more" size="sm" />}
+              onClick={handleMoreClick}
+              size="xs"
+              title={localizedName}
+            />
           </div>
         </div>
 
         <div className="miniapp-card__content">
-          <div className="miniapp-card__header" data-bf-component="mini-app-card" data-bf-part="header">
-            <div className="miniapp-card__title-group" data-bf-component="mini-app-card" data-bf-part="title">
-              <span className="miniapp-card__name" data-bf-component="mini-app-card" data-bf-part="name">{localizedName}</span>
-            </div>
-            <div className="miniapp-card__meta">
-              {(isRunning || isCustomizing) && (
-                <span className="miniapp-card__status-dots" data-bf-component="mini-app-card" data-bf-part="status" aria-hidden="true">
-                  {isRunning && <span className="miniapp-card__run-dot" />}
-                  {isCustomizing && <span className="miniapp-card__customize-dot" />}
-                </span>
-              )}
-              <span className="miniapp-card__version" data-bf-component="mini-app-card" data-bf-part="version">v{marketReleaseNumber ?? app.version}</span>
-            </div>
+          <div className="miniapp-card__title-group" data-bf-component="mini-app-card" data-bf-part="title">
+            <span className="miniapp-card__name" data-bf-component="mini-app-card" data-bf-part="name">{localizedName}</span>
           </div>
 
           <div className="miniapp-card__body" data-bf-component="mini-app-card" data-bf-part="body">
@@ -117,72 +124,49 @@ const MiniAppCard: React.FC<MiniAppCardProps> = ({
                 <span className="miniapp-card__desc-inner">{localizedDescription}</span>
               </div>
             ) : null}
-            <div className="miniapp-card__footer" data-bf-component="mini-app-card" data-bf-part="footer">
-              {localizedTags.length > 0 ? (
-                <div className="miniapp-card__tags" data-bf-component="mini-app-card" data-bf-part="tags">
-                  {displayedTags.map((tag, tagIndex) => (
-                    <span
-                      key={tag}
-                      className={[
-                        'miniapp-card__tag',
-                        tagIndex >= 2 && 'miniapp-card__tag--compact-hidden',
-                      ].filter(Boolean).join(' ')}
-                      title={tag}
-                    >
-                      {tag}
-                    </span>
-                  ))}
-                  {wideOverflowTags.length > 0 && (
-                    <span
-                      className="miniapp-card__tag-overflow miniapp-card__tag-overflow--wide"
-                      title={wideOverflowTags.join(', ')}
-                      aria-label={wideOverflowTags.join(', ')}
-                    >
-                      +{wideOverflowTags.length}
-                    </span>
-                  )}
-                  {compactOverflowTags.length > 0 && (
-                    <span
-                      className="miniapp-card__tag-overflow miniapp-card__tag-overflow--compact"
-                      title={compactOverflowTags.join(', ')}
-                      aria-label={compactOverflowTags.join(', ')}
-                    >
-                      +{compactOverflowTags.length}
-                    </span>
-                  )}
-                </div>
-              ) : null}
-              <div className="miniapp-card__actions" data-bf-component="mini-app-card" data-bf-part="actions" onClick={(e) => e.stopPropagation()}>
-                <Button
-                  variant="fill"
-                  size="sm"
-                  leadingIcon={<Play size={14} fill="currentColor" strokeWidth={0} />}
-                  onClick={handleOpenClick}
-                  aria-label={t('card.start')}
-                  title={t('card.start')}
-                >
-                  {t('card.start')}
-                </Button>
-                {isRunning && onStop ? (
-                  <IconButton
-                    size="sm"
-                    onClick={handleStopClick}
-                    aria-label={t('card.stop')}
-                    icon={<Square />}
-                    title={t('card.stop')}
-                  />
-                ) : (
-                  <IconButton
-                    size="sm"
-                    tone="danger"
-                    onClick={handleDeleteClick}
-                    aria-label={t('card.delete')}
-                    icon={<Icon name="delete" size="lg" />}
-                    title={t('card.delete')}
-                  />
-                )}
-              </div>
-            </div>
+          </div>
+        </div>
+
+        <div className="miniapp-card__footer" data-bf-component="mini-app-card" data-bf-part="footer">
+          <div className="miniapp-card__tags" data-bf-component="mini-app-card" data-bf-part="tags">
+            <span className="miniapp-card__tag" data-bf-component="mini-app-card" data-bf-part="version">
+              V{marketReleaseNumber ?? app.version}
+            </span>
+            {displayedTags.map((tag) => (
+              <span key={tag} className="miniapp-card__tag" title={tag}>{tag}</span>
+            ))}
+            {overflowTags.length > 0 ? (
+              <span
+                className="miniapp-card__tag miniapp-card__tag-overflow"
+                title={overflowTags.join(', ')}
+                aria-label={overflowTags.join(', ')}
+              >
+                +{overflowTags.length}
+              </span>
+            ) : null}
+          </div>
+          <div className="miniapp-card__actions" data-bf-component="mini-app-card" data-bf-part="actions" onClick={(event) => event.stopPropagation()}>
+            {isRunning && onStop ? (
+              <IconButton
+                aria-label={t('card.stop')}
+                icon={<Square size={10} fill="currentColor" />}
+                onClick={handleStopClick}
+                shape="circle"
+                size="xs"
+                title={t('card.stop')}
+                variant="primary"
+              />
+            ) : (
+              <IconButton
+                aria-label={t('card.start')}
+                icon={<Play size={10} fill="currentColor" strokeWidth={0} />}
+                onClick={handleOpenClick}
+                shape="circle"
+                size="xs"
+                title={t('card.start')}
+                variant="primary"
+              />
+            )}
           </div>
         </div>
       </div>
diff --git a/src/web-ui/src/app/scenes/miniapps/components/MiniAppDetailModal.scss b/src/web-ui/src/app/scenes/miniapps/components/MiniAppDetailModal.scss
index 782af16166..f9d7cea3e8 100644
--- a/src/web-ui/src/app/scenes/miniapps/components/MiniAppDetailModal.scss
+++ b/src/web-ui/src/app/scenes/miniapps/components/MiniAppDetailModal.scss
@@ -18,9 +18,11 @@
 
 .miniapp-detail-dialog__title {
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-lg);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-tight);
+  font-family: var(--bf-type-heading-section-font-family);
+  font-size: var(--bf-type-heading-section-font-size);
+  font-weight: var(--bf-type-heading-section-font-weight);
+  line-height: var(--bf-type-heading-section-line-height);
+  letter-spacing: var(--bf-type-heading-section-letter-spacing);
 }
 
 .miniapp-detail-dialog__body {
@@ -49,8 +51,11 @@
     padding: 0 var(--bf-space-3);
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-family: var(--bf-type-label-sm-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-label-sm-line-height);
+    letter-spacing: var(--bf-type-label-sm-letter-spacing);
   }
 
   &__hero {
@@ -117,25 +122,33 @@
   &__name {
     margin: 0;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-5xl);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-tight);
-    line-height: var(--bf-line-height-tight);
+    font-family: var(--bf-type-display-sm-font-family);
+    font-size: var(--bf-type-display-sm-font-size);
+    font-weight: var(--bf-type-display-sm-font-weight);
+    letter-spacing: var(--bf-type-display-sm-letter-spacing);
+    line-height: var(--bf-type-display-sm-line-height);
   }
 
   &__version {
     min-height: 34px;
     padding: 0 var(--bf-space-3);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-family: var(--bf-type-label-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-md-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
   }
 
   &__description {
     max-width: 720px;
     margin: 0;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-base);
-    line-height: var(--bf-line-height-relaxed);
+    font-family: var(--bf-type-body-md-font-family);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-body-md-font-weight);
+    line-height: var(--bf-type-body-md-line-height);
+    letter-spacing: var(--bf-type-body-md-letter-spacing);
   }
 
   &__tags {
@@ -150,7 +163,11 @@
     padding: 0 var(--bf-space-3);
     background: transparent;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-family: var(--bf-type-label-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-md-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
   }
 
   &__highlights {
@@ -165,8 +182,11 @@
   &__section-title {
     margin: 0;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-lg);
-    font-weight: var(--bf-font-weight-semibold);
+    font-family: var(--bf-type-heading-section-font-family);
+    font-size: var(--bf-type-heading-section-font-size);
+    font-weight: var(--bf-type-heading-section-font-weight);
+    line-height: var(--bf-type-heading-section-line-height);
+    letter-spacing: var(--bf-type-heading-section-letter-spacing);
   }
 
   &__highlight-grid {
@@ -206,9 +226,11 @@
     strong {
       overflow: hidden;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
-      line-height: var(--bf-line-height-base);
+      font-family: var(--bf-type-heading-card-font-family);
+      font-size: var(--bf-type-heading-card-font-size);
+      font-weight: var(--bf-type-heading-card-font-weight);
+      line-height: var(--bf-type-heading-card-line-height);
+      letter-spacing: var(--bf-type-heading-card-letter-spacing);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -217,8 +239,11 @@
       display: -webkit-box;
       overflow: hidden;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-base);
+      font-family: var(--bf-type-support-font-family);
+      font-size: var(--bf-type-support-font-size);
+      font-weight: var(--bf-type-support-font-weight);
+      line-height: var(--bf-type-support-line-height);
+      letter-spacing: var(--bf-type-support-letter-spacing);
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
     }
@@ -241,7 +266,11 @@
     min-width: 0;
     gap: var(--bf-space-2);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
 
     svg {
       flex-shrink: 0;
@@ -312,7 +341,7 @@
     }
 
     &__name {
-      font-size: var(--bf-font-size-4xl);
+      font-size: var(--bf-type-heading-display-font-size);
     }
 
     &__highlights {
diff --git a/src/web-ui/src/app/scenes/miniapps/utils/miniAppIcons.tsx b/src/web-ui/src/app/scenes/miniapps/utils/miniAppIcons.tsx
index 7d774794fe..b8b5681136 100644
--- a/src/web-ui/src/app/scenes/miniapps/utils/miniAppIcons.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/utils/miniAppIcons.tsx
@@ -1,5 +1,10 @@
 import React from 'react';
 import { Icon, type IconName, type IconSize } from '@bitfun/ui';
+import codingFootprintIcon from '@/assets/miniapps/catalog/coding-footprint.png';
+import dailyDivinationIcon from '@/assets/miniapps/catalog/daily-divination.png';
+import gomokuIcon from '@/assets/miniapps/catalog/gomoku.png';
+import pptLiveIcon from '@/assets/miniapps/catalog/ppt-live.png';
+import regexPlaygroundIcon from '@/assets/miniapps/catalog/regex-playground.png';
 import {
   Aperture,
   AppWindow,
@@ -65,6 +70,18 @@ const MINI_APP_ICONS = {
   Wrench,
 } satisfies Record<string, LucideIcon>;
 
+const BUILTIN_MINI_APP_ICON_ASSETS: Readonly<Record<string, string>> = {
+  'builtin-coding-selfie': codingFootprintIcon,
+  'builtin-daily-divination': dailyDivinationIcon,
+  'builtin-gomoku': gomokuIcon,
+  'builtin-ppt-live': pptLiveIcon,
+  'builtin-regex-playground': regexPlaygroundIcon,
+};
+
+export function getMiniAppIconAsset(id: string): string | undefined {
+  return BUILTIN_MINI_APP_ICON_ASSETS[id];
+}
+
 export function renderMiniAppIcon(name: string, size = 28): React.ReactNode {
   const key = name
     .split('-')
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.scss b/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.scss
index d063c48b7f..2afc1dd3c2 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.scss
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.scss
@@ -1,80 +1,50 @@
 .miniapp-gallery {
+  container-type: inline-size;
   background: var(--bf-color-surface-scene);
 
   .gallery-page-header {
     position: relative;
-    padding-block: var(--bf-space-6) var(--bf-space-5);
+    width: min(calc(100% - var(--bf-space-6)), 680px);
+    padding: var(--bf-space-10) 0 0;
     background: var(--bf-color-surface-scene);
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
   }
 
-  .gallery-zones {
-    gap: var(--bf-space-6);
-    padding-top: var(--bf-space-3);
+  .gallery-page-header__subtitle {
+    max-width: 410px;
   }
 
-  .gallery-zone {
-    gap: var(--bf-space-3);
+  .gallery-page-header__title {
+    white-space: nowrap;
   }
 
-  &__running-zone {
-    .gallery-zone__title {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--bf-space-2);
-
-      &::before {
-        content: '';
-        flex: 0 0 auto;
-        width: 8px;
-        height: 8px;
-        border-radius: var(--bf-radius-pill);
-        background: var(--bf-color-content-primary);
-        box-shadow: 0 0 0 2px var(--bf-color-action-neutral-surface-hover);
-      }
-    }
+  .gallery-page-header__actions {
+    padding-top: 0;
 
-    &:not(.is-empty) .gallery-zone__header {
-      min-height: 58px;
-      padding: 0 var(--bf-space-4);
-      border: 1px solid var(--bf-color-border-subtle);
-      border-radius: var(--bf-radius-lg);
-      background: var(--bf-color-surface-subtle);
-      box-sizing: border-box;
+    > :first-child {
+      width: 162px;
     }
+  }
 
-    &.is-empty {
-      display: grid;
-      grid-template-columns: max-content minmax(0, 1fr);
-      align-items: center;
-      min-height: 58px;
-      padding: 0 var(--bf-space-4);
-      column-gap: var(--bf-space-4);
-      border: 1px solid var(--bf-color-border-subtle);
-      border-radius: var(--bf-radius-lg);
-      background: var(--bf-color-surface-subtle);
-      box-sizing: border-box;
-
-      .gallery-zone__header {
-        min-height: 0;
-      }
+  .gallery-zones {
+    width: min(calc(100% - var(--bf-space-6)), 680px);
+    gap: var(--bf-space-6);
+    padding: var(--bf-space-6) 0 var(--bf-space-8);
+  }
 
-      .gallery-run-empty {
-        min-width: 0;
-        padding: 0;
-        overflow: hidden;
-        text-align: left;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
+  .gallery-zone {
+    gap: var(--bf-space-3);
   }
 
-  .gallery-page-header__actions {
-    > :first-child {
-      width: 220px;
-    }
+  &__running-zone .gallery-zone__title::before {
+    content: '';
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-inline-end: var(--bf-space-2);
+    border-radius: var(--bf-radius-pill);
+    background: var(--bf-color-status-success-content);
   }
 
   &__import-anchor {
@@ -82,18 +52,19 @@
   }
 
   &__card-grid {
-    justify-items: start;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    justify-items: stretch;
   }
 
   &__card-grid.gallery-grid--skeleton .gallery-skeleton-card {
     width: 100%;
-    max-width: 400px;
-    height: 152px;
-    min-height: 152px;
+    height: 193px;
+    min-height: 193px;
+    border-radius: var(--bf-radius-xl);
   }
 
   &__categories {
-    max-width: min(56vw, 720px);
+    max-width: 500px;
     overflow-x: auto;
     scrollbar-width: thin;
 
@@ -101,7 +72,50 @@
       flex: 0 0 auto;
     }
   }
+}
+
+@container (max-width: 760px) {
+  .miniapp-gallery {
+    .gallery-page-header {
+      flex-direction: column;
+      width: calc(100% - var(--bf-space-8));
+      padding-top: var(--bf-space-6);
+    }
+
+    .gallery-page-header__actions {
+      width: 100%;
+      flex-wrap: wrap;
+
+      > :first-child {
+        width: min(100%, 240px);
+      }
+    }
+
+    .gallery-zones {
+      width: calc(100% - var(--bf-space-8));
+      padding-top: var(--bf-space-5);
+    }
+
+    .gallery-zone__header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .gallery-zone__tools {
+      width: 100%;
+      margin-left: 0;
+      justify-content: flex-start;
+    }
+
+    &__card-grid {
+      grid-template-columns: 1fr;
+    }
 
+    &__categories {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
 }
 
 /* Positioning-only overrides; the design-system Menu owns the surface look. */
@@ -113,10 +127,10 @@
 
 @media (max-width: 720px) {
   .miniapp-gallery {
-    &__running-zone.is-empty {
-      grid-template-columns: max-content minmax(0, 1fr);
-      padding-inline: var(--bf-space-3);
-      column-gap: var(--bf-space-3);
+    .gallery-page-header {
+      flex-direction: column;
+      width: calc(100% - var(--bf-space-8));
+      padding-top: var(--bf-space-6);
     }
 
     .gallery-page-header__actions {
@@ -125,17 +139,17 @@
       }
     }
 
-    &__categories {
-      max-width: min(64vw, 520px);
+    .gallery-zones {
+      width: calc(100% - var(--bf-space-8));
+      padding-top: var(--bf-space-5);
     }
-  }
-}
 
-@media (max-width: 480px) {
-  .miniapp-gallery {
-    .miniapp-card,
-    &__card-grid.gallery-grid--skeleton .gallery-skeleton-card {
-      max-width: 100%;
+    &__card-grid {
+      grid-template-columns: 1fr;
+    }
+
+    &__categories {
+      max-width: calc(100vw - var(--bf-space-8));
     }
   }
 }
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.tsx b/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.tsx
index 75af63e965..d644ec8068 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppGalleryView.tsx
@@ -2,7 +2,10 @@ import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom';
 import {
   FolderPlus,
+  Gamepad2,
+  House,
   LayoutGrid,
+  Lightbulb,
   PackagePlus,
 } from 'lucide-react';
 import { open } from '@tauri-apps/plugin-dialog';
@@ -57,7 +60,11 @@ import './MiniAppGalleryView.scss';
 const log = createLogger('MiniAppGalleryView');
 const MINIAPP_CARD_MIN_WIDTH = 280;
 
-const MiniAppGalleryView: React.FC = () => {
+interface MiniAppGalleryViewProps {
+  tabs?: React.ReactNode;
+}
+
+const MiniAppGalleryView: React.FC<MiniAppGalleryViewProps> = ({ tabs }) => {
   const apps = useMiniAppStore((state) => state.apps);
   const loading = useMiniAppStore((state) => state.loading);
   const customizingAppIds = useMiniAppStore((state) => state.customizingAppIds);
@@ -409,7 +416,6 @@ const MiniAppGalleryView: React.FC = () => {
             marketReleaseNumber={marketOrigins[app.id]?.releaseNumber}
             onOpenDetails={setSelectedApp}
             onOpen={handleOpenApp}
-            onDelete={handleDeleteRequest}
             onStop={handleStopRunning}
           />
         ))}
@@ -434,7 +440,7 @@ const MiniAppGalleryView: React.FC = () => {
             <span className="miniapp-gallery__import-anchor">
               <IconButton
                 ref={importTriggerRef}
-                size="md"
+                size="xs"
                 onClick={() => setImportMenuOpen(open => !open)}
                 disabled={loading}
                 title={t('importAction')}
@@ -442,7 +448,7 @@ const MiniAppGalleryView: React.FC = () => {
                 aria-haspopup="menu"
                 aria-expanded={importMenuOpen}
                 data-testid="miniapp-import-action"
-                icon={<FolderPlus size={15} />}
+                icon={<Icon name="plus" size="sm" />}
               />
               {importMenuOpen ? createPortal(
                 <Menu
@@ -481,27 +487,28 @@ const MiniAppGalleryView: React.FC = () => {
               ) : null}
             </span>
             <IconButton
-              size="md"
-              variant="primary"
+              size="xs"
               onClick={() => void handleCreateWithCreative()}
               loading={creatingWithCreative}
               title={t('creationMode.action')}
               aria-label={t('creationMode.action')}
               data-testid="miniapp-create-action"
-              icon={<PackagePlus size={15} />}
+              icon={<Icon name="edit" size="sm" />}
             />
           </>
         )}
       />
 
+      {tabs}
+
       <div data-bf-component="miniapp-gallery-view" data-bf-part="content" className="gallery-zones">
-        <GalleryZone
-          title={t('running')}
-          data-testid="miniapp-running-zone"
-          className={activeApps.length === 0 ? 'miniapp-gallery__running-zone is-empty' : 'miniapp-gallery__running-zone'}
-          tools={activeApps.length > 0 ? <NumberBadge value={activeApps.length} /> : null}
-        >
-          {activeApps.length > 0 ? (
+        {activeApps.length > 0 ? (
+          <GalleryZone
+            title={t('running')}
+            titleAdornment={<NumberBadge value={activeApps.length} />}
+            data-testid="miniapp-running-zone"
+            className="miniapp-gallery__running-zone"
+          >
             <GalleryGrid minCardWidth={MINIAPP_CARD_MIN_WIDTH} className="miniapp-gallery__card-grid">
               {activeApps.map((app, index) => (
                 <MiniAppCard
@@ -513,48 +520,57 @@ const MiniAppGalleryView: React.FC = () => {
                   marketReleaseNumber={marketOrigins[app.id]?.releaseNumber}
                   onOpenDetails={setSelectedApp}
                   onOpen={handleOpenApp}
-                  onDelete={handleDeleteRequest}
                   onStop={handleStopRunning}
                 />
               ))}
             </GalleryGrid>
-          ) : (
-            <div className="gallery-run-empty">
-              {t('noRunningApps')}
-            </div>
-          )}
-        </GalleryZone>
+          </GalleryZone>
+        ) : null}
 
         <GalleryZone
           title={t('allApps')}
+          titleAdornment={<NumberBadge value={filtered.length} />}
           tools={(
-            <>
-              {categories.length > 1 ? (
-                <div
-                  data-bf-component="miniapp-gallery-view"
-                  data-bf-part="categoryFilters"
-                >
-                  <SegmentedControl
-                    className="miniapp-gallery__categories"
-                    options={categories.map((category) => ({
+            categories.length > 1 ? (
+              <div
+                data-bf-component="miniapp-gallery-view"
+                data-bf-part="categoryFilters"
+              >
+                <SegmentedControl
+                  className="miniapp-gallery__categories"
+                  options={categories.map((category) => {
+                    const normalizedCategory = category.toLowerCase();
+                    const categoryIcon = normalizedCategory === 'productivity'
+                      ? <Lightbulb size={12} />
+                      : normalizedCategory === 'developer'
+                        ? <Icon name="terminal" size="xs" aria-hidden />
+                        : normalizedCategory === 'lifestyle'
+                          ? <House size={12} />
+                          : normalizedCategory === 'game'
+                            ? <Gamepad2 size={12} />
+                            : undefined;
+                    return {
+                      icon: categoryIcon,
                       label: (
                         <span
                           data-bf-component="miniapp-gallery-view"
                           data-bf-part="categoryFilter"
                         >
-                          {category === 'all' ? t('all') : category}
+                          {category === 'all'
+                            ? t('all')
+                            : category.replace(/^./, (character) => character.toUpperCase())}
                         </span>
                       ),
                       value: category,
-                    }))}
-                    value={categoryFilter}
-                    onValueChange={setCategoryFilter}
-                    aria-label={t('allApps')}
-                  />
-                </div>
-              ) : null}
-              <span className="gallery-zone-count">{t('count', { count: filtered.length })}</span>
-            </>
+                    };
+                  })}
+                  value={categoryFilter}
+                  onValueChange={setCategoryFilter}
+                  aria-label={t('allApps')}
+                  variant="pills"
+                />
+              </div>
+            ) : null
           )}
         >
           {renderGrid()}
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.scss b/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.scss
index 8003d33a86..da58c50819 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.scss
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.scss
@@ -106,8 +106,11 @@
     strong {
       overflow: hidden;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-base);
-      font-weight: var(--bf-font-weight-semibold);
+      font-family: var(--bf-type-heading-card-font-family);
+      font-size: var(--bf-type-heading-card-font-size);
+      font-weight: var(--bf-type-heading-card-font-weight);
+      line-height: var(--bf-type-heading-card-line-height);
+      letter-spacing: var(--bf-type-heading-card-letter-spacing);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -118,8 +121,11 @@
       margin: 0;
       overflow: hidden;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-sm);
-      line-height: var(--bf-line-height-support);
+      font-family: var(--bf-type-support-font-family);
+      font-size: var(--bf-type-support-font-size);
+      font-weight: var(--bf-type-support-font-weight);
+      line-height: var(--bf-type-support-line-height);
+      letter-spacing: var(--bf-type-support-letter-spacing);
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
     }
@@ -130,7 +136,11 @@
     display: flex;
     align-items: center;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-family: var(--bf-type-meta-font-family);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-meta-font-weight);
+    line-height: var(--bf-type-meta-line-height);
+    letter-spacing: var(--bf-type-meta-letter-spacing);
   }
 
   &__eyebrow {
@@ -166,15 +176,21 @@
     // Same scale as the submission workspace: 13px/600 titles over 13px body.
     h4 {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
+      font-family: var(--bf-type-heading-card-font-family);
+      font-size: var(--bf-type-heading-card-font-size);
+      font-weight: var(--bf-type-heading-card-font-weight);
+      line-height: var(--bf-type-heading-card-line-height);
+      letter-spacing: var(--bf-type-heading-card-letter-spacing);
     }
 
     p,
     li {
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-sm);
-      line-height: var(--bf-line-height-relaxed);
+      font-family: var(--bf-type-body-sm-font-family);
+      font-size: var(--bf-type-body-sm-font-size);
+      font-weight: var(--bf-type-body-sm-font-weight);
+      line-height: var(--bf-type-body-sm-line-height);
+      letter-spacing: var(--bf-type-body-sm-letter-spacing);
     }
   }
 
@@ -184,7 +200,11 @@
     align-items: center;
     gap: var(--bf-space-1);
     color: var(--bf-color-status-success-content);
-    font-size: var(--bf-font-size-sm);
+    font-family: var(--bf-type-label-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-md-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-label-md-letter-spacing);
   }
 
   &__screenshots {
@@ -211,7 +231,11 @@
     border-radius: var(--bf-radius-lg);
     background: var(--bf-color-status-warning-surface);
     color: var(--bf-color-status-warning-content);
-    font-size: var(--bf-font-size-sm);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   &__rating {
@@ -226,7 +250,11 @@
     span {
       margin-left: var(--bf-space-2);
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-family: var(--bf-type-meta-font-family);
+      font-size: var(--bf-type-meta-font-size);
+      font-weight: var(--bf-type-meta-font-weight);
+      line-height: var(--bf-type-meta-line-height);
+      letter-spacing: var(--bf-type-meta-letter-spacing);
     }
   }
 
@@ -242,7 +270,11 @@
       border: 1px solid var(--bf-color-border-subtle);
       border-radius: var(--bf-radius-base);
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-sm);
+      font-family: var(--bf-type-body-sm-font-family);
+      font-size: var(--bf-type-body-sm-font-size);
+      font-weight: var(--bf-type-body-sm-font-weight);
+      line-height: var(--bf-type-body-sm-line-height);
+      letter-spacing: var(--bf-type-body-sm-letter-spacing);
     }
   }
 
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.tsx b/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.tsx
index c6ebc64734..a20544c443 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppMarketView.tsx
@@ -62,7 +62,11 @@ const CATEGORIES = [
   'other',
 ] as const;
 
-const MiniAppMarketView: React.FC = () => {
+interface MiniAppMarketViewProps {
+  tabs?: React.ReactNode;
+}
+
+const MiniAppMarketView: React.FC<MiniAppMarketViewProps> = ({ tabs }) => {
   const { t, formatNumber, currentLanguage } = useI18n('scenes/miniapp');
   const notification = useNotification();
   const { workspace } = useCurrentWorkspace();
@@ -288,6 +292,8 @@ const MiniAppMarketView: React.FC = () => {
         )}
       />
 
+      {tabs}
+
       <div
         className="gallery-zones"
         data-bf-component="miniapp-market-view"
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.scss b/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.scss
index c50a96a26a..8126d9cc0d 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.scss
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.scss
@@ -26,7 +26,11 @@
     gap: var(--bf-space-2);
     padding: 0 clamp(28px, 4vw, 64px) var(--bf-space-3);
     color: var(--bf-color-status-warning-content);
-    font-size: var(--bf-font-size-sm);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
 
     svg {
       flex: 0 0 auto;
@@ -69,8 +73,11 @@
       align-items: center;
       gap: var(--bf-space-2);
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
+      font-family: var(--bf-type-heading-card-font-family);
+      font-size: var(--bf-type-heading-card-font-size);
+      font-weight: var(--bf-type-heading-card-font-weight);
+      line-height: var(--bf-type-heading-card-line-height);
+      letter-spacing: var(--bf-type-heading-card-letter-spacing);
 
       svg {
         flex: 0 0 auto;
@@ -80,8 +87,11 @@
 
     p {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-relaxed);
+      font-family: var(--bf-type-support-font-family);
+      font-size: var(--bf-type-support-font-size);
+      font-weight: var(--bf-type-support-font-weight);
+      line-height: var(--bf-type-support-line-height);
+      letter-spacing: var(--bf-type-support-letter-spacing);
     }
   }
 
@@ -97,9 +107,11 @@
 
     > span {
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-medium);
-      letter-spacing: var(--bf-letter-spacing-subtle);
+      font-family: var(--bf-type-label-md-font-family);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-md-font-weight);
+      line-height: var(--bf-type-label-md-line-height);
+      letter-spacing: var(--bf-type-label-md-letter-spacing);
     }
 
     textarea {
@@ -113,9 +125,11 @@
       outline: none;
       background: transparent;
       color: var(--bf-color-content-primary);
-      font-family:var(--bf-font-family-sans);
-      font-size: var(--bf-font-size-sm);
-      line-height: var(--bf-line-height-base);
+      font-family: var(--bf-type-body-sm-font-family);
+      font-size: var(--bf-type-body-sm-font-size);
+      font-weight: var(--bf-type-body-sm-font-weight);
+      line-height: var(--bf-type-body-sm-line-height);
+      letter-spacing: var(--bf-type-body-sm-letter-spacing);
       resize: vertical;
       transition:
         border-color var(--bf-motion-duration-fast) ease,
@@ -157,15 +171,20 @@
 
     span {
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-medium);
-      letter-spacing: var(--bf-letter-spacing-subtle);
+      font-family: var(--bf-type-label-md-font-family);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-md-font-weight);
+      line-height: var(--bf-type-label-md-line-height);
+      letter-spacing: var(--bf-type-label-md-letter-spacing);
     }
 
     small {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-relaxed);
+      font-family: var(--bf-type-support-font-family);
+      font-size: var(--bf-type-support-font-size);
+      font-weight: var(--bf-type-support-font-weight);
+      line-height: var(--bf-type-support-line-height);
+      letter-spacing: var(--bf-type-support-letter-spacing);
     }
   }
 
@@ -189,7 +208,11 @@
       border-radius: var(--bf-radius-sm);
       background: var(--bf-color-action-quiet-hover);
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-sm);
+      font-family: var(--bf-type-body-sm-font-family);
+      font-size: var(--bf-type-body-sm-font-size);
+      font-weight: var(--bf-type-body-sm-font-weight);
+      line-height: var(--bf-type-body-sm-line-height);
+      letter-spacing: var(--bf-type-body-sm-letter-spacing);
 
       svg {
         color: var(--bf-color-content-muted);
@@ -229,12 +252,16 @@
       display: flex;
       justify-content: space-between;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
+      font-family: var(--bf-type-meta-font-family);
+      font-size: var(--bf-type-meta-font-size);
+      font-weight: var(--bf-type-meta-font-weight);
+      line-height: var(--bf-type-meta-line-height);
+      letter-spacing: var(--bf-type-meta-letter-spacing);
     }
 
     strong {
       color: var(--bf-color-content-primary);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
       font-variant-numeric: tabular-nums;
     }
 
@@ -277,13 +304,20 @@
 
     strong {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
+      font-family: var(--bf-type-heading-card-font-family);
+      font-size: var(--bf-type-heading-card-font-size);
+      font-weight: var(--bf-type-heading-card-font-weight);
+      line-height: var(--bf-type-heading-card-line-height);
+      letter-spacing: var(--bf-type-heading-card-letter-spacing);
     }
 
     small {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-family: var(--bf-type-meta-font-family);
+      font-size: var(--bf-type-meta-font-size);
+      font-weight: var(--bf-type-meta-font-weight);
+      line-height: var(--bf-type-meta-line-height);
+      letter-spacing: var(--bf-type-meta-letter-spacing);
     }
   }
 
@@ -308,15 +342,22 @@
   &__rejection {
     margin: 0;
     color: var(--bf-color-status-warning-content);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-relaxed);
+    font-family: var(--bf-type-support-font-family);
+    font-size: var(--bf-type-support-font-size);
+    font-weight: var(--bf-type-support-font-weight);
+    line-height: var(--bf-type-support-line-height);
+    letter-spacing: var(--bf-type-support-letter-spacing);
   }
 
   &__history-empty {
     padding: 32px 0;
     border-top: 1px solid var(--bf-color-border-subtle);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-body-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
     text-align: center;
   }
 }
diff --git a/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.tsx b/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.tsx
index d8b27e756a..c7b8d90984 100644
--- a/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/views/MiniAppSubmissionsView.tsx
@@ -60,7 +60,11 @@ async function loadCurrentClientVersion(): Promise<string | undefined> {
   }
 }
 
-const MiniAppSubmissionsView: React.FC = () => {
+interface MiniAppSubmissionsViewProps {
+  tabs?: React.ReactNode;
+}
+
+const MiniAppSubmissionsView: React.FC<MiniAppSubmissionsViewProps> = ({ tabs }) => {
   const { t } = useI18n('scenes/miniapp');
   const notification = useNotification();
   const { workspace } = useCurrentWorkspace();
@@ -241,6 +245,7 @@ const MiniAppSubmissionsView: React.FC = () => {
   if (!authResolved || loading) {
     return (
       <GalleryLayout className="miniapp-submissions">
+        {tabs}
         <div className="miniapp-submissions__loading"><Loader2 className="gallery-spinning" /></div>
       </GalleryLayout>
     );
@@ -253,6 +258,7 @@ const MiniAppSubmissionsView: React.FC = () => {
           title={t('market.submissions.title')}
           subtitle={t('market.submissions.subtitle')}
         />
+        {tabs}
         <GalleryEmpty
           icon={<Github size={36} />}
           message={t('market.submissions.signInRequired')}
@@ -278,6 +284,8 @@ const MiniAppSubmissionsView: React.FC = () => {
         )}
       />
 
+      {tabs}
+
       {localActionsDisabled ? (
         <div className="miniapp-submissions__remote-warning">
           <AlertTriangle size={16} />
diff --git a/src/web-ui/src/app/scenes/my-agent/InsightsScene.scss b/src/web-ui/src/app/scenes/my-agent/InsightsScene.scss
index b23ae494d8..74669b5b77 100644
--- a/src/web-ui/src/app/scenes/my-agent/InsightsScene.scss
+++ b/src/web-ui/src/app/scenes/my-agent/InsightsScene.scss
@@ -66,9 +66,9 @@ $ins-r-lg: 12px;
   height: 100%;
   overflow: hidden;
   animation: ins-fade-in 0.18s ease-out both;
-  font-family: var(--bf-font-family-sans);
-  font-size: var(--bf-font-size-base);
-  line-height: var(--bf-line-height-relaxed);
+  font-family: var(--bf-type-body-sm-font-family);
+  font-size: var(--bf-type-body-md-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
   color: var(--bf-color-content-primary);
   -webkit-font-smoothing: antialiased;
 }
@@ -98,15 +98,15 @@ $ins-r-lg: 12px;
 }
 
 .insights-scene__header-title {
-  font-size: var(--bf-font-size-3xl);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-heading-dialog-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
   margin: 0 0 2px;
-  letter-spacing: var(--bf-letter-spacing-normal);
+  letter-spacing: var(--bf-type-body-sm-letter-spacing);
 }
 
 .insights-scene__header-subtitle {
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
   color: var(--bf-color-content-muted);
   margin: 0;
 }
@@ -150,9 +150,9 @@ $ins-r-lg: 12px;
     width: 100%;
     overflow: hidden;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-dense);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-modifier-leading-dense-line-height);
     overflow-wrap: anywhere;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
@@ -163,8 +163,8 @@ $ins-r-lg: 12px;
     width: 100%;
     overflow: hidden;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-2xs);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-overline-sm-font-size);
+    line-height: var(--bf-type-label-md-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -176,9 +176,9 @@ $ins-r-lg: 12px;
 
   &__option-name {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-compact);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-meta-line-height);
     overflow-wrap: anywhere;
     white-space: normal;
   }
@@ -186,8 +186,8 @@ $ins-r-lg: 12px;
   &__option-meta {
     margin-top: 2px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-snug);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
     overflow-wrap: anywhere;
     white-space: normal;
   }
@@ -206,8 +206,8 @@ $ins-r-lg: 12px;
 }
 
 .insights-scene__control-label {
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-meta-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   color: var(--bf-color-content-muted);
   white-space: nowrap;
 }
@@ -221,7 +221,7 @@ $ins-r-lg: 12px;
   padding: 5px $ins-md;
   background: $ins-red-bg;
   border-radius: $ins-r-sm;
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
   color: $ins-red;
 
   span { flex: 1; }
@@ -257,16 +257,16 @@ $ins-r-lg: 12px;
 
   &__eyebrow {
     margin-bottom: 1px;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: $ins-blue;
-    letter-spacing: var(--bf-letter-spacing-normal);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   &__title {
-    font-size: var(--bf-font-size-lg);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-compact);
+    font-size: var(--bf-type-body-lg-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-meta-line-height);
     color: var(--bf-color-content-primary);
   }
 
@@ -274,8 +274,8 @@ $ins-r-lg: 12px;
     margin-top: 2px;
     overflow: hidden;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-ui);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -285,14 +285,14 @@ $ins-r-lg: 12px;
     align-items: center;
     gap: $ins-xs;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     white-space: nowrap;
 
     strong {
       min-width: 36px;
       color: var(--bf-color-content-secondary);
       font-variant-numeric: tabular-nums;
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
   }
 
@@ -354,9 +354,9 @@ $ins-r-lg: 12px;
 
   &__step-label {
     overflow: hidden;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-dense);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-modifier-leading-dense-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -379,10 +379,10 @@ $ins-r-lg: 12px;
 }
 
 .insights-scene__history-label {
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   text-transform: uppercase;
-  letter-spacing: var(--bf-letter-spacing-normal);
+  letter-spacing: var(--bf-type-body-sm-letter-spacing);
   color: var(--bf-color-content-muted);
 }
 
@@ -397,16 +397,16 @@ $ins-r-lg: 12px;
   border-radius: 9px;
   background: $ins-surface-soft;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-micro);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .insights-scene__history-hint {
-  font-weight: var(--bf-font-weight-regular);
+  font-weight: var(--bf-type-body-sm-font-weight);
   text-transform: none;
-  font-size: var(--bf-font-size-micro);
+  font-size: var(--bf-type-micro-font-size);
   opacity: 0.55;
-  letter-spacing: var(--bf-letter-spacing-normal);
+  letter-spacing: var(--bf-type-body-sm-letter-spacing);
   text-align: right;
 }
 
@@ -423,7 +423,7 @@ $ins-r-lg: 12px;
   text-align: center;
   padding: $ins-xl;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
 }
 
 .insights-scene__report-list {
@@ -479,14 +479,14 @@ $ins-r-lg: 12px;
   }
 
   &__date {
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     transition: color 0.2s;
   }
 
   &__range {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-muted);
     flex-shrink: 0;
   }
@@ -510,15 +510,15 @@ $ins-r-lg: 12px;
       display: flex;
       min-width: 0;
       flex-direction: column;
-      font-size: var(--bf-font-size-micro);
-      line-height: var(--bf-line-height-dense);
+      font-size: var(--bf-type-micro-font-size);
+      line-height: var(--bf-type-modifier-leading-dense-line-height);
     }
 
     strong {
       overflow: hidden;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -539,8 +539,8 @@ $ins-r-lg: 12px;
       align-items: center;
       gap: 3px;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-micro);
-      line-height: var(--bf-line-height-snug);
+      font-size: var(--bf-type-micro-font-size);
+      line-height: var(--bf-type-modifier-leading-snug-line-height);
     }
 
   }
@@ -553,7 +553,7 @@ $ins-r-lg: 12px;
   }
 
   &__tag {
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     padding: 1px 6px;
     border-radius: 3px;
     background: $ins-blue-bg;
@@ -577,8 +577,8 @@ $ins-r-lg: 12px;
     padding-top: $ins-sm;
     border-top: 1px solid $ins-border;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-2xs);
-    line-height: var(--bf-line-height-snug);
+    font-size: var(--bf-type-overline-sm-font-size);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
     opacity: 0.72;
 
     > span {
@@ -674,7 +674,7 @@ $ins-r-lg: 12px;
     align-items: center;
     gap: $ins-lg;
     margin-left: auto;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-muted);
     flex-shrink: 0;
 
@@ -734,10 +734,10 @@ $ins-r-lg: 12px;
 
   &__title {
     margin: 0;
-    font-size: var(--bf-font-size-4xl);
-    font-weight: var(--bf-font-weight-bold);
-    letter-spacing: var(--bf-letter-spacing-tighter);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-heading-display-font-size);
+    font-weight: var(--bf-type-heading-page-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-tighter-letter-spacing);
+    line-height: var(--bf-type-label-md-line-height);
     background: linear-gradient(
       135deg,
       var(--bf-color-content-primary) 0%,
@@ -772,10 +772,10 @@ $ins-r-lg: 12px;
 
   // Section group label (reserved) - keeps structure flexible
   &__group-label {
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     color: var(--bf-color-content-muted);
     opacity: 0.5;
     padding: $ins-sm $ins-sm $ins-xs;
@@ -790,12 +790,12 @@ $ins-r-lg: 12px;
     border: none;
     background: transparent;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     text-align: left;
     cursor: pointer;
     transition: color 0.15s, background 0.15s;
     border-radius: $ins-r-sm;
-    line-height: var(--bf-line-height-compact);
+    line-height: var(--bf-type-meta-line-height);
 
     // Active indicator pill on left edge
     &::before {
@@ -822,7 +822,7 @@ $ins-r-lg: 12px;
 
     &.is-active {
       color: var(--bf-color-content-primary);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       background: $ins-blue-bg;
 
       &::before {
@@ -836,7 +836,7 @@ $ins-r-lg: 12px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 }
 
@@ -853,9 +853,9 @@ $ins-r-lg: 12px;
   display: flex;
   align-items: center;
   gap: $ins-sm;
-  font-size: var(--bf-font-size-2xl);
-  font-weight: var(--bf-font-weight-bold);
-  letter-spacing: var(--bf-letter-spacing-tight);
+  font-size: var(--bf-type-flow-section-title-font-size);
+  font-weight: var(--bf-type-heading-page-font-weight);
+  letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
   color: var(--bf-color-content-primary);
   margin: 0 0 $ins-lg;
   padding: 0;
@@ -875,18 +875,18 @@ $ins-r-lg: 12px;
 
 .insights-section h3 { @extend %ins-section-heading; }
 .insights-section h4 {
-  font-size: var(--bf-font-size-base);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-secondary);
   margin: $ins-lg 0 $ins-sm;
-  letter-spacing: var(--bf-letter-spacing-snug);
+  letter-spacing: var(--bf-type-flow-title-letter-spacing);
 }
 
 .insights-section-intro {
-  font-size: var(--bf-font-size-base);
+  font-size: var(--bf-type-body-md-font-size);
   color: var(--bf-color-content-muted);
   margin: -$ins-sm 0 $ins-lg;
-  line-height: var(--bf-line-height-spacious);
+  line-height: var(--bf-type-modifier-leading-spacious-line-height);
 }
 
 // ============================================================
@@ -907,10 +907,10 @@ $ins-r-lg: 12px;
   &:hover { border-color: var(--bf-color-field-border-hover); }
 
   &__title {
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     color: $ins-blue;
     margin: 0 0 $ins-md;
   }
@@ -922,9 +922,9 @@ $ins-r-lg: 12px;
   }
 
   &__item {
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-spacious);
+    line-height: var(--bf-type-modifier-leading-spacious-line-height);
     padding: $ins-md 0;
     border-bottom: 1px solid $ins-border;
 
@@ -933,8 +933,8 @@ $ins-r-lg: 12px;
 
     strong {
       color: var(--bf-color-content-primary);
-      font-weight: var(--bf-font-weight-semibold);
-      letter-spacing: var(--bf-letter-spacing-snug);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      letter-spacing: var(--bf-type-flow-title-letter-spacing);
     }
   }
 }
@@ -986,18 +986,18 @@ $ins-r-lg: 12px;
   }
 
   &__value {
-    font-size: var(--bf-font-size-3xl);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-heading-dialog-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
-    letter-spacing: var(--bf-letter-spacing-tight);
-    line-height: var(--bf-line-height-tight);
+    letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
+    line-height: var(--bf-type-label-md-line-height);
   }
 
   &__label {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wide);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
     margin-top: 4px;
   }
 }
@@ -1022,10 +1022,10 @@ $ins-r-lg: 12px;
   padding: 0;
 
   &__title {
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     color: var(--bf-color-content-muted);
     margin-bottom: $ins-md;
     opacity: 0.6;
@@ -1041,7 +1041,7 @@ $ins-r-lg: 12px;
 
   &__label {
     width: 88px;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-muted);
     flex-shrink: 0;
     overflow: hidden;
@@ -1067,8 +1067,8 @@ $ins-r-lg: 12px;
 
   &__value {
     width: 30px;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-muted);
     text-align: right;
   }
@@ -1097,9 +1097,9 @@ $ins-r-lg: 12px;
   margin-bottom: $ins-lg;
 
   &__narrative {
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-spacious);
+    line-height: var(--bf-type-modifier-leading-spacious-line-height);
     margin: 0 0 $ins-md;
   }
 
@@ -1110,9 +1110,9 @@ $ins-r-lg: 12px;
   }
 
   &__pattern {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     padding: $ins-sm 0;
     border-bottom: 1px solid $ins-border;
 
@@ -1149,22 +1149,22 @@ $ins-r-lg: 12px;
   }
 
   &__name {
-    font-weight: var(--bf-font-weight-semibold);
-    font-size: var(--bf-font-size-base);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-content-primary);
-    letter-spacing: var(--bf-letter-spacing-snug);
+    letter-spacing: var(--bf-type-flow-title-letter-spacing);
   }
 
   &__count {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-muted);
     flex-shrink: 0;
   }
 
   &__desc {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     margin: 0;
   }
 }
@@ -1180,17 +1180,17 @@ $ins-r-lg: 12px;
   &:first-child { border-top: 1px solid $ins-border; }
 
   &__title {
-    font-weight: var(--bf-font-weight-semibold);
-    font-size: var(--bf-font-size-base);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-content-primary);
-    letter-spacing: var(--bf-letter-spacing-snug);
+    letter-spacing: var(--bf-type-flow-title-letter-spacing);
     margin: 0 0 4px;
   }
 
   &__desc {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     margin: 0;
   }
 
@@ -1198,17 +1198,17 @@ $ins-r-lg: 12px;
   &__impact {
     display: flex;
     gap: 6px;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     margin: $ins-sm 0 0;
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
 
     &::before {
       content: '→';
       color: $ins-blue;
       flex-shrink: 0;
-      font-weight: var(--bf-font-weight-regular);
+      font-weight: var(--bf-type-body-sm-font-weight);
     }
   }
 }
@@ -1224,23 +1224,23 @@ $ins-r-lg: 12px;
   &:first-child { border-top: 1px solid $ins-border; }
 
   &__title {
-    font-weight: var(--bf-font-weight-semibold);
-    font-size: var(--bf-font-size-base);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-content-primary);
-    letter-spacing: var(--bf-letter-spacing-snug);
+    letter-spacing: var(--bf-type-flow-title-letter-spacing);
     margin: 0 0 4px;
   }
 
   &__desc {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     margin: 0;
   }
 
   &__examples {
     margin: $ins-xs 0 0 $ins-md;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-muted);
     list-style: none;
     padding: 0;
@@ -1256,16 +1256,16 @@ $ins-r-lg: 12px;
     display: flex;
     gap: 6px;
     margin-top: $ins-sm;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
-    line-height: var(--bf-line-height-comfortable);
+    line-height: var(--bf-type-support-line-height);
 
     &::before {
       content: '→';
       color: $ins-blue;
       flex-shrink: 0;
-      font-weight: var(--bf-font-weight-regular);
+      font-weight: var(--bf-type-body-sm-font-weight);
     }
   }
 }
@@ -1281,20 +1281,20 @@ $ins-r-lg: 12px;
   border-radius: $ins-r;
   padding: $ins-md $ins-lg;
   margin-bottom: $ins-md;
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
   color: var(--bf-color-content-primary);
-  line-height: var(--bf-line-height-spacious);
+  line-height: var(--bf-type-modifier-leading-spacious-line-height);
 }
 
 // Conclusion line: single-sentence summary at end of each section
 .insights-conclusion-line {
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   color: var(--bf-color-content-primary);
   padding-top: $ins-sm;
   border-top: 1px solid $ins-border;
   margin-top: $ins-md;
-  line-height: var(--bf-line-height-relaxed);
+  line-height: var(--bf-type-body-lg-line-height);
 }
 
 // Key metric inline: used inside paragraphs, not standalone
@@ -1305,15 +1305,15 @@ $ins-r-lg: 12px;
   gap: 3px;
 
   &__value {
-    font-size: var(--bf-font-size-xl);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-tight);
+    font-size: var(--bf-type-flow-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
     color: $ins-blue;
-    line-height: var(--bf-line-height-none);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
   }
 
   &__unit {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
   }
 }
@@ -1324,7 +1324,7 @@ $ins-r-lg: 12px;
 
 .insights-report-body {
   strong {
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
   }
 
@@ -1359,20 +1359,20 @@ $ins-r-lg: 12px;
 
   &__badge {
     display: inline-block;
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-muted);
     background: $ins-surface-soft;
     border: 1px solid $ins-border;
     border-radius: $ins-r-sm;
     padding: 2px 7px;
-    letter-spacing: var(--bf-letter-spacing-wide);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
   }
 
   &__rationale {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     margin: $ins-xs 0 0;
     font-style: italic;
   }
@@ -1396,10 +1396,10 @@ $ins-r-lg: 12px;
   &:first-of-type { border-top: 1px solid $ins-border; }
 
   &__index {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: $ins-blue;
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
     min-width: 18px;
     flex-shrink: 0;
     opacity: 0.7;
@@ -1412,24 +1412,24 @@ $ins-r-lg: 12px;
   }
 
   &__title {
-    font-weight: var(--bf-font-weight-semibold);
-    font-size: var(--bf-font-size-base);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-content-primary);
-    letter-spacing: var(--bf-letter-spacing-snug);
+    letter-spacing: var(--bf-type-flow-title-letter-spacing);
     margin: 0 0 3px;
   }
 
   &__desc {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     margin: 0;
   }
 
   &__benefit {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-comfortable);
+    line-height: var(--bf-type-support-line-height);
     margin: 4px 0 0;
     font-style: italic;
   }
@@ -1450,17 +1450,17 @@ $ins-r-lg: 12px;
   &:first-of-type { border-top: 1px solid $ins-border; }
 
   &__title {
-    font-weight: var(--bf-font-weight-semibold);
-    font-size: var(--bf-font-size-base);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-content-primary);
-    letter-spacing: var(--bf-letter-spacing-snug);
+    letter-spacing: var(--bf-type-flow-title-letter-spacing);
     margin: 0 0 3px;
   }
 
   &__desc {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     margin: 0;
   }
 }
@@ -1471,10 +1471,10 @@ $ins-r-lg: 12px;
   margin-top: $ins-sm;
 
   &__label {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     color: var(--bf-color-content-muted);
     margin-bottom: $ins-xs;
     opacity: 0.7;
@@ -1498,12 +1498,12 @@ $ins-r-lg: 12px;
     // right padding reserves space for the button
     padding: $ins-sm 40px $ins-sm $ins-md;
     border-radius: $ins-r-sm;
-    font-size: var(--bf-font-size-sm);
-    font-family: var(--bf-font-family-mono);
+    font-size: var(--bf-type-label-md-font-size);
+    font-family: var(--bf-type-code-md-font-family);
     color: var(--bf-color-content-primary);
     white-space: pre-wrap;
     word-break: break-word;
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     transition: border-color 0.15s;
 
     .insights-copyable__row:hover & { border-color: $ins-border-hover; }
@@ -1559,11 +1559,11 @@ $ins-r-lg: 12px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-bold);
-    letter-spacing: var(--bf-letter-spacing-normal);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-heading-page-font-weight);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
     color: $ins-blue;
-    line-height: var(--bf-line-height-none);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     flex-shrink: 0;
     width: 24px;
     height: 24px;
@@ -1578,17 +1578,17 @@ $ins-r-lg: 12px;
   }
 
   &__title {
-    font-weight: var(--bf-font-weight-semibold);
-    font-size: var(--bf-font-size-base);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-content-primary);
-    letter-spacing: var(--bf-letter-spacing-snug);
+    letter-spacing: var(--bf-type-flow-title-letter-spacing);
     margin: 0 0 5px;
   }
 
   &__desc {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     margin: 0;
   }
 
@@ -1600,16 +1600,16 @@ $ins-r-lg: 12px;
     margin-top: $ins-md;
     padding-top: $ins-md;
     border-top: 1px solid $ins-border;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-comfortable);
+    line-height: var(--bf-type-support-line-height);
   }
 
   &__how-label {
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     color: $ins-blue;
     flex-shrink: 0;
     opacity: 0.8;
@@ -1647,18 +1647,18 @@ $ins-r-lg: 12px;
   }
 
   &__headline {
-    font-size: var(--bf-font-size-2xl);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-flow-section-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     margin: 0 0 $ins-sm;
-    letter-spacing: var(--bf-letter-spacing-tight);
-    line-height: var(--bf-line-height-dense);
+    letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
+    line-height: var(--bf-type-modifier-leading-dense-line-height);
   }
 
   &__message {
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-spacious);
+    line-height: var(--bf-type-modifier-leading-spacious-line-height);
     margin: 0;
     max-width: none;
     text-align: left;
diff --git a/src/web-ui/src/app/scenes/pages/PagesScene.scss b/src/web-ui/src/app/scenes/pages/PagesScene.scss
index fdd5e364b4..34f9d20e25 100644
--- a/src/web-ui/src/app/scenes/pages/PagesScene.scss
+++ b/src/web-ui/src/app/scenes/pages/PagesScene.scss
@@ -50,8 +50,8 @@ $pages-gutter: clamp(24px, 4vw, 56px);
     border-radius: 999px;
     background: var(--bf-color-action-quiet-hover);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
 
     svg {
       color: var(--bf-color-content-muted);
@@ -98,7 +98,7 @@ $pages-gutter: clamp(24px, 4vw, 56px);
     border-radius: var(--bf-radius-base);
     background: var(--bf-color-status-danger-surface);
     color: var(--bf-color-status-danger-content);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
 
     small {
       min-width: 0;
@@ -185,9 +185,9 @@ $pages-gutter: clamp(24px, 4vw, 56px);
       margin: 0;
       overflow: hidden;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xl);
-      font-weight: var(--bf-font-weight-semibold);
-      line-height: var(--bf-line-height-snug);
+      font-size: var(--bf-type-flow-title-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      line-height: var(--bf-type-modifier-leading-snug-line-height);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -200,8 +200,8 @@ $pages-gutter: clamp(24px, 4vw, 56px);
     border-radius: var(--bf-radius-sm);
     background: var(--bf-color-action-quiet-hover);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-ui);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -217,8 +217,8 @@ $pages-gutter: clamp(24px, 4vw, 56px);
     border-radius: 999px;
     background: var(--bf-color-action-quiet-hover);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
 
     &.is-deployed {
       border-color: color-mix(in srgb, var(--bf-color-status-success-content) 36%, var(--bf-color-border-subtle));
@@ -254,7 +254,7 @@ $pages-gutter: clamp(24px, 4vw, 56px);
     align-items: center;
     gap: 5px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     svg {
       flex-shrink: 0;
@@ -299,15 +299,15 @@ $pages-gutter: clamp(24px, 4vw, 56px);
 
     h4 {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      line-height: var(--bf-type-body-sm-line-height);
     }
 
     p {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
     }
   }
 
@@ -334,8 +334,8 @@ $pages-gutter: clamp(24px, 4vw, 56px);
 
   &__setting-label {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__title-control {
@@ -364,8 +364,8 @@ $pages-gutter: clamp(24px, 4vw, 56px);
     align-items: center;
     gap: 6px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     text-align: left;
 
     svg {
@@ -391,14 +391,14 @@ $pages-gutter: clamp(24px, 4vw, 56px);
 
     strong {
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     span {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
     }
   }
 
@@ -437,8 +437,8 @@ $pages-gutter: clamp(24px, 4vw, 56px);
     border-radius: 999px;
     background: color-mix(in srgb, var(--bf-color-accent-default) 14%, transparent);
     color: var(--bf-color-accent-default);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   // ── Versions accordion ──────────────────────────────────────────
@@ -464,8 +464,8 @@ $pages-gutter: clamp(24px, 4vw, 56px);
       align-items: center;
       gap: 6px;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
 
       svg {
         color: var(--bf-color-content-muted);
@@ -477,7 +477,7 @@ $pages-gutter: clamp(24px, 4vw, 56px);
     margin: 0;
     padding: var(--bf-space-4);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     text-align: center;
   }
 
@@ -522,14 +522,14 @@ $pages-gutter: clamp(24px, 4vw, 56px);
 
     code {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
 
     > span,
     p {
       margin: 0;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-meta);
+      font-size: var(--bf-type-meta-font-size);
       overflow-wrap: anywhere;
     }
   }
@@ -552,8 +552,8 @@ $pages-gutter: clamp(24px, 4vw, 56px);
     border-radius: 999px;
     background: var(--bf-color-action-quiet-hover);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__current-badge {
diff --git a/src/web-ui/src/app/scenes/profile/views/AssistantDefaultsPage.scss b/src/web-ui/src/app/scenes/profile/views/AssistantDefaultsPage.scss
index 0782522e68..b4a7f9e4c8 100644
--- a/src/web-ui/src/app/scenes/profile/views/AssistantDefaultsPage.scss
+++ b/src/web-ui/src/app/scenes/profile/views/AssistantDefaultsPage.scss
@@ -30,8 +30,8 @@ $assistant-defaults-row-columns:
       max-width: 760px;
       margin: var(--bf-space-2) 0 0 34px;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-lg-line-height);
     }
   }
 
@@ -46,10 +46,10 @@ $assistant-defaults-row-columns:
       min-width: 0;
       margin: 0;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-3xl);
-      font-weight: var(--bf-font-weight-semibold);
-      line-height: var(--bf-line-height-tight);
-      letter-spacing: var(--bf-letter-spacing-tight);
+      font-size: var(--bf-type-heading-dialog-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      line-height: var(--bf-type-label-md-line-height);
+      letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
     }
   }
 
@@ -61,7 +61,7 @@ $assistant-defaults-row-columns:
     border: 1px solid var(--bf-color-border-subtle);
     border-radius: var(--bf-radius-pill);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     white-space: nowrap;
   }
 
@@ -77,7 +77,7 @@ $assistant-defaults-row-columns:
     align-items: center;
     gap: 6px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     white-space: nowrap;
 
     &--saved {
@@ -97,7 +97,7 @@ $assistant-defaults-row-columns:
     justify-content: center;
     gap: var(--bf-space-3);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__workspace {
@@ -127,7 +127,7 @@ $assistant-defaults-row-columns:
     border-radius: var(--bf-radius-base);
     background: color-mix(in srgb, var(--bf-color-status-warning-content) 7%, transparent);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     > svg {
       flex: 0 0 auto;
@@ -143,7 +143,7 @@ $assistant-defaults-row-columns:
   &__footer {
     padding: var(--bf-space-3) 0 0;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 }
 
@@ -175,15 +175,15 @@ $assistant-defaults-row-columns:
 
   span {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   strong {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-3xl);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-none);
-    letter-spacing: var(--bf-letter-spacing-tight);
+    font-size: var(--bf-type-heading-dialog-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
+    letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
   }
 }
 
@@ -209,9 +209,9 @@ $assistant-defaults-row-columns:
     border-radius: calc(var(--bf-radius-lg) - 3px);
     background: transparent;
     color: var(--bf-color-content-secondary);
-    font-family:var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-family:var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     cursor: pointer;
     transition:
       background var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -239,8 +239,8 @@ $assistant-defaults-row-columns:
       border-radius: var(--bf-radius-pill);
       background: color-mix(in srgb, currentColor 10%, transparent);
       color: inherit;
-      font-size: var(--bf-font-size-meta);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-meta-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
   }
 }
@@ -277,7 +277,7 @@ $assistant-defaults-row-columns:
     background: transparent;
     color: var(--bf-color-content-secondary);
     font: inherit;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     white-space: nowrap;
     cursor: pointer;
     transition:
@@ -318,8 +318,8 @@ $assistant-defaults-row-columns:
     border-bottom: 1px solid var(--bf-color-border-subtle);
     background: var(--bf-color-surface-scene);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
 
     > div {
       min-width: 0;
@@ -413,24 +413,24 @@ $assistant-defaults-row-columns:
 
     strong {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-semibold);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      line-height: var(--bf-type-body-sm-line-height);
       white-space: nowrap;
     }
 
     > span {
       display: block;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
       white-space: nowrap;
     }
 
     small {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-meta);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-meta-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
       white-space: nowrap;
     }
   }
@@ -440,18 +440,18 @@ $assistant-defaults-row-columns:
     padding: 0 var(--bf-space-3);
     overflow: hidden;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   &__source {
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
   }
 
   &__difference {
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__actions {
@@ -492,7 +492,7 @@ $assistant-defaults-row-columns:
   align-items: center;
   gap: 6px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   white-space: nowrap;
 
   &__dot {
@@ -521,8 +521,8 @@ $assistant-defaults-row-columns:
   border-radius: var(--bf-radius-base);
   background: var(--bf-color-action-quiet-hover);
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-meta-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
 
   &--muted {
     background: transparent;
@@ -618,19 +618,19 @@ $assistant-defaults-row-columns:
 
     strong {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     span {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-meta);
+      font-size: var(--bf-type-meta-font-size);
     }
   }
 
   &__count {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     white-space: nowrap;
   }
 
@@ -638,7 +638,7 @@ $assistant-defaults-row-columns:
     margin: 0;
     padding: var(--bf-space-3) var(--bf-space-8);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 }
 
@@ -655,8 +655,8 @@ $assistant-defaults-row-columns:
   p {
     max-width: 420px;
     margin: 0;
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-relaxed);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
   }
 
 }
@@ -691,13 +691,13 @@ $assistant-defaults-row-columns:
 
     strong {
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     span {
-      font-size: var(--bf-font-size-meta);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-meta-font-size);
+      line-height: var(--bf-type-body-lg-line-height);
     }
   }
 
@@ -719,10 +719,10 @@ $assistant-defaults-row-columns:
       margin: 2px 0 0;
       overflow-wrap: anywhere;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-2xl);
-      font-weight: var(--bf-font-weight-semibold);
-      line-height: var(--bf-line-height-tight);
-      letter-spacing: var(--bf-letter-spacing-tight);
+      font-size: var(--bf-type-flow-section-title-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      line-height: var(--bf-type-label-md-line-height);
+      letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
     }
 
     > button {
@@ -748,9 +748,9 @@ $assistant-defaults-row-columns:
 
   &__eyebrow {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-widest);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-widest-letter-spacing);
     text-transform: uppercase;
   }
 
@@ -772,8 +772,8 @@ $assistant-defaults-row-columns:
       h4 {
         margin: 0 0 var(--bf-space-3);
         color: var(--bf-color-content-primary);
-        font-size: var(--bf-font-size-xs);
-        font-weight: var(--bf-font-weight-semibold);
+        font-size: var(--bf-type-label-sm-font-size);
+        font-weight: var(--bf-type-label-selected-font-weight);
       }
 
       dl {
@@ -789,8 +789,8 @@ $assistant-defaults-row-columns:
     margin: 0;
     padding: var(--bf-space-3) 0;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-relaxed);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
   }
 
   &__field {
@@ -802,8 +802,8 @@ $assistant-defaults-row-columns:
     dd {
       min-width: 0;
       margin: 0;
-      font-size: var(--bf-font-size-meta);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-meta-font-size);
+      line-height: var(--bf-type-body-lg-line-height);
     }
 
     dt {
@@ -824,15 +824,15 @@ $assistant-defaults-row-columns:
 
     strong {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     p {
       margin: var(--bf-space-2) 0 0;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-meta);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-meta-font-size);
+      line-height: var(--bf-type-body-lg-line-height);
     }
   }
 
@@ -851,14 +851,14 @@ $assistant-defaults-row-columns:
 
       strong {
         color: var(--bf-color-content-primary);
-        font-size: var(--bf-font-size-xs);
-        font-weight: var(--bf-font-weight-medium);
+        font-size: var(--bf-type-label-sm-font-size);
+        font-weight: var(--bf-type-label-sm-font-weight);
       }
 
       span {
         color: var(--bf-color-content-muted);
-        font-size: var(--bf-font-size-meta);
-        line-height: var(--bf-line-height-relaxed);
+        font-size: var(--bf-type-meta-font-size);
+        line-height: var(--bf-type-body-lg-line-height);
       }
     }
   }
@@ -866,8 +866,8 @@ $assistant-defaults-row-columns:
   &__note {
     margin: 0;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-relaxed);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
   }
 }
 
@@ -1025,18 +1025,18 @@ $assistant-defaults-row-columns:
 
   .assistant-defaults-summary {
     strong {
-      font-size: var(--bf-font-size-3xl);
+      font-size: var(--bf-type-heading-dialog-font-size);
     }
 
     span {
-      font-size: var(--bf-font-size-meta);
+      font-size: var(--bf-type-meta-font-size);
     }
   }
 
   .assistant-defaults-tabs button {
     min-height: 34px;
     padding: 0 var(--bf-space-2);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     small {
       display: none;
diff --git a/src/web-ui/src/app/scenes/profile/views/AssistantQuickInput.scss b/src/web-ui/src/app/scenes/profile/views/AssistantQuickInput.scss
index a82b51fe4c..2dd51df930 100644
--- a/src/web-ui/src/app/scenes/profile/views/AssistantQuickInput.scss
+++ b/src/web-ui/src/app/scenes/profile/views/AssistantQuickInput.scss
@@ -24,7 +24,7 @@
   }
 
   &__hint {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
     opacity: 0.72;
     user-select: none;
diff --git a/src/web-ui/src/app/scenes/profile/views/NurseryView.scss b/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
index a81acccfec..4ec7bf2694 100644
--- a/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
+++ b/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
@@ -35,15 +35,15 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
     &__title {
       margin-bottom: var(--bf-space-2);
       color: var(--bf-color-content-on-light);
-      font-size: var(--bf-font-size-4xl);
-      font-weight: var(--bf-font-weight-semibold);
-      line-height: var(--bf-line-height-display);
-      letter-spacing: var(--bf-letter-spacing-tighter);
+      font-size: var(--bf-type-heading-display-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      line-height: var(--bf-type-display-sm-line-height);
+      letter-spacing: var(--bf-type-modifier-tracking-tighter-letter-spacing);
     }
 
     &__subtitle {
       color: var(--bf-color-overlay-scrim);
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
     }
 
     &__actions {
@@ -62,15 +62,15 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
 
     &__title {
       color: var(--bf-color-content-on-light);
-      font-size: var(--bf-font-size-2xl);
-      font-weight: var(--bf-font-weight-semibold);
-      letter-spacing: var(--bf-letter-spacing-tight);
+      font-size: var(--bf-type-flow-section-title-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
     }
   }
 
   .gallery-zone__subtitle {
     color: var(--bf-color-overlay-scrim);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   .gallery-zone-count {
@@ -80,8 +80,8 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
     border: 0;
     background: color-mix(in srgb, var(--bf-color-content-on-light) 8%, transparent);
     color: var(--bf-color-content-on-light);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__page-title {
@@ -149,14 +149,14 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
 
     strong {
       color: var(--bf-color-content-on-light);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     small {
       color: var(--bf-color-overlay-scrim);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-lg-line-height);
     }
   }
 }
@@ -218,10 +218,10 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   &__title {
     margin: 0;
     color: var(--bf-color-content-on-light);
-    font-size: var(--bf-font-size-2xl);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
-    letter-spacing: var(--bf-letter-spacing-tight);
+    font-size: var(--bf-type-flow-section-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
   }
 
   &__badge {
@@ -232,16 +232,16 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
     border-radius: var(--bf-radius-pill);
     background: color-mix(in srgb, var(--bf-color-content-on-light) 8%, transparent);
     color: var(--bf-color-overlay-scrim);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     white-space: nowrap;
   }
 
   &__subtitle {
     margin: 0;
     color: var(--bf-color-overlay-scrim);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-relaxed);
+    font-size: var(--bf-type-label-md-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
   }
 
   &__stats {
@@ -258,8 +258,8 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
     align-items: center;
     gap: 5px;
     color: var(--bf-color-overlay-scrim);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     white-space: nowrap;
 
     svg {
@@ -315,10 +315,10 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
     box-shadow:
       0 7px 18px color-mix(in srgb, var(--bf-color-content-on-light) 8%, transparent),
       8px 0 24px color-mix(in srgb, color-mix(in srgb, var(--bf-color-accent-secondary) 15%, transparent) 22%, transparent);
-    font-family: var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
     text-align: left;
     cursor: pointer;
     user-select: none;
@@ -455,7 +455,7 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
     border: 0;
     background: transparent;
     color: inherit;
-    font-family: var(--bf-font-family-sans);
+    font-family: var(--bf-type-body-sm-font-family);
     text-align: left;
     cursor: pointer;
 
@@ -491,8 +491,8 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   &__emoji {
     max-width: 100%;
     overflow: hidden;
-    font-size: var(--bf-font-size-3xl);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-heading-dialog-font-size);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     white-space: nowrap;
   }
 
@@ -517,10 +517,10 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
 
   &__name {
     min-width: 0;
-    font-size: var(--bf-font-size-lg);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-body-lg-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-on-light);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -544,9 +544,9 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
     display: -webkit-box;
     max-width: 100%;
     color: var(--bf-color-overlay-scrim);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-relaxed);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-lg-line-height);
     overflow: hidden;
     word-break: break-word;
     -webkit-box-orient: vertical;
@@ -569,9 +569,9 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
     border-radius: var(--bf-radius-sm);
     background: color-mix(in srgb, var(--bf-color-content-on-light) 8%, transparent);
     color: var(--bf-color-overlay-scrim);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-dense);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-modifier-leading-dense-line-height);
     white-space: nowrap;
   }
 
@@ -663,14 +663,14 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   }
 
   &__title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     margin: 0;
   }
 
   &__subtitle {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
   }
 
@@ -790,11 +790,11 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   }
 
   &__title {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-secondary);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     flex: 1;
   }
 
@@ -805,8 +805,8 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
     padding: 1px 7px;
     border-radius: var(--bf-radius-pill);
     background: var(--bf-color-action-neutral-surface-hover);
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-muted);
     font-variant-numeric: tabular-nums;
   }
@@ -861,14 +861,14 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   }
 
   &__label {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-secondary);
     flex: 1;
   }
 
   &__desc {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
   }
 }
@@ -889,12 +889,12 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-muted);
   gap: var(--bf-space-2);
 
   &--total {
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-secondary);
     padding-top: var(--bf-space-2);
     border-top: 1px solid var(--bf-color-border-subtle);
@@ -917,7 +917,7 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   }
 
   &__label {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
     margin-top: 3px;
     text-align: right;
@@ -953,13 +953,13 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   }
 
   &__name {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
   }
 
   &__desc {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -976,7 +976,7 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
 }
 
 .nursery-skill-chip {
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-meta-font-size);
   padding: 3px var(--bf-space-2);
   border-radius: var(--bf-radius-pill);
   border: 1px solid var(--bf-color-border-subtle);
@@ -1014,7 +1014,7 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
 
   &__dim-label {
     width: 60px;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
     flex-shrink: 0;
   }
@@ -1036,7 +1036,7 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
 
   &__dim-val {
     width: 26px;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
     text-align: right;
     font-variant-numeric: tabular-nums;
@@ -1044,7 +1044,7 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   }
 
   &__hint {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
     margin-top: var(--bf-space-3);
     text-align: center;
@@ -1055,12 +1055,12 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
 
 .nursery-identity {
   &__name {
-    font-size: var(--bf-font-size-3xl);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-heading-dialog-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     cursor: pointer;
     margin: 0;
-    letter-spacing: var(--bf-letter-spacing-tight);
+    letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
     transition: color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
 
     &:hover {
@@ -1069,8 +1069,8 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   }
 
   &__name-input {
-    font-size: var(--bf-font-size-3xl);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-heading-dialog-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__meta-row {
@@ -1091,17 +1091,17 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   }
 
   &__meta-label {
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-muted);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     width: 52px;
     flex-shrink: 0;
   }
 
   &__meta-value {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     cursor: pointer;
     padding: 2px var(--bf-space-2);
@@ -1130,7 +1130,7 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
 // ── Empty state ────────────────────────────────────────────────────────────
 
 .nursery-empty {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-muted);
   font-style: italic;
   padding: var(--bf-space-3) 0;
@@ -1407,11 +1407,11 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   }
 
   &__name {
-    font-size: var(--bf-font-size-5xl);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-display-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
-    letter-spacing: var(--bf-letter-spacing-tight);
-    line-height: var(--bf-line-height-display);
+    letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
+    line-height: var(--bf-type-display-sm-line-height);
     cursor: pointer;
     border-radius: var(--bf-radius-sm);
     padding: 1px 4px;
@@ -1424,9 +1424,9 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   }
 
   &__name-input {
-    font-size: var(--bf-font-size-5xl);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-tight);
+    font-size: var(--bf-type-display-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
     width: 100%;
   }
 
@@ -1440,7 +1440,7 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   }
 
   &__meta-tag {
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-content-muted);
     cursor: pointer;
     border-radius: var(--bf-radius-sm);
@@ -1459,14 +1459,14 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   }
 
   &__meta-dot {
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
     color: var(--bf-color-content-muted);
     opacity: 0.35;
     user-select: none;
   }
 
   &__meta-input {
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
     max-width: 140px;
   }
 }
@@ -1513,16 +1513,16 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    font-size: var(--bf-font-size-5xl);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-display-sm-font-size);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     white-space: nowrap;
   }
 
   &__section-label {
     margin-bottom: var(--bf-space-1);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
 
     &.is-secondary {
       margin-top: var(--bf-space-3);
@@ -1557,7 +1557,7 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
     max-height: calc(100vh - 16px);
     padding: var(--bf-space-3);
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
+    font-family:var(--bf-type-body-sm-font-family);
   }
 
   &__header {
@@ -1576,15 +1576,15 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
 
     strong {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      line-height: var(--bf-type-body-sm-line-height);
     }
 
     span {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-meta);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-meta-font-size);
+      line-height: var(--bf-type-body-lg-line-height);
     }
   }
 
@@ -1604,8 +1604,8 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
     border: 1px solid transparent;
     border-radius: var(--bf-radius-sm);
     background: transparent;
-    font-size: var(--bf-font-size-2xl);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-flow-section-title-font-size);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     cursor: pointer;
     transition:
       border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -1660,8 +1660,8 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
     align-items: center;
     gap: 4px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
 
     &.is-saved {
       color: var(--bf-color-status-success-content);
@@ -1687,10 +1687,10 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   &__title {
     margin: 0 0 var(--bf-space-2);
     padding: 0;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
-    letter-spacing: var(--bf-letter-spacing-snug);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-flow-title-letter-spacing);
     color: var(--bf-color-content-secondary);
   }
 
@@ -1718,18 +1718,18 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
     min-height: 34px;
     padding: var(--bf-space-1) var(--bf-space-2);
     border-radius: var(--bf-radius-lg);
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 
   .bitfun-nav-panel__inline-item.is-child {
     min-height: 30px;
     padding-left: calc(var(--bf-space-2) + 22px);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   .bitfun-nav-panel__inline-empty {
     padding: var(--bf-space-3) 0;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
 }
@@ -1809,8 +1809,8 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   }
 
   &__emoji {
-    font-size: var(--bf-font-size-3xl);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-heading-dialog-font-size);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     cursor: pointer;
     border-radius: var(--bf-radius-sm);
     padding: 2px;
@@ -1823,7 +1823,7 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
 
   &__emoji-input {
     width: 38px;
-    font-size: var(--bf-font-size-xl);
+    font-size: var(--bf-type-flow-title-font-size);
     text-align: center;
   }
 
@@ -1837,15 +1837,15 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   }
 
   &__name {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     cursor: pointer;
     border-radius: var(--bf-radius-sm);
     padding: 1px 4px;
     margin-left: -4px;
-    letter-spacing: var(--bf-letter-spacing-snug);
-    line-height: var(--bf-line-height-tight);
+    letter-spacing: var(--bf-type-flow-title-letter-spacing);
+    line-height: var(--bf-type-label-md-line-height);
     transition: color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard), background var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
 
     &:hover {
@@ -1855,8 +1855,8 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   }
 
   &__name-input {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     width: 100%;
   }
 
@@ -1876,10 +1876,10 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
 
   &__meta-label {
     flex-shrink: 0;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     color: var(--bf-color-content-muted);
     width: 44px;
   }
@@ -1887,7 +1887,7 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   &__meta-value {
     flex: 1;
     min-width: 0;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     cursor: pointer;
     padding: 1px var(--bf-space-1);
@@ -1967,10 +1967,10 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
 
   &__title {
     flex: 1;
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-widest);
+    letter-spacing: var(--bf-type-modifier-tracking-widest-letter-spacing);
     color: var(--bf-color-content-muted);
   }
 
@@ -2024,7 +2024,7 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   border-radius: var(--bf-radius-base);
   background: transparent;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
   text-align: left;
   cursor: pointer;
   transition:
@@ -2049,7 +2049,7 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
   &__label {
     flex: 1;
     min-width: 0;
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -2057,8 +2057,8 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
 
   &__file {
     flex-shrink: 0;
-    font-size: var(--bf-font-size-meta);
-    font-family: var(--bf-font-family-mono);
+    font-size: var(--bf-type-meta-font-size);
+    font-family: var(--bf-type-code-md-font-family);
     color: var(--bf-color-content-muted);
   }
 }
@@ -2066,11 +2066,11 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
 // ── Empty / loading states ────────────────────────────────────────────────────
 
 .acp-empty {
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
   color: var(--bf-color-content-muted);
   font-style: italic;
   padding: var(--bf-space-4) 0;
-  line-height: var(--bf-line-height-relaxed);
+  line-height: var(--bf-type-body-lg-line-height);
 }
 
 .acp-loading {
@@ -2111,8 +2111,8 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
 
   &__title {
     flex: 1;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -2134,9 +2134,9 @@ $nursery-gallery-gutter: clamp(20px, 2.5vw, 36px);
 
   &__error {
     margin: 0 0 var(--bf-space-3);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-status-danger-content);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
   }
 
   &__meditor {
diff --git a/src/web-ui/src/app/scenes/profile/views/PersonaRadar.tsx b/src/web-ui/src/app/scenes/profile/views/PersonaRadar.tsx
index e796e0cab9..ce925a937a 100644
--- a/src/web-ui/src/app/scenes/profile/views/PersonaRadar.tsx
+++ b/src/web-ui/src/app/scenes/profile/views/PersonaRadar.tsx
@@ -148,9 +148,9 @@ export const PersonaRadar: React.FC<Props> = ({ dims, size = 148, onDimClick, on
               textAnchor={lp.anchor}
               dominantBaseline="middle"
               style={{
-                fontSize: 'var(--bf-font-size-2xs)',
+                fontSize: 'var(--bf-type-overline-sm-font-size)',
                 fill: hasClick ? 'var(--bf-color-content-secondary)' : 'var(--bf-color-content-muted)',
-                fontFamily: 'var(--bf-font-family-sans)',
+                fontFamily: 'var(--bf-type-body-sm-font-family)',
                 userSelect: 'none',
                 cursor: hasClick ? 'pointer' : 'default',
                 transition: 'fill 0.15s',
diff --git a/src/web-ui/src/app/scenes/session/ChatPane.scss b/src/web-ui/src/app/scenes/session/ChatPane.scss
index e5d35a013f..93a8fe093b 100644
--- a/src/web-ui/src/app/scenes/session/ChatPane.scss
+++ b/src/web-ui/src/app/scenes/session/ChatPane.scss
@@ -10,7 +10,7 @@
   overflow: hidden;
   background: var(--bf-color-surface-scene);
   position: relative;
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
   font-size: var(--bf-type-flow-body-font-size);
 }
 
diff --git a/src/web-ui/src/app/scenes/session/SessionScene.scss b/src/web-ui/src/app/scenes/session/SessionScene.scss
index d04785ddfe..fcba6e6c8b 100644
--- a/src/web-ui/src/app/scenes/session/SessionScene.scss
+++ b/src/web-ui/src/app/scenes/session/SessionScene.scss
@@ -143,7 +143,7 @@
       transform: translate(-50%, -50%);
       color: color-mix(in srgb, var(--bf-color-accent-default) 90%, transparent);
       font-size: var(--bf-type-flow-control-font-size);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       pointer-events: none;
       z-index: 101;
       white-space: nowrap;
diff --git a/src/web-ui/src/app/scenes/settings/SettingsNav.scss b/src/web-ui/src/app/scenes/settings/SettingsNav.scss
index d3c524e6b4..ee0a122af1 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNav.scss
+++ b/src/web-ui/src/app/scenes/settings/SettingsNav.scss
@@ -21,7 +21,7 @@
   padding: var(--bf-space-2);
   box-sizing: border-box;
   overflow: hidden;
-  line-height: var(--bf-line-height-compact);
+  line-height: var(--bf-type-meta-line-height);
 
   &__panel-header {
     display: flex;
@@ -47,9 +47,9 @@
   &__title {
     @include nav-font.nav-panel-text-heading;
 
-    font-size: var(--bf-font-size-lg);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-dense);
+    font-size: var(--bf-type-body-lg-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-modifier-leading-dense-line-height);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -93,8 +93,8 @@
     width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
-    line-height: var(--bf-line-height-compact);
-    font-weight: var(--bf-font-weight-medium);
+    line-height: var(--bf-type-meta-line-height);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__search-result-desc {
@@ -103,16 +103,16 @@
     width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-compact);
-    font-weight: var(--bf-font-weight-regular);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-meta-line-height);
+    font-weight: var(--bf-type-body-sm-font-weight);
   }
 
   &__search-empty {
     @include nav-font.nav-panel-text-meta;
 
     padding: var(--bf-space-3) var(--bf-space-2);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     text-align: center;
   }
 
diff --git a/src/web-ui/src/app/scenes/settings/SettingsNavTypography.test.ts b/src/web-ui/src/app/scenes/settings/SettingsNavTypography.test.ts
index b946b68ead..d03715a7a1 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNavTypography.test.ts
+++ b/src/web-ui/src/app/scenes/settings/SettingsNavTypography.test.ts
@@ -44,8 +44,8 @@ describe('SettingsNav typography and layout ownership', () => {
     // typography-audit: negative-test-start -- verifies Appearance no longer owns the navigation font scale
     expect(stylesheet).not.toContain('--bf-appearance-token-font-size-');
     // typography-audit: negative-test-end
-    expect(stylesheet).toContain('font-size: var(--bf-font-size-meta);');
-    expect(stylesheet).toContain('line-height: var(--bf-line-height-compact);');
+    expect(stylesheet).toContain('font-size: var(--bf-type-meta-font-size);');
+    expect(stylesheet).toContain('line-height: var(--bf-type-meta-line-height);');
     expect(stylesheet).not.toContain('text-transform: uppercase;');
   });
 
diff --git a/src/web-ui/src/app/scenes/settings/components/ArchivedSessionsConfig.scss b/src/web-ui/src/app/scenes/settings/components/ArchivedSessionsConfig.scss
index f92114266c..f87cf98028 100644
--- a/src/web-ui/src/app/scenes/settings/components/ArchivedSessionsConfig.scss
+++ b/src/web-ui/src/app/scenes/settings/components/ArchivedSessionsConfig.scss
@@ -11,7 +11,7 @@
     justify-content: center;
     padding: 32px 16px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__empty {
@@ -22,7 +22,7 @@
     padding: 32px 16px;
     color: var(--bf-color-content-muted);
     text-align: center;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__empty-icon {
@@ -45,10 +45,10 @@
     align-items: center;
     gap: var(--bf-space-2);
     padding: 6px 16px;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     width: 100%;
     border: none;
     background: transparent;
@@ -67,7 +67,7 @@
   }
 
   &__group-name {
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -83,8 +83,8 @@
     padding: 0 5px;
     border-radius: 9px;
     background: var(--bf-color-action-quiet-hover);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
   }
 
@@ -118,19 +118,19 @@
   }
 
   &__row-name {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   &__row-date {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
   }
 
   &__row-actions {
diff --git a/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.scss b/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.scss
index 9d102613de..ae69372bfa 100644
--- a/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.scss
+++ b/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.scss
@@ -25,7 +25,7 @@
     border-radius: 6px;
     background: var(--bf-color-status-danger-surface);
     color: var(--bf-color-status-danger-content);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__list {
@@ -67,7 +67,7 @@
   }
 
   &__item-name {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-primary);
     white-space: nowrap;
     overflow: hidden;
@@ -75,16 +75,16 @@
   }
 
   &__item-hint {
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-compact);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-meta-line-height);
     color: var(--bf-color-content-muted);
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-sm-font-weight);
     white-space: normal;
     opacity: 0.62;
   }
 
   &__item-conflict-hint {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-status-warning-content);
   }
 
@@ -118,8 +118,8 @@
     border: 1px solid var(--bf-color-border-default);
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-secondary);
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
     cursor: pointer;
     white-space: nowrap;
     min-width: 60px;
@@ -152,7 +152,7 @@
     border: 1px solid var(--bf-color-border-default);
     background: transparent;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     cursor: pointer;
     padding: 0;
 
@@ -166,7 +166,7 @@
     padding: 32px;
     text-align: center;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 }
 
@@ -174,7 +174,7 @@
 /* Page subtitle: keep primary title dominant */
 .kb-shortcuts-page-header.bitfun-config-page-header {
   .bitfun-config-page-header__subtitle {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     opacity: 0.88;
   }
diff --git a/src/web-ui/src/app/scenes/shell/ShellNav.scss b/src/web-ui/src/app/scenes/shell/ShellNav.scss
index 350af7de3d..16e2bfd6ad 100644
--- a/src/web-ui/src/app/scenes/shell/ShellNav.scss
+++ b/src/web-ui/src/app/scenes/shell/ShellNav.scss
@@ -38,8 +38,8 @@
   }
 
   &__title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     white-space: nowrap;
     flex-shrink: 0;
@@ -89,7 +89,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__workspace-trigger-icon {
@@ -233,8 +233,8 @@
     color: var(--bf-color-content-secondary);
     cursor: pointer;
     text-align: left;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
     position: relative;
     justify-content: center;
     transition:
@@ -258,7 +258,7 @@
     &.is-active {
       color: var(--bf-color-content-primary);
       background: color-mix(in srgb, var(--bf-color-accent-default) 10%, transparent);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
 
       &::before {
         content: '';
@@ -350,8 +350,8 @@
   &__terminal-cwd {
     display: block;
     padding-left: 20px;
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-snug);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
     color: var(--bf-color-content-muted);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -362,8 +362,8 @@
     flex-shrink: 0;
     padding: 2px 5px;
     border-radius: 999px;
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     color: var(--bf-color-content-muted);
     background: color-mix(in srgb, var(--bf-color-content-muted) 12%, transparent);
   }
@@ -372,8 +372,8 @@
     flex-shrink: 0;
     padding: 2px 5px;
     border-radius: 999px;
-    font-size: var(--bf-font-size-micro);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-micro-font-size);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     color: var(--bf-color-accent-default);
     background: color-mix(in srgb, var(--bf-color-accent-default) 14%, transparent);
   }
@@ -396,8 +396,8 @@
   &__empty-message {
     margin: 0;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-relaxed);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
   }
 }
 
diff --git a/src/web-ui/src/app/scenes/skills/SkillsScene.presentation.test.ts b/src/web-ui/src/app/scenes/skills/SkillsScene.presentation.test.ts
index 9c54adece2..db4365bc1e 100644
--- a/src/web-ui/src/app/scenes/skills/SkillsScene.presentation.test.ts
+++ b/src/web-ui/src/app/scenes/skills/SkillsScene.presentation.test.ts
@@ -35,7 +35,7 @@ describe('Skills scene presentation', () => {
 
     expect(stylesheet).toContain('$skills-sidebar-width: 184px;');
     expect(stylesheet).toContain('min-height: 32px;');
-    expect(stylesheet).toContain('font-size: var(--bf-font-size-2xl);');
+    expect(stylesheet).toContain('font-size: var(--bf-type-flow-section-title-font-size);');
   });
 
   it('keeps row navigation and destructive actions as separate compact targets', () => {
diff --git a/src/web-ui/src/app/scenes/skills/SkillsScene.scss b/src/web-ui/src/app/scenes/skills/SkillsScene.scss
index 0317459fbe..5f63fcf2e1 100644
--- a/src/web-ui/src/app/scenes/skills/SkillsScene.scss
+++ b/src/web-ui/src/app/scenes/skills/SkillsScene.scss
@@ -54,9 +54,9 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
   border-radius: 4px;
   background: transparent;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-regular);
-  line-height: var(--bf-line-height-ui);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-body-sm-font-weight);
+  line-height: var(--bf-type-modifier-leading-ui-line-height);
   cursor: pointer;
   transition: color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
 
@@ -66,7 +66,7 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
 
   &.is-active {
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &:focus-visible {
@@ -124,10 +124,10 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
 
 .skills-sidebar__title {
   margin: 0;
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
-  letter-spacing: var(--bf-letter-spacing-snug);
+  letter-spacing: var(--bf-type-flow-title-letter-spacing);
 }
 
 .skills-sidebar__nav {
@@ -149,8 +149,8 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
   border-radius: var(--bf-radius-base);
   background: transparent;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-regular);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-body-sm-font-weight);
   cursor: pointer;
   text-align: left;
   transition: background var(--bf-motion-duration-fast) var(--bf-motion-easing-standard), color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
@@ -169,7 +169,7 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
   &.is-active {
     background: var(--bf-color-action-neutral-surface-hover);
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &:focus-visible {
@@ -202,8 +202,8 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
   border-radius: 999px;
   background: var(--bf-color-action-neutral-surface-hover);
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-micro);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
 
   .skills-sidebar__item.is-active & {
     background: var(--bf-color-action-quiet-hover);
@@ -222,10 +222,10 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
 
 .skills-sidebar__hint {
   margin: 0;
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-meta-font-size);
   color: var(--bf-color-content-muted);
   opacity: 0.75;
-  line-height: var(--bf-line-height-support);
+  line-height: var(--bf-type-flow-support-line-height);
 }
 
 // ── Main Content ──────────────────────────────────────────────────────────────
@@ -263,8 +263,8 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
   border-radius: var(--bf-radius-pill);
   background: transparent;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   cursor: pointer;
   transition:
     background var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -329,18 +329,18 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
 }
 
 .skills-suite__eyebrow {
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-semibold);
-  letter-spacing: var(--bf-letter-spacing-caps);
+  font-size: var(--bf-type-meta-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-caps-letter-spacing);
   text-transform: uppercase;
   color: var(--bf-color-accent-default);
 }
 
 .skills-suite__title {
   margin: 0;
-  font-size: var(--bf-font-size-3xl);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-tight);
+  font-size: var(--bf-type-heading-dialog-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-label-md-line-height);
   color: var(--bf-color-content-primary);
 }
 
@@ -348,8 +348,8 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
   margin: 0;
   max-width: 720px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-comfortable);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-support-line-height);
 }
 
 .skills-suite__mode-toolbar {
@@ -422,9 +422,9 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
 }
 
 .skills-suite__mode-tab-label {
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-tight);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-label-md-line-height);
 }
 
 .skills-suite__mode-reset {
@@ -436,7 +436,7 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
   display: inline-flex;
   align-items: center;
   gap: 7px;
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-meta-font-size);
   color: var(--bf-color-content-muted);
 }
 
@@ -471,9 +471,9 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
 
 .skills-suite__section-label {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-semibold);
-  letter-spacing: var(--bf-letter-spacing-wider);
+  font-size: var(--bf-type-meta-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   text-transform: uppercase;
 }
 
@@ -524,13 +524,13 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
 }
 
 .skills-suite__group-title {
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
 }
 
 .skills-suite__group-count {
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-meta-font-size);
   color: var(--bf-color-content-muted);
 }
 
@@ -550,9 +550,9 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
   border-radius: 999px;
   background: var(--bf-color-surface-subtle);
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-medium);
-  line-height: var(--bf-line-height-none);
+  font-size: var(--bf-type-meta-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
   cursor: pointer;
   transition:
     background var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -615,8 +615,8 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
 
 .skills-suite__skill-chip-status {
   color: var(--bf-color-status-warning-content);
-  font-size: var(--bf-font-size-micro);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   white-space: nowrap;
 }
 
@@ -649,8 +649,8 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
   min-height: 28px;
   padding: 0 12px 8px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-meta);
-  line-height: var(--bf-line-height-tight);
+  font-size: var(--bf-type-meta-font-size);
+  line-height: var(--bf-type-label-md-line-height);
 }
 
 .skills-main__list-heading {
@@ -659,8 +659,8 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
   min-width: 0;
   gap: 7px;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .skills-main__list-count {
@@ -673,8 +673,8 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
   border-radius: var(--bf-radius-pill);
   background: var(--bf-color-action-neutral-surface-hover);
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-micro);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-micro-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
 }
 
 .skills-main__column-label {
@@ -787,20 +787,20 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
 }
 
 .skills-card__name {
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
-  line-height: var(--bf-line-height-base);
+  line-height: var(--bf-type-body-sm-line-height);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .skills-card__desc {
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-meta-font-size);
   color: var(--bf-color-content-muted);
   opacity: 0.82;
-  line-height: var(--bf-line-height-base);
+  line-height: var(--bf-type-body-sm-line-height);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
@@ -835,7 +835,7 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
 .skills-card__level {
   gap: 6px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   white-space: nowrap;
 
   span {
@@ -851,7 +851,7 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
 
 .skills-card__status-unavailable {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
 }
 
 .skills-card__actions {
@@ -921,7 +921,7 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
 .skills-discover__page-info {
   min-width: 60px;
   text-align: center;
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
   color: var(--bf-color-content-secondary);
 }
 
@@ -938,7 +938,7 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
   gap: 12px;
   min-height: 200px;
   padding: 32px;
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
   color: var(--bf-color-content-muted);
   text-align: center;
 
@@ -986,17 +986,17 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
 
 .skills-discover__title {
   margin: 0 0 4px;
-  font-size: var(--bf-font-size-2xl);
-  font-weight: var(--bf-font-weight-semibold);
-  letter-spacing: var(--bf-letter-spacing-tight);
-  line-height: var(--bf-line-height-tight);
+  font-size: var(--bf-type-flow-section-title-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
+  line-height: var(--bf-type-label-md-line-height);
 }
 
 .skills-discover__subtitle {
   margin: 0 0 12px;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-muted);
-  line-height: var(--bf-line-height-comfortable);
+  line-height: var(--bf-type-support-line-height);
 }
 
 .skills-discover__search-wrapper {
@@ -1015,7 +1015,7 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
 
 .skills-discover__results-info {
   margin-bottom: 10px;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-muted);
 }
 
@@ -1048,7 +1048,7 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
   }
 
@@ -1060,9 +1060,9 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
     border: none;
     background: none;
     font: inherit;
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     text-align: left;
     word-break: break-all;
     color: var(--bf-color-accent-default);
@@ -1088,14 +1088,14 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
   &__detail-label {
     flex-shrink: 0;
     color: var(--bf-color-content-secondary);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__detail-value,
   &__detail-link {
     color: var(--bf-color-content-muted);
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-meta);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-meta-font-size);
     word-break: break-all;
   }
 
@@ -1118,14 +1118,14 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
   &__path-hint,
   &__form-hint,
   &__validating {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
   }
 
   &__validation {
     padding: var(--bf-space-2) var(--bf-space-3);
     border-radius: var(--bf-radius-base);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
 
     &.is-valid {
       background: color-mix(in srgb, var(--bf-color-status-success-content) 8%, transparent);
@@ -1140,9 +1140,9 @@ $skills-installed-columns: minmax(220px, 1fr) minmax(82px, 0.24fr) minmax(96px,
     }
   }
 
-  &__validation-name  { font-weight: var(--bf-font-weight-medium); }
-  &__validation-desc  { margin-top: 2px; font-size: var(--bf-font-size-xs); opacity: 0.85; }
-  &__validation-error { font-weight: var(--bf-font-weight-medium); }
+  &__validation-name  { font-weight: var(--bf-type-label-sm-font-weight); }
+  &__validation-desc  { margin-top: 2px; font-size: var(--bf-type-label-sm-font-size); opacity: 0.85; }
+  &__validation-error { font-weight: var(--bf-type-label-sm-font-weight); }
 
   &__modal-form {
     display: flex;
diff --git a/src/web-ui/src/app/scenes/skills/components/SkillCard.scss b/src/web-ui/src/app/scenes/skills/components/SkillCard.scss
index 2235150ec5..79b3284004 100644
--- a/src/web-ui/src/app/scenes/skills/components/SkillCard.scss
+++ b/src/web-ui/src/app/scenes/skills/components/SkillCard.scss
@@ -117,10 +117,10 @@
   }
 
   &__name {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
     min-width: 0;
     flex: 1;
     overflow: hidden;
@@ -130,11 +130,11 @@
 
   &__desc {
     margin: 0;
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-regular);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
     color: var(--bf-color-content-muted);
     opacity: 0.72;
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
@@ -152,8 +152,8 @@
     margin: 0;
     padding: 0;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   // ── Footer with actions ──
diff --git a/src/web-ui/src/app/scenes/terminal/TerminalScene.scss b/src/web-ui/src/app/scenes/terminal/TerminalScene.scss
index 9dbdba1e3c..5dbff39150 100644
--- a/src/web-ui/src/app/scenes/terminal/TerminalScene.scss
+++ b/src/web-ui/src/app/scenes/terminal/TerminalScene.scss
@@ -24,7 +24,7 @@
   }
 
   &__empty-hint {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     margin: 0;
   }
 }
diff --git a/src/web-ui/src/app/scenes/todos/TodosScene.scss b/src/web-ui/src/app/scenes/todos/TodosScene.scss
index 26bcd21485..497fab8f42 100644
--- a/src/web-ui/src/app/scenes/todos/TodosScene.scss
+++ b/src/web-ui/src/app/scenes/todos/TodosScene.scss
@@ -51,16 +51,16 @@ $todos-compact-breakpoint: 720px;
 
   &__title {
     margin: 0;
-    font-size: var(--bf-font-size-lg);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-body-lg-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
     color: var(--bf-color-content-primary);
   }
 
   &__subtitle {
     margin: 0;
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     color: var(--bf-color-content-muted);
   }
 
@@ -85,8 +85,8 @@ $todos-compact-breakpoint: 720px;
     justify-content: center;
     gap: var(--bf-space-1);
     min-width: 112px;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     font-variant-numeric: tabular-nums;
   }
@@ -137,22 +137,22 @@ $todos-compact-breakpoint: 720px;
   &__pane-title,
   &__list-title {
     margin: 0;
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
   &__pane-title {
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 
   &__list-title {
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 
   &__pane-hint {
     margin: 2px 0 0;
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     color: var(--bf-color-content-muted);
   }
 
@@ -160,7 +160,7 @@ $todos-compact-breakpoint: 720px;
     margin: 0;
     padding: var(--bf-space-4) var(--bf-space-3);
     text-align: center;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-muted);
     border: 1px dashed var(--bf-color-border-subtle);
     border-radius: var(--bf-radius-base);
@@ -188,8 +188,8 @@ $todos-compact-breakpoint: 720px;
 
   &__overview-title {
     margin: 0;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
@@ -224,21 +224,21 @@ $todos-compact-breakpoint: 720px;
     color: var(--bf-color-content-primary);
 
     strong {
-      font-size: var(--bf-font-size-xl);
-      font-weight: var(--bf-font-weight-medium);
-      line-height: var(--bf-line-height-tight);
+      font-size: var(--bf-type-flow-title-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
+      line-height: var(--bf-type-label-md-line-height);
       font-variant-numeric: tabular-nums;
     }
 
     span {
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       color: var(--bf-color-content-muted);
     }
   }
 
   &__overview-label {
     margin-top: var(--bf-space-1);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
   }
 
@@ -333,8 +333,8 @@ $todos-compact-breakpoint: 720px;
 
   &__row-name {
     min-width: 0;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -347,9 +347,9 @@ $todos-compact-breakpoint: 720px;
     border-radius: var(--bf-radius-sm);
     background: color-mix(in srgb, var(--bf-color-accent-default) 16%, transparent);
     color: var(--bf-color-accent-default);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
     white-space: nowrap;
 
     &--warn {
@@ -368,7 +368,7 @@ $todos-compact-breakpoint: 720px;
     align-items: center;
     gap: var(--bf-space-1);
     min-width: 0;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -381,7 +381,7 @@ $todos-compact-breakpoint: 720px;
 
   &__row-error {
     margin: 0;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-status-danger-content);
     word-break: break-word;
   }
@@ -413,8 +413,8 @@ $todos-compact-breakpoint: 720px;
 
   &__inactive-title {
     margin: 0;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-muted);
   }
 
@@ -454,8 +454,8 @@ $todos-compact-breakpoint: 720px;
   &__calendar-weekday {
     padding: 2px 0;
     text-align: center;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-regular);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
     color: var(--bf-color-content-muted);
   }
 
@@ -513,8 +513,8 @@ $todos-compact-breakpoint: 720px;
   }
 
   &__calendar-daynum {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     font-variant-numeric: tabular-nums;
     color: var(--bf-color-content-secondary);
   }
@@ -534,8 +534,8 @@ $todos-compact-breakpoint: 720px;
     padding: 2px 5px;
     border-radius: var(--bf-radius-sm);
     background: color-mix(in srgb, var(--bf-color-accent-default) 12%, transparent);
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-support);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
   }
 
   &__calendar-chip-time {
@@ -554,7 +554,7 @@ $todos-compact-breakpoint: 720px;
 
   &__calendar-more {
     padding-left: 4px;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
   }
 
@@ -604,8 +604,8 @@ $todos-compact-breakpoint: 720px;
 
   &__day-detail-title {
     margin: 0;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
@@ -654,16 +654,16 @@ $todos-compact-breakpoint: 720px;
 
   &__editor-title {
     margin: 0;
-    font-size: var(--bf-font-size-xl);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-flow-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
     color: var(--bf-color-content-primary);
   }
 
   &__editor-description {
     margin: 0;
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-md-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     color: var(--bf-color-content-muted);
   }
 
@@ -686,9 +686,9 @@ $todos-compact-breakpoint: 720px;
     margin: 0;
     padding-left: var(--bf-space-2);
     border-left: 3px solid var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
     color: var(--bf-color-content-primary);
   }
 
@@ -729,8 +729,8 @@ $todos-compact-breakpoint: 720px;
     align-items: center;
     gap: var(--bf-space-2);
     min-width: 0;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
 
     svg {
@@ -740,8 +740,8 @@ $todos-compact-breakpoint: 720px;
   }
 
   &__field-note {
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-ui);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     color: var(--bf-color-content-muted);
   }
 
@@ -750,7 +750,7 @@ $todos-compact-breakpoint: 720px;
     align-items: center;
     min-height: 36px;
     border-bottom: 1px solid var(--bf-color-border-subtle);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-primary);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -776,12 +776,12 @@ $todos-compact-breakpoint: 720px;
   }
 
   &__workspace-option-label {
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
   }
 
   &__workspace-option-path {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -842,14 +842,14 @@ $todos-compact-breakpoint: 720px;
     min-width: 0;
 
     strong {
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
       color: var(--bf-color-content-primary);
     }
 
     span {
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
       color: var(--bf-color-content-muted);
     }
   }
@@ -873,8 +873,8 @@ $todos-compact-breakpoint: 720px;
     background: transparent;
     color: var(--bf-color-content-primary);
     font: inherit;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     text-align: left;
     cursor: pointer;
 
@@ -912,8 +912,8 @@ $todos-compact-breakpoint: 720px;
   &__editor-advanced-note {
     grid-column: 1 / -1;
     margin-bottom: 0;
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     color: var(--bf-color-content-muted);
   }
 
@@ -923,7 +923,7 @@ $todos-compact-breakpoint: 720px;
     border: 1px solid color-mix(in srgb, var(--bf-color-status-danger-content) 20%, transparent);
     border-radius: var(--bf-radius-base);
     background: color-mix(in srgb, var(--bf-color-status-danger-content) 6%, transparent);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-status-danger-content);
   }
 
diff --git a/src/web-ui/src/app/scenes/welcome/WelcomeScene.scss b/src/web-ui/src/app/scenes/welcome/WelcomeScene.scss
index 8b31eabd86..283288853b 100644
--- a/src/web-ui/src/app/scenes/welcome/WelcomeScene.scss
+++ b/src/web-ui/src/app/scenes/welcome/WelcomeScene.scss
@@ -41,10 +41,10 @@
       var(--bf-color-content-primary) 66%,
       var(--bf-color-content-secondary)
     );
-    font-size: var(--bf-font-size-5xl);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
-    letter-spacing: var(--bf-letter-spacing-tight);
+    font-size: var(--bf-type-display-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
     text-wrap: balance;
   }
 
@@ -55,9 +55,9 @@
       var(--bf-color-content-primary) 66%,
       var(--bf-color-content-secondary)
     );
-    font-size: var(--bf-font-size-xl);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-support);
+    font-size: var(--bf-type-flow-title-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-flow-support-line-height);
     text-wrap: balance;
   }
 }
@@ -79,11 +79,11 @@
     }
 
     &__title {
-      font-size: var(--bf-font-size-4xl);
+      font-size: var(--bf-type-heading-display-font-size);
     }
 
     &__greeting-label {
-      font-size: var(--bf-font-size-base);
+      font-size: var(--bf-type-body-md-font-size);
     }
   }
 }
diff --git a/src/web-ui/src/app/styles/components/forms.css b/src/web-ui/src/app/styles/components/forms.css
index 42a63504e8..350aba60a4 100644
--- a/src/web-ui/src/app/styles/components/forms.css
+++ b/src/web-ui/src/app/styles/components/forms.css
@@ -29,14 +29,14 @@
 /* ========== Label styles ========== */
 
 .form-label {
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   color: var(--bf-color-content-secondary);
   display: flex;
   align-items: center;
   gap: var(--bf-space-2);
   margin-bottom: var(--bf-space-1);
-  line-height: var(--bf-line-height-tight);
+  line-height: var(--bf-type-label-md-line-height);
 }
 
 .form-label.required::after {
@@ -46,9 +46,9 @@
 }
 
 .form-hint {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-muted);
-  line-height: var(--bf-line-height-base);
+  line-height: var(--bf-type-body-sm-line-height);
   margin-top: var(--bf-space-1);
 }
 
@@ -59,10 +59,10 @@
 .form-textarea {
   width: 100%;
   padding: 12px 16px;
-  font-size: var(--bf-font-size-base);
-  font-family:var(--bf-font-family-sans);
+  font-size: var(--bf-type-body-md-font-size);
+  font-family:var(--bf-type-body-sm-font-family);
   color: var(--bf-color-content-primary);
-  line-height: var(--bf-line-height-base);
+  line-height: var(--bf-type-body-sm-line-height);
   
   /* Glassmorphism effect */
   background: var(--bf-color-surface-subtle);
@@ -86,14 +86,14 @@
 .form-input-sm,
 .form-select-sm {
   padding: 8px 12px;
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
   border-radius: var(--bf-radius-sm);
 }
 
 .form-input-lg,
 .form-select-lg {
   padding: 16px 20px;
-  font-size: var(--bf-font-size-lg);
+  font-size: var(--bf-type-body-lg-font-size);
   border-radius: var(--bf-radius-lg);
 }
 
@@ -188,7 +188,7 @@
 .form-textarea {
   min-height: 100px;
   resize: vertical;
-  line-height: var(--bf-line-height-relaxed);
+  line-height: var(--bf-type-body-lg-line-height);
 }
 
 .form-textarea-sm {
@@ -220,7 +220,7 @@
   gap: var(--bf-space-2);
   cursor: pointer;
   user-select: none;
-  line-height: var(--bf-line-height-base);
+  line-height: var(--bf-type-body-sm-line-height);
 }
 
 .form-checkbox input,
@@ -271,7 +271,7 @@
   border: 1px solid var(--bf-color-border-default);
   border-left: none;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
   white-space: nowrap;
 }
 
@@ -319,9 +319,9 @@
   align-items: center;
   gap: var(--bf-space-1);
   margin-top: var(--bf-space-1);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-status-danger-content);
-  line-height: var(--bf-line-height-tight);
+  line-height: var(--bf-type-label-md-line-height);
 }
 
 .form-success-message {
@@ -329,9 +329,9 @@
   align-items: center;
   gap: var(--bf-space-1);
   margin-top: var(--bf-space-1);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-status-success-content);
-  line-height: var(--bf-line-height-tight);
+  line-height: var(--bf-type-label-md-line-height);
 }
 
 /* ========== File upload ========== */
diff --git a/src/web-ui/src/app/styles/global.scss b/src/web-ui/src/app/styles/global.scss
index 250564aa56..3f1c9419ff 100644
--- a/src/web-ui/src/app/styles/global.scss
+++ b/src/web-ui/src/app/styles/global.scss
@@ -18,16 +18,16 @@
 @layer bf.base {
 /* Root element styles */
 html {
-  font-size: var(--bf-font-size-xl);
+  font-size: var(--bf-type-flow-title-font-size);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
 }
 
 body {
-  font-family:var(--bf-font-family-sans);
-  font-size: var(--bf-font-size-base);
-  line-height: var(--bf-line-height-base);
+  font-family:var(--bf-type-body-sm-font-family);
+  font-size: var(--bf-type-body-md-font-size);
+  line-height: var(--bf-type-body-sm-line-height);
   color: var(--bf-color-content-primary);
   background: var(--bf-color-surface-canvas);
   overflow: hidden;
@@ -105,7 +105,7 @@ td {
 }
 
 th {
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
   background: var(--bf-color-action-neutral-surface);
 }
@@ -113,8 +113,8 @@ th {
 /* Code styles */
 code,
 pre {
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-sm);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-label-md-font-size);
   background: var(--bf-color-action-neutral-surface);
   border: 1px solid var(--bf-color-border-default);
   border-radius: var(--bf-radius-sm);
@@ -127,7 +127,7 @@ code {
 pre {
   padding: var(--bf-space-3);
   overflow-x: auto;
-  line-height: var(--bf-line-height-relaxed);
+  line-height: var(--bf-type-body-lg-line-height);
 }
 
 pre code {
diff --git a/src/web-ui/src/app/styles/nav-panel-font-scope.scss b/src/web-ui/src/app/styles/nav-panel-font-scope.scss
index 12a1ed750f..c06d65e135 100644
--- a/src/web-ui/src/app/styles/nav-panel-font-scope.scss
+++ b/src/web-ui/src/app/styles/nav-panel-font-scope.scss
@@ -62,25 +62,25 @@
 @mixin nav-panel-text-row {
   @include nav-panel-text-body;
 
-  font-family: var(--bf-font-family-sans);
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-regular);
+  font-family: var(--bf-type-body-sm-font-family);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-body-sm-font-weight);
   // Truncated labels need room for the bundled font's ascenders and descenders.
-  line-height: var(--bf-line-height-base);
+  line-height: var(--bf-type-body-sm-line-height);
 }
 
 @mixin nav-panel-text-row-active {
   @include nav-panel-text-heading;
 
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-sm-font-weight);
 }
 
 @mixin nav-panel-text-group {
   @include nav-panel-text-meta;
 
-  font-family: var(--bf-font-family-sans);
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-medium);
-  letter-spacing: var(--bf-letter-spacing-normal);
-  line-height: var(--bf-line-height-base);
+  font-family: var(--bf-type-body-sm-font-family);
+  font-size: var(--bf-type-meta-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
+  letter-spacing: var(--bf-type-body-sm-letter-spacing);
+  line-height: var(--bf-type-body-sm-line-height);
 }
diff --git a/src/web-ui/src/app/styles/textClipping.test.ts b/src/web-ui/src/app/styles/textClipping.test.ts
index 716d0f1345..3d83f42326 100644
--- a/src/web-ui/src/app/styles/textClipping.test.ts
+++ b/src/web-ui/src/app/styles/textClipping.test.ts
@@ -100,7 +100,7 @@ describe('Truncated product text line boxes', () => {
     ['scenes/skills/SkillsScene.scss', '.skills-card__name'],
     ['scenes/skills/SkillsScene.scss', '.skills-card__desc'],
   ])('%s gives %s a font-relative, descender-safe line height', (filename, selector) => {
-    expect(compiledRules(filename)(selector)['line-height']).toBe('var(--bf-line-height-base)');
+    expect(compiledRules(filename)(selector)['line-height']).toBe('var(--bf-type-body-sm-line-height)');
   });
 
   it('retains single-line ellipsis and the two-line skills description clamp', () => {
diff --git a/src/web-ui/src/app/styles/utilities/floating-input.css b/src/web-ui/src/app/styles/utilities/floating-input.css
index 6fed422da1..36f7bb585f 100644
--- a/src/web-ui/src/app/styles/utilities/floating-input.css
+++ b/src/web-ui/src/app/styles/utilities/floating-input.css
@@ -66,9 +66,9 @@
   background: transparent;
   border: none;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-sm);
-  font-family:var(--bf-font-family-sans);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-label-md-font-size);
+  font-family:var(--bf-type-body-sm-font-family);
+  line-height: var(--bf-type-body-sm-line-height);
   resize: none;
   outline: none;
   min-height: 24px;
diff --git a/src/web-ui/src/app/styles/utilities/high-dpi-optimization.css b/src/web-ui/src/app/styles/utilities/high-dpi-optimization.css
index f3840a34c1..2e1054bd83 100644
--- a/src/web-ui/src/app/styles/utilities/high-dpi-optimization.css
+++ b/src/web-ui/src/app/styles/utilities/high-dpi-optimization.css
@@ -60,8 +60,8 @@
   
   /* Finer font rendering */
   input, textarea, [contenteditable] {
-    font-weight: var(--bf-font-weight-regular); /* Avoid overly thin fonts */
-    letter-spacing: var(--bf-letter-spacing-subtle); /* Slightly increase spacing */
+    font-weight: var(--bf-type-body-sm-font-weight); /* Avoid overly thin fonts */
+    letter-spacing: var(--bf-type-modifier-tracking-subtle-letter-spacing); /* Slightly increase spacing */
   }
   
   /* More precise pixel alignment */
diff --git a/src/web-ui/src/app/styles/utilities/index.css b/src/web-ui/src/app/styles/utilities/index.css
index bc59624e99..2c0521621a 100644
--- a/src/web-ui/src/app/styles/utilities/index.css
+++ b/src/web-ui/src/app/styles/utilities/index.css
@@ -141,19 +141,19 @@
 /* ========== Typography utilities ========== */
 
 /* Font size */
-.text-xs { font-size: var(--bf-font-size-xs); }
-.text-sm { font-size: var(--bf-font-size-sm); }
-.text-base { font-size: var(--bf-font-size-base); }
-.text-lg { font-size: var(--bf-font-size-lg); }
-.text-xl { font-size: var(--bf-font-size-xl); }
-.text-2xl { font-size: var(--bf-font-size-2xl); }
-.text-3xl { font-size: var(--bf-font-size-3xl); }
+.text-xs { font-size: var(--bf-type-label-sm-font-size); }
+.text-sm { font-size: var(--bf-type-label-md-font-size); }
+.text-base { font-size: var(--bf-type-body-md-font-size); }
+.text-lg { font-size: var(--bf-type-body-lg-font-size); }
+.text-xl { font-size: var(--bf-type-flow-title-font-size); }
+.text-2xl { font-size: var(--bf-type-flow-section-title-font-size); }
+.text-3xl { font-size: var(--bf-type-heading-dialog-font-size); }
 
 /* Font weight */
-.font-normal { font-weight: var(--bf-font-weight-regular); }
-.font-medium { font-weight: var(--bf-font-weight-medium); }
-.font-semibold { font-weight: var(--bf-font-weight-semibold); }
-.font-bold { font-weight: var(--bf-font-weight-semibold); }
+.font-normal { font-weight: var(--bf-type-body-sm-font-weight); }
+.font-medium { font-weight: var(--bf-type-label-sm-font-weight); }
+.font-semibold { font-weight: var(--bf-type-label-selected-font-weight); }
+.font-bold { font-weight: var(--bf-type-label-selected-font-weight); }
 
 /* Text color */
 .text-primary { color: var(--bf-color-content-primary); }
@@ -327,9 +327,9 @@
   .md\:p-3 { padding: var(--bf-space-3); }
   .md\:p-4 { padding: var(--bf-space-4); }
   
-  .md\:text-sm { font-size: var(--bf-font-size-sm); }
-  .md\:text-base { font-size: var(--bf-font-size-base); }
-  .md\:text-lg { font-size: var(--bf-font-size-lg); }
+  .md\:text-sm { font-size: var(--bf-type-label-md-font-size); }
+  .md\:text-base { font-size: var(--bf-type-body-md-font-size); }
+  .md\:text-lg { font-size: var(--bf-type-body-lg-font-size); }
   
   .md\:w-full { width: 100%; }
   .md\:max-w-full { max-width: 100%; }
@@ -344,7 +344,7 @@
   .sm\:p-2 { padding: var(--bf-space-2); }
   .sm\:p-3 { padding: var(--bf-space-3); }
   
-  .sm\:text-xs { font-size: var(--bf-font-size-xs); }
-  .sm\:text-sm { font-size: var(--bf-font-size-sm); }
-  .sm\:text-base { font-size: var(--bf-font-size-base); }
+  .sm\:text-xs { font-size: var(--bf-type-label-sm-font-size); }
+  .sm\:text-sm { font-size: var(--bf-type-label-md-font-size); }
+  .sm\:text-base { font-size: var(--bf-type-body-md-font-size); }
 }
diff --git a/src/web-ui/src/app/styles/utilities/layout.css b/src/web-ui/src/app/styles/utilities/layout.css
index db097392a2..8744625868 100644
--- a/src/web-ui/src/app/styles/utilities/layout.css
+++ b/src/web-ui/src/app/styles/utilities/layout.css
@@ -55,14 +55,14 @@
 .u-text-left { text-align: left; }
 .u-text-right { text-align: right; }
 
-.u-font-normal { font-weight: var(--bf-font-weight-regular); }
-.u-font-medium { font-weight: var(--bf-font-weight-medium); }
-.u-font-semibold { font-weight: var(--bf-font-weight-semibold); }
-.u-font-bold { font-weight: var(--bf-font-weight-semibold); }
-
-.u-leading-tight { line-height: var(--bf-line-height-tight); }
-.u-leading-normal { line-height: var(--bf-line-height-base); }
-.u-leading-relaxed { line-height: var(--bf-line-height-relaxed); }
+.u-font-normal { font-weight: var(--bf-type-body-sm-font-weight); }
+.u-font-medium { font-weight: var(--bf-type-label-sm-font-weight); }
+.u-font-semibold { font-weight: var(--bf-type-label-selected-font-weight); }
+.u-font-bold { font-weight: var(--bf-type-label-selected-font-weight); }
+
+.u-leading-tight { line-height: var(--bf-type-label-md-line-height); }
+.u-leading-normal { line-height: var(--bf-type-body-sm-line-height); }
+.u-leading-relaxed { line-height: var(--bf-type-body-lg-line-height); }
 
 /* Opacity utilities */
 .u-opacity-disabled { opacity: var(--bf-opacity-disabled); }
diff --git a/src/web-ui/src/assets/miniapps/catalog/coding-footprint.png b/src/web-ui/src/assets/miniapps/catalog/coding-footprint.png
new file mode 100644
index 0000000000..f5f9dd4a25
Binary files /dev/null and b/src/web-ui/src/assets/miniapps/catalog/coding-footprint.png differ
diff --git a/src/web-ui/src/assets/miniapps/catalog/daily-divination.png b/src/web-ui/src/assets/miniapps/catalog/daily-divination.png
new file mode 100644
index 0000000000..89a00eddbe
Binary files /dev/null and b/src/web-ui/src/assets/miniapps/catalog/daily-divination.png differ
diff --git a/src/web-ui/src/assets/miniapps/catalog/gomoku.png b/src/web-ui/src/assets/miniapps/catalog/gomoku.png
new file mode 100644
index 0000000000..5462fee136
Binary files /dev/null and b/src/web-ui/src/assets/miniapps/catalog/gomoku.png differ
diff --git a/src/web-ui/src/assets/miniapps/catalog/ppt-live.png b/src/web-ui/src/assets/miniapps/catalog/ppt-live.png
new file mode 100644
index 0000000000..39116bfd01
Binary files /dev/null and b/src/web-ui/src/assets/miniapps/catalog/ppt-live.png differ
diff --git a/src/web-ui/src/assets/miniapps/catalog/regex-playground.png b/src/web-ui/src/assets/miniapps/catalog/regex-playground.png
new file mode 100644
index 0000000000..237453c9a7
Binary files /dev/null and b/src/web-ui/src/assets/miniapps/catalog/regex-playground.png differ
diff --git a/src/web-ui/src/features/dispatch/DispatchInstallDialog.scss b/src/web-ui/src/features/dispatch/DispatchInstallDialog.scss
index 51dae290e0..892af4f32a 100644
--- a/src/web-ui/src/features/dispatch/DispatchInstallDialog.scss
+++ b/src/web-ui/src/features/dispatch/DispatchInstallDialog.scss
@@ -18,7 +18,7 @@
   max-height: min(78vh, 720px);
   flex-direction: column;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
 
   &__header {
     display: flex;
@@ -30,14 +30,14 @@
   &__title {
     margin: 0;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-2xl);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-snug);
+    font-size: var(--bf-type-flow-section-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
   }
 
   &__subtitle {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   // The one scrolling region. Keeps the footer reachable on short viewports,
@@ -81,14 +81,14 @@
 
   &__section-title {
     margin: 0;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__hint {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-support);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
   }
 
   &__field {
@@ -99,8 +99,8 @@
 
   &__field-label {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   // A read-only path, not a code sample: drop the global `code` pill so the
@@ -111,8 +111,8 @@
     background: none;
     overflow-wrap: anywhere;
     color: var(--bf-color-content-secondary);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__base-ref {
@@ -127,8 +127,8 @@
       border-radius: var(--bf-radius-base);
       background: var(--bf-color-surface-canvas);
       color: var(--bf-color-content-primary);
-      font-family:var(--bf-font-family-mono);
-      font-size: var(--bf-font-size-xs);
+      font-family:var(--bf-type-code-md-font-family);
+      font-size: var(--bf-type-label-sm-font-size);
 
       &:focus-visible {
         border-color: var(--bf-color-accent-default);
@@ -158,13 +158,13 @@
 
       > span {
         color: var(--bf-color-content-muted);
-        font-size: var(--bf-font-size-xs);
+        font-size: var(--bf-type-label-sm-font-size);
       }
 
       > strong {
         min-width: 0;
         overflow-wrap: anywhere;
-        font-weight: var(--bf-font-weight-medium);
+        font-weight: var(--bf-type-label-sm-font-weight);
       }
 
       &[data-state='ok'] > strong {
@@ -187,7 +187,7 @@
     align-items: center;
     gap: var(--bf-space-2);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__retry {
@@ -201,7 +201,7 @@
   &__details {
     width: 100%;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     summary {
       width: fit-content;
@@ -240,7 +240,7 @@
       min-width: 0;
       margin: 0;
       overflow-wrap: anywhere;
-      font-family:var(--bf-font-family-mono);
+      font-family:var(--bf-type-code-md-font-family);
     }
   }
 
diff --git a/src/web-ui/src/features/dispatch/DispatchResultDialog.scss b/src/web-ui/src/features/dispatch/DispatchResultDialog.scss
index 11196ab852..71a8af213b 100644
--- a/src/web-ui/src/features/dispatch/DispatchResultDialog.scss
+++ b/src/web-ui/src/features/dispatch/DispatchResultDialog.scss
@@ -6,7 +6,7 @@
   max-height: min(78vh, 720px);
   flex-direction: column;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
 
   &__header {
     display: flex;
@@ -17,14 +17,14 @@
 
   &__title {
     margin: 0;
-    font-size: var(--bf-font-size-2xl);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-snug);
+    font-size: var(--bf-type-flow-section-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
   }
 
   &__subtitle {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__body {
@@ -47,7 +47,7 @@
     align-items: center;
     gap: var(--bf-space-2);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__field {
@@ -58,20 +58,20 @@
     code {
       overflow-wrap: anywhere;
       color: var(--bf-color-content-secondary);
-      font-family:var(--bf-font-family-mono);
-      font-size: var(--bf-font-size-xs);
+      font-family:var(--bf-type-code-md-font-family);
+      font-size: var(--bf-type-label-sm-font-size);
     }
   }
 
   &__field-label {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__details {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     summary {
       width: fit-content;
@@ -114,7 +114,7 @@
     padding: var(--bf-space-2) var(--bf-space-3);
     border-bottom: 1px solid var(--bf-color-border-subtle);
     background: var(--bf-color-surface-subtle);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
 
     > svg {
       color: var(--bf-color-content-muted);
@@ -123,7 +123,7 @@
     > span {
       margin-left: auto;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       font-variant-numeric: tabular-nums;
     }
   }
@@ -144,13 +144,13 @@
       padding: 2px 0;
       overflow-wrap: anywhere;
       color: var(--bf-color-content-secondary);
-      font-family:var(--bf-font-family-mono);
-      font-size: var(--bf-font-size-xs);
+      font-family:var(--bf-type-code-md-font-family);
+      font-size: var(--bf-type-label-sm-font-size);
 
       > strong {
         min-width: 2ch;
         color: var(--bf-color-content-muted);
-        font-weight: var(--bf-font-weight-semibold);
+        font-weight: var(--bf-type-label-selected-font-weight);
       }
 
       > span {
@@ -168,8 +168,8 @@
       margin-left: auto;
       color: var(--bf-color-status-warning-content);
       // The list is monospaced for paths; this annotation is prose.
-      font-family:var(--bf-font-family-sans);
-      font-size: var(--bf-font-size-xs);
+      font-family:var(--bf-type-body-sm-font-family);
+      font-size: var(--bf-type-label-sm-font-size);
       font-style: normal;
       white-space: nowrap;
     }
@@ -178,7 +178,7 @@
   &__empty {
     padding: var(--bf-space-3);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__actions {
diff --git a/src/web-ui/src/features/dispatch/DispatchTargetPicker.scss b/src/web-ui/src/features/dispatch/DispatchTargetPicker.scss
index 719e995f4c..13915c8d12 100644
--- a/src/web-ui/src/features/dispatch/DispatchTargetPicker.scss
+++ b/src/web-ui/src/features/dispatch/DispatchTargetPicker.scss
@@ -20,7 +20,7 @@
     color: var(--bf-color-content-secondary);
     font: inherit;
     font-size: var(--bf-type-flow-micro-font-size);
-    line-height: var(--bf-line-height-none);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     cursor: pointer;
     transition:
       background-color 120ms ease,
@@ -85,13 +85,13 @@
     }
 
     strong {
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
     small {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
     }
   }
 
@@ -101,7 +101,7 @@
     gap: var(--bf-space-2);
     padding: 9px 8px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__spin {
diff --git a/src/web-ui/src/features/market-account/MarketAccountControls.scss b/src/web-ui/src/features/market-account/MarketAccountControls.scss
index e566bd8862..618c22bb29 100644
--- a/src/web-ui/src/features/market-account/MarketAccountControls.scss
+++ b/src/web-ui/src/features/market-account/MarketAccountControls.scss
@@ -20,7 +20,7 @@
     border-radius: var(--bf-radius-base);
     background: var(--bf-color-surface-panel);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     cursor: pointer;
 
     > .market-account-controls__identity-name {
@@ -79,12 +79,12 @@
 
     strong {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
     }
 
     span {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
   }
 
@@ -117,15 +117,15 @@
 
     strong {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-lg);
+      font-size: var(--bf-type-body-lg-font-size);
     }
 
     p {
       max-width: 390px;
       margin: 0;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-sm);
-      line-height: var(--bf-line-height-comfortable);
+      font-size: var(--bf-type-label-md-font-size);
+      line-height: var(--bf-type-support-line-height);
     }
   }
 
@@ -134,7 +134,7 @@
     align-items: center;
     gap: var(--bf-space-2);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__error {
@@ -144,7 +144,7 @@
     border: 1px solid var(--bf-color-status-danger-content);
     border-radius: var(--bf-radius-sm);
     color: var(--bf-color-status-danger-content);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     text-align: left;
   }
 
diff --git a/src/web-ui/src/features/relay-deploy/RelayDeployWizard.scss b/src/web-ui/src/features/relay-deploy/RelayDeployWizard.scss
index 0a352cb247..a80d656725 100644
--- a/src/web-ui/src/features/relay-deploy/RelayDeployWizard.scss
+++ b/src/web-ui/src/features/relay-deploy/RelayDeployWizard.scss
@@ -13,7 +13,7 @@
   min-height: min(640px, calc(100vh - 96px));
   max-height: min(640px, calc(100vh - 96px));
   overflow: hidden;
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
 
   // ── step indicator ──────────────────────────────────────────────────────
   &__steps {
@@ -54,14 +54,14 @@
     height: 18px;
     border-radius: 50%;
     border: 1px solid var(--bf-color-border-default);
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     flex-shrink: 0;
   }
 
   &__step-label {
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     white-space: nowrap;
   }
 
@@ -96,9 +96,9 @@
   &__desc {
     margin: 0;
     padding: 0 16px 10px;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__section {
@@ -116,11 +116,11 @@
 
   &__section-title {
     margin: 0;
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-muted);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   }
 
   &__search {
@@ -139,7 +139,7 @@
     min-height: 42px;
     padding: 8px 10px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     text-align: center;
   }
 
@@ -179,8 +179,8 @@
   }
 
   &__server-name {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -188,9 +188,9 @@
   }
 
   &__server-detail {
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     color: var(--bf-color-content-muted);
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
   }
 
   &__divider {
@@ -199,7 +199,7 @@
     gap: 10px;
     padding: 10px 16px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
 
     &::before,
     &::after {
@@ -237,7 +237,7 @@
     border: 1px solid var(--bf-color-border-subtle);
     background: var(--bf-color-surface-panel);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     cursor: pointer;
     transition: border-color 0.15s, color 0.15s;
 
@@ -253,7 +253,7 @@
     &.is-active {
       border-color: var(--bf-color-accent-default);
       color: var(--bf-color-accent-default);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
   }
 
@@ -271,8 +271,8 @@
   }
 
   &__label {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
     margin-bottom: 4px;
   }
@@ -290,7 +290,7 @@
   }
 
   &__hint {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
     margin-right: auto;
   }
@@ -305,8 +305,8 @@
     border-radius: 6px;
     background: var(--bf-color-surface-panel);
     border: 1px solid var(--bf-color-border-subtle);
-    font-size: var(--bf-font-size-meta);
-    font-family:var(--bf-font-family-mono);
+    font-size: var(--bf-type-meta-font-size);
+    font-family:var(--bf-type-code-md-font-family);
     color: var(--bf-color-content-secondary);
   }
 
@@ -317,7 +317,7 @@
     gap: 8px;
     padding: 32px 16px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     // Match terminal pane height so swap does not jump the dialog.
     &--terminal {
@@ -346,7 +346,7 @@
     align-items: center;
     gap: 8px;
     padding: 6px 10px;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     background: var(--bf-color-surface-canvas);
 
     &:not(:last-child) {
@@ -363,14 +363,14 @@
   }
 
   &__check-label {
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     flex-shrink: 0;
   }
 
   &__check-detail {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     overflow: hidden;
     text-overflow: ellipsis;
   }
@@ -385,9 +385,9 @@
 
   &__port-hint {
     margin: 0 0 6px;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     flex: 1;
     min-width: 160px;
   }
@@ -407,9 +407,9 @@
 
   &__mirror-hint {
     margin: 0 0 6px;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     flex: 1;
     min-width: 200px;
   }
@@ -421,7 +421,7 @@
     margin: 0 16px 10px;
     padding: 10px 12px;
     border-radius: 8px;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     &--info {
       background: color-mix(in srgb, var(--bf-color-accent-default) 8%, var(--bf-color-surface-panel));
@@ -447,13 +447,13 @@
   }
 
   &__notice-title {
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__notice-desc {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   // ── embedded remote PTY ─────────────────────────────────────────────────
@@ -478,7 +478,7 @@
       height: 100%;
       // Slightly denser than default panel terminal (fontSize 12 via options).
       .xterm {
-        font-size: var(--bf-font-size-xs);
+        font-size: var(--bf-type-label-sm-font-size);
       }
     }
 
@@ -495,9 +495,9 @@
     border-radius: 6px;
     background: var(--bf-color-surface-panel);
     border: 1px solid var(--bf-color-border-subtle);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-base);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     color: var(--bf-color-content-secondary);
     white-space: pre-wrap;
     word-break: break-all;
@@ -516,7 +516,7 @@
     align-items: center;
     gap: 6px;
     padding: 0 16px 8px;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     flex-shrink: 0;
     min-height: 22px;
@@ -548,15 +548,15 @@
   }
 
   &__task-title {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
   &__task-desc {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   // ── done ────────────────────────────────────────────────────────────────
@@ -574,8 +574,8 @@
   }
 
   &__done-title {
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
@@ -584,8 +584,8 @@
     border-radius: 6px;
     background: var(--bf-color-surface-panel);
     border: 1px solid var(--bf-color-border-subtle);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-accent-default);
   }
 
@@ -593,9 +593,9 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     max-width: 100%;
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
 
     &.ok { color: var(--bf-color-status-success-content); }
     &.failed { color: var(--bf-color-status-warning-content); }
diff --git a/src/web-ui/src/features/ssh-remote/PortForwardDialog.scss b/src/web-ui/src/features/ssh-remote/PortForwardDialog.scss
index f0847a1b14..8045fc3f5b 100644
--- a/src/web-ui/src/features/ssh-remote/PortForwardDialog.scss
+++ b/src/web-ui/src/features/ssh-remote/PortForwardDialog.scss
@@ -20,8 +20,8 @@
 
   &__target {
     color: var(--bf-color-content-muted);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__intro {
@@ -33,8 +33,8 @@
     border-radius: 6px;
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
 
     svg {
       flex-shrink: 0;
@@ -56,8 +56,8 @@
     border-radius: 6px;
     background: var(--bf-color-status-danger-surface);
     color: var(--bf-color-status-danger-content);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
 
     svg {
       flex-shrink: 0;
@@ -83,8 +83,8 @@
     padding: 8px 12px;
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__section-body {
@@ -98,8 +98,8 @@
   &__empty {
     margin: 0;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__spin {
@@ -121,7 +121,7 @@
     border-radius: 6px;
     background: var(--bf-color-action-neutral-surface);
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     cursor: pointer;
     transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
 
@@ -147,8 +147,8 @@
   }
 
   &__chip-port {
-    font-family:var(--bf-font-family-mono);
-    font-weight: var(--bf-font-weight-medium);
+    font-family:var(--bf-type-code-md-font-family);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__chip-process {
@@ -184,8 +184,8 @@
 
   &__remote,
   &__local {
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__remote {
@@ -194,12 +194,12 @@
 
   &__local {
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__arrow {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__meta {
@@ -211,7 +211,7 @@
 
   &__label {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -223,7 +223,7 @@
     align-items: center;
     gap: 4px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     white-space: nowrap;
 
     &--warn {
@@ -235,8 +235,8 @@
   &__note {
     flex-basis: 100%;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-ui);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
 
     &--warn {
       color: var(--bf-color-status-warning-content);
@@ -265,7 +265,7 @@
 
     > span {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
 
     &--grow {
diff --git a/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.scss b/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.scss
index 36d2bf016e..e072255984 100644
--- a/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.scss
+++ b/src/web-ui/src/features/ssh-remote/RemoteFileBrowser.scss
@@ -42,8 +42,8 @@
     flex-shrink: 0;
 
     &-title {
-      font-size: var(--bf-font-size-xl);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-flow-title-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-primary);
       margin: 0;
     }
@@ -96,8 +96,8 @@
     background: var(--bf-color-surface-canvas);
     border: 1px solid var(--bf-color-accent-default);
     border-radius: 6px;
-    font-size: var(--bf-font-size-sm);
-    font-family:var(--bf-font-family-mono);
+    font-size: var(--bf-type-label-md-font-size);
+    font-family:var(--bf-type-code-md-font-family);
     color: var(--bf-color-content-primary);
     outline: none;
     box-shadow: none;
@@ -123,7 +123,7 @@
     background: transparent;
     border: none;
     border-radius: 4px;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
     cursor: pointer;
     white-space: nowrap;
@@ -138,7 +138,7 @@
 
     &--current {
       color: var(--bf-color-content-primary);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
   }
 
@@ -148,9 +148,9 @@
   }
 
   &__breadcrumb-current {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     padding: 4px 8px;
   }
 
@@ -197,7 +197,7 @@
     align-items: center;
     gap: 8px;
     padding: 8px 20px;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
     border-bottom: 1px solid var(--bf-color-border-subtle);
     flex-shrink: 0;
@@ -222,7 +222,7 @@
     background: var(--bf-color-status-danger-surface);
     border: 1px solid var(--bf-color-status-danger-border);
     border-radius: 6px;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-status-danger-content);
 
     button {
@@ -230,7 +230,7 @@
       border: none;
       color: var(--bf-color-status-danger-content);
       cursor: pointer;
-      font-size: var(--bf-font-size-xl);
+      font-size: var(--bf-type-flow-title-font-size);
       padding: 0 4px;
     }
   }
@@ -243,7 +243,7 @@
     gap: 12px;
     padding: 64px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__spinner {
@@ -274,14 +274,14 @@
 
     th {
       padding: 10px 20px;
-      font-size: var(--bf-font-size-meta);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-meta-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-muted);
       text-align: left;
       background: var(--bf-color-surface-panel);
       border-bottom: 1px solid var(--bf-color-border-subtle);
       text-transform: uppercase;
-      letter-spacing: var(--bf-letter-spacing-wider);
+      letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
       white-space: nowrap;
     }
   }
@@ -332,7 +332,7 @@
 
     td {
       padding: 10px 20px;
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
       color: var(--bf-color-content-primary);
     }
   }
@@ -350,8 +350,8 @@
     }
     &--size {
       color: var(--bf-color-content-muted);
-      font-family:var(--bf-font-family-mono);
-      font-size: var(--bf-font-size-xs);
+      font-family:var(--bf-type-code-md-font-family);
+      font-size: var(--bf-type-label-sm-font-size);
       white-space: nowrap;
       min-width: 152px;
       box-sizing: border-box;
@@ -359,7 +359,7 @@
     }
     &--date {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       text-align: right;
     }
   }
@@ -382,8 +382,8 @@
   }
 
   &__name {
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__empty {
@@ -419,8 +419,8 @@
   }
 
   &__dialog-title {
-    font-size: var(--bf-font-size-xl);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-flow-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     margin: 0 0 16px 0;
   }
@@ -431,8 +431,8 @@
     background: var(--bf-color-surface-canvas);
     border: 1px solid var(--bf-color-border-default);
     border-radius: 6px;
-    font-size: var(--bf-font-size-base);
-    font-family:var(--bf-font-family-mono);
+    font-size: var(--bf-type-body-md-font-size);
+    font-family:var(--bf-type-code-md-font-family);
     color: var(--bf-color-content-primary);
     outline: none;
     transition: border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
@@ -471,7 +471,7 @@
   }
 
   &__footer-info {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-muted);
   }
 
@@ -480,8 +480,8 @@
   }
 
   &__footer-path {
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     background: var(--bf-color-surface-subtle);
     padding: 2px 8px;
diff --git a/src/web-ui/src/features/ssh-remote/SSHAuthPromptDialog.scss b/src/web-ui/src/features/ssh-remote/SSHAuthPromptDialog.scss
index 2230ee82c2..e42a91cd36 100644
--- a/src/web-ui/src/features/ssh-remote/SSHAuthPromptDialog.scss
+++ b/src/web-ui/src/features/ssh-remote/SSHAuthPromptDialog.scss
@@ -28,17 +28,17 @@
     }
 
     &-text {
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
       color: var(--bf-color-content-secondary);
-      font-family:var(--bf-font-family-mono);
+      font-family:var(--bf-type-code-md-font-family);
       word-break: break-all;
     }
   }
 
   &__label {
     display: block;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
     margin-bottom: 6px;
   }
@@ -53,10 +53,10 @@
   }
 
   &__hint {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
     margin: 0 0 16px;
-    line-height: var(--bf-line-height-support);
+    line-height: var(--bf-type-flow-support-line-height);
   }
 
   &__actions {
diff --git a/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.scss b/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.scss
index 194f6b8417..f693589ace 100644
--- a/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.scss
+++ b/src/web-ui/src/features/ssh-remote/SSHConnectionDialog.scss
@@ -10,7 +10,7 @@
   min-height: 0;
   min-width: 0;
   overflow: hidden;
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
 
   &__error-banner {
     flex-shrink: 0;
@@ -45,13 +45,13 @@
   }
 
   &__section-title {
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
-    font-family:var(--bf-font-family-sans);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    font-family:var(--bf-type-body-sm-font-family);
     color: var(--bf-color-content-muted);
     margin: 0;
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     white-space: nowrap;
   }
 
@@ -121,25 +121,25 @@
   }
 
   &__saved-name {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
-    font-family:var(--bf-font-family-sans);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    font-family:var(--bf-type-body-sm-font-family);
     color: var(--bf-color-content-primary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    line-height: var(--bf-line-height-snug);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
   }
 
   &__saved-detail {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-regular);
-    font-family:var(--bf-font-family-sans);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    font-family:var(--bf-type-body-sm-font-family);
     color: var(--bf-color-content-muted);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    line-height: var(--bf-line-height-snug);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
     font-variant-numeric: tabular-nums;
   }
 
@@ -157,7 +157,7 @@
     background: var(--bf-color-surface-subtle);
     border: 1px solid var(--bf-color-border-subtle);
     border-radius: 4px;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
     white-space: nowrap;
   }
@@ -191,13 +191,13 @@
     }
 
     span {
-      font-size: var(--bf-font-size-meta);
-      font-weight: var(--bf-font-weight-medium);
-      font-family:var(--bf-font-family-sans);
+      font-size: var(--bf-type-meta-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
+      font-family:var(--bf-type-body-sm-font-family);
       color: var(--bf-color-content-muted);
       white-space: nowrap;
       text-transform: uppercase;
-      letter-spacing: var(--bf-letter-spacing-wider);
+      letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     }
   }
 
@@ -294,8 +294,8 @@
     background: transparent;
     color: var(--bf-color-content-secondary);
     font: inherit;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     text-align: start;
     cursor: pointer;
     transition:
@@ -356,7 +356,7 @@
     align-items: center;
     gap: 6px;
     min-width: 0;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-secondary);
 
     > span:last-child:not(:nth-child(2)) {
@@ -369,8 +369,8 @@
 
   &__hint {
     margin-top: 5px;
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-support);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
     color: var(--bf-color-content-muted);
 
     &--warning {
@@ -385,9 +385,9 @@
 
   &__label {
     display: block;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
-    font-family:var(--bf-font-family-sans);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    font-family:var(--bf-type-body-sm-font-family);
     color: var(--bf-color-content-muted);
     margin-bottom: 6px;
   }
diff --git a/src/web-ui/src/flow_chat/components/AcpModeSelector.scss b/src/web-ui/src/flow_chat/components/AcpModeSelector.scss
index 389bd35dc5..2486677912 100644
--- a/src/web-ui/src/flow_chat/components/AcpModeSelector.scss
+++ b/src/web-ui/src/flow_chat/components/AcpModeSelector.scss
@@ -90,14 +90,14 @@
     padding: 5px 7px 7px;
     color: var(--bf-color-content-muted);
     font-size: var(--bf-type-flow-micro-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__header-hint {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-sm-font-weight);
     opacity: 0.8;
   }
 
@@ -108,9 +108,9 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      letter-spacing: var(--bf-letter-spacing-normal);
+      letter-spacing: var(--bf-type-body-sm-letter-spacing);
       font-size: var(--bf-type-flow-support-font-size);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
   }
diff --git a/src/web-ui/src/flow_chat/components/AcpPlanPanel.scss b/src/web-ui/src/flow_chat/components/AcpPlanPanel.scss
index 1c5690f6f3..45584be838 100644
--- a/src/web-ui/src/flow_chat/components/AcpPlanPanel.scss
+++ b/src/web-ui/src/flow_chat/components/AcpPlanPanel.scss
@@ -18,8 +18,8 @@
   &__title {
     color: var(--bf-color-content-secondary);
     font-size: var(--bf-type-flow-meta-font-size);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-wide);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
     text-transform: uppercase;
   }
 
@@ -76,7 +76,7 @@
   }
 
   &__content {
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     word-break: break-word;
   }
 }
diff --git a/src/web-ui/src/flow_chat/components/ChatEmptyState.scss b/src/web-ui/src/flow_chat/components/ChatEmptyState.scss
index 43a891ae4b..0a3345a08d 100644
--- a/src/web-ui/src/flow_chat/components/ChatEmptyState.scss
+++ b/src/web-ui/src/flow_chat/components/ChatEmptyState.scss
@@ -58,14 +58,14 @@
       margin: 0;
       font-size: var(--bf-type-flow-section-title-font-size);
       color: var(--bf-color-content-secondary);
-      font-weight: var(--bf-font-weight-regular);
-      line-height: var(--bf-line-height-relaxed);
+      font-weight: var(--bf-type-body-sm-font-weight);
+      line-height: var(--bf-type-body-lg-line-height);
 
       &:first-child {
         font-size: var(--bf-type-flow-page-title-font-size);
-        font-weight: var(--bf-font-weight-semibold);
+        font-weight: var(--bf-type-label-selected-font-weight);
         color: var(--bf-color-content-primary);
-        letter-spacing: var(--bf-letter-spacing-tight);
+        letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
       }
     }
   }
@@ -74,8 +74,8 @@
     display: inline-flex;
     align-items: center;
     padding: 2px var(--bf-space-2);
-    font-family: var(--bf-font-family-mono);
-    font-weight: var(--bf-font-weight-medium);
+    font-family: var(--bf-type-code-md-font-family);
+    font-weight: var(--bf-type-label-sm-font-weight);
     font-size: inherit;
     color: var(--bf-color-content-primary);
     background: var(--bf-color-action-quiet-hover);
@@ -96,8 +96,8 @@
     display: inline-flex;
     align-items: center;
     padding: 2px var(--bf-space-2);
-    font-family: var(--bf-font-family-mono);
-    font-weight: var(--bf-font-weight-medium);
+    font-family: var(--bf-type-code-md-font-family);
+    font-weight: var(--bf-type-label-sm-font-weight);
     font-size: inherit;
     color: var(--bf-color-content-primary);
     background: var(--bf-color-action-quiet-hover);
@@ -137,8 +137,8 @@
       margin: 0 0 var(--bf-space-3);
       font-size: var(--bf-type-flow-section-title-font-size);
       color: var(--bf-color-content-secondary);
-      line-height: var(--bf-line-height-relaxed);
-      font-weight: var(--bf-font-weight-regular);
+      line-height: var(--bf-type-body-lg-line-height);
+      font-weight: var(--bf-type-body-sm-font-weight);
 
       &:last-child {
         margin: 0;
@@ -164,7 +164,7 @@
       font-size: var(--bf-type-flow-title-font-size);
       color: var(--bf-color-content-secondary);
       line-height: var(--bf-type-flow-body-line-height);
-      font-weight: var(--bf-font-weight-regular);
+      font-weight: var(--bf-type-body-sm-font-weight);
     }
 
     &-hint {
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.scss b/src/web-ui/src/flow_chat/components/ChatInput.scss
index fbd0b39ed3..c8e2a9ccdf 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.scss
+++ b/src/web-ui/src/flow_chat/components/ChatInput.scss
@@ -134,7 +134,7 @@
   overflow: hidden;
   color: var(--bf-color-content-secondary);
   font-size: var(--bf-type-flow-support-font-size);
-  line-height: var(--bf-line-height-base);
+  line-height: var(--bf-type-body-sm-line-height);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -200,9 +200,9 @@
   min-width: 36px;
   color: var(--bf-color-content-primary);
   font-size: var(--bf-type-flow-support-font-size);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
   font-variant-numeric: tabular-nums;
-  line-height: var(--bf-line-height-none);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
 }
 
 .bitfun-chat-input__voice-pill-timeline {
@@ -406,8 +406,8 @@
     padding: 0 4px;
     color: var(--bf-color-content-secondary);
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-medium);
-    letter-spacing: var(--bf-letter-spacing-subtle);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-subtle-letter-spacing);
     background: transparent;
     border: none;
     box-shadow: none;
@@ -696,11 +696,11 @@
   &__target-switcher-label {
     font-size: var(--bf-type-flow-support-font-size);
     color: var(--bf-color-content-muted);
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-sm-font-weight);
     padding: 0.12rem var(--bf-control-flow-chat-card-expanded-padding-block) 0.12rem 0;
     margin-right: var(--bf-control-flow-chat-inline-gap);
     flex-shrink: 0;
-    letter-spacing: var(--bf-letter-spacing-wide);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
     opacity: 0.72;
   }
 
@@ -713,7 +713,7 @@
     background: transparent;
     color: var(--bf-color-content-muted);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-sm-font-weight);
     border-radius: 5px;
     cursor: pointer;
     transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
@@ -736,7 +736,7 @@
 
     &--active {
       color: color-mix(in srgb, var(--bf-color-accent-default) 95%, var(--bf-color-content-primary));
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
       background: color-mix(in srgb, var(--bf-color-accent-default) 9%, transparent);
     }
   }
@@ -747,7 +747,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-sm-font-weight);
     opacity: 0.65;
 
     &::before {
@@ -946,7 +946,7 @@
     margin-left: 4px;
     display: inline-flex;
     align-items: center;
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     line-height: var(--bf-type-flow-meta-line-height);
     vertical-align: middle;
   }
@@ -965,7 +965,7 @@
     overflow: hidden;
     z-index: var(--bf-layer-dropdown);
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
+    font-family:var(--bf-type-body-sm-font-family);
     font-size: var(--bf-type-flow-control-font-size);
     // Slash commands are opened by typing, so their keyboard path is instant.
     animation: none;
@@ -978,18 +978,18 @@
     padding: var(--bf-control-flow-chat-card-expanded-padding-block) var(--bf-control-flow-chat-card-expanded-padding-inline);
     border-bottom: 1px solid var(--bf-color-border-subtle);
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-muted);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   }
 
   &__slash-command-hint {
     font-size: var(--bf-type-flow-meta-font-size);
     color: var(--bf-color-content-muted);
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-sm-font-weight);
     text-transform: none;
-    letter-spacing: var(--bf-letter-spacing-normal);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   &__slash-command-list {
@@ -1032,8 +1032,8 @@
   &__slash-command-section-title {
     flex: 0 0 auto;
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-wider);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     text-transform: uppercase;
     color: var(--bf-color-content-muted);
   }
@@ -1068,9 +1068,9 @@
 
   &__slash-command-name {
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: color-mix(in srgb, var(--bf-color-accent-default) 90%, var(--bf-color-content-primary));
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
     flex: 0 0 112px;
     min-width: 0;
     overflow: hidden;
@@ -1083,7 +1083,7 @@
     color: var(--bf-color-content-secondary);
     flex: 1;
     min-width: 0;
-    line-height: var(--bf-line-height-compact);
+    line-height: var(--bf-type-meta-line-height);
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
@@ -1103,7 +1103,7 @@
     border-radius: 3px;
     background: color-mix(in srgb, var(--bf-color-accent-default) 15%, transparent);
     color: color-mix(in srgb, var(--bf-color-accent-default) 90%, var(--bf-color-content-primary));
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     flex: 0 0 auto;
   }
 
@@ -1116,7 +1116,7 @@
     font-size: var(--bf-type-flow-meta-font-size);
     padding: 0.12rem 0.32rem;
     border-radius: 3px;
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     flex: 0 0 auto;
     white-space: nowrap;
 
@@ -1309,8 +1309,8 @@
     align-items: center;
     justify-content: center;
     font-size: var(--bf-type-flow-micro-font-size);
-    font-weight: var(--bf-font-weight-bold);
-    line-height: var(--bf-line-height-none);
+    font-weight: var(--bf-type-heading-page-font-weight);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     box-shadow: 0 0 0 1px var(--bf-color-surface-panel);
     pointer-events: none;
   }
diff --git a/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.scss b/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.scss
index 5255312139..965adde690 100644
--- a/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.scss
+++ b/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.scss
@@ -29,7 +29,7 @@
 
   &__action {
     flex: none;
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__separator {
@@ -64,7 +64,7 @@
     color: var(--bf-color-content-on-dark);
     background: var(--bf-color-status-warning-content);
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-bold);
+    font-weight: var(--bf-type-heading-page-font-weight);
     cursor: default;
   }
 
diff --git a/src/web-ui/src/flow_chat/components/ChatInputPixelPet.scss b/src/web-ui/src/flow_chat/components/ChatInputPixelPet.scss
index c7d02794f6..d0fb5d90e9 100644
--- a/src/web-ui/src/flow_chat/components/ChatInputPixelPet.scss
+++ b/src/web-ui/src/flow_chat/components/ChatInputPixelPet.scss
@@ -178,22 +178,22 @@
   &__zzz-glyph {
     fill: var(--bitfun-pet-decor);
     font-family:
-      var(--bf-font-family-sans);
-    font-weight: var(--bf-font-weight-bold);
+      var(--bf-type-body-sm-font-family);
+    font-weight: var(--bf-type-heading-page-font-weight);
     opacity: 0;
 
     &--a {
-      font-size: var(--bf-font-size-5xl);
+      font-size: var(--bf-type-display-sm-font-size);
       animation: bitfun-zzz-rise 6.8s ease-in-out infinite;
     }
 
     &--b {
-      font-size: var(--bf-font-size-6xl);
+      font-size: var(--bf-type-display-md-font-size);
       animation: bitfun-zzz-rise 6.8s ease-in-out -2.2s infinite;
     }
 
     &--c {
-      font-size: var(--bf-font-size-8xl);
+      font-size: var(--bf-type-display-xl-font-size);
       animation: bitfun-zzz-rise 6.8s ease-in-out -4.4s infinite;
     }
   }
diff --git a/src/web-ui/src/flow_chat/components/ChatInputWorkspaceStrip.scss b/src/web-ui/src/flow_chat/components/ChatInputWorkspaceStrip.scss
index 16f09daf56..a5df6fdc01 100644
--- a/src/web-ui/src/flow_chat/components/ChatInputWorkspaceStrip.scss
+++ b/src/web-ui/src/flow_chat/components/ChatInputWorkspaceStrip.scss
@@ -50,7 +50,7 @@ $track-item-gap: 10px;
   // controls restate it here. Shape — the pill and its hover fill — is what
   // says a control is a control, so a label never needs a size of its own.
   font-size: var(--bf-type-flow-meta-font-size);
-  line-height: var(--bf-line-height-none);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
   letter-spacing: inherit;
   white-space: nowrap;
   cursor: pointer;
@@ -96,11 +96,11 @@ $track-item-gap: 10px;
   border: 0;
   border-radius: 0;
   background: transparent;
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
   font-size: var(--bf-type-flow-meta-font-size);
   line-height: var(--bf-type-flow-support-line-height);
-  font-weight: var(--bf-font-weight-regular);
-  letter-spacing: var(--bf-letter-spacing-subtle);
+  font-weight: var(--bf-type-body-sm-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-subtle-letter-spacing);
   color: var(--bf-color-content-muted);
   user-select: text;
   pointer-events: auto;
@@ -246,7 +246,7 @@ $track-item-gap: 10px;
     padding-bottom: 1px;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__permission-option-icon {
@@ -414,10 +414,10 @@ $track-item-gap: 10px;
     border-radius: 999px;
     background: transparent;
     color: inherit;
-    font-family:var(--bf-font-family-sans);
+    font-family:var(--bf-type-body-sm-font-family);
     font-size: inherit;
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-none);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     white-space: nowrap;
     cursor: default;
   }
@@ -461,7 +461,7 @@ $track-item-gap: 10px;
   &__branch {
     min-width: 0;
     white-space: nowrap;
-    font-family:var(--bf-font-family-sans);
+    font-family:var(--bf-type-body-sm-font-family);
     font-size: inherit;
     font-weight: inherit;
     flex: 1 1 auto;
diff --git a/src/web-ui/src/flow_chat/components/CodePreview.scss b/src/web-ui/src/flow_chat/components/CodePreview.scss
index a8e35ccef9..50391eb70c 100644
--- a/src/web-ui/src/flow_chat/components/CodePreview.scss
+++ b/src/web-ui/src/flow_chat/components/CodePreview.scss
@@ -26,12 +26,12 @@
         white-space: pre-wrap !important;
         word-break: break-word !important;
         cursor: text;
-        font-family:var(--bf-font-family-mono);
-        font-weight: var(--bf-font-weight-regular) !important;
+        font-family:var(--bf-type-code-md-font-family);
+        font-weight: var(--bf-type-body-sm-font-weight) !important;
 
         // Prism themes mark many tokens bold; match markdown body / code blocks (regular weight).
         span[style] {
-          font-weight: var(--bf-font-weight-regular) !important;
+          font-weight: var(--bf-type-body-sm-font-weight) !important;
         }
 
         > span[style] {
@@ -70,14 +70,14 @@
     overflow: visible;
     white-space: pre-wrap;
     word-break: break-word;
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
     font-size: var(--bf-type-flow-control-font-size);
     line-height: var(--bf-type-flow-code-line-height);
 
     code {
       display: block;
       background: transparent;
-      font-family:var(--bf-font-family-sans);
+      font-family:var(--bf-type-body-sm-font-family);
     }
   }
 
diff --git a/src/web-ui/src/flow_chat/components/CopyableTextPreview.scss b/src/web-ui/src/flow_chat/components/CopyableTextPreview.scss
index 81ce04d5f2..93d0270d95 100644
--- a/src/web-ui/src/flow_chat/components/CopyableTextPreview.scss
+++ b/src/web-ui/src/flow_chat/components/CopyableTextPreview.scss
@@ -1,20 +1,20 @@
 .copyable-text-preview {
   flex: 1;
   min-width: 0;
-  font-family:var(--bf-font-family-mono);
+  font-family:var(--bf-type-code-md-font-family);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .copyable-text-preview.copyable-text-preview--theme-font {
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
 }
 
 .copyable-text-preview--compact {
   font-size: var(--bf-type-flow-support-font-size);
   line-height: var(--bf-type-flow-support-line-height);
-  font-weight: var(--bf-font-weight-regular);
+  font-weight: var(--bf-type-body-sm-font-weight);
   color: var(--bf-color-content-muted);
 }
 
@@ -28,7 +28,7 @@
   display: flex;
   align-items: flex-start;
   gap: var(--bf-space-2);
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
   font-size: var(--bf-type-flow-control-font-size);
   line-height: var(--bf-type-flow-support-line-height);
 }
diff --git a/src/web-ui/src/flow_chat/components/CoworkExampleCards.scss b/src/web-ui/src/flow_chat/components/CoworkExampleCards.scss
index c60ea37153..a76def8eea 100644
--- a/src/web-ui/src/flow_chat/components/CoworkExampleCards.scss
+++ b/src/web-ui/src/flow_chat/components/CoworkExampleCards.scss
@@ -18,7 +18,7 @@
 
   &__title {
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
diff --git a/src/web-ui/src/flow_chat/components/CurrentSessionTitle.scss b/src/web-ui/src/flow_chat/components/CurrentSessionTitle.scss
index 49fb6e6f52..797115e807 100644
--- a/src/web-ui/src/flow_chat/components/CurrentSessionTitle.scss
+++ b/src/web-ui/src/flow_chat/components/CurrentSessionTitle.scss
@@ -15,7 +15,7 @@
 
   &__text {
     font-size: var(--bf-type-flow-body-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     white-space: nowrap;
     overflow: hidden;
diff --git a/src/web-ui/src/flow_chat/components/DeepReviewConsentDialog.scss b/src/web-ui/src/flow_chat/components/DeepReviewConsentDialog.scss
index f0c95d5d24..ecd7b47dcf 100644
--- a/src/web-ui/src/flow_chat/components/DeepReviewConsentDialog.scss
+++ b/src/web-ui/src/flow_chat/components/DeepReviewConsentDialog.scss
@@ -46,9 +46,9 @@
   h3 {
     margin: 4px 0 0;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-3xl);
-    font-weight: var(--bf-font-weight-bold);
-    letter-spacing: var(--bf-letter-spacing-normal);
+    font-size: var(--bf-type-heading-dialog-font-size);
+    font-weight: var(--bf-type-heading-page-font-weight);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
     line-height: var(--bf-type-flow-meta-line-height);
   }
 }
@@ -56,8 +56,8 @@
 .deep-review-consent__eyebrow {
   color: color-mix(in srgb, var(--deep-review-accent) 58%, var(--bf-color-content-muted));
   font-size: var(--bf-type-flow-support-font-size);
-  font-weight: var(--bf-font-weight-bold);
-  letter-spacing: var(--bf-letter-spacing-normal);
+  font-weight: var(--bf-type-heading-page-font-weight);
+  letter-spacing: var(--bf-type-body-sm-letter-spacing);
   text-transform: uppercase;
 }
 
@@ -128,7 +128,7 @@
     padding: 0;
     color: color-mix(in srgb, var(--bf-color-content-secondary) 70%, var(--bf-color-content-primary));
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     line-height: var(--bf-type-flow-support-line-height);
   }
 }
@@ -157,7 +157,7 @@
   span {
     color: var(--bf-color-content-muted);
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-bold);
+    font-weight: var(--bf-type-heading-page-font-weight);
     line-height: var(--bf-type-flow-meta-line-height);
   }
 
@@ -165,7 +165,7 @@
     margin-top: 3px;
     color: var(--bf-color-content-primary);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-bold);
+    font-weight: var(--bf-type-heading-page-font-weight);
     line-height: var(--bf-type-flow-support-line-height);
   }
 }
@@ -187,7 +187,7 @@
   strong {
     color: var(--bf-color-content-primary);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-bold);
+    font-weight: var(--bf-type-heading-page-font-weight);
     line-height: var(--bf-type-flow-meta-line-height);
   }
 
@@ -227,7 +227,7 @@
   strong {
     color: var(--bf-color-content-primary);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-bold);
+    font-weight: var(--bf-type-heading-page-font-weight);
     line-height: var(--bf-type-flow-meta-line-height);
   }
 
@@ -245,7 +245,7 @@
   gap: 6px;
   color: color-mix(in srgb, var(--bf-color-content-secondary) 72%, var(--bf-color-content-primary));
   font-size: var(--bf-type-flow-support-font-size);
-  font-weight: var(--bf-font-weight-bold);
+  font-weight: var(--bf-type-heading-page-font-weight);
   text-transform: uppercase;
 }
 
@@ -284,7 +284,7 @@
     strong {
       color: color-mix(in srgb, var(--deep-review-warm) 72%, var(--bf-color-content-primary));
       font-size: var(--bf-type-flow-support-font-size);
-      font-weight: var(--bf-font-weight-bold);
+      font-weight: var(--bf-type-heading-page-font-weight);
       text-align: right;
       white-space: normal;
     }
@@ -312,7 +312,7 @@ li.deep-review-consent__skipped-more {
 .deep-review-consent__fact-title {
   color: var(--bf-color-content-primary);
   font-size: var(--bf-type-flow-control-font-size);
-  font-weight: var(--bf-font-weight-bold);
+  font-weight: var(--bf-type-heading-page-font-weight);
   line-height: var(--bf-type-flow-meta-line-height);
 }
 
diff --git a/src/web-ui/src/flow_chat/components/FileMentionPicker.scss b/src/web-ui/src/flow_chat/components/FileMentionPicker.scss
index a5490c0aa1..57ea41bc28 100644
--- a/src/web-ui/src/flow_chat/components/FileMentionPicker.scss
+++ b/src/web-ui/src/flow_chat/components/FileMentionPicker.scss
@@ -30,7 +30,7 @@
     max-width: calc(100vw - 16px);
     max-height: calc(100vh - 16px);
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
+    font-family:var(--bf-type-body-sm-font-family);
   }
   
   &__header {
@@ -41,8 +41,8 @@
     border-bottom: 1px solid var(--bf-color-border-subtle);
     color: var(--bf-color-content-muted);
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-medium);
-    letter-spacing: var(--bf-letter-spacing-wide);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
     
     svg {
       opacity: 0.6;
@@ -74,7 +74,7 @@
     flex: 1 1 auto;
     min-width: 0;
     color: var(--bf-color-content-muted);
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-sm-font-weight);
   }
   
   &__content {
diff --git a/src/web-ui/src/flow_chat/components/FlowToolCard.scss b/src/web-ui/src/flow_chat/components/FlowToolCard.scss
index d46cfe7493..ff3c69d3c8 100644
--- a/src/web-ui/src/flow_chat/components/FlowToolCard.scss
+++ b/src/web-ui/src/flow_chat/components/FlowToolCard.scss
@@ -14,8 +14,8 @@
 .flow-tool-card-note {
   margin-inline-start: 0;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-body-sm-line-height);
   opacity: var(--bf-opacity-muted);
 }
 
diff --git a/src/web-ui/src/flow_chat/components/HarnessProfileSelector.scss b/src/web-ui/src/flow_chat/components/HarnessProfileSelector.scss
index ae1fdf5c87..a6fa7e39bf 100644
--- a/src/web-ui/src/flow_chat/components/HarnessProfileSelector.scss
+++ b/src/web-ui/src/flow_chat/components/HarnessProfileSelector.scss
@@ -22,7 +22,7 @@
   color: var(--bf-color-content-secondary);
   font: inherit;
   font-size: var(--bf-type-flow-control-font-size);
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-sm-font-weight);
   white-space: nowrap;
   text-align: left;
   cursor: pointer;
@@ -85,21 +85,21 @@
   [data-bf-part='label'] {
     color: var(--bitfun-harness-profile-accent);
     font-family: var(--bf-type-flow-control-font-family);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &[data-bf-profile='ultimate'] [data-bf-component='action-item'] {
     [data-bf-part='label'] {
       font-style: italic;
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
   }
 
   &[data-bf-profile='creative'] [data-bf-component='action-item'] {
     [data-bf-part='label'] {
       font-family: var(--bf-type-flow-code-font-family);
-      font-weight: var(--bf-font-weight-medium);
-      letter-spacing: var(--bf-letter-spacing-subtle);
+      font-weight: var(--bf-type-label-sm-font-weight);
+      letter-spacing: var(--bf-type-modifier-tracking-subtle-letter-spacing);
     }
   }
 }
diff --git a/src/web-ui/src/flow_chat/components/ImageAnalysisCard.scss b/src/web-ui/src/flow_chat/components/ImageAnalysisCard.scss
index f2bacb365d..20251d9108 100644
--- a/src/web-ui/src/flow_chat/components/ImageAnalysisCard.scss
+++ b/src/web-ui/src/flow_chat/components/ImageAnalysisCard.scss
@@ -86,8 +86,8 @@
 }
 
 .image-analysis-card__filename {
-  font-size: var(--bf-font-size-base);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   color: var(--image-analysis-text);
   margin-bottom: 6px;
   overflow: hidden;
@@ -185,11 +185,11 @@
     
     h4 {
       font-size: var(--bf-type-flow-control-font-size);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--image-analysis-text-secondary);
       margin: 0 0 6px 0;
       text-transform: uppercase;
-      letter-spacing: var(--bf-letter-spacing-wider);
+      letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     }
     
     p {
diff --git a/src/web-ui/src/flow_chat/components/InlineDiffPreview.scss b/src/web-ui/src/flow_chat/components/InlineDiffPreview.scss
index 7270796b26..2f7e0b9f69 100644
--- a/src/web-ui/src/flow_chat/components/InlineDiffPreview.scss
+++ b/src/web-ui/src/flow_chat/components/InlineDiffPreview.scss
@@ -7,9 +7,9 @@
   position: relative;
   width: 100%;
   background: transparent;
-  font-family:var(--bf-font-family-mono);
+  font-family:var(--bf-type-code-md-font-family);
   font-size: var(--bf-type-flow-control-font-size);
-  font-weight: var(--bf-font-weight-regular);
+  font-weight: var(--bf-type-body-sm-font-weight);
   
   &__content {
     overflow-y: auto;
@@ -89,7 +89,7 @@
 
     .diff-line__prefix {
       color: var(--bf-domain-git-added);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
   }
 
@@ -102,7 +102,7 @@
 
     .diff-line__prefix {
       color: var(--bf-domain-git-deleted);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
     
     .diff-line__content {
@@ -186,7 +186,7 @@
     justify-content: center;
     width: 18px;
     flex-shrink: 0;
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     user-select: none;
   }
   
@@ -214,7 +214,7 @@
     }
 
     code span[style] {
-      font-weight: var(--bf-font-weight-regular) !important;
+      font-weight: var(--bf-type-body-sm-font-weight) !important;
     }
   }
 }
diff --git a/src/web-ui/src/flow_chat/components/ModelSelector.scss b/src/web-ui/src/flow_chat/components/ModelSelector.scss
index bb31e5ffe8..0c0f0354f1 100644
--- a/src/web-ui/src/flow_chat/components/ModelSelector.scss
+++ b/src/web-ui/src/flow_chat/components/ModelSelector.scss
@@ -26,7 +26,7 @@
     background: transparent;
     color: var(--bf-color-content-secondary);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-sm-font-weight);
     cursor: pointer;
     transition:
       color 140ms ease,
@@ -37,7 +37,7 @@
     outline: none;
     opacity: 0.72;
     white-space: nowrap;
-    letter-spacing: var(--bf-letter-spacing-wide);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
 
     // More visible while input is focused
     .bitfun-chat-input__box:focus-within & {
@@ -84,8 +84,8 @@
     overflow: hidden;
     color: var(--bf-color-content-muted);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-none);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -104,9 +104,9 @@
     background: color-mix(in srgb, var(--bf-color-accent-default) 15%, transparent);
     color: color-mix(in srgb, var(--bf-color-accent-default) 90%, var(--bf-color-content-primary));
     font-size: var(--bf-type-flow-meta-font-size);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-wider);
-    line-height: var(--bf-line-height-none);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
   }
 
   &__tooltip {
@@ -264,7 +264,7 @@
     align-items: center;
     gap: 4px;
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
     white-space: nowrap;
     overflow: hidden;
diff --git a/src/web-ui/src/flow_chat/components/PendingQueuePanel.scss b/src/web-ui/src/flow_chat/components/PendingQueuePanel.scss
index 0d9d35abe0..a3a20bb613 100644
--- a/src/web-ui/src/flow_chat/components/PendingQueuePanel.scss
+++ b/src/web-ui/src/flow_chat/components/PendingQueuePanel.scss
@@ -15,8 +15,8 @@
     display: block;
     min-width: 0;
     overflow: hidden;
-    font-size: var(--bf-font-size-base);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-body-md-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -28,8 +28,8 @@
 
   &__sending-label,
   &__failed-label {
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__sending-label {
@@ -38,7 +38,7 @@
 
   &__failed-label {
     color: var(--bf-color-status-danger-content);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__actions {
diff --git a/src/web-ui/src/flow_chat/components/PlannerButton.scss b/src/web-ui/src/flow_chat/components/PlannerButton.scss
index 767192da0d..3890fb585d 100644
--- a/src/web-ui/src/flow_chat/components/PlannerButton.scss
+++ b/src/web-ui/src/flow_chat/components/PlannerButton.scss
@@ -102,7 +102,7 @@
 
   &__text {
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     white-space: nowrap;
     position: relative;
     z-index: 2;
@@ -110,7 +110,7 @@
 
   &__progress {
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     white-space: nowrap;
     position: relative;
     z-index: 2;
diff --git a/src/web-ui/src/flow_chat/components/ReasoningPresetSelector.scss b/src/web-ui/src/flow_chat/components/ReasoningPresetSelector.scss
index d609e525b3..a060814127 100644
--- a/src/web-ui/src/flow_chat/components/ReasoningPresetSelector.scss
+++ b/src/web-ui/src/flow_chat/components/ReasoningPresetSelector.scss
@@ -45,8 +45,8 @@
     overflow: hidden;
     color: var(--bf-color-content-muted);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-none);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -132,8 +132,8 @@
   &__title {
     color: var(--bf-color-content-primary);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-dense);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-modifier-leading-dense-line-height);
   }
 
   &__auto-row {
@@ -158,8 +158,8 @@
     overflow: hidden;
     color: var(--bf-color-content-primary);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-dense);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-modifier-leading-dense-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
diff --git a/src/web-ui/src/flow_chat/components/RichTextInput.scss b/src/web-ui/src/flow_chat/components/RichTextInput.scss
index cd57ac964e..7f8ec6e655 100644
--- a/src/web-ui/src/flow_chat/components/RichTextInput.scss
+++ b/src/web-ui/src/flow_chat/components/RichTextInput.scss
@@ -9,13 +9,13 @@
   outline: none !important;
   color: var(--bf-color-content-primary);
   font-size: var(--bf-type-flow-body-font-size);
-  line-height: var(--bf-line-height-base);
+  line-height: var(--bf-type-body-sm-line-height);
   padding: 0;
   vertical-align: top;
   min-height: 24px;
   max-height: 200px;
   overflow-y: auto;
-  font-family: var(--bf-font-family-sans);
+  font-family: var(--bf-type-body-sm-font-family);
   white-space: pre-wrap;
   word-wrap: break-word;
   word-break: break-word;
@@ -77,7 +77,7 @@
   border: 1px dashed color-mix(in srgb, var(--bf-color-accent-default) 35%, transparent);
   border-radius: 6px;
   font-size: var(--bf-type-flow-control-font-size);
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-sm-font-weight);
   color: color-mix(in srgb, var(--bf-color-accent-default) 40%, transparent);
   cursor: pointer;
   user-select: text;
@@ -126,7 +126,7 @@
   border: none;
   border-radius: 10px;
   font-size: var(--bf-type-flow-control-font-size);
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-sm-font-weight);
   color: color-mix(in srgb, var(--bf-color-accent-default) 95%, transparent);
   cursor: default;
   user-select: none;
@@ -202,8 +202,8 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: var(--bf-type-flow-support-line-height);
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-xs);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-label-sm-font-size);
 }
 
 .rich-text-tag-pill--widget-ref {
@@ -235,8 +235,8 @@
   background: color-mix(in srgb, var(--bf-color-content-on-dark) 15%, transparent);
   color: inherit;
   font-size: var(--bf-type-flow-micro-font-size);
-  font-weight: var(--bf-font-weight-bold);
-  letter-spacing: var(--bf-letter-spacing-wider);
+  font-weight: var(--bf-type-heading-page-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   text-transform: uppercase;
 }
 
@@ -244,7 +244,7 @@
   min-width: 18px;
   padding: 0 3px;
   background: transparent;
-  letter-spacing: var(--bf-letter-spacing-normal);
+  letter-spacing: var(--bf-type-body-sm-letter-spacing);
   text-transform: none;
 
   svg {
@@ -259,7 +259,7 @@
 }
 
 .rich-text-tag-pill__text--widget-ref {
-  font-family: var(--bf-font-family-sans);
+  font-family: var(--bf-type-body-sm-font-family);
   max-width: 260px;
 }
 
@@ -280,7 +280,7 @@
   color: currentColor;
   opacity: 0.6;
   font-size: var(--bf-type-flow-section-title-font-size);
-  line-height: var(--bf-line-height-none);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
   cursor: pointer;
   border-radius: 50%;
   transition:
diff --git a/src/web-ui/src/flow_chat/components/ScrollToBottomButton.scss b/src/web-ui/src/flow_chat/components/ScrollToBottomButton.scss
index 430ac7ffc2..4a49a1de2e 100644
--- a/src/web-ui/src/flow_chat/components/ScrollToBottomButton.scss
+++ b/src/web-ui/src/flow_chat/components/ScrollToBottomButton.scss
@@ -86,8 +86,8 @@
     -webkit-backdrop-filter: blur(8px);
     
     font-size: var(--bf-type-flow-meta-font-size);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-none);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     
     box-shadow: 
       0 2px 8px color-mix(in srgb, var(--bf-color-accent-hover) 40%, transparent),
diff --git a/src/web-ui/src/flow_chat/components/TaskDetailPanel/TaskDetailPanel.scss b/src/web-ui/src/flow_chat/components/TaskDetailPanel/TaskDetailPanel.scss
index 0458d7ed7c..b263e94f85 100644
--- a/src/web-ui/src/flow_chat/components/TaskDetailPanel/TaskDetailPanel.scss
+++ b/src/web-ui/src/flow_chat/components/TaskDetailPanel/TaskDetailPanel.scss
@@ -40,7 +40,7 @@
 
   &__header-title {
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -53,7 +53,7 @@
     padding: 2px 6px;
     border-radius: 4px;
     font-size: var(--bf-type-flow-micro-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
     background: color-mix(in srgb, var(--bf-color-content-on-dark) 8%, transparent);
     flex-shrink: 0;
@@ -131,7 +131,7 @@
     summary {
       padding: 8px 12px;
       font-size: var(--bf-type-flow-control-font-size);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
       color: var(--bf-color-content-secondary);
       cursor: pointer;
       user-select: none;
@@ -159,9 +159,9 @@
   &__prompt-content {
     margin: 0;
     padding: 10px 12px;
-    font-family:var(--bf-font-family-sans);
+    font-family:var(--bf-type-body-sm-font-family);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     line-height: var(--bf-type-flow-support-line-height);
     color: var(--bf-color-content-secondary);
     background: transparent;
@@ -198,7 +198,7 @@
     summary {
       padding: 8px 12px;
       font-size: var(--bf-type-flow-control-font-size);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
       color: var(--bf-color-content-secondary);
       cursor: pointer;
       user-select: none;
@@ -236,7 +236,7 @@
   }
 
   &__reviewer-role {
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     font-size: var(--bf-type-flow-control-font-size);
   }
 
diff --git a/src/web-ui/src/flow_chat/components/TokenUsageIndicator.scss b/src/web-ui/src/flow_chat/components/TokenUsageIndicator.scss
index 84f70c405b..b2159cca7d 100644
--- a/src/web-ui/src/flow_chat/components/TokenUsageIndicator.scss
+++ b/src/web-ui/src/flow_chat/components/TokenUsageIndicator.scss
@@ -9,7 +9,7 @@
   padding: 0;
   border-radius: 8px;
   font-size: var(--bf-type-flow-micro-font-size);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
   transition: opacity 140ms ease;
   cursor: default;
   white-space: nowrap;
@@ -71,7 +71,7 @@
 
   &__percentage {
     line-height: var(--bf-type-flow-meta-line-height);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     font-size: var(--bf-type-flow-micro-font-size);
   }
 
diff --git a/src/web-ui/src/flow_chat/components/WelcomePanel.css b/src/web-ui/src/flow_chat/components/WelcomePanel.css
index 2d1f917b56..d6918d1159 100644
--- a/src/web-ui/src/flow_chat/components/WelcomePanel.css
+++ b/src/web-ui/src/flow_chat/components/WelcomePanel.css
@@ -48,11 +48,11 @@
 
 .welcome-panel__heading {
   margin: 0;
-  font-size: var(--bf-font-size-4xl);
-  font-weight: var(--bf-font-weight-bold);
+  font-size: var(--bf-type-heading-display-font-size);
+  font-weight: var(--bf-type-heading-page-font-weight);
   color: var(--bf-color-content-primary);
   line-height: var(--bf-type-flow-meta-line-height);
-  letter-spacing: var(--bf-letter-spacing-tight);
+  letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
 }
 
 .welcome-panel__tagline {
@@ -107,8 +107,8 @@
   border-radius: 5px;
   color: var(--bf-color-content-primary);
   font-size: inherit;
-  font-family:var(--bf-font-family-sans);
-  font-weight: var(--bf-font-weight-semibold);
+  font-family:var(--bf-type-body-sm-font-family);
+  font-weight: var(--bf-type-label-selected-font-weight);
   line-height: inherit;
   cursor: default;
   vertical-align: baseline;
@@ -175,7 +175,7 @@
   line-height: inherit;
   color: var(--bf-color-content-muted);
   opacity: 0.4;
-  font-weight: var(--bf-font-weight-regular);
+  font-weight: var(--bf-type-body-sm-font-weight);
   user-select: none;
 }
 
diff --git a/src/web-ui/src/flow_chat/components/background-command/BackgroundCommandInputDialog.scss b/src/web-ui/src/flow_chat/components/background-command/BackgroundCommandInputDialog.scss
index 50f2fe17c4..e8000f223f 100644
--- a/src/web-ui/src/flow_chat/components/background-command/BackgroundCommandInputDialog.scss
+++ b/src/web-ui/src/flow_chat/components/background-command/BackgroundCommandInputDialog.scss
@@ -20,8 +20,8 @@
     code {
       min-width: 0;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -30,16 +30,16 @@
 
   &__summary-label {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__textarea {
     .bitfun-textarea__field {
       min-height: 96px;
       resize: vertical;
-      font-family:var(--bf-font-family-mono);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-base);
+      font-family:var(--bf-type-code-md-font-family);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
     }
 
     &--masked .bitfun-textarea__field {
@@ -64,8 +64,8 @@
   &__note {
     margin: 0;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__actions {
diff --git a/src/web-ui/src/flow_chat/components/background-command/BackgroundCommandOutputPanel.scss b/src/web-ui/src/flow_chat/components/background-command/BackgroundCommandOutputPanel.scss
index e121cd89da..7d8e212586 100644
--- a/src/web-ui/src/flow_chat/components/background-command/BackgroundCommandOutputPanel.scss
+++ b/src/web-ui/src/flow_chat/components/background-command/BackgroundCommandOutputPanel.scss
@@ -46,7 +46,7 @@
     .bitfun-checkbox__label {
       color: var(--bf-color-content-secondary);
       font-size: var(--bf-type-flow-support-font-size);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
     &:hover .bitfun-checkbox__label {
@@ -70,14 +70,14 @@
     h2 {
       margin: 0;
       font-size: var(--bf-type-flow-lead-font-size);
-      line-height: var(--bf-line-height-tight);
+      line-height: var(--bf-type-label-md-line-height);
     }
 
     p {
       margin: 4px 0 0;
       max-width: 100%;
       color: var(--bf-color-content-secondary);
-      font-family: var(--bf-font-family-mono);
+      font-family: var(--bf-type-code-md-font-family);
       font-size: var(--bf-type-flow-support-font-size);
       white-space: nowrap;
       overflow: hidden;
@@ -182,9 +182,9 @@
       min-height: 74px;
       max-height: 180px;
       resize: vertical;
-      font-family: var(--bf-font-family-mono);
+      font-family: var(--bf-type-code-md-font-family);
       font-size: var(--bf-type-flow-support-font-size);
-      line-height: var(--bf-line-height-base);
+      line-height: var(--bf-type-body-sm-line-height);
     }
 
     &--masked .bitfun-textarea__field {
diff --git a/src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.scss b/src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.scss
index afa7de2f34..4bb4204baa 100644
--- a/src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.scss
+++ b/src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.scss
@@ -66,7 +66,7 @@
     padding: 2px 6px;
     border-radius: 4px;
     font-size: var(--bf-type-flow-micro-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
     background: color-mix(in srgb, var(--bf-color-content-on-dark) 8%, transparent);
     flex-shrink: 0;
@@ -74,7 +74,7 @@
 
   &__title {
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -258,7 +258,7 @@
     border: 1px solid var(--bf-color-border-default);
     color: var(--bf-color-content-primary);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     cursor: pointer;
     box-shadow: 0 2px 12px color-mix(in srgb, var(--bf-color-content-on-light) 12%, transparent);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
diff --git a/src/web-ui/src/flow_chat/components/btw/DeepReviewActionBar.scss b/src/web-ui/src/flow_chat/components/btw/DeepReviewActionBar.scss
index beec6611f9..d45bb9967c 100644
--- a/src/web-ui/src/flow_chat/components/btw/DeepReviewActionBar.scss
+++ b/src/web-ui/src/flow_chat/components/btw/DeepReviewActionBar.scss
@@ -154,7 +154,7 @@
   }
 
   &__status-title {
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     font-size: var(--bf-type-flow-control-font-size);
     color: var(--bf-color-content-primary);
   }
@@ -186,7 +186,7 @@
     border: none;
     color: var(--bf-color-content-primary);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     cursor: pointer;
     transition: background 0.2s;
     width: fit-content;
@@ -263,7 +263,7 @@
   }
 
   &__remediation-group-title {
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     flex: 1;
   }
 
@@ -339,7 +339,7 @@
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-muted);
     font-size: var(--bf-type-flow-micro-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     line-height: var(--bf-type-flow-meta-line-height);
     vertical-align: text-bottom;
   }
@@ -433,7 +433,7 @@
 
     &.is-recommended .deep-review-action-bar__decision-option-text {
       color: var(--bf-color-accent-default);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
   }
 
@@ -456,7 +456,7 @@
     padding: 1px 6px;
     border-radius: 4px;
     font-size: var(--bf-type-flow-micro-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-accent-default);
     background: color-mix(in srgb, var(--bf-color-accent-default) 12%, transparent);
     margin-right: 6px;
@@ -520,7 +520,7 @@
   &__decision-gate-title {
     color: var(--bf-color-content-primary);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__decision-gate-desc {
@@ -548,7 +548,7 @@
 
   &__decision-question {
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     line-height: var(--bf-type-flow-support-line-height);
   }
 
@@ -604,7 +604,7 @@
     }
 
     &.is-recommended .deep-review-action-bar__decision-gate-option-text {
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
   }
 
@@ -803,7 +803,7 @@
 
   &__progress-text {
     color: var(--bf-color-content-secondary);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__elapsed {
@@ -847,7 +847,7 @@
 
   &__capacity-queue-title {
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__capacity-queue-detail {
@@ -885,7 +885,7 @@
   &__capacity-queue-reviewers-title {
     color: var(--bf-color-content-secondary);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__capacity-queue-reviewer-list {
@@ -909,7 +909,7 @@
 
   &__capacity-queue-reviewer-name {
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__capacity-queue-reviewer-meta {
@@ -975,7 +975,7 @@
   }
 
   &__partial-section-title {
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__partial-list {
@@ -1090,7 +1090,7 @@
 
   &__degradation-title {
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
@@ -1119,7 +1119,7 @@
 
   &__degradation-label {
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
   }
 
diff --git a/src/web-ui/src/flow_chat/components/modern/ExportImageButton.scss b/src/web-ui/src/flow_chat/components/modern/ExportImageButton.scss
index fa9a06a86d..54f2366ed3 100644
--- a/src/web-ui/src/flow_chat/components/modern/ExportImageButton.scss
+++ b/src/web-ui/src/flow_chat/components/modern/ExportImageButton.scss
@@ -13,7 +13,7 @@
   padding: 24px 48px;
   background: var(--bf-color-surface-scene);
   box-sizing: border-box;
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
   /* Use a fixed 800px layout context so text wraps at exactly the same
      width regardless of the wrapper's position or viewport. */
   container-type: inline-size;
@@ -90,8 +90,8 @@
   }
 
   &__title {
-    font-size: var(--bf-font-size-xl);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-flow-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     display: inline-block;
   }
@@ -120,7 +120,7 @@
     border: 1px solid var(--bf-color-border-default);
     border-radius: 12px;
     padding: 14px 16px;
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
     line-height: var(--bf-type-flow-body-line-height);
     color: var(--bf-color-content-primary);
     white-space: pre-wrap !important;
@@ -201,7 +201,7 @@
   }
 
   &__footer-brand {
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-secondary);
     white-space: nowrap;
   }
diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss
index d1147007a0..00ba26f50d 100644
--- a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss
+++ b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss
@@ -224,7 +224,7 @@
     overflow: hidden;
     z-index: var(--bf-layer-popover);
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
+    font-family:var(--bf-type-body-sm-font-family);
   }
 
   &__session-overview-panel-header {
@@ -318,7 +318,7 @@
     overflow: hidden;
     color: var(--bf-color-content-primary);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -361,7 +361,7 @@
 
     &--action {
       border-radius: var(--bf-radius-base);
-      font-family:var(--bf-font-family-sans);
+      font-family:var(--bf-type-body-sm-font-family);
       cursor: pointer;
       transition: background var(--bf-motion-duration-base) var(--bf-motion-easing-standard);
 
@@ -394,7 +394,7 @@
     border-radius: var(--bf-radius-base);
     background: transparent;
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
+    font-family:var(--bf-type-body-sm-font-family);
     font-size: var(--bf-type-flow-control-font-size);
     text-align: left;
     cursor: pointer;
diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatTurnRail.scss b/src/web-ui/src/flow_chat/components/modern/FlowChatTurnRail.scss
index 6f45fb7ec3..8856ae48c5 100644
--- a/src/web-ui/src/flow_chat/components/modern/FlowChatTurnRail.scss
+++ b/src/web-ui/src/flow_chat/components/modern/FlowChatTurnRail.scss
@@ -105,9 +105,9 @@
   &__tooltip-turn {
     color: var(--bf-color-content-secondary);
     font-size: var(--bf-type-flow-micro-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     line-height: var(--bf-type-flow-meta-line-height);
-    letter-spacing: var(--bf-letter-spacing-normal);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   &__tooltip-message {
@@ -116,7 +116,7 @@
     color: var(--bf-color-content-primary);
     font-size: var(--bf-type-flow-control-font-size);
     line-height: var(--bf-type-flow-support-line-height);
-    letter-spacing: var(--bf-letter-spacing-normal);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
     overflow-wrap: anywhere;
     white-space: pre-wrap;
     -webkit-box-orient: vertical;
diff --git a/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.scss b/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.scss
index b92d9b9aa8..e759ae1f36 100644
--- a/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.scss
+++ b/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.scss
@@ -131,7 +131,7 @@
   font-size: var(--bf-type-flow-meta-font-size);
   line-height: var(--bf-type-flow-meta-line-height);
   text-transform: uppercase;
-  letter-spacing: var(--bf-letter-spacing-wider);
+  letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
 }
 
 .model-round-item__attempt-diagnostic-toggle,
@@ -174,8 +174,8 @@
   background: var(--bf-color-surface-panel);
   color: var(--bf-color-content-secondary);
   font-size: var(--bf-type-flow-support-font-size);
-  font-weight: var(--bf-font-weight-regular);
-  letter-spacing: var(--bf-letter-spacing-normal);
+  font-weight: var(--bf-type-body-sm-font-weight);
+  letter-spacing: var(--bf-type-body-sm-letter-spacing);
   line-height: var(--bf-type-flow-support-line-height);
   text-transform: none;
 }
@@ -189,7 +189,7 @@
 .model-round-item__attempt-diagnostic-category {
   margin-bottom: 0.35rem;
   color: var(--bf-color-content-primary);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .model-round-item__attempt-diagnostic-section + .model-round-item__attempt-diagnostic-section {
@@ -199,7 +199,7 @@
 .model-round-item__attempt-diagnostic-tool-title {
   margin-bottom: 0.2rem;
   color: var(--bf-color-content-primary);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .model-round-item__attempt-diagnostic-section-header {
@@ -220,9 +220,9 @@
   border-radius: 3px;
   background: var(--bf-color-surface-tertiary);
   color: var(--bf-color-content-primary);
-  font-family:var(--bf-font-family-mono);
+  font-family:var(--bf-type-code-md-font-family);
   font-size: var(--bf-type-flow-support-font-size);
-  line-height: var(--bf-line-height-compact);
+  line-height: var(--bf-type-meta-line-height);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
diff --git a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.scss b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.scss
index 500d0c6eef..3a64a84a15 100644
--- a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.scss
+++ b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.scss
@@ -3,7 +3,7 @@
  */
 
 .modern-flowchat-container.flow-chat-typography {
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
   font-size: var(--bf-type-flow-body-font-size);
   line-height: var(--bf-type-flow-body-line-height);
 }
@@ -87,7 +87,7 @@
   margin: 0;
   color: var(--bf-color-content-primary);
   font-size: var(--bf-type-flow-title-font-size);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
   line-height: var(--bf-type-flow-support-line-height);
 }
 
diff --git a/src/web-ui/src/flow_chat/components/modern/SessionFileModificationsBar.scss b/src/web-ui/src/flow_chat/components/modern/SessionFileModificationsBar.scss
index 28dbbe9152..bc3d48a74b 100644
--- a/src/web-ui/src/flow_chat/components/modern/SessionFileModificationsBar.scss
+++ b/src/web-ui/src/flow_chat/components/modern/SessionFileModificationsBar.scss
@@ -52,7 +52,7 @@
 
   .file-count {
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     white-space: nowrap;
   }
@@ -62,8 +62,8 @@
     align-items: center;
     gap: var(--bf-space-2);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-medium);
-    font-family: var(--bf-font-family-mono);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    font-family: var(--bf-type-code-md-font-family);
 
     .stat-add {
       color: var(--bf-color-status-success-content);
@@ -195,7 +195,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
     &__source {
@@ -208,8 +208,8 @@
       background: color-mix(in srgb, color-mix(in srgb, var(--bf-color-accent-default) 40%, transparent) 9%, transparent);
       color: color-mix(in srgb, color-mix(in srgb, var(--bf-color-accent-default) 40%, transparent) 72%, var(--bf-color-content-secondary));
       font-size: var(--bf-type-flow-micro-font-size);
-      font-weight: var(--bf-font-weight-semibold);
-      line-height: var(--bf-line-height-none);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      line-height: var(--bf-type-modifier-leading-none-line-height);
       white-space: nowrap;
       flex-shrink: 0;
     }
@@ -220,8 +220,8 @@
       gap: 6px;
       flex-shrink: 0;
       font-size: var(--bf-type-flow-control-font-size);
-      font-weight: var(--bf-font-weight-medium);
-      font-family: var(--bf-font-family-mono);
+      font-weight: var(--bf-type-label-sm-font-weight);
+      font-family: var(--bf-type-code-md-font-family);
 
       .stat-add {
         color: var(--bf-color-status-success-content);
diff --git a/src/web-ui/src/flow_chat/components/modern/SessionFilesBadge.scss b/src/web-ui/src/flow_chat/components/modern/SessionFilesBadge.scss
index 1908662106..f63a8af255 100644
--- a/src/web-ui/src/flow_chat/components/modern/SessionFilesBadge.scss
+++ b/src/web-ui/src/flow_chat/components/modern/SessionFilesBadge.scss
@@ -21,7 +21,7 @@
     border: none;
     border-radius: var(--bf-radius-base);
     font-size: var(--bf-type-flow-support-font-size);
-    line-height: var(--bf-line-height-none);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     color: var(--bf-color-content-secondary);
     cursor: pointer;
     transition:
@@ -54,8 +54,8 @@
   }
 
   &__stats {
-    font-weight: var(--bf-font-weight-medium);
-    font-family: var(--bf-font-family-mono);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    font-family: var(--bf-type-code-md-font-family);
     font-size: inherit;
     line-height: inherit;
 
@@ -175,8 +175,8 @@
     position: relative;
     z-index: 1;
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-none);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
   }
 
   // Expanded state
@@ -198,7 +198,7 @@
     max-height: calc(100vh - 16px);
     overflow: hidden;
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
+    font-family:var(--bf-type-body-sm-font-family);
     animation: session-files-badge-popover-in 0.2s var(--bf-motion-easing-standard);
 
     @keyframes session-files-badge-popover-in {
@@ -227,7 +227,7 @@
 
   &__popover-summary-count {
     min-width: 0;
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     white-space: nowrap;
     overflow: hidden;
@@ -239,7 +239,7 @@
     align-items: center;
     gap: 6px;
     flex-shrink: 0;
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
   }
 
   // ==================== File list ====================
@@ -344,7 +344,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-sm-font-weight);
   }
 
   &__file-stats {
@@ -353,8 +353,8 @@
     gap: 4px;
     flex-shrink: 0;
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-medium);
-    font-family: var(--bf-font-family-mono);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    font-family: var(--bf-type-code-md-font-family);
   }
 
   &__file-stat {
diff --git a/src/web-ui/src/flow_chat/components/modern/SessionTreePopover.scss b/src/web-ui/src/flow_chat/components/modern/SessionTreePopover.scss
index 1afe7f6092..582062504b 100644
--- a/src/web-ui/src/flow_chat/components/modern/SessionTreePopover.scss
+++ b/src/web-ui/src/flow_chat/components/modern/SessionTreePopover.scss
@@ -104,7 +104,7 @@
     overflow: hidden;
     z-index: var(--bf-layer-popover);
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-sans);
+    font-family:var(--bf-type-body-sm-font-family);
     transform-origin: center top;
     transition:
       opacity 100ms ease,
@@ -163,7 +163,7 @@
     }
 
     &--root {
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
     &--subagent {
@@ -274,7 +274,7 @@
   &__node-meta {
     color: var(--bf-color-content-muted);
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-sm-font-weight);
   }
 
   &__status {
diff --git a/src/web-ui/src/flow_chat/components/modern/TurnCompletionNoticeItem.scss b/src/web-ui/src/flow_chat/components/modern/TurnCompletionNoticeItem.scss
index 36e0aa02ba..d8f97b6e2e 100644
--- a/src/web-ui/src/flow_chat/components/modern/TurnCompletionNoticeItem.scss
+++ b/src/web-ui/src/flow_chat/components/modern/TurnCompletionNoticeItem.scss
@@ -13,8 +13,8 @@
   border-radius: 12px;
   background: color-mix(in srgb, var(--bf-color-surface-panel) 92%, transparent);
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-support);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-flow-support-line-height);
 
   &--warning {
     border-color: color-mix(in srgb, var(--bf-color-status-warning-content) 45%, transparent);
@@ -61,7 +61,7 @@
 }
 
 .turn-completion-notice__title {
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
   flex: 0 1 auto;
   min-width: 0;
 }
@@ -91,8 +91,8 @@
   background: color-mix(in srgb, currentColor 10%, transparent);
   color: color-mix(in srgb, currentColor 72%, transparent);
   border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-meta);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-meta-font-size);
 }
 
 @media (max-width: 900px) {
diff --git a/src/web-ui/src/flow_chat/components/modern/TurnFailureNoticeItem.scss b/src/web-ui/src/flow_chat/components/modern/TurnFailureNoticeItem.scss
index 1dce97c742..1f963faca8 100644
--- a/src/web-ui/src/flow_chat/components/modern/TurnFailureNoticeItem.scss
+++ b/src/web-ui/src/flow_chat/components/modern/TurnFailureNoticeItem.scss
@@ -12,8 +12,8 @@
   border-radius: 6px;
   background: color-mix(in srgb, var(--bf-color-status-danger-content) 10%, var(--bf-color-surface-panel));
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-support);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-flow-support-line-height);
 
   &--warning {
     border-color: color-mix(in srgb, var(--bf-color-status-warning-content) 45%, transparent);
@@ -54,7 +54,7 @@
 
 .turn-failure-notice__title {
   flex: 0 0 auto;
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
   white-space: nowrap;
 }
 
@@ -115,7 +115,7 @@
     min-width: 0;
     margin: 0;
     overflow-wrap: anywhere;
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
   }
 }
 
@@ -158,9 +158,9 @@
   border-radius: 4px;
   background: color-mix(in srgb, var(--bf-color-surface-canvas) 75%, transparent);
   color: var(--bf-color-content-primary);
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-meta);
-  line-height: var(--bf-line-height-support);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-meta-font-size);
+  line-height: var(--bf-type-flow-support-line-height);
   overflow-wrap: anywhere;
   white-space: pre-wrap;
 }
diff --git a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss
index 4f5f61c02e..f05312f361 100644
--- a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss
+++ b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss
@@ -79,9 +79,9 @@
   padding: 0.12rem 0.44rem;
   border-radius: 999px;
   font-size: var(--bf-type-flow-micro-font-size);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
   line-height: var(--bf-type-flow-meta-line-height);
-  letter-spacing: var(--bf-letter-spacing-normal);
+  letter-spacing: var(--bf-type-body-sm-letter-spacing);
   user-select: none;
 }
 
@@ -119,7 +119,7 @@
 .user-message-item__content {
   flex: 1;
   font-size: var(--bf-type-flow-body-font-size);
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-sm-font-weight);
   line-height: var(--bf-type-flow-body-line-height);
   color: var(--bf-color-content-primary);
   white-space: pre-wrap;
@@ -149,8 +149,8 @@
   background: var(--bf-color-action-neutral-surface-hover);
   color: var(--bf-color-content-secondary);
   font-size: var(--bf-type-flow-control-font-size);
-  font-weight: var(--bf-font-weight-medium);
-  line-height: var(--bf-line-height-compact);
+  font-weight: var(--bf-type-label-sm-font-weight);
+  line-height: var(--bf-type-meta-line-height);
   white-space: nowrap;
   user-select: none;
 
@@ -178,7 +178,7 @@
 // `-webkit-box` line-clamp does not expose a reliable baseline for `align-items: baseline`).
 .user-message-item--failed {
   --_failed-font-size: var(--bf-type-flow-control-font-size);
-  --_failed-line-height: var(--bf-line-height-comfortable);
+  --_failed-line-height: var(--bf-type-support-line-height);
   --_failed-line-box: calc(
     var(--_failed-font-size) * var(--_failed-line-height)
   );
@@ -240,7 +240,7 @@
     max-width: 100%;
     color: var(--bf-color-content-muted);
     font-size: var(--_failed-font-size);
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-sm-font-weight);
     font-style: italic;
     line-height: var(--_failed-line-height);
     text-decoration: line-through;
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss
index 1420c31117..3384ecb082 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss
@@ -95,8 +95,8 @@
     border-radius: 6px;
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     text-align: center;
     overflow-wrap: anywhere;
     pointer-events: none;
@@ -111,8 +111,8 @@
     justify-content: center;
     gap: 6px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     pointer-events: none;
     overflow-anchor: none;
     visibility: hidden;
diff --git a/src/web-ui/src/flow_chat/components/session-menu/SessionMenu.scss b/src/web-ui/src/flow_chat/components/session-menu/SessionMenu.scss
index 6a64142fa0..1a3ae195d3 100644
--- a/src/web-ui/src/flow_chat/components/session-menu/SessionMenu.scss
+++ b/src/web-ui/src/flow_chat/components/session-menu/SessionMenu.scss
@@ -75,7 +75,7 @@ $session-menu-timing: cubic-bezier(0.4, 0, 0.2, 1);
 
 .bitfun-session-menu__item {
   &--new {
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
 
     &:hover .bitfun-session-menu__item-icon {
       background: var(--bf-color-action-secondary-pressed);
diff --git a/src/web-ui/src/flow_chat/components/smart-recommendations/SmartRecommendations.scss b/src/web-ui/src/flow_chat/components/smart-recommendations/SmartRecommendations.scss
index 3dd3fed857..cb392df603 100644
--- a/src/web-ui/src/flow_chat/components/smart-recommendations/SmartRecommendations.scss
+++ b/src/web-ui/src/flow_chat/components/smart-recommendations/SmartRecommendations.scss
@@ -22,7 +22,7 @@
 
   &__title {
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
diff --git a/src/web-ui/src/flow_chat/components/subagent/SubagentProjectionView.scss b/src/web-ui/src/flow_chat/components/subagent/SubagentProjectionView.scss
index 8c9a403040..548f5d891b 100644
--- a/src/web-ui/src/flow_chat/components/subagent/SubagentProjectionView.scss
+++ b/src/web-ui/src/flow_chat/components/subagent/SubagentProjectionView.scss
@@ -40,7 +40,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-secondary);
 }
 
diff --git a/src/web-ui/src/flow_chat/components/thread-goal/ThreadGoalDialogs.scss b/src/web-ui/src/flow_chat/components/thread-goal/ThreadGoalDialogs.scss
index ba12f2d3ba..3ff3245636 100644
--- a/src/web-ui/src/flow_chat/components/thread-goal/ThreadGoalDialogs.scss
+++ b/src/web-ui/src/flow_chat/components/thread-goal/ThreadGoalDialogs.scss
@@ -27,8 +27,8 @@
   padding: 6px 12px;
   border-radius: var(--bf-radius-pill);
   font-size: var(--bf-type-flow-support-font-size);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-dense);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-modifier-leading-dense-line-height);
   border: 1px solid transparent;
 
   &--active,
@@ -57,7 +57,7 @@
   margin: 0;
   font-size: var(--bf-type-flow-micro-font-size);
   color: var(--bf-color-content-secondary);
-  line-height: var(--bf-line-height-ui);
+  line-height: var(--bf-type-modifier-leading-ui-line-height);
   text-align: right;
 }
 
@@ -75,18 +75,18 @@
   margin: 0;
   padding: 0;
   font-size: var(--bf-type-flow-micro-font-size);
-  font-weight: var(--bf-font-weight-semibold);
-  letter-spacing: var(--bf-letter-spacing-widest);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-widest-letter-spacing);
   text-transform: uppercase;
   color: var(--bf-color-content-muted);
-  line-height: var(--bf-line-height-snug);
+  line-height: var(--bf-type-modifier-leading-snug-line-height);
 }
 
 .bitfun-thread-goal-menu__objective {
   margin: 0;
   padding: 0;
   font-size: var(--bf-type-flow-control-font-size);
-  line-height: var(--bf-line-height-relaxed);
+  line-height: var(--bf-type-body-lg-line-height);
   color: var(--bf-color-content-primary);
   white-space: pre-wrap;
   word-break: break-word;
@@ -106,7 +106,7 @@
   align-items: flex-start;
   gap: var(--bf-space-3);
   font-size: var(--bf-type-flow-support-font-size);
-  line-height: var(--bf-line-height-base);
+  line-height: var(--bf-type-body-sm-line-height);
   color: var(--bf-color-content-secondary);
 }
 
@@ -145,7 +145,7 @@
 }
 
 .bitfun-thread-goal-menu__workflow-step--current .bitfun-thread-goal-menu__workflow-text {
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-sm-font-weight);
 }
 
 .bitfun-thread-goal-menu__workflow-step--skipped {
@@ -162,7 +162,7 @@
   padding: var(--bf-space-3) 0 0;
   border-top: 1px solid var(--bf-color-border-subtle);
   font-size: var(--bf-type-flow-micro-font-size);
-  line-height: var(--bf-line-height-comfortable);
+  line-height: var(--bf-type-support-line-height);
   color: var(--bf-color-content-muted);
 }
 
@@ -192,7 +192,7 @@
   padding: 0;
   font-size: var(--bf-type-flow-micro-font-size);
   color: var(--bf-color-content-muted);
-  line-height: var(--bf-line-height-base);
+  line-height: var(--bf-type-body-sm-line-height);
   text-align: center;
 }
 
@@ -219,7 +219,7 @@
   margin: 0;
   font-size: var(--bf-type-flow-support-font-size);
   color: var(--bf-color-content-secondary);
-  line-height: var(--bf-line-height-comfortable);
+  line-height: var(--bf-type-support-line-height);
 }
 
 .bitfun-thread-goal-resume__subtitle {
@@ -228,7 +228,7 @@
   border-radius: var(--bf-radius-lg);
   font-size: var(--bf-type-flow-control-font-size);
   color: var(--bf-color-content-primary);
-  line-height: var(--bf-line-height-comfortable);
+  line-height: var(--bf-type-support-line-height);
   background: var(--bf-color-surface-subtle);
   border: 1px solid var(--bf-color-border-subtle);
   word-break: break-word;
diff --git a/src/web-ui/src/flow_chat/components/toolbar-mode/ToolbarMode.scss b/src/web-ui/src/flow_chat/components/toolbar-mode/ToolbarMode.scss
index e6a78a39aa..d3244ceab2 100644
--- a/src/web-ui/src/flow_chat/components/toolbar-mode/ToolbarMode.scss
+++ b/src/web-ui/src/flow_chat/components/toolbar-mode/ToolbarMode.scss
@@ -25,7 +25,7 @@ $transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
   box-sizing: border-box;
   cursor: grab;
 
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
   font-size: var(--bf-type-flow-control-font-size);
   color: var(--bf-color-content-primary);
 
@@ -192,7 +192,7 @@ $transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
   box-sizing: border-box;
   color: var(--bf-color-content-primary);
   font-size: var(--bf-type-flow-support-font-size);
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-sm-font-weight);
   border-radius: var(--bf-radius-sm);
 }
 
@@ -329,7 +329,7 @@ $transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     align-items: center;
     gap: 8px;
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
 
     &:hover .bitfun-toolbar-mode__session-item-icon {
@@ -437,7 +437,7 @@ $transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
     background: color-mix(in srgb, var(--bf-color-accent-secondary) 15%, transparent);
     color: var(--bf-color-accent-secondary);
     font-size: var(--bf-type-flow-meta-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &-summary {
@@ -463,7 +463,7 @@ $transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
     background: var(--bf-color-action-secondary-hover);
     color: var(--bf-color-accent-default);
     font-size: var(--bf-type-flow-meta-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &-current {
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionRuntimeStatusEntry.scss b/src/web-ui/src/flow_chat/components/usage/SessionRuntimeStatusEntry.scss
index e3b5b44895..5c14ea67c3 100644
--- a/src/web-ui/src/flow_chat/components/usage/SessionRuntimeStatusEntry.scss
+++ b/src/web-ui/src/flow_chat/components/usage/SessionRuntimeStatusEntry.scss
@@ -10,7 +10,7 @@
   background: color-mix(in srgb, var(--bf-color-action-quiet-hover) 58%, transparent);
   color: var(--bf-color-content-secondary);
   font-size: var(--bf-type-flow-support-font-size);
-  line-height: var(--bf-line-height-none);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
   cursor: pointer;
   min-width: 0;
 
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.scss b/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.scss
index 6261b4c053..230696a40d 100644
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.scss
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsageModal.scss
@@ -15,10 +15,10 @@
 
 .session-usage-dialog__title {
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-3xl);
-  font-weight: var(--bf-font-weight-bold);
-  letter-spacing: var(--bf-letter-spacing-tight);
-  line-height: var(--bf-line-height-dense);
+  font-size: var(--bf-type-heading-dialog-font-size);
+  font-weight: var(--bf-type-heading-page-font-weight);
+  letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
+  line-height: var(--bf-type-modifier-leading-dense-line-height);
 }
 
 .session-usage-dialog__body {
@@ -56,6 +56,6 @@
   }
 
   .session-usage-dialog__title {
-    font-size: var(--bf-font-size-2xl);
+    font-size: var(--bf-type-flow-section-title-font-size);
   }
 }
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.scss b/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.scss
index ca95899fea..257df4a3d1 100644
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.scss
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.scss
@@ -84,8 +84,8 @@
     h2 {
       margin: 0;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-base);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-body-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
       line-height: var(--bf-type-flow-meta-line-height);
     }
   }
@@ -137,7 +137,7 @@
     gap: 4px;
     color: var(--bf-color-content-secondary);
     font-size: var(--bf-type-flow-support-font-size);
-    line-height: var(--bf-line-height-none);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     white-space: nowrap;
     cursor: pointer;
 
@@ -275,8 +275,8 @@
 
     strong {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xl);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-flow-title-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
       white-space: nowrap;
     }
 
@@ -358,7 +358,7 @@
 
     strong {
       color: var(--bf-color-content-primary);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
   }
 
@@ -392,7 +392,7 @@
 
     th {
       color: var(--bf-color-content-secondary);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       background: color-mix(in srgb, var(--bf-color-action-quiet-hover) 66%, transparent);
       white-space: nowrap;
     }
@@ -465,7 +465,7 @@
     max-width: 100%;
     overflow: hidden;
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -497,7 +497,7 @@
     background: color-mix(in srgb, var(--bf-color-action-quiet-hover) 58%, transparent);
     color: var(--bf-color-content-muted);
     font-size: var(--bf-type-flow-support-font-size);
-    line-height: var(--bf-line-height-none);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     white-space: nowrap;
 
     &--help {
@@ -655,7 +655,7 @@
 
     strong {
       color: var(--bf-color-content-secondary);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     span {
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageReportCard.scss b/src/web-ui/src/flow_chat/components/usage/SessionUsageReportCard.scss
index 42e7fb3b9b..c2acce963e 100644
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsageReportCard.scss
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsageReportCard.scss
@@ -44,7 +44,7 @@
     margin: 0;
     color: var(--bf-color-content-primary);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     line-height: var(--bf-type-flow-meta-line-height);
   }
 
@@ -100,7 +100,7 @@
     margin: 0;
     color: var(--bf-color-content-primary);
     font-size: var(--bf-type-flow-lead-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     line-height: var(--bf-type-flow-meta-line-height);
     white-space: nowrap;
   }
@@ -131,7 +131,7 @@
     gap: 4px;
     color: var(--bf-color-content-secondary);
     font-size: var(--bf-type-flow-support-font-size);
-    line-height: var(--bf-line-height-none);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     white-space: nowrap;
     cursor: pointer;
 
@@ -162,7 +162,7 @@
     padding: 0 8px;
     border-radius: 999px;
     font-size: var(--bf-type-flow-support-font-size);
-    line-height: var(--bf-line-height-none);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     white-space: nowrap;
 
     &--complete {
@@ -241,7 +241,7 @@
     margin-left: auto;
     color: var(--bf-color-content-primary);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     white-space: nowrap;
 
     &--help {
@@ -278,7 +278,7 @@
   &__mini-list-title {
     min-width: 0;
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__mini-list-empty {
@@ -291,7 +291,7 @@
 
     strong {
       color: var(--bf-color-content-secondary);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     span {
@@ -338,7 +338,7 @@
     min-width: 0;
     overflow: hidden;
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -411,7 +411,7 @@
     display: inline-flex;
     align-items: center;
     gap: 5px;
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
   }
 
   &__file-stat--added {
@@ -469,8 +469,8 @@
   flex-basis: auto;
   flex-wrap: nowrap;
   gap: 0;
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-compact);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-meta-line-height);
 }
 
 .session-usage-report-card--compact .session-usage-report-card__meta span {
@@ -534,9 +534,9 @@
 .session-usage-report-card__compact-token-label {
   gap: 9px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-medium);
-  line-height: var(--bf-line-height-compact);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
+  line-height: var(--bf-type-meta-line-height);
 }
 
 .session-usage-report-card__compact-token-label svg,
@@ -549,11 +549,11 @@
   margin-top: 15px;
   overflow: hidden;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-6xl);
+  font-size: var(--bf-type-display-md-font-size);
   font-variant-numeric: tabular-nums;
-  font-weight: var(--bf-font-weight-semibold);
-  letter-spacing: var(--bf-letter-spacing-subtle);
-  line-height: var(--bf-line-height-none);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-subtle-letter-spacing);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -562,8 +562,8 @@
   min-width: 0;
   margin-top: 17px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-snug);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-modifier-leading-snug-line-height);
 }
 
 .session-usage-report-card__compact-model-name {
@@ -595,8 +595,8 @@
   gap: 8px;
   border-top: 1px solid color-mix(in srgb, var(--bf-color-border-default) 68%, transparent);
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-snug);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-modifier-leading-snug-line-height);
 }
 
 .session-usage-report-card__compact-cache-label {
@@ -607,8 +607,8 @@
   margin-left: 0;
   overflow: hidden;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-lg);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-body-lg-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   text-overflow: ellipsis;
 }
 
@@ -636,9 +636,9 @@
   min-width: 0;
   gap: 10px;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-medium);
-  line-height: var(--bf-line-height-compact);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
+  line-height: var(--bf-type-meta-line-height);
 }
 
 .session-usage-report-card__compact-metric-label svg {
@@ -660,10 +660,10 @@
   margin: 5px 0 0 28px;
   overflow: hidden;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-2xl);
+  font-size: var(--bf-type-flow-section-title-font-size);
   font-variant-numeric: tabular-nums;
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-tight);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-label-md-line-height);
   text-decoration: none;
   text-overflow: ellipsis;
 }
@@ -682,10 +682,10 @@
   margin: 0;
   overflow: hidden;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-2xl);
+  font-size: var(--bf-type-flow-section-title-font-size);
   font-variant-numeric: tabular-nums;
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-tight);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-label-md-line-height);
   text-decoration: none;
   text-overflow: ellipsis;
 }
@@ -717,9 +717,9 @@
 .session-usage-report-card__compact-tools-header h4 {
   margin: 0;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-xl);
-  font-weight: var(--bf-font-weight-bold);
-  line-height: var(--bf-line-height-tight);
+  font-size: var(--bf-type-flow-title-font-size);
+  font-weight: var(--bf-type-heading-page-font-weight);
+  line-height: var(--bf-type-label-md-line-height);
 }
 
 .session-usage-report-card__compact-tool-list {
@@ -754,15 +754,15 @@
 .session-usage-report-card__compact-tool-name {
   min-width: 0;
   overflow: hidden;
-  font-size: var(--bf-font-size-base);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .session-usage-report-card__compact-tool-calls {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
@@ -770,7 +770,7 @@
 .session-usage-report-card__compact-tool-empty {
   padding: 18px 0;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
 }
 
 .session-usage-report-card__compact-disclaimer {
@@ -778,8 +778,8 @@
   margin: auto 0 0;
   padding-top: 11px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-compact);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-meta-line-height);
   text-align: center;
 }
 
@@ -836,7 +836,7 @@
 
 @media (max-width: 420px) {
   .session-usage-report-card__compact-token-value {
-    font-size: var(--bf-font-size-5xl);
+    font-size: var(--bf-type-display-sm-font-size);
   }
 
   .session-usage-report-card__compact-metric {
@@ -846,6 +846,6 @@
   .session-usage-report-card__compact-metric > .session-usage-report-card__metric-value,
   .session-usage-report-card__compact-metric > [data-tooltip] .session-usage-report-card__metric-value {
     margin-left: 28px;
-    font-size: var(--bf-font-size-2xl);
+    font-size: var(--bf-type-flow-section-title-font-size);
   }
 }
diff --git a/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCall.scss b/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCall.scss
index 5af16a0c1b..ddb25d1957 100644
--- a/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCall.scss
+++ b/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCall.scss
@@ -44,16 +44,16 @@
     gap: 2px;
 
     strong {
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
-      line-height: var(--bf-line-height-tight);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      line-height: var(--bf-type-label-md-line-height);
     }
 
     small {
       overflow: hidden;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -99,8 +99,8 @@
     padding: var(--bf-space-3);
     border-radius: var(--bf-radius-base);
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-md-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     overflow-wrap: anywhere;
 
     svg { margin-top: 2px; }
@@ -124,8 +124,8 @@
     justify-content: center;
     padding: var(--bf-space-4);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-md-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     text-align: center;
   }
 
@@ -139,8 +139,8 @@
     border-radius: var(--bf-radius-sm);
     background: color-mix(in srgb, var(--bf-color-accent-default) 8%, transparent);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__task-pulse {
diff --git a/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCallButton.scss b/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCallButton.scss
index 28cc80da37..dc7bcf8ebb 100644
--- a/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCallButton.scss
+++ b/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCallButton.scss
@@ -21,11 +21,11 @@
     var(--bf-color-content-on-dark)
   );
   color: var(--bf-color-content-on-dark);
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-base);
-  font-weight: var(--bf-font-weight-regular);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-body-sm-font-weight);
   font-synthesis: none;
-  line-height: var(--bf-line-height-tight);
+  line-height: var(--bf-type-label-md-line-height);
   opacity: 0.22;
   cursor: pointer;
   transition:
diff --git a/src/web-ui/src/flow_chat/tool-cards/CanvasToolCard.scss b/src/web-ui/src/flow_chat/tool-cards/CanvasToolCard.scss
index 67fcf48adb..38f82b823a 100644
--- a/src/web-ui/src/flow_chat/tool-cards/CanvasToolCard.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/CanvasToolCard.scss
@@ -52,7 +52,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-family:var(--bf-font-family-mono);
+  font-family:var(--bf-type-code-md-font-family);
 }
 
 .canvas-tool-card__diagnostic-list {
diff --git a/src/web-ui/src/flow_chat/tool-cards/CodeReviewToolCard.scss b/src/web-ui/src/flow_chat/tool-cards/CodeReviewToolCard.scss
index 81b018c0fb..d2dcddbf3d 100644
--- a/src/web-ui/src/flow_chat/tool-cards/CodeReviewToolCard.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/CodeReviewToolCard.scss
@@ -90,7 +90,7 @@
   .review-reliability-status__title {
     color: var(--bf-color-content-muted);
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .review-reliability-status__items {
@@ -138,7 +138,7 @@
 
   .review-reliability-status__label {
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .review-reliability-status__detail {
@@ -153,7 +153,7 @@
 
     .summary-header {
       font-size: var(--bf-type-flow-control-font-size);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-primary);
       margin-bottom: 8px;
     }
@@ -190,7 +190,7 @@
     }
 
     .summary-label {
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-muted);
       font-size: var(--bf-type-flow-support-font-size);
       white-space: nowrap;
@@ -207,7 +207,7 @@
       &.risk-level {
         display: inline-flex;
         align-items: center;
-        font-weight: var(--bf-font-weight-semibold);
+        font-weight: var(--bf-type-label-selected-font-weight);
         gap: 4px;
         white-space: nowrap;
       }
@@ -247,7 +247,7 @@
   .review-report-section__title {
     overflow: hidden;
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -277,8 +277,8 @@
   .review-report-group__title {
     color: var(--bf-color-content-primary);
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-bold);
-    letter-spacing: var(--bf-letter-spacing-wider);
+    font-weight: var(--bf-type-heading-page-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     text-transform: uppercase;
   }
 
@@ -319,7 +319,7 @@
 
   .review-decision-item__question {
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   .review-decision-item__options {
@@ -334,7 +334,7 @@
 
       &.is-recommended {
         color: var(--bf-color-accent-default);
-        font-weight: var(--bf-font-weight-medium);
+        font-weight: var(--bf-type-label-sm-font-weight);
       }
     }
   }
@@ -374,7 +374,7 @@
       overflow: hidden;
       color: var(--bf-color-content-primary);
       font-size: var(--bf-type-flow-control-font-size);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -388,7 +388,7 @@
   .run-manifest__group-title {
     color: var(--bf-color-content-muted);
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
 
     &--warning {
       color: var(--bf-color-status-warning-content);
@@ -415,7 +415,7 @@
     overflow: hidden;
     color: var(--bf-color-content-primary);
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -459,7 +459,7 @@
     strong {
       color: var(--bf-color-content-muted);
       font-size: var(--bf-type-flow-support-font-size);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       white-space: nowrap;
     }
   }
@@ -510,7 +510,7 @@
 
   .reviewer-name {
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
@@ -594,7 +594,7 @@
     }
 
     .issue-category {
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-secondary);
       flex-shrink: 0;
       font-size: var(--bf-type-flow-micro-font-size);
@@ -616,7 +616,7 @@
 
     .issue-location {
       color: var(--bf-color-content-muted);
-      font-family:var(--bf-font-family-mono);
+      font-family:var(--bf-type-code-md-font-family);
       font-size: var(--bf-type-flow-support-font-size);
       white-space: nowrap;
       overflow: hidden;
@@ -635,7 +635,7 @@
     }
 
     .issue-title {
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-primary);
       margin-bottom: 4px;
       font-size: var(--bf-type-flow-control-font-size);
@@ -669,7 +669,7 @@
     }
 
     .suggestion-label {
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-status-success-content);
       flex-shrink: 0;
       font-size: var(--bf-type-flow-support-font-size);
@@ -687,7 +687,7 @@
 
     .team-header {
       font-size: var(--bf-type-flow-control-font-size);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-primary);
       margin-bottom: 8px;
     }
@@ -723,7 +723,7 @@
 
     .reviewer-name {
       font-size: var(--bf-type-flow-control-font-size);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-primary);
     }
 
@@ -754,7 +754,7 @@
       display: flex;
       align-items: center;
       font-size: var(--bf-type-flow-control-font-size);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-primary);
       margin-bottom: 8px;
     }
@@ -819,7 +819,7 @@
             min-width: 0;
 
             .issue-category {
-              font-weight: var(--bf-font-weight-semibold);
+              font-weight: var(--bf-type-label-selected-font-weight);
               color: var(--bf-color-content-secondary);
               flex-shrink: 0;
               font-size: var(--bf-type-flow-micro-font-size);
@@ -841,7 +841,7 @@
 
             .issue-location {
               color: var(--bf-color-content-muted);
-              font-family:var(--bf-font-family-mono);
+              font-family:var(--bf-type-code-md-font-family);
               font-size: var(--bf-type-flow-support-font-size);
               white-space: nowrap;
               overflow: hidden;
@@ -862,7 +862,7 @@
         }
 
         .issue-title {
-          font-weight: var(--bf-font-weight-semibold);
+          font-weight: var(--bf-type-label-selected-font-weight);
           color: var(--bf-color-content-primary);
           margin-bottom: 4px;
           font-size: var(--bf-type-flow-control-font-size);
@@ -895,7 +895,7 @@
           margin-top: 6px;
 
           .suggestion-label {
-            font-weight: var(--bf-font-weight-semibold);
+            font-weight: var(--bf-type-label-selected-font-weight);
             color: var(--bf-color-status-success-content);
             flex-shrink: 0;
             font-size: var(--bf-type-flow-support-font-size);
@@ -924,7 +924,7 @@
 
     .remediation-header {
       font-size: var(--bf-type-flow-control-font-size);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-primary);
       margin-bottom: 3px;
     }
@@ -995,7 +995,7 @@
       background: color-mix(in srgb, var(--bf-color-accent-default) 16%, transparent);
       color: var(--bf-color-accent-default);
       font-size: var(--bf-type-flow-micro-font-size);
-      font-weight: var(--bf-font-weight-bold);
+      font-weight: var(--bf-type-heading-page-font-weight);
       flex-shrink: 0;
       margin-top: 1px;
     }
@@ -1047,14 +1047,14 @@
       span {
         color: var(--bf-color-content-muted);
         font-size: var(--bf-type-flow-micro-font-size);
-        font-weight: var(--bf-font-weight-bold);
-        letter-spacing: var(--bf-letter-spacing-widest);
+        font-weight: var(--bf-type-heading-page-font-weight);
+        letter-spacing: var(--bf-type-modifier-tracking-widest-letter-spacing);
         text-transform: uppercase;
       }
 
       strong {
         color: var(--bf-color-content-primary);
-        font-weight: var(--bf-font-weight-semibold);
+        font-weight: var(--bf-type-label-selected-font-weight);
       }
     }
 
@@ -1081,7 +1081,7 @@
         overflow: hidden;
         color: var(--bf-color-content-primary);
         font-size: var(--bf-type-flow-support-font-size);
-        font-weight: var(--bf-font-weight-semibold);
+        font-weight: var(--bf-type-label-selected-font-weight);
         text-overflow: ellipsis;
         white-space: nowrap;
       }
@@ -1101,7 +1101,7 @@
 
       span {
         color: var(--bf-color-status-success-content);
-        font-weight: var(--bf-font-weight-semibold);
+        font-weight: var(--bf-type-label-selected-font-weight);
         flex-shrink: 0;
       }
     }
@@ -1135,7 +1135,7 @@
 
     &__title {
       font-size: var(--bf-type-flow-control-font-size);
-      font-weight: var(--bf-font-weight-bold);
+      font-weight: var(--bf-type-heading-page-font-weight);
       color: var(--bf-color-content-primary);
       margin-bottom: 3px;
     }
@@ -1164,7 +1164,7 @@
   .review-positive {
     .positive-header {
       font-size: var(--bf-type-flow-control-font-size);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-status-success-content);
       margin-bottom: 8px;
       padding-bottom: 6px;
diff --git a/src/web-ui/src/flow_chat/tool-cards/ComputerUseToolCard.scss b/src/web-ui/src/flow_chat/tool-cards/ComputerUseToolCard.scss
index b6ff47078c..461e740750 100644
--- a/src/web-ui/src/flow_chat/tool-cards/ComputerUseToolCard.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/ComputerUseToolCard.scss
@@ -1,5 +1,5 @@
 .computer-use-tool-card__action-code {
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-meta-font-size);
   padding: 1px 6px;
   border-radius: 4px;
   background: color-mix(in srgb, var(--bf-color-surface-raised) 88%, transparent);
@@ -17,11 +17,11 @@
   display: flex;
   align-items: baseline;
   gap: 8px;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-secondary);
 
   code {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     padding: 1px 6px;
     border-radius: 4px;
     background: color-mix(in srgb, var(--bf-color-surface-raised) 88%, transparent);
@@ -42,7 +42,7 @@
   border-radius: 6px;
   background: color-mix(in srgb, var(--bf-color-status-warning-content) 12%, transparent);
   color: var(--bf-color-status-warning-content);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
 
   svg {
     flex-shrink: 0;
@@ -58,12 +58,12 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-secondary);
 
   p {
     margin: 0;
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 }
 
diff --git a/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.scss
index 51125165eb..b3b8e4ba3d 100644
--- a/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.scss
@@ -112,7 +112,7 @@
 
     .file-name {
       font-size: var(--bf-type-flow-support-font-size);
-      font-family:var(--bf-font-family-mono);
+      font-family:var(--bf-type-code-md-font-family);
       color: var(--bf-color-content-secondary);
       min-width: 0;
       overflow: hidden;
@@ -153,7 +153,7 @@
     .plan-title {
       margin: 0 0 var(--bf-control-flow-chat-inline-gap) 0;
       font-size: var(--bf-type-flow-body-font-size);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-primary);
       line-height: var(--bf-type-flow-support-line-height);
     }
@@ -234,7 +234,7 @@
         
         .todo-content {
           color: var(--bf-color-content-primary);
-          font-weight: var(--bf-font-weight-medium);
+          font-weight: var(--bf-type-label-sm-font-weight);
         }
       }
 
diff --git a/src/web-ui/src/flow_chat/tool-cards/MCPToolDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/MCPToolDisplay.scss
index d27528ffe9..4e0a993ded 100644
--- a/src/web-ui/src/flow_chat/tool-cards/MCPToolDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/MCPToolDisplay.scss
@@ -14,7 +14,7 @@
     min-width: 0;
 
     .tool-name {
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-primary);
       white-space: nowrap;
       overflow: hidden;
@@ -35,7 +35,7 @@
     .error-text {
       font-size: var(--bf-type-flow-control-font-size);
       color: color-mix(in srgb, var(--bf-color-status-danger-content) 90%, transparent);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
   }
 
@@ -62,7 +62,7 @@
       border-radius: var(--bf-radius-sm);
       background: var(--bf-color-action-neutral-surface);
       color: var(--bf-color-content-primary);
-      font-family: var(--bf-font-family-mono);
+      font-family: var(--bf-type-code-md-font-family);
       font-size: var(--bf-type-flow-control-font-size);
       line-height: var(--bf-type-flow-support-line-height);
       white-space: pre-wrap;
@@ -117,7 +117,7 @@
       border-radius: 4px;
 
       .resource-name {
-        font-weight: var(--bf-font-weight-semibold);
+        font-weight: var(--bf-type-label-selected-font-weight);
         color: var(--bf-color-content-primary);
         margin-bottom: var(--bf-control-flow-chat-inline-gap);
       }
@@ -125,7 +125,7 @@
       .resource-uri {
         font-size: var(--bf-type-flow-support-font-size);
         color: color-mix(in srgb, var(--bf-color-accent-secondary) 70%, transparent);
-        font-family: var(--bf-font-family-mono);
+        font-family: var(--bf-type-code-md-font-family);
         margin-bottom: var(--bf-control-flow-chat-inline-gap);
       }
 
diff --git a/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.scss
index 866627307a..2023411108 100644
--- a/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.scss
@@ -43,16 +43,16 @@
       display: inline-flex;
       align-items: center;
       font-size: var(--bf-type-flow-control-font-size);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
       flex-shrink: 0;
       white-space: nowrap;
       color: var(--bf-color-content-primary);
     }
 
     .command-text {
-      font-family:var(--bf-font-family-mono);
+      font-family:var(--bf-type-code-md-font-family);
       font-size: var(--bf-type-flow-control-font-size);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
       color: var(--bf-color-content-primary);
       white-space: nowrap;
       overflow: hidden;
@@ -68,7 +68,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 200px;
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
   }
 
   .error-indicator {
@@ -78,7 +78,7 @@
     .error-text {
       font-size: var(--bf-type-flow-control-font-size);
       color: color-mix(in srgb, var(--bf-color-status-danger-content) 90%, transparent);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
   }
 
@@ -105,15 +105,15 @@
 
   .miniapp-result-label {
     font-size: var(--bf-type-flow-micro-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-muted);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     flex-shrink: 0;
   }
 
   .miniapp-result-value {
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
     font-size: var(--bf-type-flow-support-font-size);
     color: var(--bf-color-content-primary);
     flex: 1;
@@ -146,7 +146,7 @@
       color: color-mix(in srgb, var(--bf-color-status-danger-content) 90%, transparent);
       font-size: var(--bf-type-flow-control-font-size);
       margin-bottom: var(--bf-control-flow-chat-card-gap);
-      font-family:var(--bf-font-family-mono);
+      font-family:var(--bf-type-code-md-font-family);
       white-space: pre-wrap;
       word-break: break-word;
     }
@@ -160,7 +160,7 @@
 
       .error-operation {
         color: color-mix(in srgb, var(--bf-color-status-danger-content) 70%, transparent);
-        font-family:var(--bf-font-family-mono);
+        font-family:var(--bf-type-code-md-font-family);
       }
     }
   }
diff --git a/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss
index e6586488fa..880508950c 100644
--- a/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss
@@ -92,7 +92,7 @@
   .thinking-label {
     min-width: 0;
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-sm-font-weight);
     color: var(--bf-color-content-muted);
     opacity: 0.8;
     line-height: var(--bf-type-flow-support-line-height);
@@ -153,7 +153,7 @@
   font-size: var(--bf-type-flow-body-font-size);
   line-height: var(--bf-type-flow-body-line-height);
   /* Match FlowChat body text (sans); mono stack + generic monospace yields Songti-like CJK on Windows. */
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
   word-break: break-word;
   color: var(--bf-color-content-muted);
   padding: var(--bf-control-flow-chat-card-expanded-padding-block) var(--bf-control-flow-chat-card-expanded-padding-inline) var(--bf-control-flow-chat-card-expanded-padding-block) 0;
@@ -249,7 +249,7 @@
 
 /* Markdown body: same sans as rest of chat; code stays mono via Appearance. */
 .thinking-content .markdown-renderer.thinking-markdown {
-  --markdown-font-heading: var(--bf-font-family-sans);
+  --markdown-font-heading: var(--bf-type-flow-title-font-family);
   --markdown-font-size: var(--bf-type-flow-body-font-size);
   --markdown-font-size-sm: var(--bf-type-flow-control-font-size);
   --markdown-code-font-size: var(--bf-type-flow-support-font-size);
@@ -257,7 +257,7 @@
   --markdown-block-gap: #{markdown.$block-gap};
   --markdown-paragraph-gap: #{markdown.$paragraph-gap};
 
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
   font-size: var(--bf-type-flow-body-font-size);
   line-height: var(--bf-type-flow-body-line-height);
   color: var(--bf-color-content-muted);
@@ -292,7 +292,7 @@
   }
 
   .inline-code {
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
     border-radius: 0;
     background: transparent;
     border: none;
@@ -311,7 +311,7 @@
   }
 
   .code-block-lang {
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     line-height: var(--bf-type-flow-meta-line-height);
   }
 
diff --git a/src/web-ui/src/flow_chat/tool-cards/SnapshotFullscreenDiffViewer.css b/src/web-ui/src/flow_chat/tool-cards/SnapshotFullscreenDiffViewer.css
index b65dbee899..f94faef157 100644
--- a/src/web-ui/src/flow_chat/tool-cards/SnapshotFullscreenDiffViewer.css
+++ b/src/web-ui/src/flow_chat/tool-cards/SnapshotFullscreenDiffViewer.css
@@ -63,8 +63,8 @@
 }
 
 .session-title {
-  font-size: var(--bf-font-size-xl);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-flow-title-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
 }
 
@@ -78,12 +78,12 @@
 
 .session-stats .additions {
   color: var(--bf-domain-git-added);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .session-stats .deletions {
   color: var(--bf-domain-git-deleted);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .header-actions {
@@ -157,7 +157,7 @@
 }
 
 .file-tab .file-name {
-  font-family: var(--bf-font-family-mono);
+  font-family: var(--bf-type-code-md-font-family);
   font-size: var(--bf-type-flow-support-font-size);
 }
 
@@ -219,16 +219,16 @@
 }
 
 .file-details .file-name {
-  font-size: var(--bf-font-size-base);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   color: color-mix(in srgb, var(--bf-color-content-on-dark) 90%, transparent);
-  font-family: var(--bf-font-family-mono);
+  font-family: var(--bf-type-code-md-font-family);
 }
 
 .file-details .file-path-full {
   font-size: var(--bf-type-flow-support-font-size);
   color: color-mix(in srgb, var(--bf-color-content-on-dark) 50%, transparent);
-  font-family: var(--bf-font-family-mono);
+  font-family: var(--bf-type-code-md-font-family);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -283,7 +283,7 @@
   justify-content: center;
   gap: 12px;
   color: color-mix(in srgb, var(--bf-color-content-on-dark) 90%, transparent);
-  font-size: var(--bf-font-size-base);
+  font-size: var(--bf-type-body-md-font-size);
 }
 
 .loading-spinner {
@@ -313,7 +313,7 @@
   }
 
   .session-title {
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 
   .session-stats {
@@ -376,7 +376,7 @@
   padding: 2px 6px;
   border-radius: 10px;
   font-size: var(--bf-type-flow-micro-font-size);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
   border: 1px solid color-mix(in srgb, var(--bf-color-accent-default) 30%, transparent);
 }
 
diff --git a/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss
index aac41cbed6..2fb5fbaa52 100644
--- a/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss
@@ -184,7 +184,7 @@
 
   .task-action {
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     flex-shrink: 1;
     min-width: 0;
@@ -194,7 +194,7 @@
 
     &__model-tag {
       font-size: var(--bf-type-flow-micro-font-size);
-      font-weight: var(--bf-font-weight-regular);
+      font-weight: var(--bf-type-body-sm-font-weight);
       color: var(--bf-color-content-secondary);
       vertical-align: baseline;
     }
@@ -217,7 +217,7 @@
     padding: 0.1rem var(--bf-control-flow-chat-inline-gap);
     border-radius: 3px;
     font-size: var(--bf-type-flow-micro-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     flex-shrink: 0;
     color: var(--bf-color-content-muted);
     background: color-mix(in srgb, var(--bf-color-content-muted) 15%, transparent);
@@ -229,7 +229,7 @@
     padding: 0.1rem var(--bf-control-flow-chat-inline-gap);
     border-radius: 3px;
     font-size: var(--bf-type-flow-micro-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     flex-shrink: 0;
     color: var(--bf-color-content-muted);
     background: var(--bf-color-action-quiet-hover);
@@ -294,11 +294,11 @@
     padding: 0.125rem var(--bf-control-flow-chat-inline-gap);
     border-radius: 4px;
     font-size: var(--bf-type-flow-micro-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     flex-shrink: 0;
     color: var(--bf-color-content-secondary);
     background: color-mix(in srgb, var(--bf-color-content-on-dark) 12%, transparent);
-    letter-spacing: var(--bf-letter-spacing-wide);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
   }
 
   .task-header-meta {
@@ -384,8 +384,8 @@
     gap: var(--bf-control-flow-chat-inline-gap);
     color: var(--bf-color-content-secondary);
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-subtle);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-subtle-letter-spacing);
     line-height: var(--bf-type-flow-meta-line-height);
 
     svg {
@@ -409,10 +409,10 @@
     gap: var(--bf-control-flow-chat-inline-gap);
     margin-bottom: var(--bf-control-flow-chat-card-gap);
     font-size: var(--bf-type-flow-support-font-size);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-secondary);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     opacity: 0.8;
   }
 
@@ -472,7 +472,7 @@
     padding: var(--bf-control-flow-chat-control-padding-block) var(--bf-control-flow-chat-control-padding-inline);
     border-radius: 4px;
     font-size: var(--bf-type-flow-control-font-size);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     cursor: pointer;
     transition:
       scale 120ms cubic-bezier(0.23, 1, 0.32, 1),
@@ -633,7 +633,7 @@
   color: var(--bf-color-content-secondary);
 
   &__role {
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     font-size: var(--bf-type-flow-control-font-size);
   }
 
diff --git a/src/web-ui/src/flow_chat/tool-cards/ToolTimeoutIndicator.scss b/src/web-ui/src/flow_chat/tool-cards/ToolTimeoutIndicator.scss
index 92b5c1db5f..1bdfbbfcc8 100644
--- a/src/web-ui/src/flow_chat/tool-cards/ToolTimeoutIndicator.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/ToolTimeoutIndicator.scss
@@ -10,8 +10,8 @@
   gap: var(--bf-control-flow-chat-inline-gap);
   color: var(--bf-color-content-secondary);
   font-size: var(--bf-type-flow-support-font-size);
-  font-weight: var(--bf-font-weight-semibold);
-  letter-spacing: var(--bf-letter-spacing-subtle);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-subtle-letter-spacing);
   line-height: var(--bf-type-flow-meta-line-height);
 
   svg {
@@ -22,7 +22,7 @@
 
 .duration-text--live {
   color: var(--bf-color-content-muted);
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-sm-font-weight);
   font-variant-numeric: tabular-nums;
 }
 
@@ -46,14 +46,14 @@
 .duration-separator {
   color: var(--bf-color-content-muted);
   opacity: 0.5;
-  font-weight: var(--bf-font-weight-regular);
+  font-weight: var(--bf-type-body-sm-font-weight);
   margin: 0 1px;
 }
 
 .duration-timeout {
   color: var(--bf-color-content-muted);
   opacity: 0.7;
-  font-weight: var(--bf-font-weight-regular);
+  font-weight: var(--bf-type-body-sm-font-weight);
   font-variant-numeric: tabular-nums;
 }
 
@@ -92,8 +92,8 @@
   cursor: pointer;
   flex-shrink: 0;
   font-size: var(--bf-type-flow-support-font-size);
-  font-weight: var(--bf-font-weight-medium);
-  letter-spacing: var(--bf-letter-spacing-subtle);
+  font-weight: var(--bf-type-label-sm-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-subtle-letter-spacing);
   line-height: var(--bf-type-flow-meta-line-height);
   transition:
     scale 120ms cubic-bezier(0.23, 1, 0.32, 1),
diff --git a/src/web-ui/src/flow_chat/tool-cards/_tool-card-common.scss b/src/web-ui/src/flow_chat/tool-cards/_tool-card-common.scss
index 5d23fa124f..6ea31ee518 100644
--- a/src/web-ui/src/flow_chat/tool-cards/_tool-card-common.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/_tool-card-common.scss
@@ -19,7 +19,7 @@
 }
 
 .tool-action {
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-sm-font-weight);
   white-space: nowrap;
 }
 
diff --git a/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.scss b/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.scss
index 759ffcba48..863f0c264f 100644
--- a/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.scss
@@ -23,9 +23,9 @@
   }
 
   &__json-textarea {
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-relaxed);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
   }
 
   &__json-actions {
@@ -91,9 +91,9 @@
     min-width: 0;
     overflow: hidden;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-dense);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-modifier-leading-dense-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -102,14 +102,14 @@
     margin: 2px 0 0;
     overflow: hidden;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-compact);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-meta-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   &__registry-command {
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
   }
 
   &__capabilities {
@@ -130,9 +130,9 @@
     border-radius: 999px;
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     white-space: nowrap;
 
     &.is-ok {
@@ -170,9 +170,9 @@
     padding: 0 var(--bf-space-2);
     border: 1px solid transparent;
     border-radius: 999px;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     white-space: nowrap;
 
     &.is-enabled {
@@ -227,7 +227,7 @@
   &__empty {
     padding: var(--bf-space-4);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     text-align: center;
   }
 
@@ -306,9 +306,9 @@
     padding: 0 8px;
     border: 1px solid var(--bf-color-border-subtle);
     border-radius: 999px;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     white-space: nowrap;
 
     &.is-success {
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss b/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss
index 07bcd82ee6..f95b709b4a 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss
+++ b/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss
@@ -39,15 +39,15 @@
 
   &__palette-option-name {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-snug);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
   }
 
   &__palette-option-desc {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-snug);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -60,14 +60,14 @@
   min-width: 0;
 
   .bitfun-config-page-section__title {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   .bitfun-config-page-section__description {
     max-width: 450px;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-snug);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
   }
 
   &__file-input {
@@ -147,15 +147,15 @@
     }
 
     strong {
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
-      line-height: var(--bf-line-height-dense);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      line-height: var(--bf-type-modifier-leading-dense-line-height);
     }
 
     span {
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-meta);
-      line-height: var(--bf-line-height-snug);
+      font-size: var(--bf-type-meta-font-size);
+      line-height: var(--bf-type-modifier-leading-snug-line-height);
     }
   }
 
@@ -167,8 +167,8 @@
     > span {
       overflow: hidden;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-compact);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-meta-line-height);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -227,15 +227,15 @@
 
     strong {
       display: block;
-      font-size: var(--bf-font-size-sm);
-      line-height: var(--bf-line-height-ui);
+      font-size: var(--bf-type-label-md-font-size);
+      line-height: var(--bf-type-modifier-leading-ui-line-height);
     }
 
     p {
       margin: 2px 0 0;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
     }
   }
 
@@ -251,8 +251,8 @@
 
     h4 {
       margin: 0 0 var(--bf-space-2);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     ul {
@@ -267,22 +267,22 @@
       display: grid;
       grid-template-columns: minmax(0, 1fr);
       gap: 2px;
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-support);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-flow-support-line-height);
     }
 
     code {
       overflow-wrap: anywhere;
       color: var(--bf-color-content-muted);
-      font-family:var(--bf-font-family-mono);
-      font-size: var(--bf-font-size-sm);
+      font-family:var(--bf-type-code-md-font-family);
+      font-size: var(--bf-type-label-md-font-size);
     }
   }
 
   &__diagnostics-parts {
     margin-top: var(--bf-space-2);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     summary {
       width: fit-content;
@@ -301,8 +301,8 @@
     margin: 0;
     overflow-wrap: anywhere;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     white-space: pre-wrap;
   }
 
@@ -316,7 +316,7 @@
     border-radius: var(--bf-radius-sm);
     background: var(--bf-color-status-warning-surface);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
 
     > svg {
       flex: 0 0 auto;
@@ -360,7 +360,7 @@
       background: transparent;
       color: var(--bf-color-content-secondary);
       font: inherit;
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
       cursor: pointer;
 
       &:hover {
@@ -371,7 +371,7 @@
       &[data-active='true'] {
         background: var(--bf-color-surface-subtle);
         color: var(--bf-color-accent-default);
-        font-weight: var(--bf-font-weight-semibold);
+        font-weight: var(--bf-type-label-selected-font-weight);
       }
     }
   }
@@ -405,13 +405,13 @@
     }
 
     h3 {
-      font-size: var(--bf-font-size-lg);
+      font-size: var(--bf-type-body-lg-font-size);
     }
 
     p {
       margin-top: var(--bf-space-1);
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
   }
 
@@ -434,14 +434,14 @@
 
   &__manual-submit-heading {
     strong {
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
     }
 
     p {
       margin: 3px 0 0;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
     }
   }
 
@@ -525,7 +525,7 @@
       margin: 3px 0 0;
       overflow: hidden;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -544,7 +544,7 @@
 
     strong {
       overflow: hidden;
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -556,7 +556,7 @@
     border: 1px solid var(--bf-color-border-default);
     border-radius: var(--bf-radius-sm);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     &--approved {
       border-color: var(--bf-color-accent-default);
@@ -622,13 +622,13 @@
     }
 
     strong {
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
     }
 
     span,
     small {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
   }
 
@@ -650,13 +650,13 @@
     }
 
     h4 {
-      font-size: var(--bf-font-size-lg);
+      font-size: var(--bf-type-body-lg-font-size);
     }
 
     p {
       margin-top: var(--bf-space-1);
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
     }
 
     img {
@@ -679,7 +679,7 @@
     dt,
     dd {
       margin: 0;
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
 
     dt {
@@ -688,13 +688,13 @@
 
     dd {
       overflow-wrap: anywhere;
-      font-family:var(--bf-font-family-mono);
+      font-family:var(--bf-type-code-md-font-family);
     }
   }
 
   &__review-manifest {
     margin-top: var(--bf-space-4);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
 
     summary {
       cursor: pointer;
@@ -709,7 +709,7 @@
       border-radius: var(--bf-radius-sm);
       background: var(--bf-color-surface-workbench);
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       white-space: pre-wrap;
     }
   }
@@ -874,7 +874,7 @@
       border-radius: var(--bf-radius-sm);
       background: var(--bf-color-surface-panel);
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       backdrop-filter: blur(8px);
     }
   }
@@ -899,20 +899,20 @@
     }
 
     strong {
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     span,
     p {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
 
     p {
       display: -webkit-box;
       margin: var(--bf-space-1) 0 0;
-      line-height: var(--bf-line-height-support);
+      line-height: var(--bf-type-flow-support-line-height);
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       line-clamp: 2;
@@ -928,7 +928,7 @@
     border-radius: var(--bf-radius-sm);
     background: var(--bf-color-surface-panel);
     color: var(--bf-color-accent-default);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__empty,
@@ -942,7 +942,7 @@
     min-height: 280px;
     margin: 0;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__empty p {
@@ -960,7 +960,7 @@
     border-radius: var(--bf-radius-sm);
     background: var(--bf-color-surface-panel);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
 
     > span {
       flex: 1;
@@ -1033,8 +1033,8 @@
     > p {
       margin: 0;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-sm);
-      line-height: var(--bf-line-height-comfortable);
+      font-size: var(--bf-type-label-md-font-size);
+      line-height: var(--bf-type-support-line-height);
     }
   }
 
@@ -1050,14 +1050,14 @@
     }
 
     h3 {
-      font-size: var(--bf-font-size-xl);
-      line-height: var(--bf-line-height-dense);
+      font-size: var(--bf-type-flow-title-font-size);
+      line-height: var(--bf-type-modifier-leading-dense-line-height);
     }
 
     p {
       margin-top: 3px;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
   }
 
@@ -1066,7 +1066,7 @@
     border: 1px solid var(--bf-color-border-default);
     border-radius: var(--bf-radius-sm);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__facts {
@@ -1088,7 +1088,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
 
     dt {
@@ -1111,12 +1111,12 @@
     h4,
     p {
       margin: 0;
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
     }
 
     p {
       color: var(--bf-color-content-secondary);
-      line-height: var(--bf-line-height-base);
+      line-height: var(--bf-type-body-sm-line-height);
       white-space: pre-wrap;
     }
   }
@@ -1131,7 +1131,7 @@
       border-radius: var(--bf-radius-sm);
       background: var(--bf-color-surface-subtle);
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
   }
 
@@ -1141,7 +1141,7 @@
     gap: var(--bf-space-2);
     padding: var(--bf-space-2) 0;
     border-top: 1px solid var(--bf-color-border-default);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
 
     small {
       color: var(--bf-color-content-muted);
@@ -1156,7 +1156,7 @@
 
     > span {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
   }
 
@@ -1282,15 +1282,15 @@
   }
 
   &__name {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
   &__description {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-snug);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
     display: -webkit-box;
     -webkit-line-clamp: 1;
     line-clamp: 1;
@@ -1309,8 +1309,8 @@
     display: inline-flex;
     align-items: center;
     padding: 1px 6px;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     background: transparent;
     border: 1px solid var(--bf-color-border-default);
     border-radius: var(--bf-radius-sm);
@@ -1318,7 +1318,7 @@
   }
 
   &__author {
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     color: var(--bf-color-content-muted);
   }
 
@@ -1423,11 +1423,11 @@
     }
 
     &__name {
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
 
     &__description {
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
     }
 
     &__meta {
@@ -1435,7 +1435,7 @@
     }
 
     &__badge {
-      font-size: var(--bf-font-size-2xs);
+      font-size: var(--bf-type-overline-sm-font-size);
       padding: 0 4px;
     }
 
@@ -1540,8 +1540,8 @@
   }
 
   &__title {
-    font-size: var(--bf-font-size-3xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-overline-xs-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
 
diff --git a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.scss b/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.scss
index 61954b7ea4..6c8f0cf7d4 100644
--- a/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.scss
+++ b/src/web-ui/src/infrastructure/config/components/ApplicationSettingsPages.scss
@@ -63,11 +63,11 @@
     background: transparent;
     border: 1px dashed var(--bf-color-border-default);
     color: var(--bf-color-content-primary);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
     word-break: break-all;
     overflow-wrap: anywhere;
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     user-select: text;
   }
 }
@@ -103,13 +103,13 @@
   }
 
   &__shell-tooltip-name {
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__shell-tooltip-path {
     margin-top: 4px;
     overflow-wrap: anywhere;
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
   }
 
   &__no-shells {
@@ -118,6 +118,6 @@
     border: 1px dashed var(--bf-color-border-default);
     border-radius: var(--bf-radius-sm);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 }
diff --git a/src/web-ui/src/infrastructure/config/components/ConfigForm.scss b/src/web-ui/src/infrastructure/config/components/ConfigForm.scss
index 24e661941e..0297a8d497 100644
--- a/src/web-ui/src/infrastructure/config/components/ConfigForm.scss
+++ b/src/web-ui/src/infrastructure/config/components/ConfigForm.scss
@@ -37,8 +37,8 @@ $config-input-height: 32px;
 
 
 .bitfun-config-form__label {
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   color: var(--bf-color-content-secondary);
   display: flex;
   align-items: center;
@@ -57,15 +57,15 @@ $config-input-height: 32px;
     display: inline-block !important;
     content: " *" !important;
     color: var(--bf-color-status-danger-content);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 }
 
 .bitfun-config-form__hint {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-muted);
   margin-top: var(--bf-space-1);
-  line-height: var(--bf-line-height-base);
+  line-height: var(--bf-type-body-sm-line-height);
 }
 
 
@@ -75,7 +75,7 @@ $config-input-height: 32px;
 .bitfun-config-form__textarea {
   width: 100%;
   padding: 0 12px !important;
-  font-size: var(--bf-font-size-sm) !important;
+  font-size: var(--bf-type-label-md-font-size) !important;
   line-height: var(--bf-type-label-md-line-height) !important;
   color: var(--bf-color-content-primary) !important;
   background: transparent !important;
@@ -86,7 +86,7 @@ $config-input-height: 32px;
   transition: border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
               background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard) !important;
   outline: none !important;
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
   transform: none !important;
   box-shadow: none !important;
 
@@ -124,8 +124,8 @@ $config-input-height: 32px;
 
   
   &[type="password"] {
-    font-family:var(--bf-font-family-mono);
-    letter-spacing: var(--bf-letter-spacing-caps);
+    font-family:var(--bf-type-code-md-font-family);
+    letter-spacing: var(--bf-type-modifier-tracking-caps-letter-spacing);
   }
 
   
@@ -175,8 +175,8 @@ $config-input-height: 32px;
     background: var(--bf-color-surface-panel) !important;
     color: var(--bf-color-content-primary) !important;
     padding: 6px 10px !important;
-    font-size: var(--bf-font-size-sm) !important;
-    line-height: var(--bf-line-height-base) !important;
+    font-size: var(--bf-type-label-md-font-size) !important;
+    line-height: var(--bf-type-body-sm-line-height) !important;
   }
 }
 
@@ -185,7 +185,7 @@ $config-input-height: 32px;
 .bitfun-config-form__textarea {
   min-height: 80px;
   resize: vertical;
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
 
   &::placeholder {
     color: var(--bf-color-content-muted);
@@ -294,16 +294,16 @@ $config-input-height: 32px;
 }
 
 .bitfun-config-form__checkbox-title {
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   color: var(--bf-color-content-primary);
-  line-height: var(--bf-line-height-ui);
+  line-height: var(--bf-type-modifier-leading-ui-line-height);
 }
 
 .bitfun-config-form__checkbox-description {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-muted);
-  line-height: var(--bf-line-height-base);
+  line-height: var(--bf-type-body-sm-line-height);
 }
 
 
@@ -337,8 +337,8 @@ $config-input-height: 32px;
   gap: var(--bf-space-3);
   padding: var(--bf-space-3) var(--bf-space-4);
   border-radius: var(--bf-radius-base);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-body-sm-line-height);
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
   margin-top: var(--bf-space-4);
@@ -392,8 +392,8 @@ $config-input-height: 32px;
 }
 
 .bitfun-config-form__section-title {
-  font-size: var(--bf-font-size-lg);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-body-lg-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
   margin: 0 0 var(--bf-space-3) 0;
   display: flex;
@@ -402,10 +402,10 @@ $config-input-height: 32px;
 }
 
 .bitfun-config-form__section-description {
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
   color: var(--bf-color-content-muted);
   margin: 0 0 var(--bf-space-5) 0;
-  line-height: var(--bf-line-height-base);
+  line-height: var(--bf-type-body-sm-line-height);
 }
 
 
@@ -592,7 +592,7 @@ $config-input-height: 32px;
 .config-form-section-chevron {
   margin-left: 8px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-base);
+  font-size: var(--bf-type-body-md-font-size);
   transition: transform 150ms var(--bf-motion-easing-standard);
 }
 
diff --git a/src/web-ui/src/infrastructure/config/components/DefaultModelConfig.scss b/src/web-ui/src/infrastructure/config/components/DefaultModelConfig.scss
index 6fbad68482..87fa0dee66 100644
--- a/src/web-ui/src/infrastructure/config/components/DefaultModelConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/DefaultModelConfig.scss
@@ -4,8 +4,8 @@
   &__optional-label {
     margin-left: 4px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-regular);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
     opacity: 0.75;
   }
   
@@ -89,7 +89,7 @@
   
   &__expand-text {
     flex-shrink: 0;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     transition: color 0.15s ease;
     white-space: nowrap;
@@ -124,8 +124,8 @@
   }
   
   &__slot-label {
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
   
@@ -133,8 +133,8 @@
     display: inline-flex;
     align-items: center;
     padding: 2px 8px;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     border-radius: var(--bf-radius-sm);
     background: var(--bf-color-status-success-surface);
     border: none;
@@ -147,14 +147,14 @@
   }
   
   &__slot-description {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
     margin: 0;
   }
   
   &__slot-hint {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     margin: 0;
     font-style: italic;
@@ -187,7 +187,7 @@
     &--configured {
       .default-model-config__capability-status {
         color: var(--bf-color-accent-default);
-        font-weight: var(--bf-font-weight-medium);
+        font-weight: var(--bf-type-label-sm-font-weight);
       }
     }
   }
@@ -203,8 +203,8 @@
     display: flex;
     align-items: center;
     gap: var(--bf-space-2);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     
     svg {
@@ -214,7 +214,7 @@
   }
   
   &__capability-status {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     white-space: nowrap;
     overflow: hidden;
@@ -223,9 +223,9 @@
   }
   
   &__capability-description {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     margin: 0;
   }
   
@@ -246,8 +246,8 @@
     border: none;
     cursor: pointer;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     transition:
       transform var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
       background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -290,14 +290,14 @@
   }
   
   &__override-title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     margin: 0 0 var(--bf-space-1) 0;
   }
   
   &__override-description {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     margin: 0 0 var(--bf-space-3) 0;
   }
@@ -316,8 +316,8 @@
   
   &__override-name {
     flex: 0 0 140px;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     white-space: nowrap;
     overflow: hidden;
@@ -348,8 +348,8 @@
     
     p {
       margin: 0;
-      font-size: var(--bf-font-size-sm);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-md-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
     }
   }
   
@@ -365,7 +365,7 @@
     p {
       margin-top: var(--bf-space-4);
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
     }
   }
 }
@@ -401,11 +401,11 @@
     }
     
     &__slot-label {
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
     }
     
     &__slot-description {
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
     
     &__capability-grid {
@@ -425,7 +425,7 @@
     
     &__override-name {
       flex: none;
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
   }
 }
diff --git a/src/web-ui/src/infrastructure/config/components/EditorConfig.scss b/src/web-ui/src/infrastructure/config/components/EditorConfig.scss
index ce0fb8cd14..b2dffe2982 100644
--- a/src/web-ui/src/infrastructure/config/components/EditorConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/EditorConfig.scss
@@ -14,7 +14,7 @@
   }
 
   &__saving {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     white-space: nowrap;
   }
diff --git a/src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.scss b/src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.scss
index 4eccb2aa21..276aa72065 100644
--- a/src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.scss
@@ -21,8 +21,8 @@
     padding: 12px var(--bf-space-2);
     border-radius: var(--bf-radius-sm);
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     transition:
       background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
       color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
@@ -125,7 +125,7 @@
     min-width: 0;
     overflow: hidden;
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -166,7 +166,7 @@
   &__app-empty {
     padding: 12px var(--bf-space-4);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__ecosystem-heading,
@@ -183,8 +183,8 @@
 
   &__ecosystem-name {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__inherited-badge,
@@ -193,8 +193,8 @@
     display: inline-flex;
     align-items: center;
     width: fit-content;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__scope-bar {
@@ -263,7 +263,7 @@
     border-left: 2px solid var(--bf-color-status-warning-content);
     color: var(--bf-color-content-primary);
     background: color-mix(in srgb, var(--bf-color-status-warning-content) 7%, transparent);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     > span {
       flex: 1;
@@ -277,7 +277,7 @@
     margin-bottom: 4px;
     padding: 0;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__ecosystem-card {
@@ -299,8 +299,8 @@
     align-items: center;
     gap: 4px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
 
     &.is-ready {
       color: var(--bf-color-status-success-content);
@@ -362,7 +362,7 @@
     padding: 10px 0;
     border-bottom: 1px solid var(--bf-color-border-subtle);
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     > div:first-child {
       display: grid;
@@ -374,7 +374,7 @@
   &__empty,
   &__conflict-hint {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__notice {
@@ -483,14 +483,14 @@
   }
 
   &__source-member-label {
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-dense);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-modifier-leading-dense-line-height);
     color: var(--bf-color-content-primary);
   }
 
   &__source-member-description {
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-display);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-display-sm-line-height);
     color: var(--bf-color-content-muted);
   }
 
@@ -525,15 +525,15 @@
     border-radius: var(--bf-radius-sm);
     background: var(--bf-color-surface-tertiary);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     font-variant-numeric: tabular-nums;
-    line-height: var(--bf-line-height-compact);
+    line-height: var(--bf-type-meta-line-height);
     white-space: nowrap;
   }
 
   &__state {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     &.is-restricted,
     &.is-degraded,
@@ -570,7 +570,7 @@
     display: grid;
     gap: 4px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__path-link {
@@ -601,7 +601,7 @@
     justify-content: space-between;
     gap: 8px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__opencode-locations {
@@ -609,7 +609,7 @@
     display: grid;
     gap: 4px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     > * {
       display: flex;
@@ -647,13 +647,13 @@
 
   &__mcp-empty {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     display: grid;
     gap: 8px;
     padding: 12px var(--bf-space-4);
 
     code {
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       color: var(--bf-color-content-muted);
     }
   }
@@ -661,12 +661,12 @@
   &__tool-warning {
     margin-top: 8px;
     color: var(--bf-color-status-warning-content);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__diagnostic-code {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     overflow-wrap: anywhere;
   }
 
@@ -680,8 +680,8 @@
   &__conflict-title {
     margin-bottom: 8px;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   &__conflict-options {
@@ -699,12 +699,12 @@
 
   &__candidate-detail {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__candidate-state {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__ecosystem {
diff --git a/src/web-ui/src/infrastructure/config/components/GlobalPermissionRulesDialog.scss b/src/web-ui/src/infrastructure/config/components/GlobalPermissionRulesDialog.scss
index 1745191b22..072a8b3305 100644
--- a/src/web-ui/src/infrastructure/config/components/GlobalPermissionRulesDialog.scss
+++ b/src/web-ui/src/infrastructure/config/components/GlobalPermissionRulesDialog.scss
@@ -19,8 +19,8 @@
     border-radius: 6px;
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
 
     svg {
       flex-shrink: 0;
@@ -50,8 +50,8 @@
     min-height: 44px;
     padding: 8px 12px;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     background: var(--bf-color-surface-subtle);
   }
 
@@ -74,7 +74,7 @@
   &__rule-heading {
     min-height: 32px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     background: var(--bf-color-surface-subtle);
     border-bottom: 1px solid var(--bf-color-border-subtle);
   }
@@ -118,8 +118,8 @@
   &__empty {
     padding: 18px 12px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     text-align: center;
   }
 }
diff --git a/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.scss b/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.scss
index 978d2b2360..81905cc980 100644
--- a/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.scss
+++ b/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.scss
@@ -16,8 +16,8 @@
 
     h2 {
       margin: 0;
-      font-size: var(--bf-font-size-4xl);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-heading-display-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     .header-actions {
@@ -57,7 +57,7 @@
         color: var(--bf-color-content-secondary);
 
         .empty-icon {
-          font-size: var(--bf-font-size-7xl);
+          font-size: var(--bf-type-display-lg-font-size);
           margin-bottom: 1rem;
           opacity: 0.5;
         }
@@ -91,8 +91,8 @@
         }
 
         .resource-icon {
-          font-size: var(--bf-font-size-4xl);
-          line-height: var(--bf-line-height-none);
+          font-size: var(--bf-type-heading-display-font-size);
+          line-height: var(--bf-type-modifier-leading-none-line-height);
           flex-shrink: 0;
         }
 
@@ -101,7 +101,7 @@
           min-width: 0;
 
           .resource-name {
-            font-weight: var(--bf-font-weight-medium);
+            font-weight: var(--bf-type-label-sm-font-weight);
             margin-bottom: 0.25rem;
             white-space: nowrap;
             overflow: hidden;
@@ -109,7 +109,7 @@
           }
 
           .resource-description {
-            font-size: var(--bf-font-size-base);
+            font-size: var(--bf-type-body-md-font-size);
             color: var(--bf-color-content-secondary);
             margin-bottom: 0.25rem;
             display: -webkit-box;
@@ -119,9 +119,9 @@
           }
 
           .resource-uri {
-            font-size: var(--bf-font-size-xs);
+            font-size: var(--bf-type-label-sm-font-size);
             color: var(--bf-color-content-muted);
-            font-family: var(--bf-font-family-mono);
+            font-family: var(--bf-type-code-md-font-family);
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -147,13 +147,13 @@
           display: flex;
           align-items: center;
           gap: 0.75rem;
-          font-weight: var(--bf-font-weight-medium);
+          font-weight: var(--bf-type-label-sm-font-weight);
           min-width: 0;
           flex: 1;
 
           .viewer-icon {
-            font-size: var(--bf-font-size-4xl);
-            line-height: var(--bf-line-height-none);
+            font-size: var(--bf-type-heading-display-font-size);
+            line-height: var(--bf-type-modifier-leading-none-line-height);
             flex-shrink: 0;
           }
 
@@ -165,12 +165,12 @@
         }
 
         .viewer-mime-type {
-          font-size: var(--bf-font-size-sm);
+          font-size: var(--bf-type-label-md-font-size);
           color: var(--bf-color-content-muted);
           background: var(--bf-color-surface-tertiary);
           padding: 0.25rem 0.5rem;
           border-radius: 4px;
-          font-family: var(--bf-font-family-mono);
+          font-family: var(--bf-type-code-md-font-family);
           flex-shrink: 0;
           margin-left: 1rem;
         }
@@ -194,9 +194,9 @@
           background: none;
           border: none;
           color: var(--bf-color-content-primary);
-          font-family: var(--bf-font-family-mono);
-          font-size: var(--bf-font-size-base);
-          line-height: var(--bf-line-height-relaxed);
+          font-family: var(--bf-type-code-md-font-family);
+          font-size: var(--bf-type-body-md-font-size);
+          line-height: var(--bf-type-body-lg-line-height);
           white-space: pre-wrap;
           word-wrap: break-word;
         }
@@ -211,7 +211,7 @@
         color: var(--bf-color-content-secondary);
 
         .empty-icon {
-          font-size: var(--bf-font-size-7xl);
+          font-size: var(--bf-type-display-lg-font-size);
           margin-bottom: 1rem;
           opacity: 0.5;
         }
diff --git a/src/web-ui/src/infrastructure/config/components/McpToolsConfig.scss b/src/web-ui/src/infrastructure/config/components/McpToolsConfig.scss
index 93304d0b2c..c5d0d14f09 100644
--- a/src/web-ui/src/infrastructure/config/components/McpToolsConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/McpToolsConfig.scss
@@ -17,23 +17,23 @@
   &__json-editor-header {
     h3 {
       margin: 0 0 var(--bf-space-1);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-primary);
     }
   }
 
   &__json-hint {
     margin: 0;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
   }
 
   &__json-textarea {
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-relaxed);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
   }
 
   &__json-actions {
@@ -48,11 +48,11 @@
 
     h4 {
       margin: 0 0 var(--bf-space-2);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-muted);
       text-transform: uppercase;
-      letter-spacing: var(--bf-letter-spacing-wider);
+      letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     }
   }
 
@@ -63,8 +63,8 @@
 
     h5 {
       margin: 0 0 var(--bf-space-1);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
       color: var(--bf-color-content-secondary);
     }
 
@@ -74,10 +74,10 @@
       background: var(--bf-color-action-neutral-surface-hover);
       border: 1px solid var(--bf-color-border-subtle);
       border-radius: var(--bf-radius-sm);
-      font-family: var(--bf-font-family-mono);
-      font-size: var(--bf-font-size-xs);
+      font-family: var(--bf-type-code-md-font-family);
+      font-size: var(--bf-type-label-sm-font-size);
       color: var(--bf-color-content-primary);
-      line-height: var(--bf-line-height-relaxed);
+      line-height: var(--bf-type-body-lg-line-height);
       white-space: pre-wrap;
       overflow-x: auto;
     }
@@ -91,8 +91,8 @@
     flex-shrink: 0;
     padding: 1px 7px;
     border-radius: var(--bf-radius-sm);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     white-space: nowrap;
     border: 1px solid transparent;
 
@@ -164,13 +164,13 @@
   }
 
   &__server-detail-label {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
   }
 
   &__server-detail-value {
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     word-break: break-all;
   }
diff --git a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss b/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss
index bcf37187ff..4ed4fba86a 100644
--- a/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss
+++ b/src/web-ui/src/infrastructure/config/components/ModelSettingsPage.scss
@@ -7,11 +7,11 @@
   height: 100%;
   overflow-x: hidden;
   color: var(--bf-color-content-primary);
-  font-family: var(--bf-font-family-sans);
+  font-family: var(--bf-type-body-sm-font-family);
 
   &__catalog-status-value {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__catalog-actions {
@@ -37,7 +37,7 @@
       max-width: min(560px, 100%);
       overflow: hidden;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -45,7 +45,7 @@
 
   &__catalog-revision {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__catalog-offline-help {
@@ -58,7 +58,7 @@
     border-radius: var(--bf-radius-base);
     background: color-mix(in srgb, var(--bf-color-content-on-dark) 4%, transparent);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
 
     > svg {
       flex-shrink: 0;
@@ -68,12 +68,12 @@
 
     strong {
       color: var(--bf-color-content-primary);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     p {
       margin: var(--bf-space-1) 0 0;
-      line-height: var(--bf-line-height-base);
+      line-height: var(--bf-type-body-sm-line-height);
     }
   }
 
@@ -111,14 +111,14 @@
 
   &__title {
     margin: 0 0 4px 0;
-    font-size: var(--bf-font-size-xl);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-flow-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
   &__subtitle {
     margin: 0;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
   }
 
@@ -167,8 +167,8 @@
     align-items: center;
     gap: var(--bf-space-2);
     min-width: 0;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
@@ -182,8 +182,8 @@
     border-radius: 999px;
     background: var(--bf-color-surface-subtle);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__provider-group-list {
@@ -223,7 +223,7 @@
 
   &__meta-tag {
     flex-shrink: 0;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     white-space: nowrap;
 
@@ -270,8 +270,8 @@
   }
 
   &__details-section-title {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-secondary);
   }
 
@@ -293,19 +293,19 @@
   }
 
   &__details-label {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
   }
 
   &__details-value {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-primary);
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
     word-break: break-all;
 
     &--text {
-      font-family: var(--bf-font-family-sans);
-      line-height: var(--bf-line-height-relaxed);
+      font-family: var(--bf-type-body-sm-font-family);
+      line-height: var(--bf-type-body-lg-line-height);
       color: var(--bf-color-content-secondary);
       white-space: pre-wrap;
       word-break: break-word;
@@ -325,7 +325,7 @@
     border-radius: var(--bf-radius-sm);
     border: 1px solid var(--bf-color-border-subtle);
     background: var(--bf-color-action-neutral-surface-hover);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
   }
 
@@ -351,12 +351,12 @@
   &__context-window-warning {
     grid-column: 1 / -1;
     width: 100%;
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-compact);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-meta-line-height);
   }
 
   &__json-status {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     &--success {
       color: var(--bf-color-status-success-content);
@@ -387,8 +387,8 @@
     background: transparent;
     border: none;
     border-bottom: 2px solid transparent;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
     cursor: pointer;
     transition:
@@ -429,8 +429,8 @@
     display: inline-flex;
     align-items: center;
     padding: 2px 6px;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     background: var(--bf-color-accent-default);
     color: var(--bf-color-content-on-dark);
     border-radius: var(--bf-radius-sm);
@@ -464,7 +464,7 @@
     }
 
     p {
-      font-size: var(--bf-font-size-base);
+      font-size: var(--bf-type-body-md-font-size);
       margin: 0;
     }
   }
@@ -528,8 +528,8 @@
       outline: none !important;
       box-shadow: none !important;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
-      font-family: var(--bf-font-family-sans);
+      font-size: var(--bf-type-label-md-font-size);
+      font-family: var(--bf-type-body-sm-font-family);
 
       &::placeholder {
         color: var(--bf-color-content-muted);
@@ -563,8 +563,8 @@
     background: transparent;
     border: none;
     border-radius: var(--bf-radius-sm);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
     cursor: pointer;
     transition:
@@ -585,7 +585,7 @@
     &--active {
       color: var(--bf-color-accent-default);
       background: var(--bf-color-action-secondary-background);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
 
       &:hover {
         background: var(--bf-color-action-secondary-hover);
@@ -657,9 +657,9 @@
   }
 
   &__item-name {
-    font-family: var(--bf-font-family-sans);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-family: var(--bf-type-body-sm-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     margin-bottom: 2px;
     overflow: hidden;
@@ -669,10 +669,10 @@
 
   &__item-description {
     display: inline-block;
-    font-size: var(--bf-font-size-xs);
-    font-family: var(--bf-font-family-mono);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-family: var(--bf-type-code-md-font-family);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -700,8 +700,8 @@
   &__badge {
     padding: 4px var(--bf-space-2);
     border-radius: var(--bf-radius-sm);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     white-space: nowrap;
 
     &--default {
@@ -719,8 +719,8 @@
   &__capability-tag {
     padding: 2px 6px;
     border-radius: var(--bf-radius-sm);
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     white-space: nowrap;
     
     border: none;
@@ -800,8 +800,8 @@
   }
 
   &__detail-label {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     margin-bottom: var(--bf-space-2);
   }
@@ -816,7 +816,7 @@
     display: flex;
     align-items: flex-start;
     gap: var(--bf-space-2);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__property-label {
@@ -830,8 +830,8 @@
     align-items: center;
     gap: var(--bf-space-1);
     color: var(--bf-color-content-primary);
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
     word-break: break-all;
   }
 
@@ -839,9 +839,9 @@
     margin-top: 0;
     padding: var(--bf-space-2);
     border-radius: var(--bf-radius-sm);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     white-space: pre-wrap;
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     background: transparent;
 
     
@@ -878,8 +878,8 @@
     border-radius: var(--bf-radius-sm);
     background: transparent;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    font-family: var(--bf-font-family-sans);
+    font-size: var(--bf-type-label-md-font-size);
+    font-family: var(--bf-type-body-sm-font-family);
     cursor: pointer;
     transition:
       transform var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -1062,7 +1062,7 @@
     display: block;
     width: 100%;
     min-width: 0;
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
     white-space: normal;
     overflow-wrap: anywhere;
     word-break: break-word;
@@ -1087,9 +1087,9 @@
 
     .resolved-url__value,
     .bitfun-model-settings__selected-models-empty {
-      font-size: var(--bf-font-size-sm);
-      font-family: var(--bf-font-family-sans);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-md-font-size);
+      font-family: var(--bf-type-body-sm-font-family);
+      line-height: var(--bf-type-body-sm-line-height);
     }
   }
 
@@ -1153,7 +1153,7 @@
     border: none;
     border-radius: var(--bf-radius-sm);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     background: var(--bf-color-surface-subtle);
     box-sizing: border-box;
   }
@@ -1243,11 +1243,11 @@
 
   &__selected-model-name {
     min-width: 0;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
-    line-height: var(--bf-line-height-base);
-    font-family: var(--bf-font-family-sans);
+    line-height: var(--bf-type-body-sm-line-height);
+    font-family: var(--bf-type-body-sm-font-family);
     word-break: break-word;
   }
 
@@ -1261,19 +1261,19 @@
     border-radius: 999px;
     background: color-mix(in srgb, var(--bf-color-status-warning-content) 9%, transparent);
     color: var(--bf-color-status-warning-content);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     white-space: nowrap;
   }
 
   &__selected-model-summary {
     display: block;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
     white-space: normal;
-    line-height: var(--bf-line-height-compact);
-    font-family: var(--bf-font-family-sans);
+    line-height: var(--bf-type-meta-line-height);
+    font-family: var(--bf-type-body-sm-font-family);
   }
 
   &__selected-model-grid {
@@ -1294,11 +1294,11 @@
     min-width: 0;
 
     > span {
-      font-size: var(--bf-font-size-meta);
+      font-size: var(--bf-type-meta-font-size);
       color: var(--bf-color-content-secondary);
       white-space: nowrap;
       text-align: left;
-      line-height: var(--bf-line-height-snug);
+      line-height: var(--bf-type-modifier-leading-snug-line-height);
     }
 
     > .bitfun-model-settings__selected-model-category-select,
@@ -1365,20 +1365,20 @@
 
     strong {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
     span {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-meta);
+      font-size: var(--bf-type-meta-font-size);
     }
   }
 
   &__reasoning-summary-action {
     flex-shrink: 0;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__resolved-url {
@@ -1387,7 +1387,7 @@
     gap: 2px;
 
     .resolved-url__hint {
-      font-size: var(--bf-font-size-meta);
+      font-size: var(--bf-type-meta-font-size);
       color: var(--bf-color-content-muted);
     }
   }
@@ -1507,7 +1507,7 @@
     flex-direction: column;
     gap: var(--bf-space-2);
     max-width: 320px;
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__warning {
@@ -1521,7 +1521,7 @@
     border-radius: var(--bf-radius-sm);
     margin-top: var(--bf-space-2);
     color: var(--bf-color-status-warning-content);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
 
     svg {
       flex-shrink: 0;
@@ -1533,9 +1533,9 @@
   &__field-hint {
     display: block;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     margin-bottom: var(--bf-space-2);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__custom-headers {
@@ -1640,8 +1640,8 @@
 
   &__provider-name {
     flex-shrink: 0;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     white-space: nowrap;
 
@@ -1653,7 +1653,7 @@
   &__provider-description {
     flex: 1;
     min-width: 0;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     white-space: nowrap;
     overflow: hidden;
@@ -1668,7 +1668,7 @@
   &__provider-empty {
     padding: var(--bf-space-4) var(--bf-space-3);
     text-align: center;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-muted);
   }
 
@@ -1682,7 +1682,7 @@
     background: var(--bf-color-surface-subtle);
     border: none;
     border-top: 1px solid var(--bf-color-border-subtle);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     cursor: pointer;
     transition:
@@ -1702,7 +1702,7 @@
     align-items: center;
     flex-shrink: 0;
     gap: 4px;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     white-space: nowrap;
     text-decoration: none;
@@ -1724,7 +1724,7 @@
     gap: var(--bf-space-3);
     margin: var(--bf-space-4) 0 var(--bf-space-3);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     &::before,
     &::after {
@@ -1773,14 +1773,14 @@
   }
 
   &__custom-option-title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     margin-bottom: 2px;
   }
 
   &__custom-option-description {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     white-space: nowrap;
     overflow: hidden;
@@ -1804,7 +1804,7 @@
     border: none;
     border-radius: var(--bf-radius-sm);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     cursor: pointer;
     transition:
       transform var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -1863,11 +1863,11 @@
     }
 
     &__title {
-      font-size: var(--bf-font-size-lg);
+      font-size: var(--bf-type-body-lg-font-size);
     }
 
     &__subtitle {
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
 
     
@@ -1883,7 +1883,7 @@
 
     &__tab {
       padding: var(--bf-space-2) var(--bf-space-3);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       gap: var(--bf-space-1);
       
       svg {
@@ -1915,7 +1915,7 @@
 
     &__category-tab {
       padding: 5px var(--bf-space-2);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       height: 30px;
     }
 
@@ -1935,11 +1935,11 @@
     }
 
     &__item-name {
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
     }
 
     &__item-description {
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
 
     &__item-badges {
@@ -1952,12 +1952,12 @@
 
     &__badge {
       padding: 2px var(--bf-space-1);
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
     }
 
     &__capability-tag {
       padding: 1px 4px;
-      font-size: var(--bf-font-size-2xs);
+      font-size: var(--bf-type-overline-sm-font-size);
     }
 
     &__item-details {
@@ -1973,7 +1973,7 @@
 
     &__action-btn {
       padding: var(--bf-space-2) var(--bf-space-3);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       
       svg {
         width: 14px;
@@ -2042,8 +2042,8 @@
     p {
       margin: 0;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-sm);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-md-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
     }
   }
 
@@ -2088,8 +2088,8 @@
     border-radius: var(--bf-radius-base);
     background: color-mix(in srgb, var(--bf-color-content-on-dark) 4%, transparent);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-md-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
 
     svg {
       color: var(--bf-color-status-info-content);
@@ -2115,12 +2115,12 @@
     flex-direction: column;
     gap: var(--bf-space-1);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-md-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
 
     strong {
       color: var(--bf-color-content-primary);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
   }
 
@@ -2129,13 +2129,13 @@
     align-items: center;
     gap: var(--bf-space-2);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
 
     code {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-base);
-      font-weight: var(--bf-font-weight-semibold);
-      letter-spacing: var(--bf-letter-spacing-widest);
+      font-size: var(--bf-type-body-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      letter-spacing: var(--bf-type-modifier-tracking-widest-letter-spacing);
       user-select: all;
     }
   }
@@ -2156,8 +2156,8 @@
     p {
       margin: 0;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-sm);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-label-md-font-size);
+      line-height: var(--bf-type-body-lg-line-height);
     }
 
     .bitfun-model-settings__subscription-logout-list {
@@ -2168,8 +2168,8 @@
       margin: 0;
       padding-left: var(--bf-space-5);
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
-      line-height: var(--bf-line-height-spacious);
+      font-size: var(--bf-type-label-md-font-size);
+      line-height: var(--bf-type-modifier-leading-spacious-line-height);
     }
   }
 
diff --git a/src/web-ui/src/infrastructure/config/components/QuickActionsConfig.scss b/src/web-ui/src/infrastructure/config/components/QuickActionsConfig.scss
index c8cf541a58..a5f33e27a1 100644
--- a/src/web-ui/src/infrastructure/config/components/QuickActionsConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/QuickActionsConfig.scss
@@ -23,7 +23,7 @@
 
     p {
       margin: 0;
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
     }
   }
 
@@ -69,20 +69,20 @@
   }
 
   &__row-label {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
   }
 
   &__row-prompt {
     margin-top: 2px;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
   }
 
   &__row-controls {
@@ -133,8 +133,8 @@
   }
 
   &__modal-label {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
   }
 
@@ -146,9 +146,9 @@
 
   &__modal-hint {
     margin: 0;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__modal-footer {
diff --git a/src/web-ui/src/infrastructure/config/components/ReasoningConfigPanel.scss b/src/web-ui/src/infrastructure/config/components/ReasoningConfigPanel.scss
index 96cfd22f8e..6a9d958751 100644
--- a/src/web-ui/src/infrastructure/config/components/ReasoningConfigPanel.scss
+++ b/src/web-ui/src/infrastructure/config/components/ReasoningConfigPanel.scss
@@ -27,7 +27,7 @@
     align-items: center;
     gap: var(--bf-space-1);
     color: var(--bf-color-status-warning-content);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__actions {
diff --git a/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.scss b/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.scss
index bbed3c2e8d..a41eba8a5f 100644
--- a/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.scss
+++ b/src/web-ui/src/infrastructure/config/components/ReasoningPresetEditor.scss
@@ -40,8 +40,8 @@
   &__primary-setting-label {
     flex-shrink: 0;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     white-space: nowrap;
   }
 
@@ -64,7 +64,7 @@
     gap: var(--bf-space-5);
     min-width: 0;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__models-dev-search-input {
@@ -91,8 +91,8 @@
 
   &__models-dev-search-hint {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-ui);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
   }
 
   &__models-dev-search-results {
@@ -113,7 +113,7 @@
   &__models-dev-search-limit {
     padding: var(--bf-space-2) var(--bf-space-3);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__models-dev-search-limit {
@@ -126,7 +126,7 @@
     gap: var(--bf-space-3);
     min-width: 0;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     > span {
       flex-shrink: 0;
@@ -173,8 +173,8 @@
 
   &__section-title {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__section-title-group {
@@ -203,13 +203,13 @@
 
   &__generated-title {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__hint,
   &__empty {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__generated {
@@ -229,7 +229,7 @@
     border-radius: 999px;
     background: var(--bf-color-action-neutral-surface-hover);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__unavailable-warning {
@@ -257,14 +257,14 @@
 
     strong {
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
     span {
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-meta);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-meta-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
     }
   }
 
@@ -333,8 +333,8 @@
     border: 0;
     background: transparent;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     text-align: left;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -361,7 +361,7 @@
     min-width: 0;
     overflow: hidden;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -378,7 +378,7 @@
     border-radius: 999px;
     background: var(--bf-color-action-neutral-surface-hover);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__row-editor {
diff --git a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.scss b/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.scss
index 2e47090fd6..85b67970eb 100644
--- a/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.scss
+++ b/src/web-ui/src/infrastructure/config/components/RuntimeSettingsPages.scss
@@ -34,8 +34,8 @@
     border-radius: var(--bf-radius-sm);
     border: 1px dashed color-mix(in srgb, var(--bf-color-status-warning-content) 40%, transparent);
     color: var(--bf-color-status-warning-content);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-relaxed);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
     background: transparent;
   }
 
@@ -61,16 +61,16 @@
 
   &__pet-row-title {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__pet-row-description {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-regular);
-    line-height: var(--bf-line-height-relaxed);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
+    line-height: var(--bf-type-body-lg-line-height);
   }
 
   &__pet-select {
@@ -152,10 +152,10 @@
     grid-column: 1 / -1;
     padding: 6px 2px 2px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-tight);
-    letter-spacing: var(--bf-letter-spacing-normal);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
+    letter-spacing: var(--bf-type-body-sm-letter-spacing);
   }
 
   &__pet-select-option {
diff --git a/src/web-ui/src/infrastructure/config/components/SkillsConfig.scss b/src/web-ui/src/infrastructure/config/components/SkillsConfig.scss
index 7b4d41ca10..e424812c17 100644
--- a/src/web-ui/src/infrastructure/config/components/SkillsConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/SkillsConfig.scss
@@ -11,12 +11,12 @@
   }
 
   &__path-hint {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
   }
 
   &__validating {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     font-style: italic;
   }
@@ -24,7 +24,7 @@
   &__validation {
     padding: var(--bf-space-2) var(--bf-space-3);
     border-radius: var(--bf-radius-base);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
 
     &.is-valid {
       background: color-mix(in srgb, var(--bf-color-status-success-content) 8%, transparent);
@@ -40,27 +40,27 @@
   }
 
   &__validation-name {
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__validation-desc {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     opacity: 0.8;
     margin-top: 2px;
   }
 
   &__validation-error {
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__form-hint {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
   }
 
   &__path-value {
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     word-break: break-all;
   }
@@ -109,8 +109,8 @@
       color-mix(in srgb, var(--bf-color-content-on-dark) 4%, transparent) 100%
     );
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-relaxed);
+    font-size: var(--bf-type-label-md-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
   }
 
   &__market-state--error {
@@ -206,10 +206,10 @@
   }
 
   &__market-item-name {
-    font-size: var(--bf-font-size-lg);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-body-lg-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
-    line-height: var(--bf-line-height-tight);
+    line-height: var(--bf-type-label-md-line-height);
   }
 
   &__market-item-badge {
@@ -218,8 +218,8 @@
     gap: 4px;
     padding: 2px 8px;
     border-radius: var(--bf-radius-pill);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     border: 1px solid var(--bf-color-border-subtle);
     background: var(--bf-color-action-quiet-hover);
     color: var(--bf-color-content-muted);
@@ -232,9 +232,9 @@
   }
 
   &__market-item-description {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     margin-bottom: var(--bf-space-3);
     display: -webkit-box;
     -webkit-line-clamp: 3;
@@ -256,8 +256,8 @@
     max-width: 100%;
     padding: 2px 10px;
     border-radius: var(--bf-radius-pill);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-compact);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-meta-line-height);
     border: 1px solid var(--bf-color-border-subtle);
     background: var(--bf-color-action-quiet-hover);
     color: var(--bf-color-content-muted);
@@ -279,8 +279,8 @@
     flex-shrink: 0;
     padding: 2px 10px;
     border-radius: var(--bf-radius-pill);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-muted);
     border: 1px solid var(--bf-color-border-subtle);
     background: color-mix(in srgb, var(--bf-color-content-on-dark) 8%, transparent);
@@ -401,7 +401,7 @@
     }
 
     &__market-item-name {
-      font-size: var(--bf-font-size-base);
+      font-size: var(--bf-type-body-md-font-size);
     }
 
     &__market-item-description {
diff --git a/src/web-ui/src/infrastructure/config/components/UsageStatisticsConfig.scss b/src/web-ui/src/infrastructure/config/components/UsageStatisticsConfig.scss
index d02d42754a..d68601f034 100644
--- a/src/web-ui/src/infrastructure/config/components/UsageStatisticsConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/UsageStatisticsConfig.scss
@@ -23,9 +23,9 @@
   }
 
   &__filter-label {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
     color: var(--bf-color-content-primary);
   }
 
@@ -67,8 +67,8 @@
 
   &__summary-label {
     overflow: hidden;
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     color: var(--bf-color-content-secondary);
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -76,9 +76,9 @@
 
   &__summary-value {
     overflow: hidden;
-    font-size: var(--bf-font-size-2xl);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-flow-section-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
     color: var(--bf-color-content-primary);
     font-variant-numeric: tabular-nums;
     text-overflow: ellipsis;
@@ -97,16 +97,16 @@
 
     h4 {
       margin: 0 0 var(--bf-space-1);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
-      line-height: var(--bf-line-height-tight);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      line-height: var(--bf-type-label-md-line-height);
       color: var(--bf-color-content-primary);
     }
 
     p {
       margin: 0;
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
     }
   }
 
@@ -122,7 +122,7 @@
     gap: var(--bf-space-4);
     align-items: center;
     padding: var(--bf-space-3) var(--bf-space-5);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     & + & {
       border-top: 1px solid var(--bf-component-config-page-divider);
@@ -173,9 +173,9 @@
 
   &__distribution-title {
     margin: 0 0 var(--bf-space-4);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
     color: var(--bf-color-content-primary);
   }
 
@@ -198,16 +198,16 @@
   }
 
   &__donut-total {
-    font-size: var(--bf-font-size-lg);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-body-lg-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     fill: var(--bf-color-content-primary);
     font-variant-numeric: tabular-nums;
   }
 
   &__donut-unit {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     fill: var(--bf-color-content-muted);
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     text-transform: uppercase;
   }
 
@@ -220,8 +220,8 @@
     width: 100%;
     border-collapse: collapse;
     table-layout: fixed;
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     font-variant-numeric: tabular-nums;
 
     th,
@@ -237,7 +237,7 @@
       top: 0;
       border-bottom: 1px solid var(--bf-component-config-page-divider);
       background: var(--bf-color-surface-tertiary);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
       color: var(--bf-color-content-muted);
       white-space: nowrap;
     }
@@ -248,7 +248,7 @@
 
     tbody th {
       overflow: hidden;
-      font-weight: var(--bf-font-weight-regular);
+      font-weight: var(--bf-type-body-sm-font-weight);
     }
 
     tbody td {
@@ -292,13 +292,13 @@
   &__entry-secondary {
     min-width: 0;
     overflow: hidden;
-    line-height: var(--bf-line-height-tight);
+    line-height: var(--bf-type-label-md-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   &__entry-secondary {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
   }
 
@@ -324,7 +324,7 @@
   }
 
   &__trend-axis {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     fill: var(--bf-color-content-muted);
     font-variant-numeric: tabular-nums;
   }
@@ -345,13 +345,13 @@
   }
 
   &__trend-tooltip-title {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     fill: var(--bf-color-content-primary);
   }
 
   &__trend-tooltip-row {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     fill: var(--bf-color-content-secondary);
     font-variant-numeric: tabular-nums;
   }
@@ -366,7 +366,7 @@
     display: inline-flex;
     align-items: center;
     gap: var(--bf-space-2);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
   }
 
diff --git a/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.scss b/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.scss
index 14143c2913..53fe9f37c5 100644
--- a/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.scss
+++ b/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.scss
@@ -62,15 +62,15 @@
 
   &__status-title {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
   }
 
   &__status-description,
   &__status-error {
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__status-description {
@@ -160,21 +160,21 @@
     padding: var(--bf-space-2) 0 var(--bf-space-2) var(--bf-space-3);
     border-left: 2px solid var(--bf-color-status-success-content);
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-md-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     overflow-wrap: anywhere;
 
     small {
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
   }
 
   &__diagnostic-note,
   &__diagnostic-error {
     max-width: 340px;
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     text-align: right;
   }
 
@@ -218,9 +218,9 @@
 
   &__model-name {
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
   }
 
   &__model-title-row {
@@ -235,8 +235,8 @@
     flex-wrap: wrap;
     gap: var(--bf-space-1) var(--bf-space-2);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__model-error {
@@ -244,8 +244,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__model-error {
@@ -274,8 +274,8 @@
 
   &__progress-text {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__model-actions {
@@ -298,14 +298,14 @@
     justify-content: space-between;
     gap: var(--bf-space-3);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__model-empty {
     padding: var(--bf-space-5);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     text-align: center;
   }
 }
diff --git a/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.scss b/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.scss
index ee3282b329..09ebb6bac1 100644
--- a/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.scss
+++ b/src/web-ui/src/infrastructure/config/components/WorktreeSettingsPage.scss
@@ -183,8 +183,8 @@
       flex-shrink: 0;
       padding-bottom: 1px;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
     }
   }
 
@@ -194,9 +194,9 @@
     h4 {
       margin: 0;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-semibold);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      line-height: var(--bf-type-body-sm-line-height);
     }
 
     code {
@@ -208,9 +208,9 @@
       border-radius: 0;
       background: transparent;
       color: var(--bf-color-content-muted);
-      font-family:var(--bf-font-family-mono);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-base);
+      font-family:var(--bf-type-code-md-font-family);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -267,9 +267,9 @@
     margin: 0;
     overflow: hidden;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-body-sm-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -280,8 +280,8 @@
     flex-wrap: wrap;
     gap: var(--bf-space-2);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   &__path {
@@ -294,9 +294,9 @@
     border-radius: 0;
     background: transparent;
     color: var(--bf-color-content-secondary);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -308,8 +308,8 @@
     min-width: 0;
     margin-top: var(--bf-space-2);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
 
     svg {
       flex-shrink: 0;
@@ -412,16 +412,16 @@
     h4 {
       margin: 0;
       color: var(--bf-color-content-primary);
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-medium);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
+      line-height: var(--bf-type-body-sm-line-height);
     }
 
     p {
       margin: var(--bf-space-1) 0 0;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-relaxed);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-body-lg-line-height);
     }
   }
 }
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigCollectionItem.scss b/src/web-ui/src/infrastructure/config/components/common/ConfigCollectionItem.scss
index d3495a3390..e3014f1251 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigCollectionItem.scss
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigCollectionItem.scss
@@ -70,8 +70,8 @@
   flex-shrink: 0;
   padding: 1px 7px;
   border-radius: var(--bf-radius-sm);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   white-space: nowrap;
   background: var(--bf-color-action-neutral-surface-hover);
   color: var(--bf-color-content-muted);
@@ -172,7 +172,7 @@
   gap: var(--bf-space-3);
   padding: var(--bf-space-6) var(--bf-space-4);
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
 
   p {
     margin: 0;
@@ -195,8 +195,8 @@
 
   h3 {
     margin: 0;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 }
@@ -217,14 +217,14 @@
 // ─── details inner blocks ──────────────────────────────────────────────────────
 
 .bitfun-collection-details__field {
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
   color: var(--bf-color-content-secondary);
-  line-height: var(--bf-line-height-relaxed);
+  line-height: var(--bf-type-body-lg-line-height);
 }
 
 .bitfun-collection-details__label {
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   color: var(--bf-color-content-muted);
   margin-bottom: var(--bf-space-1);
 }
@@ -235,17 +235,17 @@
   background: var(--bf-color-action-neutral-surface-hover);
   border: 1px solid var(--bf-color-border-subtle);
   border-radius: var(--bf-radius-sm);
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-xs);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-primary);
-  line-height: var(--bf-line-height-relaxed);
+  line-height: var(--bf-type-body-lg-line-height);
   white-space: pre-wrap;
   word-break: break-word;
   max-height: 200px;
 }
 
 .bitfun-collection-details__meta {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-muted);
   padding-top: var(--bf-space-3);
   border-top: 1px solid var(--bf-color-border-subtle);
@@ -255,8 +255,8 @@
   padding: 1px 6px;
   background: var(--bf-color-action-neutral-surface-hover);
   border-radius: var(--bf-radius-sm);
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-xs);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-accent-default);
 }
 
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.scss b/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.scss
index 62ba2b6862..8dd95cb1bf 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.scss
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigPageHeader.scss
@@ -35,10 +35,10 @@
 .bitfun-config-page-header__subtitle {
   display: block;
   margin: 0;
-  font-size: var(--bf-font-size-lg);
+  font-size: var(--bf-type-body-lg-font-size);
   color: var(--bf-color-content-primary);
-  line-height: var(--bf-line-height-compact);
-  font-family:var(--bf-font-family-sans);
+  line-height: var(--bf-type-meta-line-height);
+  font-family:var(--bf-type-body-sm-font-family);
   max-width: 100%;
 }
 
@@ -71,7 +71,7 @@
   }
 
   .bitfun-config-page-header__subtitle {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 }
 
@@ -120,7 +120,7 @@
 
   .bitfun-config-page-header__subtitle {
     margin-top: var(--bf-space-1);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss b/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
index f003fb85aa..57ae25a271 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigPageLayout.scss
@@ -9,7 +9,7 @@
   height: 100%;
   background: var(--bf-color-surface-scene);
   color: var(--bf-color-content-primary);
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
   /* Shared layout contract for settings pages in wide scenes. */
   --config-page-content-bottom-padding: 48px;
   /* Vertical gap between top-level sections (ConfigPageSection blocks) inside ConfigPageContent. */
@@ -86,18 +86,18 @@
 
 .bitfun-config-page-section__title {
   margin: 0;
-  font-size: var(--bf-font-size-lg);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-body-lg-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
-  line-height: var(--bf-line-height-dense);
+  line-height: var(--bf-type-modifier-leading-dense-line-height);
 }
 
 .bitfun-config-page-section__description {
   margin: var(--bf-space-1) 0 0;
   max-inline-size: var(--config-page-description-max-width);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
   color: var(--bf-color-content-primary);
-  line-height: var(--bf-line-height-compact);
+  line-height: var(--bf-type-meta-line-height);
   text-wrap: pretty;
 }
 
@@ -180,18 +180,18 @@
 
 .bitfun-config-page-row__label {
   margin: 0;
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
-  line-height: var(--bf-line-height-dense);
+  line-height: var(--bf-type-modifier-leading-dense-line-height);
 }
 
 .bitfun-config-page-row__description {
   margin: var(--bf-space-1) 0 0;
   max-inline-size: var(--config-page-description-max-width);
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-meta-font-size);
   color: var(--bf-color-content-secondary);
-  line-height: var(--bf-line-height-snug);
+  line-height: var(--bf-type-modifier-leading-snug-line-height);
   text-wrap: pretty;
 }
 
diff --git a/src/web-ui/src/infrastructure/config/components/common/ConfigPageState.scss b/src/web-ui/src/infrastructure/config/components/common/ConfigPageState.scss
index bdbe5ef310..9adc200657 100644
--- a/src/web-ui/src/infrastructure/config/components/common/ConfigPageState.scss
+++ b/src/web-ui/src/infrastructure/config/components/common/ConfigPageState.scss
@@ -9,7 +9,7 @@
   align-items: center;
   justify-content: center;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
 }
 
 .bitfun-config-message {
diff --git a/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.scss b/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.scss
index 227f835898..0da8660a2f 100644
--- a/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.scss
+++ b/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.scss
@@ -43,7 +43,7 @@
 
   &__level-label {
     display: block;
-    line-height: var(--bf-line-height-tight);
+    line-height: var(--bf-type-label-md-line-height);
     font-weight: inherit;
     color: inherit;
   }
@@ -54,9 +54,9 @@
 
   &__custom-hint {
     width: 100%;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
   }
 
   &__preview {
@@ -68,7 +68,7 @@
     border: 1px solid var(--bf-color-border-subtle);
     border-radius: var(--bf-radius-sm);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
     word-wrap: break-word;
     transition: font-size var(--bf-motion-duration-base) var(--bf-motion-easing-standard);
   }
diff --git a/src/web-ui/src/infrastructure/i18n/components/LanguageSelector.scss b/src/web-ui/src/infrastructure/i18n/components/LanguageSelector.scss
index a4b8530198..8c5caf2707 100644
--- a/src/web-ui/src/infrastructure/i18n/components/LanguageSelector.scss
+++ b/src/web-ui/src/infrastructure/i18n/components/LanguageSelector.scss
@@ -14,7 +14,7 @@
     .language-selector__loading {
       margin-left: 8px;
       color: var(--bf-color-content-muted);
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
   }
   
@@ -24,7 +24,7 @@
     
     .language-selector__inline-button {
       &--active {
-        font-weight: var(--bf-font-weight-semibold);
+        font-weight: var(--bf-type-label-selected-font-weight);
       }
     }
   }
@@ -32,8 +32,8 @@
   
   &--icon-only {
     .language-selector__code {
-      font-size: var(--bf-font-size-meta);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-meta-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
     
     .language-selector__dropdown {
@@ -67,13 +67,13 @@
 
       &--active {
         color: var(--bf-color-accent-default);
-        font-weight: var(--bf-font-weight-medium);
+        font-weight: var(--bf-type-label-sm-font-weight);
       }
     }
     
     .language-selector__check {
       color: var(--bf-color-accent-default);
-      font-size: var(--bf-font-size-base);
+      font-size: var(--bf-type-body-md-font-size);
     }
   }
 }
diff --git a/src/web-ui/src/infrastructure/markdown/Markdown.scss b/src/web-ui/src/infrastructure/markdown/Markdown.scss
index 65a515e075..3989a72ca6 100644
--- a/src/web-ui/src/infrastructure/markdown/Markdown.scss
+++ b/src/web-ui/src/infrastructure/markdown/Markdown.scss
@@ -185,8 +185,8 @@
 .markdown-renderer ul > li::marker,
 .markdown-renderer ol > li::marker {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-base);
-  font-weight: var(--bf-font-weight-regular);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-body-sm-font-weight);
 }
 
 .markdown-renderer code {
@@ -203,7 +203,7 @@
   color: var(--bf-color-content-secondary);
   font-family: var(--bf-type-flow-code-font-family);
   font-size: var(--bf-type-flow-support-font-size);
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-sm-font-weight);
   line-height: var(--bf-type-flow-support-line-height);
   white-space: nowrap;
   vertical-align: baseline;
@@ -293,8 +293,8 @@
   color: var(--bf-color-content-muted);
   font-family: var(--bf-type-flow-micro-font-family);
   font-size: var(--bf-type-flow-micro-font-size);
-  font-weight: var(--bf-font-weight-semibold);
-  letter-spacing: var(--bf-letter-spacing-wider);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   line-height: var(--bf-type-flow-meta-line-height);
   text-transform: uppercase;
   user-select: none;
@@ -413,7 +413,7 @@
 .markdown-renderer summary {
   color: var(--bf-color-content-primary);
   cursor: pointer;
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
   line-height: var(--bf-type-flow-support-line-height);
 }
 
@@ -523,8 +523,8 @@
 .markdown-renderer .table-wrapper th {
   background: var(--markdown-table-header-bg);
   color: var(--markdown-table-header-fg);
-  font-family:var(--bf-font-family-sans);
-  font-weight: var(--bf-font-weight-semibold);
+  font-family:var(--bf-type-body-sm-font-family);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .markdown-renderer .table-wrapper tr:last-child td {
@@ -579,14 +579,14 @@
   max-width: min(520px, 80vw);
   overflow-wrap: anywhere;
   text-align: left;
-  font-family:var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-xs);
+  font-family:var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-label-sm-font-size);
   line-height: var(--bf-type-flow-support-line-height);
 }
 
 .markdown-renderer strong {
   color: var(--bf-color-content-primary);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .markdown-renderer em {
diff --git a/src/web-ui/src/infrastructure/markdown/MermaidBlock.scss b/src/web-ui/src/infrastructure/markdown/MermaidBlock.scss
index 49dd77a392..3d32e868ef 100644
--- a/src/web-ui/src/infrastructure/markdown/MermaidBlock.scss
+++ b/src/web-ui/src/infrastructure/markdown/MermaidBlock.scss
@@ -181,7 +181,7 @@
       background: transparent;
       border: none;
       border-radius: 0;
-      font-family:var(--bf-font-family-mono);
+      font-family:var(--bf-type-code-md-font-family);
       font-size: var(--bf-type-flow-code-font-size);
       line-height: var(--bf-type-flow-code-line-height);
       color: var(--bf-color-content-primary);
@@ -251,7 +251,7 @@
     border: 1px solid var(--bf-color-action-neutral-surface-hover);
     border-radius: 4px;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     cursor: pointer;
     transition:
       transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
@@ -310,7 +310,7 @@
 
 .mermaid-block__diagram {
   svg {
-    font-family:var(--bf-font-family-sans);
+    font-family:var(--bf-type-body-sm-font-family);
 
     .node {
       rect, circle, ellipse, polygon {
@@ -325,7 +325,7 @@
     }
 
     text {
-      font-size: var(--bf-font-size-base);
+      font-size: var(--bf-type-body-md-font-size);
     }
 
     .edgeLabel {
diff --git a/src/web-ui/src/infrastructure/peer-device/DeviceSurfaceSwitcher.scss b/src/web-ui/src/infrastructure/peer-device/DeviceSurfaceSwitcher.scss
index 89e30761a3..0961bb6e45 100644
--- a/src/web-ui/src/infrastructure/peer-device/DeviceSurfaceSwitcher.scss
+++ b/src/web-ui/src/infrastructure/peer-device/DeviceSurfaceSwitcher.scss
@@ -17,9 +17,9 @@
   background: transparent;
   color: var(--bf-color-content-secondary);
   cursor: pointer;
-  font-family:var(--bf-font-family-sans);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-snug);
+  font-family:var(--bf-type-body-sm-font-family);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-modifier-leading-snug-line-height);
   text-align: left;
   transition: background var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
               color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
@@ -71,7 +71,7 @@
     border-radius: var(--bf-radius-sm);
     background: color-mix(in srgb, var(--bf-color-status-success-content) 18%, transparent);
     color: var(--bf-color-status-success-content);
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     font-variant-numeric: tabular-nums;
   }
 
@@ -121,7 +121,7 @@
     border-radius: var(--bf-radius-sm);
     background: var(--bf-color-action-quiet-hover);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     white-space: nowrap;
 
     &.is-busy {
@@ -134,8 +134,8 @@
   &__hint {
     padding: var(--bf-space-1) var(--bf-space-2);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-ui);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
   }
 
   &__hint {
diff --git a/src/web-ui/src/infrastructure/peer-device/PeerDirectoryBrowser.scss b/src/web-ui/src/infrastructure/peer-device/PeerDirectoryBrowser.scss
index c8302e8f41..8169538467 100644
--- a/src/web-ui/src/infrastructure/peer-device/PeerDirectoryBrowser.scss
+++ b/src/web-ui/src/infrastructure/peer-device/PeerDirectoryBrowser.scss
@@ -49,8 +49,8 @@
 
   &__header-title {
     margin: 0;
-    font-size: var(--bf-font-size-lg);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-body-lg-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
@@ -103,7 +103,7 @@
     border-radius: 6px;
     background: var(--bf-color-surface-canvas);
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     padding: 6px 10px;
     text-align: left;
   }
@@ -128,7 +128,7 @@
     gap: 8px;
     min-height: 160px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
 
     &--error {
       color: var(--bf-color-status-danger-content);
@@ -159,7 +159,7 @@
     border-radius: 6px;
     background: transparent;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     padding: 8px 10px;
     cursor: pointer;
     text-align: left;
@@ -189,7 +189,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__actions {
diff --git a/src/web-ui/src/infrastructure/update/UpdateAvailableDialog.scss b/src/web-ui/src/infrastructure/update/UpdateAvailableDialog.scss
index 5afc06e5c9..8b0807a8bc 100644
--- a/src/web-ui/src/infrastructure/update/UpdateAvailableDialog.scss
+++ b/src/web-ui/src/infrastructure/update/UpdateAvailableDialog.scss
@@ -30,8 +30,8 @@
   margin: 2px 0 0;
   flex: 1;
   min-width: 0;
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-comfortable);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-support-line-height);
   color: var(--bf-color-content-secondary);
 }
 
@@ -55,8 +55,8 @@
   align-items: center;
   gap: 12px 20px;
   padding: 12px 16px;
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-ui);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-modifier-leading-ui-line-height);
   border-bottom: 1px solid var(--bf-color-border-subtle);
 
   &:last-child {
@@ -68,21 +68,21 @@
 
     .bitfun-update-available__value {
       color: color-mix(in srgb, var(--bf-color-accent-default) 40%, transparent);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
   }
 }
 
 .bitfun-update-available__label {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-medium);
-  letter-spacing: var(--bf-letter-spacing-wide);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
+  letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
 }
 
 .bitfun-update-available__value {
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-xs);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-primary);
   text-align: right;
   word-break: break-all;
@@ -93,10 +93,10 @@
 }
 
 .bitfun-update-available__notes-label {
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-meta-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   text-transform: uppercase;
-  letter-spacing: var(--bf-letter-spacing-widest);
+  letter-spacing: var(--bf-type-modifier-tracking-widest-letter-spacing);
   color: var(--bf-color-content-muted);
   margin-bottom: 8px;
 }
@@ -105,8 +105,8 @@
   margin: 0;
   max-height: 200px;
   padding: 12px 14px;
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-body-sm-line-height);
   white-space: pre-wrap;
   word-break: break-word;
   border-radius: 8px;
diff --git a/src/web-ui/src/infrastructure/update/UpdateInstallProgressModal.scss b/src/web-ui/src/infrastructure/update/UpdateInstallProgressModal.scss
index 987449f7aa..9617ceb830 100644
--- a/src/web-ui/src/infrastructure/update/UpdateInstallProgressModal.scss
+++ b/src/web-ui/src/infrastructure/update/UpdateInstallProgressModal.scss
@@ -36,13 +36,13 @@
 
 .bitfun-update-progress__hint {
   margin: 12px 0 0;
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
   color: var(--bf-color-content-secondary);
 }
 
 .bitfun-update-progress__restart {
   margin: 8px 0 0;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-muted);
 }
 
diff --git a/src/web-ui/src/shared/announcement-system/styles/AnnouncementToast.scss b/src/web-ui/src/shared/announcement-system/styles/AnnouncementToast.scss
index 5289604512..2e1e7187e5 100644
--- a/src/web-ui/src/shared/announcement-system/styles/AnnouncementToast.scss
+++ b/src/web-ui/src/shared/announcement-system/styles/AnnouncementToast.scss
@@ -111,11 +111,11 @@ $toast-width: 320px;
     flex: 1;
     min-width: 0;
     margin: 0;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
-    line-height: var(--bf-line-height-support);
-    letter-spacing: var(--bf-letter-spacing-snug);
+    line-height: var(--bf-type-flow-support-line-height);
+    letter-spacing: var(--bf-type-flow-title-letter-spacing);
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
@@ -196,9 +196,9 @@ $toast-width: 320px;
   &__desc {
     margin: 0;
     padding: 8px 16px 0;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-comfortable);
+    line-height: var(--bf-type-support-line-height);
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
diff --git a/src/web-ui/src/shared/announcement-system/styles/FeatureModal.scss b/src/web-ui/src/shared/announcement-system/styles/FeatureModal.scss
index 459c5ce558..418152c521 100644
--- a/src/web-ui/src/shared/announcement-system/styles/FeatureModal.scss
+++ b/src/web-ui/src/shared/announcement-system/styles/FeatureModal.scss
@@ -209,11 +209,11 @@
   // Large display title
   &__title {
     margin: 0;
-    font-size: var(--bf-font-size-3xl);
-    font-weight: var(--bf-font-weight-bold);
+    font-size: var(--bf-type-heading-dialog-font-size);
+    font-weight: var(--bf-type-heading-page-font-weight);
     color: var(--bf-color-content-primary);
-    line-height: var(--bf-line-height-dense);
-    letter-spacing: var(--bf-letter-spacing-tight);
+    line-height: var(--bf-type-modifier-leading-dense-line-height);
+    letter-spacing: var(--bf-type-heading-dialog-letter-spacing);
     // Tight, impactful — like a magazine headline
   }
 
@@ -228,16 +228,16 @@
 
   // Body text: comfortable reading
   &__body {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-spacious);
+    line-height: var(--bf-type-modifier-leading-spacious-line-height);
     flex: 1;
 
     // First paragraph lead: slightly larger
     p:first-child {
-      font-size: var(--bf-font-size-base);
+      font-size: var(--bf-type-body-md-font-size);
       color: var(--bf-color-content-primary);
-      line-height: var(--bf-line-height-relaxed);
+      line-height: var(--bf-type-body-lg-line-height);
       margin: 0 0 1em;
     }
 
@@ -253,15 +253,15 @@
       border: 1px solid var(--bf-color-border-default);
       border-radius: var(--bf-radius-sm);
       padding: 1px 5px;
-      font-size: var(--bf-font-size-xs);
-      font-family: var(--bf-font-family-mono);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-family: var(--bf-type-code-md-font-family);
       color: var(--bf-color-content-primary);
       white-space: nowrap;
     }
 
     strong {
       color: var(--bf-color-content-primary);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     // Bullet lists (rendered as <p> with leading dash from markdown)
@@ -270,22 +270,22 @@
       width: 100%;
       border-collapse: collapse;
       margin: 0.5em 0 1em;
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
 
       th, td {
         padding: 6px 12px;
         text-align: left;
         border: 1px solid var(--bf-color-border-default);
-        line-height: var(--bf-line-height-base);
+        line-height: var(--bf-type-body-sm-line-height);
         vertical-align: middle;
       }
 
       thead th {
         background: var(--bf-color-surface-panel);
-        font-weight: var(--bf-font-weight-semibold);
+        font-weight: var(--bf-type-label-selected-font-weight);
         color: var(--bf-color-content-primary);
-        font-size: var(--bf-font-size-meta);
-        letter-spacing: var(--bf-letter-spacing-wider);
+        font-size: var(--bf-type-meta-font-size);
+        letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
         text-transform: uppercase;
       }
 
@@ -319,7 +319,7 @@
     align-items: center;
     justify-content: center;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 }
 
diff --git a/src/web-ui/src/shared/context-system/components/ContextCard/ContextCard.scss b/src/web-ui/src/shared/context-system/components/ContextCard/ContextCard.scss
index 1fdcd67b85..eeed90b25a 100644
--- a/src/web-ui/src/shared/context-system/components/ContextCard/ContextCard.scss
+++ b/src/web-ui/src/shared/context-system/components/ContextCard/ContextCard.scss
@@ -105,8 +105,8 @@
   }
   
   &__title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     display: flex;
     align-items: center;
@@ -119,7 +119,7 @@
   }
   
   &__subtitle {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     display: flex;
     align-items: center;
@@ -138,8 +138,8 @@
     display: inline-flex;
     align-items: center;
     padding: 2px 6px;
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
     background: var(--bf-color-action-neutral-surface-hover);
     border-radius: var(--bf-radius-sm);
@@ -160,9 +160,9 @@
   }
   
   &__code {
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-base);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
     color: var(--bf-color-content-secondary);
     white-space: pre-wrap;
     word-break: break-all;
@@ -222,7 +222,7 @@
     align-items: center;
     gap: var(--bf-space-1);
     padding: var(--bf-space-2);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     border-radius: var(--bf-radius-sm);
     margin-top: var(--bf-space-2);
     
@@ -232,7 +232,7 @@
     
     span {
       flex: 1;
-      line-height: var(--bf-line-height-ui);
+      line-height: var(--bf-type-modifier-leading-ui-line-height);
     }
   }
   
@@ -284,7 +284,7 @@
     }
     
     .bitfun-context-card__title {
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
     
     .bitfun-context-card__preview,
diff --git a/src/web-ui/src/shared/context-system/components/ContextList/ContextList.scss b/src/web-ui/src/shared/context-system/components/ContextList/ContextList.scss
index c0e05ee229..e35766a35f 100644
--- a/src/web-ui/src/shared/context-system/components/ContextList/ContextList.scss
+++ b/src/web-ui/src/shared/context-system/components/ContextList/ContextList.scss
@@ -17,8 +17,8 @@
     display: flex;
     align-items: center;
     gap: var(--bf-space-2);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
   }
   
@@ -29,8 +29,8 @@
     min-width: 20px;
     height: 18px;
     padding: 0 6px;
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     background: var(--bf-color-action-neutral-surface-hover);
     border: 1px solid var(--bf-color-border-subtle);
@@ -106,18 +106,18 @@
   }
   
   &__empty-text {
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-muted);
     margin: 0 0 var(--bf-space-1);
   }
   
   &__empty-hint {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-disabled);
     margin: 0;
     max-width: 300px;
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 }
 
diff --git a/src/web-ui/src/shared/context-system/drag-drop/ContextDropZone.scss b/src/web-ui/src/shared/context-system/drag-drop/ContextDropZone.scss
index f93416c969..21cbf88fc0 100644
--- a/src/web-ui/src/shared/context-system/drag-drop/ContextDropZone.scss
+++ b/src/web-ui/src/shared/context-system/drag-drop/ContextDropZone.scss
@@ -51,8 +51,8 @@
   }
   
   &__text {
-    font-size: var(--bf-font-size-lg);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-body-lg-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-accent-default);
     text-align: center;
     text-shadow: 0 2px 8px color-mix(in srgb, var(--bf-color-accent-default) 40%, transparent);
diff --git a/src/web-ui/src/shared/notification-system/components/LoadingNotification.scss b/src/web-ui/src/shared/notification-system/components/LoadingNotification.scss
index 62e5c09366..47532ddae0 100644
--- a/src/web-ui/src/shared/notification-system/components/LoadingNotification.scss
+++ b/src/web-ui/src/shared/notification-system/components/LoadingNotification.scss
@@ -48,8 +48,8 @@
     width: 16px;
     height: 16px;
     border-radius: 50%;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
 
     &--success {
       background: var(--bf-color-status-success-surface);
@@ -69,16 +69,16 @@
   }
 
   &__title {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     margin-bottom: 2px;
   }
 
   &__message {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
   }
 
   
diff --git a/src/web-ui/src/shared/notification-system/components/NotificationCenter.scss b/src/web-ui/src/shared/notification-system/components/NotificationCenter.scss
index c189eb4ff0..edd959df68 100644
--- a/src/web-ui/src/shared/notification-system/components/NotificationCenter.scss
+++ b/src/web-ui/src/shared/notification-system/components/NotificationCenter.scss
@@ -4,7 +4,7 @@
   flex-direction: column;
   height: 620px;
   max-height: calc(100vh - 120px);
-  font-family: var(--bf-font-family-sans);
+  font-family: var(--bf-type-body-sm-font-family);
   overflow: hidden;
 
 
@@ -23,8 +23,8 @@
   }
 
   &__title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     margin: 0;
     flex: 1;
@@ -98,8 +98,8 @@
     background: transparent;
     border: none;
     border-bottom: 2px solid transparent;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
     cursor: pointer;
     transition:
@@ -141,13 +141,13 @@
   }
 
   &__empty-icon {
-    font-size: var(--bf-font-size-5xl);
+    font-size: var(--bf-type-display-sm-font-size);
     margin-bottom: var(--bf-space-3);
     opacity: 0.5;
   }
 
   &__empty-text {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-muted);
   }
 
@@ -162,11 +162,11 @@
 
   &__group-title {
     padding: 6px var(--bf-space-4);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-muted);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     background: var(--bf-color-surface-subtle);
     user-select: none;
   }
@@ -229,8 +229,8 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
 
     &--success {
       background: var(--bf-color-status-success-surface);
@@ -290,10 +290,10 @@
   }
 
   &__item-title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -301,18 +301,18 @@
   }
 
   &__item-percentage {
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-status-warning-content);
     font-variant-numeric: tabular-nums;
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
     flex-shrink: 0;
   }
 
   &__item-message {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-support);
+    line-height: var(--bf-type-flow-support-line-height);
     margin-bottom: 2px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -324,9 +324,9 @@
   }
 
   &__item-time {
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
     color: var(--bf-color-content-muted);
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
   }
 
   &__item-technical-details {
@@ -340,11 +340,11 @@
 
   &__item-technical-title {
     margin-bottom: 4px;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-muted);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   }
 
   &__item-technical-body {
@@ -352,9 +352,9 @@
     max-height: 160px;
     white-space: pre-wrap;
     word-break: break-word;
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-support);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
     color: var(--bf-color-content-secondary);
   }
 
@@ -492,11 +492,11 @@
 
   &__active-section-title {
     padding: 6px var(--bf-space-4);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-accent-default);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     user-select: none;
   }
 
@@ -550,8 +550,8 @@
   }
 
   &__active-task-title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -560,16 +560,16 @@
   }
 
   &__active-task-progress-text {
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-accent-default);
     font-variant-numeric: tabular-nums;
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
     flex-shrink: 0;
   }
 
   &__active-task-message {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -626,8 +626,8 @@
   }
 
   &__active-loading-title {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -635,7 +635,7 @@
   }
 
   &__active-loading-message {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/src/web-ui/src/shared/notification-system/components/NotificationItem.scss b/src/web-ui/src/shared/notification-system/components/NotificationItem.scss
index 6e0b8e277a..6b2ca7e3d5 100644
--- a/src/web-ui/src/shared/notification-system/components/NotificationItem.scss
+++ b/src/web-ui/src/shared/notification-system/components/NotificationItem.scss
@@ -10,7 +10,7 @@
   min-width: 280px;
   max-width: 320px;
   animation: bitfun-notification-enter 180ms cubic-bezier(0.23, 1, 0.32, 1) both;
-  font-family: var(--bf-font-family-sans);
+  font-family: var(--bf-type-body-sm-font-family);
 
   
   &--success {
@@ -51,8 +51,8 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    font-weight: var(--bf-font-weight-semibold);
-    font-size: var(--bf-font-size-xs);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   
@@ -65,16 +65,16 @@
   }
 
   &__title {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
-    line-height: var(--bf-line-height-snug);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
   }
 
   &__message {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     word-break: break-word;
   }
 
diff --git a/src/web-ui/src/shared/notification-system/components/ProgressNotification.scss b/src/web-ui/src/shared/notification-system/components/ProgressNotification.scss
index 6d8fc0c923..341d9a3f80 100644
--- a/src/web-ui/src/shared/notification-system/components/ProgressNotification.scss
+++ b/src/web-ui/src/shared/notification-system/components/ProgressNotification.scss
@@ -10,7 +10,7 @@
   min-width: 280px;
   max-width: 320px;
   animation: bitfun-progress-notification-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  font-family: var(--bf-font-family-sans);
+  font-family: var(--bf-type-body-sm-font-family);
 
   
   &--completed {
@@ -56,8 +56,8 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
 
     &--success {
       background: var(--bf-color-status-success-surface);
@@ -87,24 +87,24 @@
   }
 
   &__title {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
-    line-height: var(--bf-line-height-snug);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
   }
 
   &__percentage {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-status-warning-content);
     font-variant-numeric: tabular-nums;
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
   }
 
   &__message {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-secondary);
-    line-height: var(--bf-line-height-snug);
+    line-height: var(--bf-type-modifier-leading-snug-line-height);
     word-break: break-word;
   }
 
diff --git a/src/web-ui/src/shared/prism/prismTheme.ts b/src/web-ui/src/shared/prism/prismTheme.ts
index 5f05eea1af..6b95e80d38 100644
--- a/src/web-ui/src/shared/prism/prismTheme.ts
+++ b/src/web-ui/src/shared/prism/prismTheme.ts
@@ -54,7 +54,7 @@ export function buildSharedPrismStyle(
     function: { color: colors.functionName },
     className: { color: colors.functionName },
     regex: { color: colors.string },
-    important: { color: colors.keyword, fontWeight: 'var(--bf-font-weight-semibold)' },
+    important: { color: colors.keyword, fontWeight: 'var(--bf-type-label-selected-font-weight)' },
     variable: { color: colors.property },
     deleted: { color: colors.keyword },
   };
diff --git a/src/web-ui/src/tools/bitfun-canvas/BitfunCanvasPanel.scss b/src/web-ui/src/tools/bitfun-canvas/BitfunCanvasPanel.scss
index 3cc5d14dca..592840f888 100644
--- a/src/web-ui/src/tools/bitfun-canvas/BitfunCanvasPanel.scss
+++ b/src/web-ui/src/tools/bitfun-canvas/BitfunCanvasPanel.scss
@@ -91,7 +91,7 @@
 
   h3 {
     margin: 0 0 var(--bf-space-1);
-    font-size: var(--bf-font-size-lg);
+    font-size: var(--bf-type-body-lg-font-size);
     color: var(--bf-color-content-primary);
   }
 
@@ -100,8 +100,8 @@
   }
 
   span {
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
   }
 }
 
@@ -121,8 +121,8 @@
   color: var(--bf-color-content-primary);
   overflow: auto;
   white-space: pre-wrap;
-  font-family:var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-sm);
+  font-family:var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-label-md-font-size);
 }
 
 .bitfun-canvas-panel__source-overlay {
@@ -170,5 +170,5 @@
   justify-content: center;
   height: 100%;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
 }
diff --git a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/data-display.tsx b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/data-display.tsx
index 4b0d67596e..da073c642e 100644
--- a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/data-display.tsx
+++ b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/data-display.tsx
@@ -78,9 +78,9 @@ export function Stat({ value, label, tone, style, ...props }: CanvasStatProps) {
       <strong
         style={{
           color: toneColor(tone),
-          fontSize: 'var(--bf-font-size-3xl)',
-          fontWeight: 'var(--bf-font-weight-semibold)',
-          lineHeight: 'var(--bf-line-height-display)',
+          fontSize: 'var(--bf-type-heading-dialog-font-size)',
+          fontWeight: 'var(--bf-type-label-selected-font-weight)',
+          lineHeight: 'var(--bf-type-display-sm-line-height)',
           fontVariantNumeric: 'tabular-nums',
         }}
       >
@@ -356,8 +356,8 @@ export function KeyValueList({
                 margin: '2px 0 0',
                 color: toneColor(item.tone),
                 fontSize: compact ? 'var(--bf-type-body-xs-font-size)' : 'var(--bf-type-body-sm-font-size)',
-                fontWeight: 'var(--bf-font-weight-semibold)',
-                lineHeight: 'var(--bf-line-height-compact)',
+                fontWeight: 'var(--bf-type-label-selected-font-weight)',
+                lineHeight: 'var(--bf-type-meta-line-height)',
                 overflowWrap: 'anywhere',
               }}
             >
@@ -409,7 +409,7 @@ export function Timeline({
                   background: 'color-mix(in srgb, currentColor 16%, transparent)',
                   color,
                   fontSize: 'var(--bf-type-micro-font-size)',
-                  fontWeight: 'var(--bf-font-weight-bold)',
+                  fontWeight: 'var(--bf-type-heading-page-font-weight)',
                 }}
               >
                 {item.icon ?? ''}
@@ -645,7 +645,7 @@ export function UsageBar({
             marginBottom: 6,
             color: 'var(--bf-color-content-secondary)',
             fontSize: 'var(--bf-type-support-font-size)',
-            lineHeight: 'var(--bf-line-height-compact)',
+            lineHeight: 'var(--bf-type-meta-line-height)',
           }}
         >
           <span>{topLeftLabel}</span>
@@ -735,8 +735,8 @@ function TodoMarker({ status }: { status: CanvasTodoItem['status'] }) {
         background: isCompleted ? color : 'transparent',
         color: 'var(--bf-color-surface-canvas)',
         fontSize: 'var(--bf-type-micro-font-size)',
-        lineHeight: 'var(--bf-line-height-none)',
-        fontWeight: 'var(--bf-font-weight-bold)',
+        lineHeight: 'var(--bf-type-modifier-leading-none-line-height)',
+        fontWeight: 'var(--bf-type-heading-page-font-weight)',
       }}
     >
       {isCompleted ? '✓' : ''}
@@ -877,7 +877,7 @@ export function TodoListCard({
         >
           ›
         </span>
-        <span style={{ fontWeight: 'var(--bf-font-weight-semibold)', fontSize: 'var(--bf-type-support-font-size)' }}>Tasks</span>
+        <span style={{ fontWeight: 'var(--bf-type-label-selected-font-weight)', fontSize: 'var(--bf-type-support-font-size)' }}>Tasks</span>
         <span style={{ marginLeft: 'auto', color: 'var(--bf-color-content-muted)', fontSize: 'var(--bf-type-support-font-size)' }}>
           {completed}/{todos.length} done
         </span>
diff --git a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/diagrams.tsx b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/diagrams.tsx
index 14c83fa3b1..9800216379 100644
--- a/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/diagrams.tsx
+++ b/src/web-ui/src/tools/bitfun-canvas/runtime/sdk/diagrams.tsx
@@ -138,7 +138,7 @@ function renderGraphSvg({
               fill={color}
               opacity={0.78}
             />
-            <text x={14} y={description ? 18 : layoutNode.height / 2 + 4} fill="var(--bf-color-content-primary)" fontSize="var(--bf-type-support-font-size)" fontWeight="var(--bf-font-weight-semibold)">
+            <text x={14} y={description ? 18 : layoutNode.height / 2 + 4} fill="var(--bf-color-content-primary)" fontSize="var(--bf-type-support-font-size)" fontWeight="var(--bf-type-label-selected-font-weight)">
               {String(label).slice(0, 22)}
             </text>
             {description ? (
diff --git a/src/web-ui/src/tools/bitfun-canvas/runtime/styles/canvas-runtime.scss b/src/web-ui/src/tools/bitfun-canvas/runtime/styles/canvas-runtime.scss
index 21384d6495..5003f44a52 100644
--- a/src/web-ui/src/tools/bitfun-canvas/runtime/styles/canvas-runtime.scss
+++ b/src/web-ui/src/tools/bitfun-canvas/runtime/styles/canvas-runtime.scss
@@ -67,10 +67,10 @@ body {
   margin: 0;
   background: var(--bf-color-surface-scene);
   color: var(--bf-color-content-primary);
-  font-family: var(--bf-font-family-sans);
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-regular);
-  line-height: var(--bf-line-height-base);
+  font-family: var(--bf-type-body-sm-font-family);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-body-sm-font-weight);
+  line-height: var(--bf-type-body-sm-line-height);
   text-rendering: geometricPrecision;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
@@ -140,9 +140,9 @@ html[data-bitfun-canvas-design-mode] body {
   padding: 9px 12px;
   border-bottom: 1px solid var(--bf-color-border-subtle);
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-dense);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-modifier-leading-dense-line-height);
 }
 
 .bf-card-body {
@@ -175,15 +175,15 @@ html[data-bitfun-canvas-design-mode] body {
 .bf-callout-title {
   margin-bottom: 6px;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-compact);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-meta-line-height);
 }
 
 .bf-callout-body {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-comfortable);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-support-line-height);
 }
 
 .bf-callout-body > :first-child {
@@ -203,8 +203,8 @@ html[data-bitfun-canvas-design-mode] body {
   padding: 3px 9px;
   background: var(--bf-color-action-neutral-surface);
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
-  line-height: var(--bf-line-height-base);
+  font-size: var(--bf-type-label-sm-font-size);
+  line-height: var(--bf-type-body-sm-line-height);
   white-space: nowrap;
 }
 
@@ -241,8 +241,8 @@ html[data-bitfun-canvas-design-mode] body {
   padding: 1px 5px;
   background: var(--bf-color-action-neutral-surface);
   color: var(--bf-color-content-primary);
-  font-family:var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-sm);
+  font-family:var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-label-md-font-size);
 }
 
 .bf-table-wrap {
@@ -255,7 +255,7 @@ html[data-bitfun-canvas-design-mode] body {
 .bf-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
 }
 
 .bf-table th,
@@ -268,7 +268,7 @@ html[data-bitfun-canvas-design-mode] body {
 
 .bf-table th {
   color: var(--bf-color-content-primary);
-  font-weight: var(--bf-font-weight-semibold);
+  font-weight: var(--bf-type-label-selected-font-weight);
   background: var(--bf-color-surface-chrome);
 }
 
@@ -279,10 +279,10 @@ html[data-bitfun-canvas-design-mode] body {
 .bf-diff {
   overflow: auto;
   background: color-mix(in srgb, var(--bf-color-surface-canvas) 54%, transparent);
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-regular);
-  line-height: var(--bf-line-height-comfortable);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-body-sm-font-weight);
+  line-height: var(--bf-type-support-line-height);
 }
 
 .bf-chart {
@@ -306,9 +306,9 @@ html[data-bitfun-canvas-design-mode] body {
   min-width: 0;
   overflow: hidden;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-dense);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-modifier-leading-dense-line-height);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -318,7 +318,7 @@ html[data-bitfun-canvas-design-mode] body {
   flex-wrap: wrap;
   gap: 6px 10px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-meta-font-size);
 }
 
 .bf-chart__legend-item {
@@ -356,13 +356,13 @@ html[data-bitfun-canvas-design-mode] body {
 
 .bf-canvas-toggle__label {
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
 }
 
 .bf-canvas-toggle__description,
 .bf-canvas-toggle__status {
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
 }
 
 .bf-input,
diff --git a/src/web-ui/src/tools/editor/components/CodeEditor.scss b/src/web-ui/src/tools/editor/components/CodeEditor.scss
index da3f4dac87..4cacfb3478 100644
--- a/src/web-ui/src/tools/editor/components/CodeEditor.scss
+++ b/src/web-ui/src/tools/editor/components/CodeEditor.scss
@@ -53,9 +53,9 @@ $_editor-padding-desktop: 32px;
 
   &__loading-text {
     margin: 0;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-muted);
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
     animation: code-editor-pulse var(--bf-motion-duration-slow) ease-in-out infinite;
   }
 
@@ -82,9 +82,9 @@ $_editor-padding-desktop: 32px;
 
   &__error-message {
     margin: 0 0 var(--bf-space-3) 0;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-muted);
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
   }
 
   // Editor Content Area
@@ -134,9 +134,9 @@ $_editor-padding-desktop: 32px;
     color: var(--bf-color-surface-canvas);
     padding: var(--bf-space-2) var(--bf-space-4);
     border-radius: var(--bf-radius-base);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
-    font-family: var(--bf-font-family-mono);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    font-family: var(--bf-type-code-md-font-family);
     box-shadow: var(--bf-shadow-accent-glow);
     z-index: 50;
     animation: code-editor-fade-in 0.2s ease-out;
@@ -173,21 +173,21 @@ $_editor-padding-desktop: 32px;
 
     .monaco-hover,
     .monaco-editor-hover {
-      font-size: var(--bf-font-size-xs) !important;
+      font-size: var(--bf-type-label-sm-font-size) !important;
 
       .hover-row,
       .hover-contents {
-        font-size: var(--bf-font-size-xs) !important;
+        font-size: var(--bf-type-label-sm-font-size) !important;
         color: var(--bf-color-content-on-light) !important;
       }
 
       p, span, div {
-        font-size: var(--bf-font-size-xs) !important;
+        font-size: var(--bf-type-label-sm-font-size) !important;
         color: var(--bf-color-content-on-light) !important;
       }
 
       .markdown-string {
-        font-size: var(--bf-font-size-xs) !important;
+        font-size: var(--bf-type-label-sm-font-size) !important;
         color: var(--bf-color-content-on-light) !important;
       }
     }
@@ -260,7 +260,7 @@ $_editor-padding-desktop: 32px;
 
     &__loading-text,
     &__error-message {
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       max-width: 300px;
     }
 
@@ -292,10 +292,10 @@ $_editor-padding-desktop: 32px;
   body > .monaco-hover,
   body > .monaco-editor-hover,
   .monaco-hover-content {
-    font-size: var(--bf-font-size-xs) !important;
+    font-size: var(--bf-type-label-sm-font-size) !important;
 
     * {
-      font-size: var(--bf-font-size-xs) !important;
+      font-size: var(--bf-type-label-sm-font-size) !important;
       color: var(--bf-color-content-on-light) !important;
     }
   }
diff --git a/src/web-ui/src/tools/editor/components/DiffEditor.scss b/src/web-ui/src/tools/editor/components/DiffEditor.scss
index 772e2afc9b..39c8dd07c9 100644
--- a/src/web-ui/src/tools/editor/components/DiffEditor.scss
+++ b/src/web-ui/src/tools/editor/components/DiffEditor.scss
@@ -49,8 +49,8 @@ $_diff-error-max-width: 400px;
     align-items: center;
     gap: var(--bf-space-4);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    font-family: var(--bf-font-family-mono);
+    font-size: var(--bf-type-label-md-font-size);
+    font-family: var(--bf-type-code-md-font-family);
   }
 
   &__stats {
@@ -60,10 +60,10 @@ $_diff-error-max-width: 400px;
   }
 
   &__stat {
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     padding: 2px 6px;
     border-radius: var(--bf-radius-sm);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
 
     &--add {
       color: var(--bf-domain-git-staged);
@@ -79,15 +79,15 @@ $_diff-error-max-width: 400px;
   }
 
   &__changes-count {
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__file-path {
     color: var(--bf-color-content-muted);
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__actions {
@@ -106,8 +106,8 @@ $_diff-error-max-width: 400px;
     border: 1px solid var(--bf-color-border-default);
     border-radius: var(--bf-radius-base);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-lg);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-body-lg-font-size);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     cursor: pointer;
     transition:
       transform var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -209,16 +209,16 @@ $_diff-error-max-width: 400px;
 
   &__message {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     margin: 0;
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
   }
 
   &__path {
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
-    font-family: var(--bf-font-family-mono);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-family: var(--bf-type-code-md-font-family);
     margin: 0;
     max-width: 100%;
     overflow: hidden;
@@ -518,11 +518,11 @@ $_diff-error-max-width: 400px;
     max-width: 280px;
 
     &__message {
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
     }
 
     &__path {
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
     }
   }
 }
diff --git a/src/web-ui/src/tools/editor/components/EditorBreadcrumb.scss b/src/web-ui/src/tools/editor/components/EditorBreadcrumb.scss
index 437a40e801..324f23930d 100644
--- a/src/web-ui/src/tools/editor/components/EditorBreadcrumb.scss
+++ b/src/web-ui/src/tools/editor/components/EditorBreadcrumb.scss
@@ -29,8 +29,8 @@ $_dropdown-width: 220px;
     display: inline-flex;
     align-items: center;
     gap: 3px;
-    font-size: var(--bf-font-size-xs);
-    font-family: var(--bf-font-family-mono);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-family: var(--bf-type-code-md-font-family);
     color: var(--bf-color-content-secondary);
     white-space: nowrap;
     border-radius: 3px;
@@ -92,7 +92,7 @@ $_dropdown-width: 220px;
     gap: var(--bf-space-2);
     padding: 16px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__spinner {
@@ -103,7 +103,7 @@ $_dropdown-width: 220px;
     padding: 16px;
     text-align: center;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
 }
diff --git a/src/web-ui/src/tools/editor/components/EditorStatusBar.scss b/src/web-ui/src/tools/editor/components/EditorStatusBar.scss
index 190eaae019..d615f779e2 100644
--- a/src/web-ui/src/tools/editor/components/EditorStatusBar.scss
+++ b/src/web-ui/src/tools/editor/components/EditorStatusBar.scss
@@ -17,8 +17,8 @@ $_section-gap: 12px;
   padding: $_statusbar-padding;
   background: var(--bf-color-surface-scene);
   border-top: 1px solid var(--bf-color-border-subtle);
-  font-size: var(--bf-font-size-meta);
-  font-family: var(--bf-font-family-mono);
+  font-size: var(--bf-type-meta-font-size);
+  font-family: var(--bf-type-code-md-font-family);
   color: var(--bf-color-content-muted);
   user-select: none;
   flex-shrink: 0;
@@ -79,10 +79,10 @@ $_section-gap: 12px;
     color: var(--bf-color-status-warning-content);
     padding: 1px 6px;
     border-radius: 3px;
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-transform: uppercase;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   }
 
 }
diff --git a/src/web-ui/src/tools/editor/components/ImageViewer.scss b/src/web-ui/src/tools/editor/components/ImageViewer.scss
index 3336c10636..b6f6997ba4 100644
--- a/src/web-ui/src/tools/editor/components/ImageViewer.scss
+++ b/src/web-ui/src/tools/editor/components/ImageViewer.scss
@@ -9,7 +9,7 @@
   background: var(--bf-color-surface-canvas);
   color: var(--bf-color-content-primary);
   overflow: hidden;
-  font-family: var(--bf-font-family-sans);
+  font-family: var(--bf-type-body-sm-font-family);
 
   &.fullscreen {
     position: fixed;
@@ -30,13 +30,13 @@
     display: flex;
     align-items: center;
     gap: var(--bf-space-3);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     flex: 1;
     min-width: 0;
   }
 
   &__filename {
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     white-space: nowrap;
     overflow: hidden;
@@ -45,7 +45,7 @@
 
   &__dimensions,
   &__filesize {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     white-space: nowrap;
   }
@@ -104,7 +104,7 @@
 
     p {
       margin: 0;
-      font-size: var(--bf-font-size-base);
+      font-size: var(--bf-type-body-md-font-size);
     }
   }
 
@@ -142,12 +142,12 @@
     p {
       margin: 0;
       color: var(--bf-color-status-danger-content);
-      font-size: var(--bf-font-size-base);
+      font-size: var(--bf-type-body-md-font-size);
     }
   }
 
   &__error-path {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     word-break: break-all;
     max-width: 600px;
diff --git a/src/web-ui/src/tools/editor/components/MarkdownEditor.scss b/src/web-ui/src/tools/editor/components/MarkdownEditor.scss
index a0c403c872..2a7a26b7c0 100644
--- a/src/web-ui/src/tools/editor/components/MarkdownEditor.scss
+++ b/src/web-ui/src/tools/editor/components/MarkdownEditor.scss
@@ -80,7 +80,7 @@
 
     p {
       margin: 0;
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
       color: var(--bf-color-content-secondary);
     }
 
@@ -90,42 +90,42 @@
 // Markdown preview inside m-editor only (align with flow-chat markdown chrome via shared Sass values).
 .m-editor .markdown-body {
   color: var(--bf-color-content-secondary);
-  font-family: var(--bf-font-family-sans);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-relaxed);
+  font-family: var(--bf-type-body-sm-font-family);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
 
   h1, h2, h3, h4, h5, h6 {
     margin-top: var(--bf-space-6);
     margin-bottom: var(--bf-space-4);
-    font-weight: var(--bf-font-weight-semibold);
-    line-height: var(--bf-line-height-tight);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    line-height: var(--bf-type-label-md-line-height);
     color: var(--bf-color-content-primary);
   }
 
   strong, b {
-    font-weight: var(--bf-font-weight-bold);
+    font-weight: var(--bf-type-heading-page-font-weight);
     color: var(--bf-color-status-warning-content);
   }
 
   h1 {
-    font-size: var(--bf-font-size-3xl);
+    font-size: var(--bf-type-heading-dialog-font-size);
     color: var(--bf-color-content-primary);
     border-bottom: 1px solid var(--bf-color-border-subtle);
     padding-bottom: var(--bf-space-3);
     text-align: center;
-    letter-spacing: var(--bf-letter-spacing-wider);
+    letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
   }
 
   h2 {
-    font-size: var(--bf-font-size-2xl);
+    font-size: var(--bf-type-flow-section-title-font-size);
     border-bottom: 1px solid var(--bf-color-border-subtle);
     padding-bottom: var(--bf-space-2);
   }
 
-  h3 { font-size: var(--bf-font-size-xl); }
-  h4 { font-size: var(--bf-font-size-lg); }
-  h5 { font-size: var(--bf-font-size-base); }
-  h6 { font-size: var(--bf-font-size-sm); }
+  h3 { font-size: var(--bf-type-flow-title-font-size); }
+  h4 { font-size: var(--bf-type-body-lg-font-size); }
+  h5 { font-size: var(--bf-type-body-md-font-size); }
+  h6 { font-size: var(--bf-type-label-md-font-size); }
 
   p {
     margin-top: 0;
@@ -146,12 +146,12 @@
   code {
     padding: 0.1em 0.4em;
     margin: 0 0.05em;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-ui);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     vertical-align: baseline;
     white-space: nowrap;
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
     color: markdownCode.$inline-code-fg;
     background: markdownCode.$inline-code-bg;
     border: 1px solid markdownCode.$inline-code-border;
@@ -175,9 +175,9 @@
     padding: markdownCode.$pre-padding;
     overflow: auto;
     font-size: var(--bf-type-flow-code-font-size);
-    line-height: var(--bf-line-height-base);
+    line-height: var(--bf-type-body-sm-line-height);
     position: relative;
-    font-family:var(--bf-font-family-mono);
+    font-family:var(--bf-type-code-md-font-family);
     color: markdownCode.$pre-code-fg;
     background: markdownCode.$pre-bg;
     border: 1px dashed markdownCode.$pre-border;
@@ -199,7 +199,7 @@
       margin: 0;
       overflow: visible;
       white-space: pre;
-      font-family:var(--bf-font-family-mono);
+      font-family:var(--bf-type-code-md-font-family);
       font-size: var(--bf-type-flow-code-font-size);
       font-weight: inherit;
       line-height: inherit;
@@ -263,7 +263,7 @@
     top: 0;
     width: markdownLayout.$list-marker-width;
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   > ul:not(.contains-task-list) > li::before {
@@ -311,7 +311,7 @@
     width: max-content;
     max-width: 100%;
     margin-bottom: var(--bf-space-4);
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
     border: 1px solid markdownTable.$border;
     border-radius: var(--bf-control-flow-chat-card-radius);
     background: markdownTable.$surface;
@@ -333,7 +333,7 @@
   }
 
   table th {
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     background: markdownTable.$th-bg;
     color: markdownTable.$th-fg;
   }
@@ -439,7 +439,7 @@
 
   summary {
     cursor: pointer;
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     list-style-position: outside;
 
@@ -495,7 +495,7 @@
 
   // KaTeX math formula styles
   .katex {
-    font-size: var(--bf-font-size-lg);
+    font-size: var(--bf-type-body-lg-font-size);
   }
 
   .katex-display {
diff --git a/src/web-ui/src/tools/editor/components/PlanViewer.scss b/src/web-ui/src/tools/editor/components/PlanViewer.scss
index 8432019559..2e3bd647df 100644
--- a/src/web-ui/src/tools/editor/components/PlanViewer.scss
+++ b/src/web-ui/src/tools/editor/components/PlanViewer.scss
@@ -36,7 +36,7 @@
 
       p {
         color: var(--bf-color-content-secondary);
-        font-size: var(--bf-font-size-base);
+        font-size: var(--bf-type-body-md-font-size);
         margin: 0;
       }
 
@@ -105,17 +105,17 @@
       }
 
       .file-name {
-        font-size: var(--bf-font-size-base);
-        font-weight: var(--bf-font-weight-medium);
+        font-size: var(--bf-type-body-md-font-size);
+        font-weight: var(--bf-type-label-sm-font-weight);
         color: var(--bf-color-content-primary);
-        font-family:var(--bf-font-family-mono);
+        font-family:var(--bf-type-code-md-font-family);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
 
       .unsaved-indicator {
-        font-size: var(--bf-font-size-meta);
+        font-size: var(--bf-type-meta-font-size);
         color: var(--bf-color-status-warning-content);
         padding: 2px 6px;
         background: var(--bf-color-status-warning-surface);
@@ -131,14 +131,14 @@
       flex-shrink: 0;
 
       .todos-count {
-        font-size: var(--bf-font-size-meta);
-        font-weight: var(--bf-font-weight-medium);
+        font-size: var(--bf-type-meta-font-size);
+        font-weight: var(--bf-type-label-sm-font-weight);
         color: var(--bf-color-content-muted);
         padding: 2px 8px;
         border-radius: 999px;
         border: 1px solid var(--bf-color-border-default);
         background: var(--bf-color-surface-canvas);
-        letter-spacing: var(--bf-letter-spacing-subtle);
+        letter-spacing: var(--bf-type-modifier-tracking-subtle-letter-spacing);
       }
 
     }
@@ -242,8 +242,8 @@
       }
 
       .todo-content {
-        font-size: var(--bf-font-size-sm);
-        line-height: var(--bf-line-height-base);
+        font-size: var(--bf-type-label-md-font-size);
+        line-height: var(--bf-type-body-sm-line-height);
         color: var(--bf-color-content-secondary);
         flex: 1;
         min-width: 0;
@@ -266,7 +266,7 @@
 
         .todo-content {
           color: var(--bf-color-content-primary);
-          font-weight: var(--bf-font-weight-medium);
+          font-weight: var(--bf-type-label-sm-font-weight);
         }
       }
 
diff --git a/src/web-ui/src/tools/editor/components/StatusBarPopovers/StatusBarPopovers.scss b/src/web-ui/src/tools/editor/components/StatusBarPopovers/StatusBarPopovers.scss
index 0e6f897d77..778267974c 100644
--- a/src/web-ui/src/tools/editor/components/StatusBarPopovers/StatusBarPopovers.scss
+++ b/src/web-ui/src/tools/editor/components/StatusBarPopovers/StatusBarPopovers.scss
@@ -13,8 +13,8 @@
    z-index: $popover-z;
    min-width: 200px;
    max-width: 320px;
-   font-size: var(--bf-font-size-xs);
-   font-family: var(--bf-font-family-sans);
+   font-size: var(--bf-type-label-sm-font-size);
+   font-family: var(--bf-type-body-sm-font-family);
    color: var(--bf-color-content-primary);
    transform: translateY(-100%);
    animation: status-bar-popover-enter 0.15s var(--bf-motion-easing-decelerate) forwards;
@@ -30,8 +30,8 @@
     border-radius: 4px;
 
     input {
-      font-size: var(--bf-font-size-xs);
-      font-family: var(--bf-font-family-mono);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-family: var(--bf-type-code-md-font-family);
     }
    }
 
@@ -42,7 +42,7 @@
 
    &__hint {
      padding: 6px 12px;
-     font-size: var(--bf-font-size-meta);
+     font-size: var(--bf-type-meta-font-size);
      color: var(--bf-color-content-muted);
      border-bottom: 1px solid var(--bf-color-border-subtle);
    }
diff --git a/src/web-ui/src/tools/editor/meditor/components/EditArea.scss b/src/web-ui/src/tools/editor/meditor/components/EditArea.scss
index a38f44326f..6cd4f6fa54 100644
--- a/src/web-ui/src/tools/editor/meditor/components/EditArea.scss
+++ b/src/web-ui/src/tools/editor/meditor/components/EditArea.scss
@@ -6,9 +6,9 @@
   outline: none !important;
   box-shadow: none !important;
   resize: none;
-  font-family: var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-sm);
-  line-height: var(--bf-line-height-relaxed);
+  font-family: var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-label-md-font-size);
+  line-height: var(--bf-type-body-lg-line-height);
   background: transparent;
   color: inherit;
 
diff --git a/src/web-ui/src/tools/editor/meditor/components/MEditor.scss b/src/web-ui/src/tools/editor/meditor/components/MEditor.scss
index 68b7ed470a..34c02cae89 100644
--- a/src/web-ui/src/tools/editor/meditor/components/MEditor.scss
+++ b/src/web-ui/src/tools/editor/meditor/components/MEditor.scss
@@ -19,8 +19,8 @@
     border-bottom: 1px solid color-mix(in srgb, var(--bf-color-status-warning-content) 30%, transparent);
     background: color-mix(in srgb, var(--bf-color-status-warning-content) 8%, transparent);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-support);
+    font-size: var(--bf-type-label-md-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
 
     &__icon {
       flex: 0 0 auto;
@@ -54,8 +54,8 @@
     background: var(--bf-color-surface-scene);
     color: var(--bf-color-content-primary);
     font: inherit;
-    font-family:var(--bf-font-family-mono);
-    line-height: var(--bf-line-height-relaxed);
+    font-family:var(--bf-type-code-md-font-family);
+    line-height: var(--bf-type-body-lg-line-height);
     white-space: pre-wrap;
     overflow: auto;
   }
diff --git a/src/web-ui/src/tools/editor/meditor/components/Preview.scss b/src/web-ui/src/tools/editor/meditor/components/Preview.scss
index 6fc08532ea..da472cf29a 100644
--- a/src/web-ui/src/tools/editor/meditor/components/Preview.scss
+++ b/src/web-ui/src/tools/editor/meditor/components/Preview.scss
@@ -24,8 +24,8 @@
 
     &__label {
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     &__source {
@@ -33,9 +33,9 @@
       padding: var(--bf-space-3);
       overflow-x: auto;
       color: var(--bf-color-content-secondary);
-      font-family:var(--bf-font-family-mono);
-      font-size: var(--bf-font-size-sm);
-      line-height: var(--bf-line-height-comfortable);
+      font-family:var(--bf-type-code-md-font-family);
+      font-size: var(--bf-type-label-md-font-size);
+      line-height: var(--bf-type-support-line-height);
       white-space: pre;
     }
   }
diff --git a/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.scss b/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.scss
index 8c03a39748..2b6f73c70a 100644
--- a/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.scss
+++ b/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.scss
@@ -23,8 +23,8 @@
     min-height: 100%;
     outline: none;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-relaxed);
+    font-size: var(--bf-type-label-md-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
 
     /* blockId lives on <hr> itself — do not use paragraph chrome (padding + radius + hover fill) on hr */
     > [data-block-id]:not(hr) {
@@ -44,7 +44,7 @@
 
     > p.is-empty {
       position: relative;
-      min-height: calc(var(--bf-font-size-sm) * var(--bf-line-height-relaxed));
+      min-height: calc(var(--bf-type-label-md-font-size) * var(--bf-type-body-lg-line-height));
     }
 
     > p.is-empty::before {
@@ -52,8 +52,8 @@
       color: var(--bf-color-content-disabled);
       float: left;
       height: 0;
-      font-size: var(--bf-font-size-sm);
-      letter-spacing: var(--bf-letter-spacing-normal);
+      font-size: var(--bf-type-label-md-font-size);
+      letter-spacing: var(--bf-type-body-sm-letter-spacing);
       white-space: nowrap;
       opacity: 0;
       pointer-events: none;
@@ -88,34 +88,34 @@
     h6 {
       margin: 0;
       color: var(--bf-color-content-primary);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
 
     h1 {
-      font-size: var(--bf-font-size-3xl);
+      font-size: var(--bf-type-heading-dialog-font-size);
       color: var(--bf-color-content-primary);
       text-align: center;
     }
 
     h2 {
-      font-size: var(--bf-font-size-2xl);
+      font-size: var(--bf-type-flow-section-title-font-size);
     }
 
     h3 {
-      font-size: var(--bf-font-size-xl);
+      font-size: var(--bf-type-flow-title-font-size);
     }
 
     h4 {
-      font-size: var(--bf-font-size-lg);
+      font-size: var(--bf-type-body-lg-font-size);
     }
 
     h5 {
-      font-size: var(--bf-font-size-base);
+      font-size: var(--bf-type-body-md-font-size);
     }
 
     h6 {
-      font-size: var(--bf-font-size-sm);
-      letter-spacing: var(--bf-letter-spacing-wide);
+      font-size: var(--bf-type-label-md-font-size);
+      letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
       text-transform: uppercase;
     }
 
@@ -134,8 +134,8 @@
       padding: markdownCode.$pre-padding;
       overflow-x: auto;
       font-size: var(--bf-type-flow-code-font-size);
-      line-height: var(--bf-line-height-base);
-      font-family:var(--bf-font-family-mono);
+      line-height: var(--bf-type-body-sm-line-height);
+      font-family:var(--bf-type-code-md-font-family);
       color: markdownCode.$pre-code-fg;
       background: markdownCode.$pre-bg;
       border: 1px dashed markdownCode.$pre-border;
@@ -155,12 +155,12 @@
     code {
       padding: 0.1em 0.4em;
       margin: 0 0.05em;
-      font-size: var(--bf-font-size-sm);
-      font-weight: var(--bf-font-weight-medium);
-      line-height: var(--bf-line-height-ui);
+      font-size: var(--bf-type-label-md-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
+      line-height: var(--bf-type-modifier-leading-ui-line-height);
       vertical-align: baseline;
       white-space: nowrap;
-      font-family:var(--bf-font-family-mono);
+      font-family:var(--bf-type-code-md-font-family);
       color: markdownCode.$inline-code-fg;
       background: markdownCode.$inline-code-bg;
       border: 1px solid markdownCode.$inline-code-border;
@@ -229,7 +229,7 @@
       border-spacing: 0;
       margin: var(--bf-space-4) 0;
       table-layout: fixed;
-      font-size: var(--bf-font-size-base);
+      font-size: var(--bf-type-body-md-font-size);
       border: 1px solid markdownTable.$border;
       border-radius: var(--bf-control-flow-chat-card-radius);
       background: markdownTable.$surface;
@@ -252,7 +252,7 @@
     }
 
     th {
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
       background: markdownTable.$th-bg;
       color: markdownTable.$th-fg;
     }
@@ -358,7 +358,7 @@
       top: 0;
       width: markdownLayout.$list-marker-width;
       color: var(--bf-color-content-primary);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
     > ul:not([data-type='taskList']) > li::before {
@@ -498,18 +498,18 @@
     border-radius: 999px;
     background: color-mix(in srgb, var(--bf-color-content-muted) 14%, transparent);
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
-    letter-spacing: var(--bf-letter-spacing-wide);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
     white-space: nowrap;
   }
 
   .m-editor-inline-ai__section-title {
     margin: var(--bf-space-2) 0 6px;
     color: var(--bf-color-content-muted);
-    font-size: var(--bf-font-size-micro);
-    font-weight: var(--bf-font-weight-medium);
-    letter-spacing: var(--bf-letter-spacing-wide);
+    font-size: var(--bf-type-micro-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
     opacity: 0.72;
   }
 
@@ -555,14 +555,14 @@
   }
 
   .m-editor-inline-ai-preview__title {
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-accent-default);
-    letter-spacing: var(--bf-letter-spacing-wide);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
   }
 
   .m-editor-inline-ai-preview__status {
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-disabled);
     white-space: nowrap;
   }
@@ -572,8 +572,8 @@
     position: relative;
     color: inherit;
     padding-left: var(--bf-space-3);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-support);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
   }
 
   .m-editor-inline-ai-preview__body::before {
@@ -613,7 +613,7 @@
   .m-editor-inline-ai-rendered__loading {
     margin-bottom: var(--bf-space-2);
     color: var(--bf-color-content-disabled);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   .m-editor-inline-ai-rendered__content {
@@ -640,20 +640,20 @@
   .m-editor-inline-ai-rendered__content.markdown-body h2,
   .m-editor-inline-ai-rendered__content.markdown-body h3 {
     color: inherit;
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .m-editor-inline-ai-rendered__content.markdown-body h1 {
-    font-size: var(--bf-font-size-lg);
+    font-size: var(--bf-type-body-lg-font-size);
     text-align: left;
   }
 
   .m-editor-inline-ai-rendered__content.markdown-body h2 {
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 
   .m-editor-inline-ai-rendered__content.markdown-body h3 {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   .m-editor-inline-ai-rendered__content.markdown-body p {
@@ -664,7 +664,7 @@
     margin: 0 0 6px;
     padding: markdownCode.$bq-padding;
     font-style: italic;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: markdownCode.$bq-fg;
     background: markdownCode.$bq-bg;
     border-left: 3px solid markdownCode.$bq-border;
@@ -675,9 +675,9 @@
   .m-editor-inline-ai-rendered__content.markdown-body pre {
     margin: 0 0 6px;
     padding: 8px 10px;
-    font-size: var(--bf-font-size-meta);
-    line-height: var(--bf-line-height-support);
-    font-family:var(--bf-font-family-mono);
+    font-size: var(--bf-type-meta-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
+    font-family:var(--bf-type-code-md-font-family);
     color: markdownCode.$pre-code-fg;
     background: markdownCode.$pre-bg;
     border: 1px dashed markdownCode.$pre-border;
@@ -714,9 +714,9 @@
   .m-editor-inline-ai-rendered__content.markdown-body td code,
   .m-editor-inline-ai-rendered__content.markdown-body th code {
     padding: 0.1em 0.35em;
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
-    font-family:var(--bf-font-family-mono);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    font-family:var(--bf-type-code-md-font-family);
     color: markdownCode.$inline-code-fg;
     background: markdownCode.$inline-code-bg;
     border: 1px solid markdownCode.$inline-code-border;
@@ -746,8 +746,8 @@
 
   .m-editor-inline-ai-preview__placeholder {
     color: inherit;
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-support);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-flow-support-line-height);
     padding: 4px 6px;
   }
 
@@ -762,7 +762,7 @@
   .m-editor-inline-ai__error {
     margin-top: var(--bf-space-2);
     color: var(--bf-color-status-danger-content);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   .m-editor-render-only-block,
@@ -786,8 +786,8 @@
 
   .m-editor-frontmatter__label {
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
   }
 
   .m-editor-raw-html-inline {
@@ -804,17 +804,17 @@
 
   .m-editor-raw-html-block__label,
   .m-editor-raw-html-inline__label {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-semibold);
-    letter-spacing: var(--bf-letter-spacing-wide);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
     text-transform: uppercase;
     color: var(--bf-color-status-warning-content);
   }
 
   .m-editor-raw-html-inline__source {
     margin: 0;
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
     white-space: pre-wrap;
     word-break: break-word;
   }
@@ -857,8 +857,8 @@
   .m-editor-raw-html-block__textarea,
   .m-editor-frontmatter__textarea {
     margin: 0;
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
     display: block;
     width: 100%;
     min-height: 180px;
@@ -868,7 +868,7 @@
     background: color-mix(in srgb, var(--bf-color-surface-scene) 94%, var(--bf-color-content-on-light));
     color: var(--bf-color-content-primary);
     padding: var(--bf-space-3);
-    line-height: var(--bf-line-height-comfortable);
+    line-height: var(--bf-type-support-line-height);
     word-break: break-word;
     outline: none;
     user-select: text;
@@ -919,9 +919,9 @@
     background: transparent;
     box-shadow: none;
     color: var(--bf-color-content-secondary);
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-comfortable);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    line-height: var(--bf-type-support-line-height);
     white-space: pre;
 
     &:hover {
@@ -961,8 +961,8 @@
   .m-editor-frontmatter__source-fallback {
     display: none;
     margin: 0;
-    font-family:var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
+    font-family:var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
     white-space: pre-wrap;
     word-break: break-word;
     border: 1px solid color-mix(in srgb, var(--bf-color-content-primary) 12%, transparent);
@@ -970,7 +970,7 @@
     background: color-mix(in srgb, var(--bf-color-surface-scene) 94%, var(--bf-color-content-on-light));
     color: var(--bf-color-content-primary);
     padding: var(--bf-space-3);
-    line-height: var(--bf-line-height-comfortable);
+    line-height: var(--bf-type-support-line-height);
   }
 
   .m-editor-render-only-block[data-preview-empty='true'] .m-editor-render-only-block__preview,
@@ -991,7 +991,7 @@
   .m-editor-render-only-block__details-summary,
   .m-editor-raw-html-block__details-summary {
     cursor: pointer;
-    font-weight: var(--bf-font-weight-semibold);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     list-style-position: outside;
   }
@@ -1036,13 +1036,13 @@
     padding: 0;
     width: 20px;
     height: 20px;
-    line-height: var(--bf-line-height-none);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     margin-top: 2px;
   }
 
   [data-type='details'] > button::before {
     content: '▸';
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 
   [data-type='details'].is-open > button::before {
@@ -1057,8 +1057,8 @@
     display: block;
     list-style: none;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     outline: none;
   }
 
@@ -1104,8 +1104,8 @@
     padding: 0;
     width: 20px;
     height: 20px;
-    font-size: var(--bf-font-size-base);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-body-md-font-size);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
   }
 
   .m-editor-details-block__summary {
@@ -1114,8 +1114,8 @@
     border: none;
     background: transparent;
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     outline: none;
   }
 
diff --git a/src/web-ui/src/tools/file-system/components/FileSearchResults.scss b/src/web-ui/src/tools/file-system/components/FileSearchResults.scss
index 08908e88ba..86b5210d47 100644
--- a/src/web-ui/src/tools/file-system/components/FileSearchResults.scss
+++ b/src/web-ui/src/tools/file-system/components/FileSearchResults.scss
@@ -28,7 +28,7 @@ $_icon-size: 16px;
   }
 
   &-hint {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     opacity: 0.7;
     margin-top: var(--bf-space-2);
   }
@@ -42,9 +42,9 @@ $_icon-size: 16px;
 }
 
 .bitfun-search-results__count {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-muted);
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-sm-font-weight);
 }
 
 .bitfun-search-results__list {
@@ -136,8 +136,8 @@ $_icon-size: 16px;
   }
 
   &-name {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: inherit;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -146,7 +146,7 @@ $_icon-size: 16px;
   }
 
   &-path {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     opacity: 0.6;
     overflow: hidden;
@@ -195,9 +195,9 @@ $_icon-size: 16px;
   }
 
   &-toggle-count {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
   }
 }
 
@@ -248,13 +248,13 @@ $_icon-size: 16px;
     
     code {
       display: block;
-      font-size: var(--bf-font-size-xs);
-      font-family: var(--bf-font-family-mono);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-family: var(--bf-type-code-md-font-family);
       color: var(--bf-color-content-secondary);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      line-height: var(--bf-line-height-base);
+      line-height: var(--bf-type-body-sm-line-height);
     }
   }
 }
@@ -264,12 +264,12 @@ $_icon-size: 16px;
   color: var(--bf-color-accent-default);
   padding: 1px 2px;
   border-radius: 2px;
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-sm-font-weight);
 }
 
 .bitfun-search-results__showing {
   color: var(--bf-color-content-muted);
-  font-weight: var(--bf-font-weight-regular);
+  font-weight: var(--bf-type-body-sm-font-weight);
   opacity: 0.7;
 }
 
@@ -284,7 +284,7 @@ $_icon-size: 16px;
   border-top: 1px solid var(--bf-color-border-default);
   background: var(--bf-color-surface-subtle);
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   cursor: pointer;
   transition:
     transform var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
diff --git a/src/web-ui/src/tools/file-system/styles/FileExplorer.scss b/src/web-ui/src/tools/file-system/styles/FileExplorer.scss
index fcc8b83fb3..e08fcc67ee 100644
--- a/src/web-ui/src/tools/file-system/styles/FileExplorer.scss
+++ b/src/web-ui/src/tools/file-system/styles/FileExplorer.scss
@@ -64,7 +64,7 @@ $_indent-width: 8px;
   gap: 1px;
   padding: 4px 8px;
   height: 24px;
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-meta-font-size);
   color: var(--bf-color-content-muted);
   background: linear-gradient(
     180deg,
@@ -169,7 +169,7 @@ $_indent-width: 8px;
 
     .bitfun-file-explorer__node-name {
       color: var(--bf-domain-git-branch);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
     &:hover {
@@ -205,7 +205,7 @@ $_indent-width: 8px;
     
     .bitfun-file-explorer__node-name {
       color: var(--bf-domain-git-branch);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
   }
 }
@@ -321,8 +321,8 @@ $_indent-width: 8px;
 
 .bitfun-file-explorer__node-name {
   flex: 1;
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-regular);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-body-sm-font-weight);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -348,7 +348,7 @@ $_indent-width: 8px;
 }
 
 .bitfun-file-explorer__node-size {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-muted);
   opacity: 0.7;
   flex-shrink: 0;
@@ -357,7 +357,7 @@ $_indent-width: 8px;
 }
 
 .bitfun-file-explorer__node-modified {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-muted);
   opacity: 0.7;
   flex-shrink: 0;
@@ -435,7 +435,7 @@ $_indent-width: 8px;
   }
 
   .bitfun-file-explorer__node-name {
-    font-size: var(--bf-font-size-base);
+    font-size: var(--bf-type-body-md-font-size);
   }
 
   .bitfun-file-explorer__node-size,
diff --git a/src/web-ui/src/tools/generative-widget/GenerativeWidgetFrame.tsx b/src/web-ui/src/tools/generative-widget/GenerativeWidgetFrame.tsx
index c795338bc7..5baf7c233c 100644
--- a/src/web-ui/src/tools/generative-widget/GenerativeWidgetFrame.tsx
+++ b/src/web-ui/src/tools/generative-widget/GenerativeWidgetFrame.tsx
@@ -101,7 +101,7 @@ ${createWidgetAppearanceFallbackCss()}
       min-height: 0;
       background: transparent;
       color: var(--bf-color-content-primary);
-      font-family: var(--bf-font-family-sans);
+      font-family: var(--bf-type-body-sm-font-family);
       overflow-x: hidden;
       overflow-y: hidden;
     }
@@ -129,11 +129,11 @@ ${createWidgetAppearanceFallbackCss()}
       word-break: break-word;
     }
     body {
-      font-size: var(--bf-font-size-sm);
-      line-height: var(--bf-line-height-base);
+      font-size: var(--bf-type-label-md-font-size);
+      line-height: var(--bf-type-body-sm-line-height);
     }
     body, button, input, textarea, select {
-      font-family: var(--bf-font-family-sans);
+      font-family: var(--bf-type-body-sm-font-family);
     }
     button, input, textarea, select {
       font: inherit;
@@ -211,23 +211,23 @@ ${createWidgetAppearanceFallbackCss()}
     }
     .bf-title {
       margin: 0;
-      font-size: var(--bf-font-size-lg);
-      font-weight: var(--bf-font-weight-semibold);
-      line-height: var(--bf-line-height-tight);
+      font-size: var(--bf-type-body-lg-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      line-height: var(--bf-type-label-md-line-height);
       color: var(--bf-color-content-primary);
-      letter-spacing: var(--bf-letter-spacing-snug);
+      letter-spacing: var(--bf-type-flow-title-letter-spacing);
     }
     .bf-subtitle {
       margin: 0;
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       color: var(--bf-color-content-muted);
-      line-height: var(--bf-line-height-base);
+      line-height: var(--bf-type-body-sm-line-height);
     }
     .bf-eyebrow {
       margin: 0;
-      font-size: var(--bf-font-size-meta);
-      font-weight: var(--bf-font-weight-medium);
-      letter-spacing: var(--bf-letter-spacing-widest);
+      font-size: var(--bf-type-meta-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
+      letter-spacing: var(--bf-type-modifier-tracking-widest-letter-spacing);
       text-transform: uppercase;
       color: var(--bf-color-content-muted);
     }
@@ -282,20 +282,20 @@ ${createWidgetAppearanceFallbackCss()}
       border: 1px solid var(--bf-color-border-subtle);
     }
     .bf-kpi-label {
-      font-size: var(--bf-font-size-meta);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-meta-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
       text-transform: uppercase;
-      letter-spacing: var(--bf-letter-spacing-widest);
+      letter-spacing: var(--bf-type-modifier-tracking-widest-letter-spacing);
       color: var(--bf-color-content-muted);
     }
     .bf-kpi-value {
-      font-size: var(--bf-font-size-2xl);
-      font-weight: var(--bf-font-weight-semibold);
-      line-height: var(--bf-line-height-display);
+      font-size: var(--bf-type-flow-section-title-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
+      line-height: var(--bf-type-display-sm-line-height);
       color: var(--bf-color-content-primary);
     }
     .bf-kpi-meta {
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       color: var(--bf-color-content-secondary);
     }
     .bf-badge {
@@ -308,8 +308,8 @@ ${createWidgetAppearanceFallbackCss()}
       border-radius: 999px;
       background: var(--bf-color-action-neutral-surface);
       border: 1px solid var(--bf-color-border-subtle);
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
       color: var(--bf-color-content-secondary);
       white-space: nowrap;
     }
@@ -450,15 +450,15 @@ ${createWidgetAppearanceFallbackCss()}
       vertical-align: top;
       border-bottom: 1px solid var(--bf-color-border-subtle);
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
       word-break: break-word;
     }
     .bf-table th {
-      font-size: var(--bf-font-size-xs);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-label-sm-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
       color: var(--bf-color-content-muted);
       text-transform: uppercase;
-      letter-spacing: var(--bf-letter-spacing-wider);
+      letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
     }
     .bf-empty {
       display: flex;
@@ -486,11 +486,11 @@ ${createWidgetAppearanceFallbackCss()}
       border-radius: 6px;
       background: var(--bf-color-action-neutral-surface);
       color: var(--bf-color-content-primary);
-      font-family: var(--bf-font-family-mono);
-      font-size: var(--bf-font-size-xs);
+      font-family: var(--bf-type-code-md-font-family);
+      font-size: var(--bf-type-label-sm-font-size);
     }
     .bf-mono {
-      font-family: var(--bf-font-family-mono);
+      font-family: var(--bf-type-code-md-font-family);
     }
     @media (max-width: 560px) {
       .bf-card,
@@ -502,7 +502,7 @@ ${createWidgetAppearanceFallbackCss()}
         grid-template-columns: 1fr;
       }
       .bf-title {
-        font-size: var(--bf-font-size-base);
+        font-size: var(--bf-type-body-md-font-size);
       }
     }
     @media (prefers-reduced-motion: reduce) {
diff --git a/src/web-ui/src/tools/generative-widget/GenerativeWidgetPanel.scss b/src/web-ui/src/tools/generative-widget/GenerativeWidgetPanel.scss
index 7895d480b7..7a5caefac1 100644
--- a/src/web-ui/src/tools/generative-widget/GenerativeWidgetPanel.scss
+++ b/src/web-ui/src/tools/generative-widget/GenerativeWidgetPanel.scss
@@ -16,7 +16,7 @@
 
 .bitfun-generative-widget-panel__empty-copy {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
 }
 
 .bitfun-generative-widget-panel__toolbar {
@@ -38,7 +38,7 @@
 }
 
 .bitfun-generative-widget-panel__save-state {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-secondary);
 }
 
@@ -86,8 +86,8 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
 }
 
@@ -103,5 +103,5 @@
   border: 1px solid color-mix(in srgb, var(--bf-color-status-danger-content) 50%, transparent);
   background: color-mix(in srgb, var(--bf-color-status-danger-content) 10%, transparent);
   color: var(--bf-color-status-danger-content);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
 }
diff --git a/src/web-ui/src/tools/git/components/BranchQuickSwitch.scss b/src/web-ui/src/tools/git/components/BranchQuickSwitch.scss
index 77871a7471..5d73e67b99 100644
--- a/src/web-ui/src/tools/git/components/BranchQuickSwitch.scss
+++ b/src/web-ui/src/tools/git/components/BranchQuickSwitch.scss
@@ -10,7 +10,7 @@
   width: min(280px, calc(100vw - 16px));
   overflow: hidden;
   color: var(--bf-color-content-primary);
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
   user-select: none;
 }
 
@@ -36,7 +36,7 @@
   gap: 8px;
   padding: 20px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   text-align: center;
 }
 
@@ -89,8 +89,8 @@
   min-width: 0;
   overflow: hidden;
   flex: 1 1 auto;
-  font-family:var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-sm);
+  font-family:var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-label-md-font-size);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -99,8 +99,8 @@
   display: inline-flex;
   flex: 0 0 auto;
   gap: 7px;
-  font-family:var(--bf-font-family-mono);
-  font-size: var(--bf-font-size-sm);
+  font-family:var(--bf-type-code-md-font-family);
+  font-size: var(--bf-type-label-md-font-size);
 }
 
 .branch-switch-conflict-dialog__additions {
@@ -125,8 +125,8 @@
   p {
     margin: 0;
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-base);
+    font-size: var(--bf-type-label-md-font-size);
+    line-height: var(--bf-type-body-sm-line-height);
   }
 
   > .branch-switch-commit-dialog__input {
diff --git a/src/web-ui/src/tools/git/components/CreateBranchDialog/CreateBranchDialog.scss b/src/web-ui/src/tools/git/components/CreateBranchDialog/CreateBranchDialog.scss
index 653fc65aab..9fda685cc7 100644
--- a/src/web-ui/src/tools/git/components/CreateBranchDialog/CreateBranchDialog.scss
+++ b/src/web-ui/src/tools/git/components/CreateBranchDialog/CreateBranchDialog.scss
@@ -19,8 +19,8 @@
   }
 
   &__title {
-    font-size: var(--bf-font-size-lg);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-body-lg-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
@@ -67,9 +67,9 @@
     display: flex;
     align-items: center;
     gap: var(--bf-space-2);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
 
     svg {
       color: var(--bf-color-accent-default);
@@ -77,10 +77,10 @@
   }
 
   &__base-value {
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
     padding: 2px 8px;
     background: var(--bf-color-action-neutral-surface);
     border: 1px solid var(--bf-color-border-default);
@@ -100,8 +100,8 @@
   }
 
   &__label {
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-secondary);
     display: flex;
     align-items: center;
@@ -119,8 +119,8 @@
     border: 1px solid var(--bf-color-border-default);
     border-radius: var(--bf-radius-sm);
     color: var(--bf-color-content-primary);
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
     transition:
       background-color var(--bf-motion-duration-base) var(--bf-motion-easing-standard),
       border-color var(--bf-motion-duration-base) var(--bf-motion-easing-standard),
@@ -136,7 +136,7 @@
 
     &::placeholder {
       color: var(--bf-color-content-muted);
-      font-family: var(--bf-font-family-sans);
+      font-family: var(--bf-type-body-sm-font-family);
     }
 
     &:disabled {
@@ -163,18 +163,18 @@
     border: 1px solid color-mix(in srgb, var(--bf-color-status-danger-content) 25%, transparent);
     border-radius: var(--bf-radius-sm);
     color: var(--bf-color-status-danger-content);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     animation: bitfun-create-branch-dialog-shake 0.4s ease-in-out;
   }
 
   &__hint {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
-    line-height: var(--bf-line-height-relaxed);
+    line-height: var(--bf-type-body-lg-line-height);
 
     div {
       margin-bottom: var(--bf-space-1);
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
 
     ul {
@@ -201,8 +201,8 @@
       background: var(--bf-color-action-neutral-surface);
       border: 1px solid var(--bf-color-border-default);
       border-radius: var(--bf-radius-sm);
-      font-family: var(--bf-font-family-mono);
-      font-size: var(--bf-font-size-micro);
+      font-family: var(--bf-type-code-md-font-family);
+      font-size: var(--bf-type-micro-font-size);
       color: var(--bf-color-content-secondary);
     }
   }
@@ -218,7 +218,7 @@
 
   &__shortcuts {
     margin-top: var(--bf-space-2);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     text-align: center;
 
@@ -228,9 +228,9 @@
       background: var(--bf-color-action-neutral-surface);
       border: 1px solid var(--bf-color-border-default);
       border-radius: var(--bf-radius-sm);
-      font-family: var(--bf-font-family-mono);
+      font-family: var(--bf-type-code-md-font-family);
       margin: 0 4px;
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
     }
   }
 
diff --git a/src/web-ui/src/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.scss b/src/web-ui/src/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.scss
index bf0998c415..2055d850be 100644
--- a/src/web-ui/src/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.scss
+++ b/src/web-ui/src/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.scss
@@ -27,7 +27,7 @@
     p {
       margin: 0;
       color: var(--bf-color-content-secondary);
-      font-size: var(--bf-font-size-base);
+      font-size: var(--bf-type-body-md-font-size);
       text-align: center;
     }
 
@@ -212,8 +212,8 @@
     background: var(--bf-color-action-secondary-hover);
     color: var(--bf-color-accent-default);
     flex-shrink: 0;
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     text-transform: uppercase;
     user-select: none;
   }
@@ -236,10 +236,10 @@
   }
 
   &__commit-message {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-regular);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-body-sm-font-weight);
     color: var(--bf-color-content-primary);
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -249,7 +249,7 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-muted);
   }
 
@@ -268,7 +268,7 @@
     display: inline-flex;
     align-items: center;
     gap: 3px;
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
     padding: 1px 4px;
     background: var(--bf-color-surface-tertiary);
     border-radius: 3px;
@@ -277,7 +277,7 @@
       transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
       background-color 140ms ease,
       color 140ms ease;
-    font-size: var(--bf-font-size-micro);
+    font-size: var(--bf-type-micro-font-size);
 
     &:hover {
       background: var(--bf-color-action-neutral-surface-hover);
@@ -342,7 +342,7 @@
     align-items: flex-start;
     gap: 8px;
     margin-bottom: 6px;
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
 
     &:last-child {
       margin-bottom: 0;
@@ -358,11 +358,11 @@
   &__detail-value {
     color: var(--bf-color-content-secondary);
     word-break: break-all;
-    line-height: var(--bf-line-height-ui);
+    line-height: var(--bf-type-modifier-leading-ui-line-height);
 
     &--mono {
-      font-family: var(--bf-font-family-mono);
-      font-size: var(--bf-font-size-micro);
+      font-family: var(--bf-type-code-md-font-family);
+      font-size: var(--bf-type-micro-font-size);
       background: var(--bf-color-surface-tertiary);
       padding: 2px 6px;
       border-radius: 3px;
@@ -426,7 +426,7 @@
     &__timeline-node {
       width: 20px;
       height: 20px;
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
     }
 
     &__timeline-line {
@@ -438,13 +438,13 @@
     }
 
     &__commit-message {
-      font-size: var(--bf-font-size-xs);
-      line-height: var(--bf-line-height-snug);
+      font-size: var(--bf-type-label-sm-font-size);
+      line-height: var(--bf-type-modifier-leading-snug-line-height);
     }
 
     &__commit-meta {
       gap: 4px;
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
     }
 
     &__commit-author {
@@ -461,7 +461,7 @@
     }
 
     &__detail-row {
-      font-size: var(--bf-font-size-micro);
+      font-size: var(--bf-type-micro-font-size);
     }
 
     &__detail-label {
diff --git a/src/web-ui/src/tools/git/components/GitDiffEditor/GitDiffEditor.scss b/src/web-ui/src/tools/git/components/GitDiffEditor/GitDiffEditor.scss
index c13b381aa2..d382dd7dc0 100644
--- a/src/web-ui/src/tools/git/components/GitDiffEditor/GitDiffEditor.scss
+++ b/src/web-ui/src/tools/git/components/GitDiffEditor/GitDiffEditor.scss
@@ -23,9 +23,9 @@ $_diff-padding-desktop: 32px;
     border-radius: 0;
     border-bottom: 1px solid color-mix(in srgb, var(--bf-color-status-danger-content) 50%, transparent);
     color: var(--bf-color-status-danger-content);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
-    font-family: var(--bf-font-family-mono);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    font-family: var(--bf-type-code-md-font-family);
     animation: git-diff-editor-error-slide-in 0.3s ease-out;
 
     svg {
@@ -217,8 +217,8 @@ $_diff-padding-desktop: 32px;
     border: 1px solid color-mix(in srgb, var(--bf-color-content-on-dark) 12%, transparent);
     border-radius: var(--bf-radius-base);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-sm);
-    font-family: var(--bf-font-family-mono);
+    font-size: var(--bf-type-label-md-font-size);
+    font-family: var(--bf-type-code-md-font-family);
     z-index: var(--bf-layer-overlay);
     animation: git-diff-editor-fade-in 0.2s ease-out;
     backdrop-filter: blur(4px);
@@ -242,9 +242,9 @@ $_diff-padding-desktop: 32px;
     animation: git-diff-editor-fade-in 0.2s ease-out;
 
     p {
-      font-size: var(--bf-font-size-base);
-      font-weight: var(--bf-font-weight-medium);
-      font-family: var(--bf-font-family-mono);
+      font-size: var(--bf-type-body-md-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
+      font-family: var(--bf-type-code-md-font-family);
       color: var(--bf-color-content-primary);
       animation: git-diff-editor-pulse var(--bf-motion-duration-slow) ease-in-out infinite;
     }
@@ -312,9 +312,9 @@ $_diff-padding-desktop: 32px;
   }
 
   &__completed-title {
-    font-size: var(--bf-font-size-2xl);
-    font-weight: var(--bf-font-weight-semibold);
-    font-family: var(--bf-font-family-mono);
+    font-size: var(--bf-type-flow-section-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
+    font-family: var(--bf-type-code-md-font-family);
     color: var(--bf-color-content-primary);
     margin-bottom: var(--bf-space-4);
     animation: git-diff-editor-slide-up 220ms cubic-bezier(0.23, 1, 0.32, 1) 40ms both;
@@ -327,16 +327,16 @@ $_diff-padding-desktop: 32px;
     animation: git-diff-editor-slide-up 220ms cubic-bezier(0.23, 1, 0.32, 1) 70ms both;
 
     .git-diff-editor__file-path {
-      font-size: var(--bf-font-size-base);
-      font-family: var(--bf-font-family-mono);
+      font-size: var(--bf-type-body-md-font-size);
+      font-family: var(--bf-type-code-md-font-family);
       color: var(--bf-color-content-muted);
     }
   }
 
   &__result-text {
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-medium);
-    font-family: var(--bf-font-family-mono);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    font-family: var(--bf-type-code-md-font-family);
     margin-top: var(--bf-space-3);
 
     &--success {
@@ -432,7 +432,7 @@ $_diff-padding-desktop: 32px;
     }
 
     &__completed-title {
-      font-size: var(--bf-font-size-xl);
+      font-size: var(--bf-type-flow-title-font-size);
     }
 
     &__spinner {
diff --git a/src/web-ui/src/tools/git/components/GitDiffView/GitDiffView.scss b/src/web-ui/src/tools/git/components/GitDiffView/GitDiffView.scss
index d60270cf06..24538dc761 100644
--- a/src/web-ui/src/tools/git/components/GitDiffView/GitDiffView.scss
+++ b/src/web-ui/src/tools/git/components/GitDiffView/GitDiffView.scss
@@ -7,7 +7,7 @@
   flex: 1;
   background: var(--bf-color-surface-canvas);
   color: var(--bf-color-content-primary);
-  font-family: var(--bf-font-family-sans);
+  font-family: var(--bf-type-body-sm-font-family);
 
   &__header {
     display: flex;
@@ -37,8 +37,8 @@
     background: var(--bf-color-action-neutral-surface);
     border: 1px solid var(--bf-color-border-default);
     border-radius: var(--bf-radius-xs);
-    font-size: var(--bf-font-size-meta);
-    font-family: var(--bf-font-family-mono);
+    font-size: var(--bf-type-meta-font-size);
+    font-family: var(--bf-type-code-md-font-family);
     color: var(--bf-color-content-secondary);
   }
 
@@ -46,7 +46,7 @@
     display: flex;
     align-items: center;
     gap: var(--bf-space-2);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
   }
 
@@ -71,7 +71,7 @@
     border: 1px solid var(--bf-color-border-default);
     border-radius: var(--bf-radius-sm);
     color: var(--bf-color-content-secondary);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     cursor: pointer;
     transition:
       transform var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -116,14 +116,14 @@
     }
 
     h3 {
-      font-size: var(--bf-font-size-lg);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-body-lg-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
       margin-bottom: var(--bf-space-2);
       color: var(--bf-color-content-primary);
     }
 
     p {
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
       opacity: var(--bf-opacity-hover);
     }
   }
@@ -177,10 +177,10 @@
   }
 
   &__file-path {
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-primary);
-    font-weight: var(--bf-font-weight-regular);
+    font-weight: var(--bf-type-body-sm-font-weight);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -196,9 +196,9 @@
   &__file-status {
     padding: 2px var(--bf-space-2);
     border-radius: var(--bf-radius-sm);
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
-    font-family: var(--bf-font-family-mono);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
+    font-family: var(--bf-type-code-md-font-family);
     color: var(--bf-color-content-muted);
 
     &--added {
@@ -226,9 +226,9 @@
     display: flex;
     align-items: center;
     gap: var(--bf-space-3);
-    font-size: var(--bf-font-size-xs);
-    font-family: var(--bf-font-family-mono);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-family: var(--bf-type-code-md-font-family);
+    font-weight: var(--bf-type-label-sm-font-weight);
     flex-shrink: 0;
   }
 
@@ -257,9 +257,9 @@
   &__diff-content {
     padding: 0;
     background: var(--bf-color-surface-canvas);
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
-    line-height: var(--bf-line-height-relaxed);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
     overflow-x: auto;
     border-top: 1px solid var(--bf-color-border-default);
 
@@ -307,7 +307,7 @@
 
       .bitfun-git-diff-view__line-content {
         color: var(--bf-color-accent-default);
-        font-weight: var(--bf-font-weight-medium);
+        font-weight: var(--bf-type-label-sm-font-weight);
       }
     }
   }
@@ -321,7 +321,7 @@
     user-select: none;
     border-right: 1px solid var(--bf-color-border-default);
     background: var(--bf-color-surface-subtle);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
   }
 
   &__line-content {
@@ -365,8 +365,8 @@
   }
 
   &__dialog-title {
-    font-size: var(--bf-font-size-xl);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-flow-title-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
   }
 
@@ -396,7 +396,7 @@
     border: 1px solid var(--bf-color-status-danger-border);
     border-radius: var(--bf-radius-base);
     color: var(--bf-color-status-danger-content);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     animation: bitfun-git-diff-view-shake 0.4s ease-in-out;
   }
 
@@ -413,9 +413,9 @@
   }
 
   &__form-label {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__form-textarea {
@@ -425,9 +425,9 @@
     border: 1px solid var(--bf-color-border-default);
     border-radius: var(--bf-radius-base);
     color: var(--bf-color-content-primary);
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-sm);
-    line-height: var(--bf-line-height-relaxed);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-md-font-size);
+    line-height: var(--bf-type-body-lg-line-height);
     resize: vertical;
     transition:
       background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -467,18 +467,18 @@
     display: flex;
     align-items: center;
     gap: var(--bf-space-2);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
   }
 
   &__ai-info-label {
     color: var(--bf-color-content-muted);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__ai-info-badge {
     padding: 2px 8px;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-accent-default);
     background: var(--bf-color-action-secondary-hover);
     border: 1px solid color-mix(in srgb, var(--bf-color-accent-default) 30%, transparent);
@@ -488,8 +488,8 @@
 
   &__ai-info-value {
     color: var(--bf-color-content-primary);
-    font-family: var(--bf-font-family-mono);
-    font-size: var(--bf-font-size-xs);
+    font-family: var(--bf-type-code-md-font-family);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__ai-confidence {
@@ -514,9 +514,9 @@
   }
 
   &__ai-confidence-text {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
-    font-weight: var(--bf-font-weight-medium);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__amend-warning {
@@ -529,7 +529,7 @@
     border: 1px solid var(--bf-color-status-warning-border);
     border-radius: var(--bf-radius-base);
     color: var(--bf-color-status-warning-content);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
   }
 
   &__form-checkbox {
@@ -545,7 +545,7 @@
     }
 
     label {
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
       color: var(--bf-color-content-secondary);
       cursor: pointer;
     }
@@ -566,11 +566,11 @@
     background: var(--bf-color-action-neutral-surface);
     border-radius: var(--bf-radius-base);
     margin-bottom: var(--bf-space-4);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
 
     strong {
       color: var(--bf-color-content-primary);
-      font-weight: var(--bf-font-weight-semibold);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
   }
 }
@@ -659,7 +659,7 @@
     }
 
     &__diff-content {
-      font-size: var(--bf-font-size-meta);
+      font-size: var(--bf-type-meta-font-size);
     }
 
     &__line-number {
diff --git a/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.scss b/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.scss
index 04ceb49726..de6960700c 100644
--- a/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.scss
+++ b/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.scss
@@ -55,8 +55,8 @@
 
     h3 {
       margin: 0;
-      font-size: var(--bf-font-size-base);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-body-md-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
     }
   }
 
@@ -68,8 +68,8 @@
     background: var(--bf-color-accent-default);
     color: var(--bf-color-content-on-dark);
     border-radius: 4px;
-    font-size: var(--bf-font-size-xs);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-sm-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
   }
 
   &__search {
@@ -89,11 +89,11 @@
   }
 
   &__search-count {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     white-space: nowrap;
     padding: 0 8px;
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
 
     &--no-results {
       color: var(--bf-color-content-muted);
@@ -249,8 +249,8 @@
     gap: 4px;
     padding: 2px 8px;
     border-radius: 12px;
-    font-size: var(--bf-font-size-meta);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-meta-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     white-space: nowrap;
     cursor: help;
 
@@ -277,14 +277,14 @@
 
   &__commit-message {
     flex: 1;
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;
 
     .git-graph-view__commit:hover & {
-      font-weight: var(--bf-font-weight-medium);
+      font-weight: var(--bf-type-label-sm-font-weight);
     }
   }
 
@@ -292,7 +292,7 @@
     display: flex;
     align-items: center;
     gap: 12px;
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
     flex-shrink: 0;
   }
@@ -309,7 +309,7 @@
   }
 
   &__commit-hash {
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
     padding: 2px 6px;
     background: var(--bf-color-surface-tertiary);
     border-radius: 4px;
diff --git a/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.css b/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.css
index e393099720..161ac2a6f6 100644
--- a/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.css
+++ b/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.css
@@ -4,7 +4,7 @@
   height: 100%;
   background: var(--bf-color-surface-canvas);
   color: var(--bf-color-content-primary);
-  font-family:var(--bf-font-family-sans);
+  font-family:var(--bf-type-body-sm-font-family);
 }
 
 .settings-header {
@@ -24,8 +24,8 @@
 
 .header-left h3 {
   margin: 0;
-  font-size: var(--bf-font-size-2xl);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-flow-section-title-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
 }
 
@@ -71,8 +71,8 @@
   border: 1px solid var(--bf-color-status-success-content);
   border-radius: 4px;
   color: var(--bf-color-status-success-content);
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   cursor: pointer;
   transition:
     background-color 0.2s ease,
@@ -95,7 +95,7 @@
   align-items: center;
   gap: 8px;
   padding: 8px 16px;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   border-bottom: 1px solid;
 }
 
@@ -117,8 +117,8 @@
   border: none;
   color: inherit;
   cursor: pointer;
-  font-size: var(--bf-font-size-base);
-  line-height: var(--bf-line-height-none);
+  font-size: var(--bf-type-body-md-font-size);
+  line-height: var(--bf-type-modifier-leading-none-line-height);
 }
 
 .settings-tabs {
@@ -136,8 +136,8 @@
   border: none;
   border-bottom: 2px solid transparent;
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-sm);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-label-md-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   cursor: pointer;
   transition:
     background-color 0.2s ease,
@@ -177,23 +177,23 @@
 
 .settings-section h4 {
   margin: 0 0 8px;
-  font-size: var(--bf-font-size-base);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-primary);
 }
 
 .settings-section h5 {
   margin: 16px 0 8px;
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-content-secondary);
 }
 
 .section-description {
   margin: 0 0 16px;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-secondary);
-  line-height: var(--bf-line-height-ui);
+  line-height: var(--bf-type-modifier-leading-ui-line-height);
 }
 
 .form-group {
@@ -205,8 +205,8 @@
   align-items: center;
   gap: 6px;
   margin-bottom: 6px;
-  font-size: var(--bf-font-size-xs);
-  font-weight: var(--bf-font-weight-medium);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-weight: var(--bf-type-label-sm-font-weight);
   color: var(--bf-color-content-secondary);
 }
 
@@ -218,7 +218,7 @@
   border: 1px solid var(--bf-color-border-default);
   border-radius: 4px;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   transition:
     background-color 0.2s ease,
     border-color 0.2s ease,
@@ -259,9 +259,9 @@
 
 .field-description {
   margin: 4px 0 0;
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-meta-font-size);
   color: var(--bf-color-content-secondary);
-  line-height: var(--bf-line-height-snug);
+  line-height: var(--bf-type-modifier-leading-snug-line-height);
 }
 
 .form-row {
@@ -285,8 +285,8 @@
   border: 1px solid var(--bf-color-accent-default);
   border-radius: 3px;
   color: var(--bf-color-accent-default);
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-meta-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   text-transform: uppercase;
   display: inline-block;
 }
@@ -306,8 +306,8 @@
   border: 1px solid var(--bf-color-status-success-content);
   border-radius: 3px;
   color: var(--bf-color-status-success-content);
-  font-size: var(--bf-font-size-meta);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-meta-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   display: inline-block;
 }
 
@@ -337,12 +337,12 @@
 
 .error-state h3 {
   margin: 0 0 8px;
-  font-size: var(--bf-font-size-xl);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-flow-title-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
 }
 
 .error-message {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-secondary);
   margin: 4px 0 16px;
 }
@@ -353,7 +353,7 @@
   border: none;
   border-radius: 4px;
   color: var(--bf-color-content-on-dark);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   cursor: pointer;
   transition: background-color 0.2s ease;
 }
diff --git a/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.scss b/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.scss
index 1962798d33..9c98fbfd51 100644
--- a/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.scss
+++ b/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.scss
@@ -4,7 +4,7 @@
   height: 100%;
   background: var(--bf-color-surface-canvas);
   color: var(--bf-color-content-primary);
-  font-family: var(--bf-font-family-sans);
+  font-family: var(--bf-type-body-sm-font-family);
 
   &__header {
     display: flex;
@@ -22,8 +22,8 @@
 
     h3 {
       margin: 0;
-      font-size: var(--bf-font-size-lg);
-      font-weight: var(--bf-font-weight-semibold);
+      font-size: var(--bf-type-body-lg-font-size);
+      font-weight: var(--bf-type-label-selected-font-weight);
       color: var(--bf-color-content-primary);
     }
   }
@@ -39,7 +39,7 @@
     align-items: center;
     gap: var(--bf-space-2);
     padding: var(--bf-space-2) var(--bf-space-4);
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     position: relative;
 
     &--success {
@@ -62,8 +62,8 @@
     cursor: pointer;
     padding: 0 var(--bf-space-2);
     margin-left: auto;
-    font-size: var(--bf-font-size-xl);
-    line-height: var(--bf-line-height-none);
+    font-size: var(--bf-type-flow-title-font-size);
+    line-height: var(--bf-type-modifier-leading-none-line-height);
     opacity: var(--bf-opacity-muted);
     transition: opacity var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
 
@@ -105,13 +105,13 @@
     display: flex;
     align-items: center;
     gap: var(--bf-space-2);
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
   }
 
   &__form-description {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-muted);
     margin-top: -var(--bf-space-1);
   }
@@ -122,8 +122,8 @@
     border: 1px solid var(--bf-color-border-default);
     border-radius: var(--bf-radius-base);
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
-    font-family: var(--bf-font-family-mono);
+    font-size: var(--bf-type-label-md-font-size);
+    font-family: var(--bf-type-code-md-font-family);
     transition:
       background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
       border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
@@ -150,7 +150,7 @@
     border: 1px solid var(--bf-color-border-default);
     border-radius: var(--bf-radius-base);
     color: var(--bf-color-content-primary);
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     cursor: pointer;
     transition:
       background-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
@@ -183,7 +183,7 @@
 
     label {
       margin: 0;
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
       color: var(--bf-color-content-primary);
       cursor: pointer;
       user-select: none;
@@ -208,14 +208,14 @@
   }
 
   &__section-title {
-    font-size: var(--bf-font-size-base);
-    font-weight: var(--bf-font-weight-semibold);
+    font-size: var(--bf-type-body-md-font-size);
+    font-weight: var(--bf-type-label-selected-font-weight);
     color: var(--bf-color-content-primary);
     margin: 0;
   }
 
   &__section-description {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-content-secondary);
     margin-top: var(--bf-space-1);
   }
@@ -246,17 +246,17 @@
   }
 
   &__config-key {
-    font-size: var(--bf-font-size-sm);
-    font-weight: var(--bf-font-weight-medium);
+    font-size: var(--bf-type-label-md-font-size);
+    font-weight: var(--bf-type-label-sm-font-weight);
     color: var(--bf-color-content-primary);
     margin-bottom: var(--bf-space-1);
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
   }
 
   &__config-value {
-    font-size: var(--bf-font-size-xs);
+    font-size: var(--bf-type-label-sm-font-size);
     color: var(--bf-color-content-secondary);
-    font-family: var(--bf-font-family-mono);
+    font-family: var(--bf-type-code-md-font-family);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -280,14 +280,14 @@
     color: var(--bf-color-content-secondary);
 
     h3 {
-      font-size: var(--bf-font-size-lg);
-      font-weight: var(--bf-font-weight-medium);
+      font-size: var(--bf-type-body-lg-font-size);
+      font-weight: var(--bf-type-label-sm-font-weight);
       margin: var(--bf-space-4) 0 var(--bf-space-2) 0;
       color: var(--bf-color-content-primary);
     }
 
     p {
-      font-size: var(--bf-font-size-sm);
+      font-size: var(--bf-type-label-md-font-size);
       margin-bottom: var(--bf-space-4);
     }
   }
@@ -297,7 +297,7 @@
   }
 
   &__error-message {
-    font-size: var(--bf-font-size-sm);
+    font-size: var(--bf-type-label-md-font-size);
     color: var(--bf-color-status-danger-content);
     margin-bottom: var(--bf-space-4);
   }
diff --git a/src/web-ui/src/tools/terminal/components/ConnectedTerminal.tsx b/src/web-ui/src/tools/terminal/components/ConnectedTerminal.tsx
index 9459aa6ab9..d808609334 100644
--- a/src/web-ui/src/tools/terminal/components/ConnectedTerminal.tsx
+++ b/src/web-ui/src/tools/terminal/components/ConnectedTerminal.tsx
@@ -505,7 +505,7 @@ const ConnectedTerminal: React.FC<ConnectedTerminalProps> = memo(({
               title="Send Ctrl+C"
               data-testid="shell-command-rerun"
             >
-              <span style={{ fontSize: 'var(--bf-font-size-micro)', fontWeight: 'var(--bf-font-weight-bold)' }}>^C</span>
+              <span style={{ fontSize: 'var(--bf-type-micro-font-size)', fontWeight: 'var(--bf-type-heading-page-font-weight)' }}>^C</span>
             </button>
             <button
               className="bitfun-terminal__toolbar-btn bitfun-terminal__toolbar-btn--danger"
diff --git a/src/web-ui/src/tools/terminal/components/Terminal.scss b/src/web-ui/src/tools/terminal/components/Terminal.scss
index 098a1c0597..4239980e6d 100644
--- a/src/web-ui/src/tools/terminal/components/Terminal.scss
+++ b/src/web-ui/src/tools/terminal/components/Terminal.scss
@@ -57,7 +57,7 @@
     }
 
     &-text {
-      font-size: var(--bf-font-size-base);
+      font-size: var(--bf-type-body-md-font-size);
     }
   }
 
@@ -73,11 +73,11 @@
     padding: 20px;
 
     &-icon {
-      font-size: var(--bf-font-size-5xl);
+      font-size: var(--bf-type-display-sm-font-size);
     }
 
     &-message {
-      font-size: var(--bf-font-size-base);
+      font-size: var(--bf-type-body-md-font-size);
       text-align: center;
       max-width: 300px;
     }
@@ -108,7 +108,7 @@
     }
 
     &-title {
-      font-size: var(--bf-font-size-xs);
+      font-size: var(--bf-type-label-sm-font-size);
       color: var(--bf-color-content-secondary);
 
       .shell-type {
@@ -155,7 +155,7 @@
     justify-content: space-between;
     padding: 2px 8px;
     background: var(--bf-color-status-info-content);
-    font-size: var(--bf-font-size-meta);
+    font-size: var(--bf-type-meta-font-size);
     color: var(--bf-color-content-on-dark);
 
     &--error {
diff --git a/src/web-ui/src/tools/terminal/components/TerminalOutputRenderer.scss b/src/web-ui/src/tools/terminal/components/TerminalOutputRenderer.scss
index d4839dca2e..9992b2ee14 100644
--- a/src/web-ui/src/tools/terminal/components/TerminalOutputRenderer.scss
+++ b/src/web-ui/src/tools/terminal/components/TerminalOutputRenderer.scss
@@ -6,7 +6,7 @@
   color: var(--bf-color-content-secondary);
   background: transparent !important;
   box-shadow: none !important;
-  font-family:var(--bf-font-family-mono);
+  font-family:var(--bf-type-code-md-font-family);
   font-size: var(--bf-type-flow-control-font-size);
   line-height: var(--bf-type-flow-code-line-height);
   white-space: pre-wrap;
diff --git a/src/web-ui/src/tools/workspace/components/WorkspaceManager.css b/src/web-ui/src/tools/workspace/components/WorkspaceManager.css
index 60c0ec64aa..8eda58f54f 100644
--- a/src/web-ui/src/tools/workspace/components/WorkspaceManager.css
+++ b/src/web-ui/src/tools/workspace/components/WorkspaceManager.css
@@ -25,17 +25,17 @@
 
 .workspace-manager h3 {
   margin: 0 0 16px 0;
-  font-size: var(--bf-font-size-2xl);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-flow-section-title-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-accent-default);
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0 0 10px;
   color: var(--bf-color-content-primary);
-  font-size: var(--bf-font-size-base);
-  font-weight: var(--bf-font-weight-semibold);
-  line-height: var(--bf-line-height-tight);
+  font-size: var(--bf-type-body-md-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
+  line-height: var(--bf-type-label-md-line-height);
 }
 
 .workspace-card {
@@ -158,28 +158,28 @@
 }
 
 .workspace-name {
-  font-size: var(--bf-font-size-2xl);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-flow-section-title-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-accent-default);
   margin-bottom: 6px;
   word-break: break-all;
-  line-height: var(--bf-line-height-snug);
+  line-height: var(--bf-type-modifier-leading-snug-line-height);
 }
 
 .workspace-name__ssh-host {
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-sm-font-weight);
   color: color-mix(in srgb, var(--bf-color-content-on-dark) 55%, transparent);
   margin-right: 2px;
   color: var(--bf-color-content-muted);
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-sm-font-weight);
 }
 
 .workspace-path {
-  font-size: var(--bf-font-size-base);
+  font-size: var(--bf-type-body-md-font-size);
   color: color-mix(in srgb, var(--bf-color-content-on-dark) 70%, transparent);
   margin-bottom: 12px;
   word-break: break-all;
-  font-family: var(--bf-font-family-mono);
+  font-family: var(--bf-type-code-md-font-family);
   background: color-mix(in srgb, var(--bf-color-content-on-light) 20%, transparent);
   padding: 4px 8px;
   border-radius: 6px;
@@ -208,7 +208,7 @@
 
 .workspace-type {
   color: var(--bf-color-content-secondary);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   text-transform: capitalize;
 }
 
@@ -217,7 +217,7 @@
   align-items: center;
   gap: 4px;
   color: var(--bf-color-content-muted);
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
 }
 
 .workspace-identity {
@@ -231,14 +231,14 @@
 }
 
 .workspace-identity__label {
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-meta-font-size);
   text-transform: uppercase;
-  letter-spacing: var(--bf-letter-spacing-wide);
+  letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
   color: color-mix(in srgb, var(--bf-color-content-on-dark) 55%, transparent);
 }
 
 .workspace-identity__value {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-accent-default);
 }
 
@@ -250,9 +250,9 @@
 }
 
 .workspace-related-paths__label {
-  font-size: var(--bf-font-size-meta);
+  font-size: var(--bf-type-meta-font-size);
   text-transform: uppercase;
-  letter-spacing: var(--bf-letter-spacing-wide);
+  letter-spacing: var(--bf-type-modifier-tracking-wide-letter-spacing);
   color: color-mix(in srgb, var(--bf-color-content-on-dark) 55%, transparent);
 }
 
@@ -272,8 +272,8 @@
 
 .workspace-related-paths__path {
   display: block;
-  font-size: var(--bf-font-size-xs);
-  font-family: var(--bf-font-family-mono);
+  font-size: var(--bf-type-label-sm-font-size);
+  font-family: var(--bf-type-code-md-font-family);
   color: var(--bf-color-accent-default);
   word-break: break-all;
 }
@@ -281,18 +281,18 @@
 .workspace-related-paths__desc {
   display: block;
   margin-top: 4px;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: color-mix(in srgb, var(--bf-color-content-on-dark) 72%, transparent);
-  line-height: var(--bf-line-height-support);
+  line-height: var(--bf-type-flow-support-line-height);
 }
 
 .workspace-related-paths__more {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: color-mix(in srgb, var(--bf-color-content-on-dark) 62%, transparent);
 }
 
 .workspace-type {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   padding: 2px 8px;
   background-color: var(--bf-color-surface-panel);
   color: var(--bf-color-content-secondary);
@@ -304,7 +304,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: var(--bf-color-content-muted);
 }
 
@@ -352,16 +352,16 @@
 }
 
 .stat-label {
-  font-size: var(--bf-font-size-xs);
+  font-size: var(--bf-type-label-sm-font-size);
   color: color-mix(in srgb, var(--bf-color-content-on-dark) 60%, transparent);
-  font-weight: var(--bf-font-weight-medium);
+  font-weight: var(--bf-type-label-sm-font-weight);
   text-transform: uppercase;
-  letter-spacing: var(--bf-letter-spacing-wider);
+  letter-spacing: var(--bf-type-modifier-tracking-wider-letter-spacing);
 }
 
 .stat-value {
-  font-size: var(--bf-font-size-xl);
-  font-weight: var(--bf-font-weight-semibold);
+  font-size: var(--bf-type-flow-title-font-size);
+  font-weight: var(--bf-type-label-selected-font-weight);
   color: var(--bf-color-accent-default);
 }
 
@@ -395,7 +395,7 @@
 .no-workspace p,
 .no-recent p {
   margin: 0;
-  font-size: var(--bf-font-size-sm);
+  font-size: var(--bf-type-label-md-font-size);
 }
 
 .workspace-list {