From f275e9b2fef2f583867db0eb9bbf5d47f44ef46a Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Fri, 7 Aug 2026 14:18:43 +0800
Subject: [PATCH] refactor(tokens): migrate production letterspacing onto the
 named scale
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Completes the work #1663 set up. #1655 and #1658 have landed, so
`ui-primitives.tsx` and the answer surface are free to touch.

68 arbitrary `tracking-[…]` call sites across 40 production files fold onto the
five named roles. That is every statically resolvable site the contract can see;
the ratchet now reports `arbitrary tracking 0`, down from 68.

Fold applied, as committed in globals.css:

  -0.008 / -0.01 / -0.035 / -0.04  -> tracking-display   (6 sites)
  0.01 / 0.02                      -> tracking-normal    (2)
  0.04 / 0.05 / 0.06               -> tracking-label     (47)
  0.08 / 0.09                      -> tracking-eyebrow   (8)
  0.1 / 0.11 / 0.12                -> tracking-kicker    (7)

Largest single move is 0.04em; almost all are 0.01-0.02em.

Baseline tightened from 68 to 0 with the per-path map cleared, so the family
cannot regrow at all rather than regrowing up to the old ceiling. Every other
metric in the baseline was left untouched by construction — the edit sets only
`arbitraryTracking`.

`*-mockups.tsx` and `*-mockups/` directories are deliberately untouched: design
scratch, gate-exempt, and migrating them would triple the diff for no
enforcement gain. `tracking-[var(--quantity-unit-tracking)]` is the sanctioned
token form and stays.

Verification: check:design-system-contract exit 0 (`arbitrary tracking 0`) ·
typecheck 0 · lint 0 · full unit suite 5 473 passed, 14 skipped.

Three test files fail, none caused by this diff:
- tests/installed-lock-parity.test.ts — playwright 1.62.0 vs locked 1.62.1,
  environmental, issue #149.
- tests/pr-handoff-stop.test.ts and tests/mode-nav-addon-slot.dom.test.tsx —
  both arrived on main after this session's earlier clean full run, from #1649
  and #1647. They fail for Windows-environment reasons: simulated `jq` absence,
  and an assertion comparing repo-relative POSIX paths against absolute Windows
  paths. The mode-nav assertion compares path FORMAT over an identical two-file
  set, so it is content-independent and a class rename cannot produce it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 scripts/design-system-contract-baseline.json  | 45 +------------------
 src/app/reference/colour-coding/page.tsx      |  4 +-
 src/components/AccessibleTable.tsx            |  4 +-
 src/components/ClinicalDashboard.tsx          |  2 +-
 src/components/calculators/bedside-sheet.tsx  |  2 +-
 .../calculators/clinical-console.tsx          |  2 +-
 src/components/calculators/directory-grid.tsx |  6 +--
 src/components/calculators/guided-flow.tsx    |  8 ++--
 src/components/calculators/search-detail.tsx  |  8 ++--
 src/components/calculators/search-page.tsx    |  2 +-
 .../account-setup-dialog.tsx                  |  2 +-
 .../clinical-dashboard/cross-mode-links.tsx   |  2 +-
 .../clinical-dashboard/differentials-home.tsx |  8 ++--
 .../clinical-dashboard/document-results.tsx   |  2 +-
 .../document-search-results.tsx               |  4 +-
 .../clinical-dashboard/evidence-panels.tsx    |  2 +-
 .../favourites-command-library-page.tsx       |  2 +-
 .../library-health-strip.tsx                  |  2 +-
 .../medication-prescribing-workspace.tsx      |  2 +-
 .../clinical-dashboard/output-panel.tsx       |  4 +-
 .../clinical-dashboard/search-pins-menu.tsx   |  2 +-
 .../clinical-dashboard/settings-dialog.tsx    |  2 +-
 .../universal-search-command-surface.tsx      |  2 +-
 .../differential-detail-page.tsx              |  2 +-
 ...ifferential-presentation-workflow-page.tsx |  2 +-
 .../document-clinical-summary.tsx             |  6 +--
 .../document-overview-landing.tsx             |  2 +-
 .../document-viewer/section-nav.tsx           |  4 +-
 .../document-viewer/source-panels.tsx         | 10 ++---
 src/components/dsm/dsm-comparison-page.tsx    |  2 +-
 .../factsheets/factsheet-detail-page.tsx      | 16 +++----
 .../factsheets/factsheets-search-page.tsx     |  4 +-
 src/components/mode-nav/mode-nav.tsx          |  2 +-
 src/components/patient-safety-plan.tsx        |  4 +-
 src/components/pwa-lifecycle.tsx              |  2 +-
 .../services/services-navigator-page.tsx      |  4 +-
 src/components/specifiers/specifier-ui.tsx    |  2 +-
 .../screens/recommend-screen.tsx              |  2 +-
 .../therapy-compass/screens/sheets-screen.tsx |  2 +-
 .../therapy-compass/therapy-card.tsx          |  2 +-
 src/components/ui-primitives.tsx              |  3 +-
 41 files changed, 70 insertions(+), 120 deletions(-)

diff --git a/scripts/design-system-contract-baseline.json b/scripts/design-system-contract-baseline.json
index e95303ff02..c94e56b7f3 100644
--- a/scripts/design-system-contract-baseline.json
+++ b/scripts/design-system-contract-baseline.json
@@ -10,7 +10,7 @@
     "legacyPaletteUtilities": 2,
     "darkColorOverrides": 3,
     "legacyShadowAliases": 231,
-    "arbitraryTracking": 68,
+    "arbitraryTracking": 0,
     "layoutTransitionExceptions": 12,
     "textSoftConsumers": 0
   },
@@ -148,48 +148,7 @@
       "src/components/ui/tooltip.tsx": 1,
       "src/components/ui-primitives.tsx": 6
     },
-    "arbitraryTracking": {
-      "src/app/reference/colour-coding/page.tsx": 1,
-      "src/components/AccessibleTable.tsx": 2,
-      "src/components/calculators/bedside-sheet.tsx": 1,
-      "src/components/calculators/clinical-console.tsx": 1,
-      "src/components/calculators/directory-grid.tsx": 3,
-      "src/components/calculators/guided-flow.tsx": 4,
-      "src/components/calculators/search-detail.tsx": 4,
-      "src/components/calculators/search-page.tsx": 1,
-      "src/components/clinical-dashboard/account-setup-dialog.tsx": 1,
-      "src/components/clinical-dashboard/cross-mode-links.tsx": 1,
-      "src/components/clinical-dashboard/differentials-home.tsx": 3,
-      "src/components/clinical-dashboard/document-results.tsx": 1,
-      "src/components/clinical-dashboard/document-search-results.tsx": 2,
-      "src/components/clinical-dashboard/evidence-panels.tsx": 1,
-      "src/components/clinical-dashboard/favourites-command-library-page.tsx": 1,
-      "src/components/clinical-dashboard/library-health-strip.tsx": 1,
-      "src/components/clinical-dashboard/medication-prescribing-workspace.tsx": 1,
-      "src/components/clinical-dashboard/output-panel.tsx": 2,
-      "src/components/clinical-dashboard/search-pins-menu.tsx": 1,
-      "src/components/clinical-dashboard/settings-dialog.tsx": 1,
-      "src/components/clinical-dashboard/universal-search-command-surface.tsx": 1,
-      "src/components/ClinicalDashboard.tsx": 1,
-      "src/components/differentials/differential-detail-page.tsx": 1,
-      "src/components/differentials/differential-presentation-workflow-page.tsx": 1,
-      "src/components/document-viewer/document-clinical-summary.tsx": 3,
-      "src/components/document-viewer/document-overview-landing.tsx": 1,
-      "src/components/document-viewer/section-nav.tsx": 2,
-      "src/components/document-viewer/source-panels.tsx": 5,
-      "src/components/dsm/dsm-comparison-page.tsx": 1,
-      "src/components/factsheets/factsheet-detail-page.tsx": 6,
-      "src/components/factsheets/factsheets-search-page.tsx": 2,
-      "src/components/mode-nav/mode-nav.tsx": 1,
-      "src/components/patient-safety-plan.tsx": 2,
-      "src/components/pwa-lifecycle.tsx": 1,
-      "src/components/services/services-navigator-page.tsx": 2,
-      "src/components/specifiers/specifier-ui.tsx": 1,
-      "src/components/therapy-compass/screens/recommend-screen.tsx": 1,
-      "src/components/therapy-compass/screens/sheets-screen.tsx": 1,
-      "src/components/therapy-compass/therapy-card.tsx": 1,
-      "src/components/ui-primitives.tsx": 1
-    },
+    "arbitraryTracking": {},
     "layoutTransitionExceptions": {
       "src/app/globals.css": 4,
       "src/components/calculators/guided-flow.tsx": 1,
diff --git a/src/app/reference/colour-coding/page.tsx b/src/app/reference/colour-coding/page.tsx
index 306d8b6a08..c218be7e2e 100644
--- a/src/app/reference/colour-coding/page.tsx
+++ b/src/app/reference/colour-coding/page.tsx
@@ -63,9 +63,7 @@ export default function ColourCodingReferencePage() {
           </header>
 
           <section className={cn(raisedCard, "p-4 sm:p-5")}>
-            <h2 className="text-sm font-semibold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
-              Tone key
-            </h2>
+            <h2 className="text-sm font-semibold uppercase tracking-label text-[color:var(--text-muted)]">Tone key</h2>
             <dl className="mt-3 grid gap-3 sm:grid-cols-2">
               {SEMANTIC_TONES.map((tone) => (
                 <div
diff --git a/src/components/AccessibleTable.tsx b/src/components/AccessibleTable.tsx
index 451765f9c1..f0af910df5 100644
--- a/src/components/AccessibleTable.tsx
+++ b/src/components/AccessibleTable.tsx
@@ -233,7 +233,7 @@ function AccessibleTableMarkup({
                     // column reads as one block rather than a split label/value pair.
                     alignEnd?.[index] && "text-right",
                     renderDensePreview
-                      ? "px-2 py-1.5 text-2xs uppercase tracking-[0.06em]"
+                      ? "px-2 py-1.5 text-2xs uppercase tracking-label"
                       : expanded
                         ? "px-4 py-3 text-sm"
                         : "px-3 py-2 text-xs",
@@ -252,7 +252,7 @@ function AccessibleTableMarkup({
                       ? "overflow-hidden text-ellipsis whitespace-nowrap"
                       : "whitespace-normal break-words",
                     renderDensePreview
-                      ? "px-2 py-1.5 text-2xs uppercase tracking-[0.06em]"
+                      ? "px-2 py-1.5 text-2xs uppercase tracking-label"
                       : expanded
                         ? "px-4 py-3 text-sm"
                         : "px-3 py-2 text-xs",
diff --git a/src/components/ClinicalDashboard.tsx b/src/components/ClinicalDashboard.tsx
index b3791c5810..c9da15b14b 100644
--- a/src/components/ClinicalDashboard.tsx
+++ b/src/components/ClinicalDashboard.tsx
@@ -3834,7 +3834,7 @@ export function ClinicalDashboard({
               )}
               {(settingsState.documentsDrawerOpen || settingsState.uploadDrawerOpen) && (
                 <section id="sources" className="mx-auto grid w-full max-w-4xl gap-3 scroll-mt-4 sm:scroll-mt-6">
-                  <p className="px-1 pt-1 text-2xs font-bold uppercase tracking-[0.1em] text-[color:var(--text-muted)]">
+                  <p className="px-1 pt-1 text-2xs font-bold uppercase tracking-kicker text-[color:var(--text-muted)]">
                     {drawerGroupTitle}
                   </p>
                   {settingsState.documentsDrawerOpen ? (
diff --git a/src/components/calculators/bedside-sheet.tsx b/src/components/calculators/bedside-sheet.tsx
index f171d21139..9b388b964f 100644
--- a/src/components/calculators/bedside-sheet.tsx
+++ b/src/components/calculators/bedside-sheet.tsx
@@ -67,7 +67,7 @@ function SheetSection({
         <span className="min-w-0">
           <span className="flex flex-wrap items-baseline gap-x-2">
             <span className="text-base font-extrabold leading-6 text-[color:var(--text-heading)]">{calc.abbrev}</span>
-            <span className="hidden text-2xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)] sm:inline">
+            <span className="hidden text-2xs font-bold uppercase tracking-label text-[color:var(--text-muted)] sm:inline">
               {domainLabels[calc.domain]}
             </span>
           </span>
diff --git a/src/components/calculators/clinical-console.tsx b/src/components/calculators/clinical-console.tsx
index 6646da0a00..57a84de8b1 100644
--- a/src/components/calculators/clinical-console.tsx
+++ b/src/components/calculators/clinical-console.tsx
@@ -158,7 +158,7 @@ export function CalculatorsClinicalConsoleMockup() {
               const DomainIcon = domainIcons[domain];
               return (
                 <section key={domain} className="grid gap-1">
-                  <h2 className="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 px-3 text-2xs font-semibold uppercase leading-4 tracking-[0.06em] text-[color:var(--text-muted)]">
+                  <h2 className="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 px-3 text-2xs font-semibold uppercase leading-4 tracking-label text-[color:var(--text-muted)]">
                     <DomainIcon className="size-icon-xs text-[color:var(--decoration-soft)]" aria-hidden="true" />
                     {domainLabels[domain]}
                   </h2>
diff --git a/src/components/calculators/directory-grid.tsx b/src/components/calculators/directory-grid.tsx
index 662366f6b0..147ea8da9d 100644
--- a/src/components/calculators/directory-grid.tsx
+++ b/src/components/calculators/directory-grid.tsx
@@ -48,7 +48,7 @@ function ExpandedCalculator({
       <aside className="grid h-fit content-start gap-3 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-raised)] p-4 shadow-[var(--shadow-inset)] lg:sticky lg:top-4">
         <div className="flex items-end justify-between gap-2">
           <div>
-            <p className="text-2xs font-semibold uppercase leading-4 tracking-[0.06em] text-[color:var(--text-muted)]">
+            <p className="text-2xs font-semibold uppercase leading-4 tracking-label text-[color:var(--text-muted)]">
               Score
             </p>
             <p className="font-mono text-2xl font-extrabold tabular-nums leading-8 text-[color:var(--text-heading)]">
@@ -132,7 +132,7 @@ function CalculatorCard({
         <span className="min-w-0">
           <span className="flex flex-wrap items-center gap-2">
             <span className="text-base font-extrabold leading-6 text-[color:var(--text-heading)]">{calc.abbrev}</span>
-            <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface-subtle)] px-1.5 text-3xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+            <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface-subtle)] px-1.5 text-3xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
               {domainLabels[calc.domain]}
             </span>
           </span>
@@ -288,7 +288,7 @@ export function CalculatorsDirectoryGridMockup() {
                   <span className="min-w-0">
                     <span className="flex items-center gap-2">
                       <span className="text-sm font-extrabold text-[color:var(--text-heading)]">{planned.abbrev}</span>
-                      <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface)] px-1.5 text-3xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+                      <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface)] px-1.5 text-3xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
                         Planned
                       </span>
                     </span>
diff --git a/src/components/calculators/guided-flow.tsx b/src/components/calculators/guided-flow.tsx
index 6f6aa3b335..5800338c36 100644
--- a/src/components/calculators/guided-flow.tsx
+++ b/src/components/calculators/guided-flow.tsx
@@ -48,7 +48,7 @@ function PickerScreen({ onPick }: { onPick: (id: string) => void }) {
                   <span className="text-base font-extrabold leading-6 text-[color:var(--text-heading)]">
                     {calc.abbrev}
                   </span>
-                  <span className="text-2xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+                  <span className="text-2xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
                     {domainLabels[calc.domain]}
                   </span>
                 </span>
@@ -137,7 +137,7 @@ function QuestionScreen({
 
       <div className="grid gap-4 rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] p-4 shadow-[var(--shadow-soft)] sm:p-5">
         {calc.stem ? (
-          <p className="text-2xs font-semibold uppercase leading-4 tracking-[0.06em] text-[color:var(--text-muted)]">
+          <p className="text-2xs font-semibold uppercase leading-4 tracking-label text-[color:var(--text-muted)]">
             {calc.stem}
           </p>
         ) : null}
@@ -251,7 +251,7 @@ function ResultScreen({
   return (
     <div className="mx-auto grid w-full max-w-lg content-start gap-4">
       <div className="grid gap-4 rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] p-5 text-center shadow-[var(--shadow-soft)]">
-        <p className="text-2xs font-semibold uppercase leading-4 tracking-[0.06em] text-[color:var(--text-muted)]">
+        <p className="text-2xs font-semibold uppercase leading-4 tracking-label text-[color:var(--text-muted)]">
           {calc.abbrev} result
         </p>
         <p className="font-mono text-3xl-minus font-extrabold tabular-nums leading-9 text-[color:var(--text-heading)]">
@@ -272,7 +272,7 @@ function ResultScreen({
           <BandLegend calc={calc} activeBand={derived.band} />
         </div>
         <div className="grid gap-1.5 border-t border-[color:var(--border)] pt-3 text-left">
-          <p className="text-2xs font-semibold uppercase leading-4 tracking-[0.06em] text-[color:var(--text-muted)]">
+          <p className="text-2xs font-semibold uppercase leading-4 tracking-label text-[color:var(--text-muted)]">
             Answer review
           </p>
           <ul className="grid gap-1">
diff --git a/src/components/calculators/search-detail.tsx b/src/components/calculators/search-detail.tsx
index c0e93a4bd0..dad968edb7 100644
--- a/src/components/calculators/search-detail.tsx
+++ b/src/components/calculators/search-detail.tsx
@@ -113,7 +113,7 @@ function CalculatorResultCard({
         <span className="min-w-0">
           <span className="flex flex-wrap items-center gap-2">
             <span className="text-base font-extrabold leading-6 text-[color:var(--text-heading)]">{calc.abbrev}</span>
-            <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface-subtle)] px-1.5 text-3xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+            <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface-subtle)] px-1.5 text-3xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
               {domainLabels[calc.domain]}
             </span>
           </span>
@@ -382,7 +382,7 @@ export function NextActionsPanel({ calc, derived }: { calc: CalculatorFixture; d
     >
       <div className="flex items-center justify-between gap-2">
         <h2 className={cn(eyebrowText, "text-[color:var(--text-muted)]")}>Next clinical actions</h2>
-        <span className="inline-flex min-h-5 items-center gap-1 rounded-md border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-1.5 text-3xs font-bold uppercase tracking-[0.06em] text-[color:var(--clinical-accent)]">
+        <span className="inline-flex min-h-5 items-center gap-1 rounded-md border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-1.5 text-3xs font-bold uppercase tracking-label text-[color:var(--clinical-accent)]">
           <Sparkles className="size-icon-xs" aria-hidden="true" />
           Score-linked
         </span>
@@ -460,7 +460,7 @@ export function RelatedContentPanel({
     <>
       <span
         className={cn(
-          "inline-flex min-h-5 w-[4.75rem] items-center justify-center rounded-md border px-1.5 text-3xs font-bold uppercase tracking-[0.05em]",
+          "inline-flex min-h-5 w-[4.75rem] items-center justify-center rounded-md border px-1.5 text-3xs font-bold uppercase tracking-label",
           relatedKindChip[item.kind],
         )}
       >
@@ -567,7 +567,7 @@ export function CalculatorDetailHeader({ calc }: { calc: CalculatorFixture }) {
         <div className="min-w-0">
           <div className="flex flex-wrap items-center gap-2">
             <h1 className="text-2xl-minus font-extrabold leading-7 text-[color:var(--text-heading)]">{calc.abbrev}</h1>
-            <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface-subtle)] px-1.5 text-3xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+            <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface-subtle)] px-1.5 text-3xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
               {domainLabels[calc.domain]}
             </span>
           </div>
diff --git a/src/components/calculators/search-page.tsx b/src/components/calculators/search-page.tsx
index 4c2a1a767a..b951f9b2a6 100644
--- a/src/components/calculators/search-page.tsx
+++ b/src/components/calculators/search-page.tsx
@@ -214,7 +214,7 @@ function CalculatorTile({
       <span className="min-w-0">
         <span className="flex flex-wrap items-center gap-x-2 gap-y-1">
           <span className="text-base font-extrabold leading-6 text-[color:var(--text-heading)]">{calc.abbrev}</span>
-          <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface-subtle)] px-1.5 text-3xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+          <span className="inline-flex min-h-5 items-center rounded-md bg-[color:var(--surface-subtle)] px-1.5 text-3xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
             {domainLabels[calc.domain]}
           </span>
           {derived.started ? (
diff --git a/src/components/clinical-dashboard/account-setup-dialog.tsx b/src/components/clinical-dashboard/account-setup-dialog.tsx
index 6bdebb5f58..9699cfe603 100644
--- a/src/components/clinical-dashboard/account-setup-dialog.tsx
+++ b/src/components/clinical-dashboard/account-setup-dialog.tsx
@@ -202,7 +202,7 @@ export function AccountSetupDialog({
             >
               <h3
                 id="account-benefits-title"
-                className="mb-2.5 px-0.5 text-xs font-semibold uppercase leading-4 tracking-[0.06em] text-[color:var(--text-muted)]"
+                className="mb-2.5 px-0.5 text-xs font-semibold uppercase leading-4 tracking-label text-[color:var(--text-muted)]"
               >
                 {benefitsHeading}
               </h3>
diff --git a/src/components/clinical-dashboard/cross-mode-links.tsx b/src/components/clinical-dashboard/cross-mode-links.tsx
index de5caa793a..4f3d050890 100644
--- a/src/components/clinical-dashboard/cross-mode-links.tsx
+++ b/src/components/clinical-dashboard/cross-mode-links.tsx
@@ -100,7 +100,7 @@ function CrossModeLinkChip({ link, Icon, query, onModeSearch }: CrossModeLinkCar
         <span className="max-w-[13rem] truncate text-xs font-semibold text-[color:var(--text-heading)]">
           {link.title}
         </span>
-        <span className="shrink-0 text-2xs font-semibold uppercase tracking-[0.04em] text-[color:var(--text-muted)]">
+        <span className="shrink-0 text-2xs font-semibold uppercase tracking-label text-[color:var(--text-muted)]">
           {link.modeLabel}
         </span>
       </Link>
diff --git a/src/components/clinical-dashboard/differentials-home.tsx b/src/components/clinical-dashboard/differentials-home.tsx
index 596893f4a5..67ba23ada5 100644
--- a/src/components/clinical-dashboard/differentials-home.tsx
+++ b/src/components/clinical-dashboard/differentials-home.tsx
@@ -614,9 +614,7 @@ function SafetyCard({ safety, query }: { safety: string; query: string }) {
           <ShieldAlert className="h-4 w-4" aria-hidden />
         </span>
         <div className="min-w-0">
-          <h2 className="text-sm font-extrabold uppercase tracking-[0.05em] text-[color:var(--danger)]">
-            Safety first
-          </h2>
+          <h2 className="text-sm font-extrabold uppercase tracking-label text-[color:var(--danger)]">Safety first</h2>
           <p className="mt-2 text-sm font-semibold leading-6 text-[color:var(--text-heading)]">{safety}</p>
           <Link
             href={differentialRouteWithQuery("/differentials/presentations", query)}
@@ -771,7 +769,7 @@ function InterpretationRail({
 
   return (
     <aside className="hidden min-w-0 gap-3 lg:grid" aria-label="Differential interpretation">
-      <h2 className="flex items-center gap-2 text-sm font-extrabold uppercase tracking-[0.1em] text-[color:var(--text-muted)]">
+      <h2 className="flex items-center gap-2 text-sm font-extrabold uppercase tracking-kicker text-[color:var(--text-muted)]">
         Interpretation
         <Info className="h-4 w-4" aria-hidden />
       </h2>
@@ -1062,7 +1060,7 @@ function SearchResultsView({
                         : "Run source search to validate against indexed local documents."}
                   </span>
                 </div>
-                <h2 className="mt-3 text-base font-extrabold uppercase tracking-[0.09em] text-[color:var(--text-heading)]">
+                <h2 className="mt-3 text-base font-extrabold uppercase tracking-eyebrow text-[color:var(--text-heading)]">
                   Catalogue matches <span className="text-[color:var(--text-muted)]">(ranked)</span>
                 </h2>
               </div>
diff --git a/src/components/clinical-dashboard/document-results.tsx b/src/components/clinical-dashboard/document-results.tsx
index e8b734b630..13d76ce474 100644
--- a/src/components/clinical-dashboard/document-results.tsx
+++ b/src/components/clinical-dashboard/document-results.tsx
@@ -56,7 +56,7 @@ function RelatedDocumentCard({
       <div className="flex items-start gap-2.5">
         <DocumentFileTile kind={documentFileKind(document.file_name)} compact />
         <div className="min-w-0 flex-1">
-          <p className={cn("truncate text-2xs font-bold uppercase tracking-[0.06em]", textMuted)}>
+          <p className={cn("truncate text-2xs font-bold uppercase tracking-label", textMuted)}>
             {document.match_reason}
           </p>
           <Link
diff --git a/src/components/clinical-dashboard/document-search-results.tsx b/src/components/clinical-dashboard/document-search-results.tsx
index 60d5a3f8c9..8fe17b6e23 100644
--- a/src/components/clinical-dashboard/document-search-results.tsx
+++ b/src/components/clinical-dashboard/document-search-results.tsx
@@ -1206,7 +1206,7 @@ function SearchRecordResults({
             >
               <div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start">
                 <div className="min-w-0">
-                  <p className="text-2xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+                  <p className="text-2xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
                     {service.catalogueLabel ?? "Source-backed record"}
                   </p>
                   <Link
@@ -1249,7 +1249,7 @@ function SearchRecordResults({
                       key={card.id}
                       className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-subtle)] p-2.5"
                     >
-                      <dt className="text-2xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+                      <dt className="text-2xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
                         {card.label ?? card.id}
                       </dt>
                       <dd className="mt-1 text-sm font-semibold leading-5 text-[color:var(--text-heading)]">
diff --git a/src/components/clinical-dashboard/evidence-panels.tsx b/src/components/clinical-dashboard/evidence-panels.tsx
index 4e811d01bb..b87fd90070 100644
--- a/src/components/clinical-dashboard/evidence-panels.tsx
+++ b/src/components/clinical-dashboard/evidence-panels.tsx
@@ -874,7 +874,7 @@ export function ClinicalNotesChecklistPanel({
         >
           <CircleAlert aria-hidden="true" className="h-5 w-5" />
           <span className="min-w-0">
-            <span className="block text-xs font-bold uppercase tracking-[0.06em]">Safety preview ({warningCount})</span>
+            <span className="block text-xs font-bold uppercase tracking-label">Safety preview ({warningCount})</span>
             <span className="block truncate text-xs font-semibold">Review toxicity symptoms</span>
           </span>
           <span className={cn(subtleStatusPill, "nums min-h-7 px-2 text-xs")}>S1</span>
diff --git a/src/components/clinical-dashboard/favourites-command-library-page.tsx b/src/components/clinical-dashboard/favourites-command-library-page.tsx
index 7c7cdfc059..f9559e2991 100644
--- a/src/components/clinical-dashboard/favourites-command-library-page.tsx
+++ b/src/components/clinical-dashboard/favourites-command-library-page.tsx
@@ -643,7 +643,7 @@ function FavouritesTable({
   return (
     <section className="min-w-0 max-w-full overflow-hidden rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] shadow-[var(--shadow-soft)]">
       <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[color:var(--border)] bg-[color:var(--surface-wash)] px-3.5 py-2.5">
-        <p className="inline-flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+        <p className="inline-flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-label text-[color:var(--text-muted)]">
           <Heart className="h-3.5 w-3.5 text-[color:var(--clinical-accent)]" aria-hidden />
           <span className="nums font-bold text-[color:var(--text-heading)]">{tableRows.length}</span>
           {tableRows.length === 1 ? "item" : "items"}
diff --git a/src/components/clinical-dashboard/library-health-strip.tsx b/src/components/clinical-dashboard/library-health-strip.tsx
index 82082e9982..ed85103968 100644
--- a/src/components/clinical-dashboard/library-health-strip.tsx
+++ b/src/components/clinical-dashboard/library-health-strip.tsx
@@ -87,7 +87,7 @@ export function LibraryHealthStrip({
             aria-busy={loading || undefined}
             style={{ containIntrinsicSize: "auto 48px", contentVisibility: "auto" }}
           >
-            <p className="text-2xs font-bold uppercase tracking-[0.06em]">{item.label}</p>
+            <p className="text-2xs font-bold uppercase tracking-label">{item.label}</p>
             {loading ? (
               <div
                 className="mt-1 h-4 w-16 animate-skeleton-shimmer rounded bg-[color:var(--surface-inset)]"
diff --git a/src/components/clinical-dashboard/medication-prescribing-workspace.tsx b/src/components/clinical-dashboard/medication-prescribing-workspace.tsx
index f4060e56f9..9a2e5a9519 100644
--- a/src/components/clinical-dashboard/medication-prescribing-workspace.tsx
+++ b/src/components/clinical-dashboard/medication-prescribing-workspace.tsx
@@ -379,7 +379,7 @@ function HighlightedName({ text, term }: { text: string; term: string }) {
 function DoseCeiling({ value }: { value: string }) {
   return (
     <span className="inline-flex min-h-6 w-fit items-center gap-1.5 text-2xs font-semibold text-[color:var(--text-muted)]">
-      <span className="rounded border border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-1.5 py-0.5 text-2xs uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+      <span className="rounded border border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-1.5 py-0.5 text-2xs uppercase tracking-label text-[color:var(--text-muted)]">
         Ceiling
       </span>
       <span className="nums break-words text-[color:var(--text-heading)] md:whitespace-nowrap">{value}</span>
diff --git a/src/components/clinical-dashboard/output-panel.tsx b/src/components/clinical-dashboard/output-panel.tsx
index 867f4eaab0..4c43cf7fd0 100644
--- a/src/components/clinical-dashboard/output-panel.tsx
+++ b/src/components/clinical-dashboard/output-panel.tsx
@@ -110,7 +110,7 @@ export function ClinicalOutputPanel({
                 "min-h-12 min-w-0 justify-between gap-2 rounded-lg px-3 py-2 text-left sm:min-h-9",
               )}
             >
-              <span className="min-w-0 truncate text-2xs uppercase tracking-[0.06em]">{item.label}</span>
+              <span className="min-w-0 truncate text-2xs uppercase tracking-label">{item.label}</span>
               <span className="shrink-0 text-sm font-bold text-[color:var(--text-heading)]">{item.value}</span>
             </span>
           ))}
@@ -170,7 +170,7 @@ export function ClinicalOutputPanel({
                       <Icon className="h-4 w-4" />
                     </span>
                     <div className="min-w-0">
-                      <p className="truncate text-2xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+                      <p className="truncate text-2xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">
                         {meta.eyebrow}
                       </p>
                       <h3 className="truncate text-sm font-semibold text-[color:var(--text-heading)]">
diff --git a/src/components/clinical-dashboard/search-pins-menu.tsx b/src/components/clinical-dashboard/search-pins-menu.tsx
index f1e286219a..34c3812fad 100644
--- a/src/components/clinical-dashboard/search-pins-menu.tsx
+++ b/src/components/clinical-dashboard/search-pins-menu.tsx
@@ -97,7 +97,7 @@ function PinIcons({ pin }: { pin: SearchPin }) {
 function SectionHeading({ children, action }: { children: string; action?: ReactNode }) {
   return (
     <div className="mb-1 flex min-h-10 items-center justify-between gap-2 px-2">
-      <h3 className="text-2xs font-extrabold uppercase tracking-[0.11em] text-[color:var(--text-muted)]">{children}</h3>
+      <h3 className="text-2xs font-extrabold uppercase tracking-kicker text-[color:var(--text-muted)]">{children}</h3>
       {action}
     </div>
   );
diff --git a/src/components/clinical-dashboard/settings-dialog.tsx b/src/components/clinical-dashboard/settings-dialog.tsx
index b469684d23..77af0d1ff5 100644
--- a/src/components/clinical-dashboard/settings-dialog.tsx
+++ b/src/components/clinical-dashboard/settings-dialog.tsx
@@ -583,7 +583,7 @@ export function SettingsDialog({
                 <h2
                   id="account-settings-title"
                   aria-label="Account & app"
-                  className="truncate text-xl font-semibold leading-tight tracking-[-0.01em] text-[color:var(--text-heading)] lg:text-2xl lg:leading-8"
+                  className="truncate text-xl font-semibold leading-tight tracking-display text-[color:var(--text-heading)] lg:text-2xl lg:leading-8"
                 >
                   <span className="lg:hidden">Settings</span>
                   <span className="hidden lg:inline">Account &amp; app</span>
diff --git a/src/components/clinical-dashboard/universal-search-command-surface.tsx b/src/components/clinical-dashboard/universal-search-command-surface.tsx
index d3f8e2ff5d..4b62c4cca9 100644
--- a/src/components/clinical-dashboard/universal-search-command-surface.tsx
+++ b/src/components/clinical-dashboard/universal-search-command-surface.tsx
@@ -268,7 +268,7 @@ function CommandDropdown({
               {section.heading ? (
                 <div
                   role="presentation"
-                  className="px-2.5 pb-1 pt-2 text-2xs font-extrabold uppercase tracking-[0.06em] text-[color:var(--text-muted)]"
+                  className="px-2.5 pb-1 pt-2 text-2xs font-extrabold uppercase tracking-label text-[color:var(--text-muted)]"
                 >
                   {section.heading}
                 </div>
diff --git a/src/components/differentials/differential-detail-page.tsx b/src/components/differentials/differential-detail-page.tsx
index e3b21a93b1..6c123e10c1 100644
--- a/src/components/differentials/differential-detail-page.tsx
+++ b/src/components/differentials/differential-detail-page.tsx
@@ -384,7 +384,7 @@ function SafetySnapshot({
         </span>
         <div className="min-w-0 flex-1">
           <div className="flex flex-wrap items-center gap-2">
-            <h2 className={cn("text-sm font-extrabold uppercase tracking-[0.04em]", theme.heading)}>Safety snapshot</h2>
+            <h2 className={cn("text-sm font-extrabold uppercase tracking-label", theme.heading)}>Safety snapshot</h2>
             <span
               className={cn(
                 "inline-flex min-h-6 items-center rounded-md border px-2 text-2xs font-extrabold uppercase",
diff --git a/src/components/differentials/differential-presentation-workflow-page.tsx b/src/components/differentials/differential-presentation-workflow-page.tsx
index 840fba3c9a..1765dd7af1 100644
--- a/src/components/differentials/differential-presentation-workflow-page.tsx
+++ b/src/components/differentials/differential-presentation-workflow-page.tsx
@@ -733,7 +733,7 @@ export function DifferentialPresentationWorkflowPage({
                 </div>
                 <span
                   id="density-controls-unavailable"
-                  className="px-1 text-2xs font-bold uppercase tracking-[0.08em] text-[color:var(--text-muted)]"
+                  className="px-1 text-2xs font-bold uppercase tracking-eyebrow text-[color:var(--text-muted)]"
                 >
                   Density controls coming soon
                 </span>
diff --git a/src/components/document-viewer/document-clinical-summary.tsx b/src/components/document-viewer/document-clinical-summary.tsx
index 136cb869b3..99bee1d113 100644
--- a/src/components/document-viewer/document-clinical-summary.tsx
+++ b/src/components/document-viewer/document-clinical-summary.tsx
@@ -287,7 +287,7 @@ function PriorityContent({
             <h3 className="text-xs font-bold text-[color:var(--text-heading)]">{priority.title}</h3>
             <span
               className={cn(
-                "inline-flex min-h-6 items-center rounded-md px-2 text-3xs font-bold uppercase tracking-[0.05em]",
+                "inline-flex min-h-6 items-center rounded-md px-2 text-3xs font-bold uppercase tracking-label",
                 tone.labelClassName,
               )}
             >
@@ -321,7 +321,7 @@ function PriorityContent({
           <h3 className="text-sm font-bold text-[color:var(--text-heading)]">{priority.title}</h3>
           <span
             className={cn(
-              "inline-flex min-h-6 items-center rounded-md px-2 text-3xs font-bold uppercase tracking-[0.05em]",
+              "inline-flex min-h-6 items-center rounded-md px-2 text-3xs font-bold uppercase tracking-label",
               tone.labelClassName,
             )}
           >
@@ -383,7 +383,7 @@ export function DocumentClinicalSummary({
               <span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-[color:var(--clinical-accent)] text-[color:var(--clinical-accent-contrast)] shadow-[var(--shadow-tight)]">
                 <Sparkles aria-hidden="true" className="h-4 w-4" strokeWidth={2} />
               </span>
-              <h2 className="text-sm font-bold tracking-[-0.01em] text-[color:var(--text-heading)] sm:text-base">
+              <h2 className="text-sm font-bold tracking-display text-[color:var(--text-heading)] sm:text-base">
                 High-yield clinical summary
               </h2>
             </div>
diff --git a/src/components/document-viewer/document-overview-landing.tsx b/src/components/document-viewer/document-overview-landing.tsx
index 0b8ca00292..c7fe235234 100644
--- a/src/components/document-viewer/document-overview-landing.tsx
+++ b/src/components/document-viewer/document-overview-landing.tsx
@@ -77,7 +77,7 @@ export function DocumentOverviewLanding({
             className="h-20 w-20 rounded-xl text-sm sm:h-24 sm:w-24"
           />
           <div className="min-w-0">
-            <p className="text-xs font-semibold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+            <p className="text-xs font-semibold uppercase tracking-label text-[color:var(--text-muted)]">
               {documentTypeEyebrow(document)}
             </p>
             <h2 className="line-clamp-2 text-xl font-semibold leading-7 text-[color:var(--text-heading)]">
diff --git a/src/components/document-viewer/section-nav.tsx b/src/components/document-viewer/section-nav.tsx
index 34cb281f9a..54cbd6bdba 100644
--- a/src/components/document-viewer/section-nav.tsx
+++ b/src/components/document-viewer/section-nav.tsx
@@ -141,7 +141,7 @@ function SectionListHeading({ sections, activeId }: { sections: DocumentSection[
 
   return (
     <div className="flex items-baseline justify-between px-0.5 pb-2">
-      <p className="text-3xs font-black uppercase tracking-[0.12em] text-[color:var(--clinical-accent)]">
+      <p className="text-3xs font-black uppercase tracking-kicker text-[color:var(--clinical-accent)]">
         In this document
       </p>
       <p className="nums text-3xs font-bold text-[color:var(--text-muted)]">
@@ -184,7 +184,7 @@ export function DocumentViewDensityToggle({
           {compact ? "Long sections collapsed" : "All indexed text shown"}
         </span>
       </span>
-      <span className="text-3xs font-black uppercase tracking-[0.08em]">{compact ? "On" : "Off"}</span>
+      <span className="text-3xs font-black uppercase tracking-eyebrow">{compact ? "On" : "Off"}</span>
     </button>
   );
 }
diff --git a/src/components/document-viewer/source-panels.tsx b/src/components/document-viewer/source-panels.tsx
index 6961c5da2b..25931f9409 100644
--- a/src/components/document-viewer/source-panels.tsx
+++ b/src/components/document-viewer/source-panels.tsx
@@ -94,7 +94,7 @@ export function ClinicalSummaryProfile({ profile }: { profile: ClinicalDocumentS
           shows only the structured detail so the same text is not printed twice. */}
       {sections.map((section) => (
         <section key={section.key} className="border-t border-[color:var(--border)] pt-3">
-          <h3 className="text-xs font-bold uppercase tracking-[0.08em] text-[color:var(--text-muted)]">
+          <h3 className="text-xs font-bold uppercase tracking-eyebrow text-[color:var(--text-muted)]">
             {section.label}
           </h3>
           <ul className={cn(proseMeasure, "mt-2 space-y-1.5 text-base-minus leading-6 text-[color:var(--text-muted)]")}>
@@ -161,7 +161,7 @@ export function FormattedHighYieldSummary({
           key={section.id}
           className={cn((leadVisible || index > 0) && "border-t border-[color:var(--border)] pt-3")}
         >
-          <h3 className="text-xs font-bold uppercase tracking-[0.08em] text-[color:var(--text-muted)]">
+          <h3 className="text-xs font-bold uppercase tracking-eyebrow text-[color:var(--text-muted)]">
             {section.heading ?? "Key points"}
           </h3>
           <ul className={cn(proseMeasure, "mt-2 space-y-1.5 text-base-minus leading-6 text-[color:var(--text-muted)]")}>
@@ -315,7 +315,7 @@ export function DocumentImage({ image }: { image: ImageRow }) {
   );
   return (
     <figure className={cn(sourceCard, "overflow-hidden p-3")}>
-      <p className={cn("text-xs font-semibold uppercase tracking-[0.08em]", textMuted)}>
+      <p className={cn("text-xs font-semibold uppercase tracking-eyebrow", textMuted)}>
         page {image.page_number ?? "n/a"}
         {image.image_type ? ` · ${image.image_type.replaceAll("_", " ")}` : ""}
         {image.tableRole ? ` · ${image.tableRole}` : ""}
@@ -396,7 +396,7 @@ export function TableReviewPanel({
               key={fact.id}
               className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-subtle)] p-2"
             >
-              <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[color:var(--text-muted)]">
+              <p className="text-xs font-semibold uppercase tracking-eyebrow text-[color:var(--text-muted)]">
                 Page {fact.page_number ?? "n/a"} · {reviewClass.replaceAll("_", " ")}
               </p>
               <p className="mt-1 text-sm leading-5 text-[color:var(--text)]">{text || "Table fact has no text."}</p>
@@ -1083,7 +1083,7 @@ export const IndexedTextPanel = memo(function IndexedTextPanel({
                           ))}
                         </div>
                       ) : null}
-                      <p className="mb-2 mt-3 text-2xs font-bold uppercase tracking-[0.08em] text-[color:var(--text-muted)]">
+                      <p className="mb-2 mt-3 text-2xs font-bold uppercase tracking-eyebrow text-[color:var(--text-muted)]">
                         Excerpt
                       </p>
                       {normalizedSearch ? (
diff --git a/src/components/dsm/dsm-comparison-page.tsx b/src/components/dsm/dsm-comparison-page.tsx
index a293da8e23..e309c7ae3a 100644
--- a/src/components/dsm/dsm-comparison-page.tsx
+++ b/src/components/dsm/dsm-comparison-page.tsx
@@ -203,7 +203,7 @@ export function DsmComparisonPage({ diagnoses }: { diagnoses: DsmDiagnosis[] })
                   key={row.label}
                   className="overflow-hidden rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] shadow-[var(--shadow-inset)]"
                 >
-                  <h2 className="border-b border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-3 py-2.5 text-xs font-extrabold uppercase tracking-[0.06em] text-[color:var(--text-heading)]">
+                  <h2 className="border-b border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-3 py-2.5 text-xs font-extrabold uppercase tracking-label text-[color:var(--text-heading)]">
                     {row.label}
                   </h2>
                   <dl className="divide-y divide-[color:var(--border)]">
diff --git a/src/components/factsheets/factsheet-detail-page.tsx b/src/components/factsheets/factsheet-detail-page.tsx
index 2e05da7410..2e5f2e6a10 100644
--- a/src/components/factsheets/factsheet-detail-page.tsx
+++ b/src/components/factsheets/factsheet-detail-page.tsx
@@ -182,7 +182,7 @@ export function FactsheetDetailPage({ factsheet }: { factsheet: Factsheet }) {
                   {factsheetGlyph(factsheet.icon, "h-6 w-6")}
                 </span>
                 <div className="flex flex-col gap-1">
-                  <span className="text-2xs font-bold uppercase tracking-[0.06em]" style={{ color: theme.accent }}>
+                  <span className="text-2xs font-bold uppercase tracking-label" style={{ color: theme.accent }}>
                     {factsheet.category}
                   </span>
                   <div className="flex flex-wrap items-center gap-x-2.5 gap-y-1">
@@ -351,22 +351,18 @@ export function FactsheetDetailPage({ factsheet }: { factsheet: Factsheet }) {
           {/* sidebar */}
           <aside className="grid gap-0 overflow-hidden rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] shadow-[var(--shadow-inset)] lg:sticky lg:top-4">
             <div className="p-4">
-              <p className="text-2xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">For</p>
+              <p className="text-2xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">For</p>
               <p className="mt-1 text-sm font-bold text-[color:var(--text-heading)]">{factsheet.audience}</p>
             </div>
             <div className="border-t border-[color:var(--border)] p-4">
-              <p className="text-2xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
-                Last updated
-              </p>
+              <p className="text-2xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">Last updated</p>
               <p className="mt-1 inline-flex items-center gap-1.5 text-sm font-bold text-[color:var(--text-heading)]">
                 <Clock className="h-3.5 w-3.5 text-[color:var(--text-muted)]" aria-hidden="true" />
                 {factsheet.reviewedOn}
               </p>
             </div>
             <div className="border-t border-[color:var(--border)] p-4">
-              <p className="text-2xs font-bold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
-                On this page
-              </p>
+              <p className="text-2xs font-bold uppercase tracking-label text-[color:var(--text-muted)]">On this page</p>
               <ul className="mt-2 grid gap-1.5">
                 {toc.map((item) => (
                   <li key={item} className="text-sm text-[color:var(--text-muted)]">
@@ -436,7 +432,7 @@ function FactsheetBody({
             className="rounded-2xl border p-5"
             style={{ backgroundColor: theme.soft, borderColor: accentBorder(theme.accent) }}
           >
-            <p className="text-2xs font-bold uppercase tracking-[0.06em]" style={{ color: theme.accent }}>
+            <p className="text-2xs font-bold uppercase tracking-label" style={{ color: theme.accent }}>
               At a glance
             </p>
             <div className="mt-3.5 grid grid-cols-2 gap-x-5 gap-y-4 sm:grid-cols-3">
@@ -712,7 +708,7 @@ function FactsheetBody({
                   key={step.t}
                   className="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface)] p-4"
                 >
-                  <p className="text-2xs font-bold uppercase tracking-[0.06em]" style={{ color: theme.accent }}>
+                  <p className="text-2xs font-bold uppercase tracking-label" style={{ color: theme.accent }}>
                     {step.t}
                   </p>
                   <p className="mt-2 text-pretty text-sm leading-6 text-[color:var(--text)]">{step.d}</p>
diff --git a/src/components/factsheets/factsheets-search-page.tsx b/src/components/factsheets/factsheets-search-page.tsx
index e33afe91e1..b8252f4190 100644
--- a/src/components/factsheets/factsheets-search-page.tsx
+++ b/src/components/factsheets/factsheets-search-page.tsx
@@ -51,7 +51,7 @@ export function FactsheetsSearchPage({
       data-testid="factsheets-search-page"
       className="mx-auto w-full max-w-[64rem] px-4 py-6 pb-4 sm:px-6 sm:py-8 lg:px-8"
     >
-      <p className="text-2xs font-bold uppercase tracking-[0.06em] text-[color:var(--clinical-accent)]">Find a sheet</p>
+      <p className="text-2xs font-bold uppercase tracking-label text-[color:var(--clinical-accent)]">Find a sheet</p>
       <h1 className="mt-1.5 text-2xl font-extrabold tracking-tight text-[color:var(--text-heading)]">
         Search patient information
       </h1>
@@ -107,7 +107,7 @@ export function FactsheetsSearchPage({
         }
         filterControls={
           <div className="polished-scroll flex min-w-0 items-center gap-1.5 overflow-x-auto">
-            <span className="hidden shrink-0 text-3xs font-extrabold uppercase tracking-[0.1em] text-[color:var(--text-muted)] sm:inline">
+            <span className="hidden shrink-0 text-3xs font-extrabold uppercase tracking-kicker text-[color:var(--text-muted)] sm:inline">
               Category
             </span>
             {filterChips.map((chip) => {
diff --git a/src/components/mode-nav/mode-nav.tsx b/src/components/mode-nav/mode-nav.tsx
index 1df206dbc3..908b525064 100644
--- a/src/components/mode-nav/mode-nav.tsx
+++ b/src/components/mode-nav/mode-nav.tsx
@@ -50,7 +50,7 @@ function SlotInk({
       className={cn(
         // One weight in every state. Bolding the active label changes its width,
         // which shifts the rule and every neighbour on each navigation.
-        "mode-nav__ink relative flex h-5 min-w-0 items-center gap-2 text-sm-minus font-semibold tracking-[-0.008em]",
+        "mode-nav__ink relative flex h-5 min-w-0 items-center gap-2 text-sm-minus font-semibold tracking-display",
         // The 2px rule takes space at the bottom of the bar, so a centred label
         // sits optically high without this compensating offset.
         "mt-0.5",
diff --git a/src/components/patient-safety-plan.tsx b/src/components/patient-safety-plan.tsx
index c609be8ad5..80b9f74d20 100644
--- a/src/components/patient-safety-plan.tsx
+++ b/src/components/patient-safety-plan.tsx
@@ -711,7 +711,7 @@ export function PatientSafetyPlan() {
           className={cn("min-w-0 grid content-start gap-4", mobileTab === "build" ? "grid" : "hidden", "lg:grid")}
         >
           <div className="flex items-center justify-between gap-2">
-            <h2 className="text-sm font-extrabold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+            <h2 className="text-sm font-extrabold uppercase tracking-label text-[color:var(--text-muted)]">
               Build the plan
             </h2>
             <div className="flex items-center gap-2">
@@ -841,7 +841,7 @@ export function PatientSafetyPlan() {
         >
           {/* Preview toolbar */}
           <div data-print-hide className="mb-3 flex flex-wrap items-center justify-between gap-2">
-            <h2 className="text-sm font-extrabold uppercase tracking-[0.06em] text-[color:var(--text-muted)]">
+            <h2 className="text-sm font-extrabold uppercase tracking-label text-[color:var(--text-muted)]">
               Patient copy
             </h2>
             <div className="flex flex-wrap items-center gap-1.5">
diff --git a/src/components/pwa-lifecycle.tsx b/src/components/pwa-lifecycle.tsx
index cb82148fbe..abbd0ce312 100644
--- a/src/components/pwa-lifecycle.tsx
+++ b/src/components/pwa-lifecycle.tsx
@@ -582,7 +582,7 @@ export function PwaLifecycle() {
             <p className="mt-3 text-sm leading-6 text-[color:var(--text-muted)]">
               Open it from your device like an app. Private clinical features still require a connection.
             </p>
-            <p className="mt-1.5 text-xs font-semibold tracking-[0.01em] text-[color:var(--text-muted)]">
+            <p className="mt-1.5 text-xs font-semibold tracking-normal text-[color:var(--text-muted)]">
               Free · No app store · Takes a few seconds
             </p>
             <div className="mt-3.5 flex flex-wrap gap-2">
diff --git a/src/components/services/services-navigator-page.tsx b/src/components/services/services-navigator-page.tsx
index 359fcfae72..1e05c2e792 100644
--- a/src/components/services/services-navigator-page.tsx
+++ b/src/components/services/services-navigator-page.tsx
@@ -664,7 +664,7 @@ export function ServicesNavigatorPage() {
             }
             filterControls={
               <div className="flex min-w-0 items-center gap-2">
-                <span className="hidden shrink-0 items-center gap-1.5 text-3xs font-extrabold uppercase tracking-[0.1em] text-[color:var(--text-muted)] sm:inline-flex">
+                <span className="hidden shrink-0 items-center gap-1.5 text-3xs font-extrabold uppercase tracking-kicker text-[color:var(--text-muted)] sm:inline-flex">
                   <SlidersHorizontal className="h-3.5 w-3.5 text-[color:var(--decoration-soft)]" aria-hidden />
                   Quick filters
                 </span>
@@ -730,7 +730,7 @@ export function ServicesNavigatorPage() {
                   <Sparkles className="h-5 w-5 sm:h-6 sm:w-6" aria-hidden />
                 </span>
                 <div className="min-w-0">
-                  <p className="text-2xs font-extrabold uppercase tracking-[0.1em] text-[color:var(--clinical-accent)]">
+                  <p className="text-2xs font-extrabold uppercase tracking-kicker text-[color:var(--clinical-accent)]">
                     Referral matches
                   </p>
                   <h1 className="mt-0.5 text-2xl-minus font-extrabold leading-tight tracking-tight text-[color:var(--text-heading)] sm:text-3xl">
diff --git a/src/components/specifiers/specifier-ui.tsx b/src/components/specifiers/specifier-ui.tsx
index 84f33c4b7a..0c3a55c739 100644
--- a/src/components/specifiers/specifier-ui.tsx
+++ b/src/components/specifiers/specifier-ui.tsx
@@ -384,7 +384,7 @@ export function QuickTile({
     <div className={cn("rounded-lg border bg-[color:var(--surface)] p-4", toneClass)}>
       <div className="mb-2 flex items-center gap-2">
         <Icon className="h-4 w-4" aria-hidden />
-        <span className="text-2xs font-extrabold uppercase tracking-[0.05em]">{label}</span>
+        <span className="text-2xs font-extrabold uppercase tracking-label">{label}</span>
       </div>
       <p className={cn("text-xs font-medium leading-5", bodyClass)}>{body}</p>
     </div>
diff --git a/src/components/therapy-compass/screens/recommend-screen.tsx b/src/components/therapy-compass/screens/recommend-screen.tsx
index aeb248a796..f43a4ecf97 100644
--- a/src/components/therapy-compass/screens/recommend-screen.tsx
+++ b/src/components/therapy-compass/screens/recommend-screen.tsx
@@ -251,7 +251,7 @@ function MatchCell({
 function ColMini({ eyebrow, text }: { eyebrow: string; text: string }) {
   return (
     <div className="min-w-0">
-      <div className="text-3xs font-bold tracking-[0.04em] text-[color:var(--text-muted)] mb-1">{eyebrow}</div>
+      <div className="text-3xs font-bold tracking-label text-[color:var(--text-muted)] mb-1">{eyebrow}</div>
       <p className="m-0 text-xs leading-normal text-[color:var(--text-muted)] overflow-hidden line-clamp-2">{text}</p>
     </div>
   );
diff --git a/src/components/therapy-compass/screens/sheets-screen.tsx b/src/components/therapy-compass/screens/sheets-screen.tsx
index 07b2ba24c5..2fb722b5eb 100644
--- a/src/components/therapy-compass/screens/sheets-screen.tsx
+++ b/src/components/therapy-compass/screens/sheets-screen.tsx
@@ -174,7 +174,7 @@ export function SheetsScreen() {
                 <span className="inline-flex items-center justify-center w-[34px] h-[34px] rounded-md bg-[color:var(--tc-paper-accent-background)] text-[color:var(--tc-paper-accent)]">
                   <ScaleIcon size={20} strokeWidth={1.6} />
                 </span>
-                <span className="text-sm-minus font-semibold text-[color:var(--tc-paper-muted)] tracking-[0.02em]">
+                <span className="text-sm-minus font-semibold text-[color:var(--tc-paper-muted)] tracking-normal">
                   Therapy · Patient information
                 </span>
               </div>
diff --git a/src/components/therapy-compass/therapy-card.tsx b/src/components/therapy-compass/therapy-card.tsx
index 52555804fd..1c936172d1 100644
--- a/src/components/therapy-compass/therapy-card.tsx
+++ b/src/components/therapy-compass/therapy-card.tsx
@@ -28,7 +28,7 @@ export function ResultCard({ therapy }: { therapy: Therapy }) {
         <div className="flex min-w-0 gap-[15px]">
           <IconTile icon={ScaleIcon} />
           <div className="min-w-0">
-            <h3 className="m-0 mb-[5px] text-[color:var(--text-heading)] tracking-[-0.01em] text-base font-semibold">
+            <h3 className="m-0 mb-[5px] text-[color:var(--text-heading)] tracking-display text-base font-semibold">
               {therapy.name}
             </h3>
             <p className="m-0 mb-[11px] text-sm-minus leading-normal text-[color:var(--text-muted)]">
diff --git a/src/components/ui-primitives.tsx b/src/components/ui-primitives.tsx
index 90285d25e9..aa6f58af87 100644
--- a/src/components/ui-primitives.tsx
+++ b/src/components/ui-primitives.tsx
@@ -57,8 +57,7 @@ export const floatingControl = `inline-flex min-h-tap items-center justify-cente
 export const toolbarButton = `grid h-tap w-tap shrink-0 place-items-center rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] text-[color:var(--text)] shadow-[var(--shadow-inset)] transition hover:border-[color:var(--border-strong)] hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] forced-colors:border ${controlDisabled}`;
 // Eyebrows are text (section kickers), so they sit on `--text-muted` (≥4.5:1),
 // never the decoration tier. Uppercase + tracking keep the kicker role.
-export const eyebrowText =
-  "text-2xs font-semibold uppercase leading-4 tracking-[0.06em] text-[color:var(--text-muted)]";
+export const eyebrowText = "text-2xs font-semibold uppercase leading-4 tracking-label text-[color:var(--text-muted)]";
 // A field label is a text node, so it cannot use `--text-soft` (3.07:1) or the
 // uppercase eyebrow treatment: weight said "important" while colour said
 // "secondary", and the label was quieter than the value it described. Sentence