diff --git a/docs/images/webui-docs.png b/docs/images/webui-docs.png
index 7e101c2..33b42b1 100644
Binary files a/docs/images/webui-docs.png and b/docs/images/webui-docs.png differ
diff --git a/docs/images/webui-emitter-light.png b/docs/images/webui-emitter-light.png
index 20b2334..20e3671 100644
Binary files a/docs/images/webui-emitter-light.png and b/docs/images/webui-emitter-light.png differ
diff --git a/docs/images/webui-emitter.png b/docs/images/webui-emitter.png
index eac3d3d..2a9f452 100644
Binary files a/docs/images/webui-emitter.png and b/docs/images/webui-emitter.png differ
diff --git a/docs/images/webui-run.png b/docs/images/webui-run.png
index d93ccef..4f50093 100644
Binary files a/docs/images/webui-run.png and b/docs/images/webui-run.png differ
diff --git a/docs/images/webui-terminal.png b/docs/images/webui-terminal.png
index 73d9af8..4742bc5 100644
Binary files a/docs/images/webui-terminal.png and b/docs/images/webui-terminal.png differ
diff --git a/scripts/capture-webui-screenshots.py b/scripts/capture-webui-screenshots.py
index e901eaa..7ea55a1 100644
--- a/scripts/capture-webui-screenshots.py
+++ b/scripts/capture-webui-screenshots.py
@@ -171,6 +171,21 @@ def button_by_text(text: str) -> str:
     )
 
 
+def button_starting_with(prefix: str) -> str:
+    """Match on a stable prefix rather than a whole label.
+
+    The run button used to read "Start run". It now names its destination, so it
+    is "Run and send to 10.0.20.125:514", "Run and write to file" or "Run without
+    sending" depending on where the events are going. An exact match silently
+    stopped working and this script only failed the next time someone ran it,
+    which was months later.
+    """
+    return (
+        "[...document.querySelectorAll('button')]"
+        f".find(b => b.textContent.trim().startsWith({json.dumps(prefix)}))"
+    )
+
+
 def shot_name(view: str, theme: str) -> str:
     """`webui-emitter.png` for dark, `webui-emitter-light.png` for light.
 
@@ -285,7 +300,7 @@ async def capture_all(url: str, theme: str, views: set[str]) -> None:
                 await asyncio.sleep(0.8)
                 # No collector and no output file: the run emits to the browser
                 # stream and writes nothing to disk.
-                await page.click(button_by_text("Start run"))
+                await page.click(button_starting_with("Run "))
                 # Capture just after the plan drains. REP-004's default is 108000
                 # events and the useful window is narrow: at 2.2s the readout still
                 # showed single digits, and a looser "wait until the rate is high"
diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index e2eae0c..4bb0aae 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -162,7 +162,7 @@ export default function App() {
     <button
       onClick={() => setTab(id)}
       className={cn(
-        "py-[17px] text-[13px] font-medium transition-colors",
+        "py-[17px] text-body font-medium transition-colors",
         tab === id
           ? "text-foreground shadow-[inset_0_-2px_0_hsl(var(--foreground))]"
           : "text-muted-foreground hover:text-foreground",
@@ -184,7 +184,7 @@ export default function App() {
           <span className="text-sm font-semibold tracking-tight">Replicant</span>
           {/* The environment chip is orientation, not state. It is the first thing
               to go when the bar runs out of room. */}
-          <span className="ml-1 hidden border-l pl-2.5 font-mono text-[11px] text-text-3 lg:inline">
+          <span className="ml-1 hidden border-l pl-2.5 font-mono text-micro text-text-3 lg:inline">
             lab · 10.20.0.0/16
           </span>
         </div>
@@ -200,7 +200,7 @@ export default function App() {
           {config.terminal_enabled && navItem("terminal", "Terminal")}
         </nav>
         <div className="flex items-center gap-2.5 sm:gap-4">
-          <span className="flex items-center gap-2 font-mono text-[11.5px] text-text-3">
+          <span className="flex items-center gap-2 font-mono text-micro text-text-3">
             {collector ? (
               <>
                 <span className="h-1.5 w-1.5 flex-none rounded-full bg-signal" />
@@ -242,7 +242,7 @@ export default function App() {
             className="flex items-center justify-between gap-3 border-b px-4 py-3 text-left transition-colors hover:bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring lg:hidden"
           >
             <span className="u-label">Collector and techniques</span>
-            <span className="flex items-center gap-2 font-mono text-[11px] text-text-3">
+            <span className="flex items-center gap-2 font-mono text-micro text-text-3">
               {/* Naming the selection keeps the collapsed state informative: what
                   is armed is the one thing you lose by closing this. */}
               {selected?.id ?? "none selected"}
diff --git a/webui/src/components/CatalogTable.tsx b/webui/src/components/CatalogTable.tsx
index 7362ac2..1333dcd 100644
--- a/webui/src/components/CatalogTable.tsx
+++ b/webui/src/components/CatalogTable.tsx
@@ -59,8 +59,8 @@ export function CatalogTable({ techniques, selectedId, onSelect }: Props) {
   return (
     <section className="flex min-h-0 flex-col">
       <div className="mb-3 flex items-baseline justify-between">
-        <span className="text-[13px] font-semibold">Techniques</span>
-        <span className="font-mono text-[10.5px] text-text-3">
+        <span className="text-body font-semibold">Techniques</span>
+        <span className="font-mono text-label text-text-3">
           {filtering ? `${shown} of ${techniques.length}` : `${techniques.length} · ATT&CK`}
         </span>
       </div>
@@ -73,7 +73,7 @@ export function CatalogTable({ techniques, selectedId, onSelect }: Props) {
           placeholder="id, name, use case, ATT&CK"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
-          className="h-8 w-full rounded-md border bg-transparent pl-8 pr-2.5 font-mono text-[11.5px] placeholder:text-text-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="h-8 w-full rounded-md border bg-transparent pl-8 pr-2.5 font-mono text-micro placeholder:text-text-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         />
       </div>
 
@@ -86,7 +86,7 @@ export function CatalogTable({ techniques, selectedId, onSelect }: Props) {
               onClick={() => toggleLogType(value)}
               aria-pressed={on}
               className={cn(
-                "rounded border px-1.5 py-0.5 font-mono text-[9.5px] transition-colors",
+                "rounded border px-1.5 py-0.5 font-mono text-micro transition-colors",
                 on
                   ? "border-signal/50 bg-signal/10 text-signal"
                   : "text-text-3 hover:text-muted-foreground",
@@ -100,7 +100,7 @@ export function CatalogTable({ techniques, selectedId, onSelect }: Props) {
 
       <div className="-mx-2 flex min-h-0 flex-col overflow-y-auto scroll-thin">
         {groups.length === 0 && (
-          <p className="px-2.5 py-4 text-[12px] text-muted-foreground">
+          <p className="px-2.5 py-4 text-body text-muted-foreground">
             No techniques match that filter.
           </p>
         )}
@@ -118,7 +118,7 @@ export function CatalogTable({ techniques, selectedId, onSelect }: Props) {
                   className={cn("h-3 w-3 text-text-4 transition-transform", open && "rotate-90")}
                 />
                 <span className="u-label flex-1">{tacticLabel(group.tactic)}</span>
-                <span className="font-mono text-[9.5px] text-text-3">
+                <span className="font-mono text-micro text-text-3">
                   {group.techniques.length}
                 </span>
               </button>
@@ -139,17 +139,17 @@ export function CatalogTable({ techniques, selectedId, onSelect }: Props) {
                       {sel && (
                         <span className="absolute bottom-2 left-0 top-2 w-0.5 rounded bg-foreground" />
                       )}
-                      <span className="col-start-1 row-start-1 text-[13px] font-medium">
+                      <span className="col-start-1 row-start-1 text-body font-medium">
                         {t.name}
                       </span>
-                      <span className="col-start-2 row-start-1 justify-self-end font-mono text-[9.5px] text-text-3">
+                      <span className="col-start-2 row-start-1 justify-self-end font-mono text-micro text-text-3">
                         {t.attack[0] ?? ""}
                       </span>
-                      <span className="col-start-1 row-start-2 font-mono text-[10.5px] text-text-3">
+                      <span className="col-start-1 row-start-2 font-mono text-label text-text-3">
                         {t.id} · {logTypeOf(t)}
                       </span>
                       {!t.implemented && (
-                        <span className="col-start-2 row-start-2 justify-self-end font-mono text-[9px] font-semibold uppercase tracking-wide text-signal">
+                        <span className="col-start-2 row-start-2 justify-self-end font-mono text-micro font-semibold uppercase tracking-wide text-signal">
                           soon
                         </span>
                       )}
diff --git a/webui/src/components/ConnectionCard.tsx b/webui/src/components/ConnectionCard.tsx
index 4cab2bd..994cc57 100644
--- a/webui/src/components/ConnectionCard.tsx
+++ b/webui/src/components/ConnectionCard.tsx
@@ -128,8 +128,8 @@ export function ConnectionCard({
   return (
     <section className="rounded-lg border bg-card p-4">
       <div className="mb-3.5 flex items-baseline justify-between">
-        <span className="text-[13px] font-semibold">Collector</span>
-        <span className={cn("font-mono text-[10.5px]", BADGE[badge].tone)}>{BADGE[badge].label}</span>
+        <span className="text-body font-semibold">Collector</span>
+        <span className={cn("font-mono text-label", BADGE[badge].tone)}>{BADGE[badge].label}</span>
       </div>
 
       <div className="u-label mb-1.5">Vendor profile</div>
@@ -145,7 +145,7 @@ export function ConnectionCard({
             aria-checked={v === vendor}
             onClick={() => onVendorChange(v)}
             className={cn(
-              "h-7 flex-1 rounded-[5px] text-[12px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "h-7 flex-1 whitespace-nowrap rounded-[5px] text-label font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               v === vendor
                 ? "bg-elev text-foreground shadow-sm"
                 : "text-text-3 hover:text-foreground",
@@ -163,7 +163,7 @@ export function ConnectionCard({
           </label>
           <Input
             id="host"
-            className="h-9 font-mono text-[13px]"
+            className="h-9 font-mono text-data"
             value={host}
             onChange={(e) => setHost(e.target.value)}
           />
@@ -174,7 +174,7 @@ export function ConnectionCard({
           </label>
           <Input
             id="port"
-            className="h-9 font-mono text-[13px]"
+            className="h-9 font-mono text-data"
             value={port}
             onChange={(e) => setPort(e.target.value)}
           />
@@ -182,7 +182,7 @@ export function ConnectionCard({
         <div>
           <label className="u-label mb-1.5 block">Trans</label>
           <Select value={transport} onValueChange={setTransport}>
-            <SelectTrigger className="h-9 font-mono text-[13px]">
+            <SelectTrigger className="h-9 font-mono text-data">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -198,7 +198,7 @@ export function ConnectionCard({
         <div className="mt-3 grid grid-cols-[auto_1fr] items-end gap-3">
           <div className="flex items-center gap-2 pb-2">
             <Switch id="tlsverify" checked={tlsVerify} onCheckedChange={setTlsVerify} />
-            <label htmlFor="tlsverify" className="whitespace-nowrap text-[12.5px] text-muted-foreground">
+            <label htmlFor="tlsverify" className="whitespace-nowrap text-body text-muted-foreground">
               Verify cert
             </label>
           </div>
@@ -208,7 +208,7 @@ export function ConnectionCard({
             </label>
             <Input
               id="cafile"
-              className="h-9 font-mono text-[12px]"
+              className="h-9 font-mono text-data"
               value={tlsCafile}
               onChange={(e) => setTlsCafile(e.target.value)}
               placeholder="/path/to/ca.pem"
@@ -221,15 +221,15 @@ export function ConnectionCard({
         <button
           onClick={handleTest}
           disabled={busy || !host}
-          className="h-8 rounded-md border px-3 text-[12.5px] font-medium text-muted-foreground transition-colors hover:text-foreground disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="h-8 rounded-md border px-3 text-body font-medium text-muted-foreground transition-colors hover:text-foreground disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
           {busy ? "Sending…" : "Send test log"}
         </button>
-        <span className="font-mono text-[11px] text-text-3">cap {epsCap} eps</span>
+        <span className="font-mono text-micro text-text-3">cap {epsCap} eps</span>
       </div>
 
       {error && (
-        <div className="mt-3 flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-2.5 text-[11.5px] leading-relaxed text-destructive">
+        <div className="mt-3 flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-2.5 text-label leading-relaxed text-destructive">
           <X className="mt-0.5 h-3.5 w-3.5 shrink-0" />
           <span>{error}</span>
         </div>
@@ -239,7 +239,7 @@ export function ConnectionCard({
         <div
           data-testid="connect-report"
           className={cn(
-            "mt-3 space-y-2 rounded-md border p-2.5 text-[11.5px] leading-relaxed",
+            "mt-3 space-y-2 rounded-md border p-2.5 text-label leading-relaxed",
             report.verdict === "refused" ||
               report.verdict === "failed" ||
               report.verdict === "name_not_resolved"
@@ -253,7 +253,7 @@ export function ConnectionCard({
               as perfectly ordinary, and it survived two lab sessions and a dozen
               log lines. Beside its own source address it does not. */}
           {report.source && (
-            <div className="font-mono text-[11px]">
+            <div className="font-mono text-micro">
               {report.source} <span className="text-text-3">-&gt;</span> {report.host}:
               {report.port}
               {report.interface ? (
@@ -284,7 +284,7 @@ export function ConnectionCard({
       )}
 
       {stale && (
-        <div className="mt-3 rounded-md border p-2.5 text-[11.5px] leading-relaxed text-text-3">
+        <div className="mt-3 rounded-md border p-2.5 text-label leading-relaxed text-text-3">
           The target changed since the last test. Send a test log to describe this one.
         </div>
       )}
diff --git a/webui/src/components/DocsView.tsx b/webui/src/components/DocsView.tsx
index 893cd0f..634b1e3 100644
--- a/webui/src/components/DocsView.tsx
+++ b/webui/src/components/DocsView.tsx
@@ -137,7 +137,7 @@ export function DocsView() {
             disabled={!page.available}
             aria-current={page.id === current ? "true" : undefined}
             className={cn(
-              "whitespace-nowrap rounded-md px-2.5 py-2 text-left text-[12.5px] transition-colors hover:bg-secondary disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "whitespace-nowrap rounded-md px-2.5 py-2 text-left text-body transition-colors hover:bg-secondary disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               page.id === current && "bg-secondary font-medium",
             )}
           >
@@ -148,7 +148,7 @@ export function DocsView() {
 
       <article className="min-h-0 flex-1 overflow-y-auto scroll-thin px-4 py-5 sm:px-8 sm:py-6">
         {error && (
-          <div className="rounded-md border border-destructive/40 bg-destructive/10 p-2.5 text-[12px] text-destructive">
+          <div className="rounded-md border border-destructive/40 bg-destructive/10 p-2.5 text-body text-destructive">
             {error}
           </div>
         )}
diff --git a/webui/src/components/LogsView.tsx b/webui/src/components/LogsView.tsx
index ad1a5ba..7079979 100644
--- a/webui/src/components/LogsView.tsx
+++ b/webui/src/components/LogsView.tsx
@@ -147,7 +147,7 @@ export function LogsView() {
               title={option.hint}
               aria-pressed={level === option.id}
               className={cn(
-                "rounded-sm border px-2.5 py-1 text-[12px] transition-colors",
+                "rounded-sm border px-2.5 py-1 text-body transition-colors",
                 level === option.id
                   ? "border-signal/60 bg-signal/10 text-foreground"
                   : "text-muted-foreground hover:text-foreground",
@@ -159,7 +159,7 @@ export function LogsView() {
         </div>
 
         <div className="ml-auto flex items-center gap-2">
-          <span className="font-mono text-[11.5px] text-text-3">
+          <span className="font-mono text-micro text-text-3">
             {counts.total} line{counts.total === 1 ? "" : "s"}
             {counts.warnings > 0 && (
               <span className="text-signal"> · {counts.warnings} warning</span>
@@ -186,7 +186,7 @@ export function LogsView() {
       </div>
 
       {error && (
-        <p className="rounded-sm border border-destructive/40 px-2.5 py-1.5 text-[12px] text-destructive">
+        <p className="rounded-sm border border-destructive/40 px-2.5 py-1.5 text-body text-destructive">
           {error}
         </p>
       )}
@@ -196,7 +196,7 @@ export function LogsView() {
         onScroll={onScroll}
         // min-w-0 so one long line scrolls inside this box instead of stretching
         // the page. See docs/webui-reskin-design.md section 5.
-        className="min-w-0 flex-1 overflow-auto rounded-sm border bg-card p-2.5 font-mono text-[12px] leading-[1.55]"
+        className="min-w-0 flex-1 overflow-auto rounded-sm border bg-card p-2.5 font-mono text-data leading-[1.55]"
       >
         {entries.length === 0 ? (
           <p className="text-text-3">
@@ -226,7 +226,7 @@ export function LogsView() {
             const node = bodyRef.current;
             if (node) node.scrollTop = node.scrollHeight;
           }}
-          className="self-center rounded-sm border px-2.5 py-1 text-[12px] text-muted-foreground hover:text-foreground"
+          className="self-center rounded-sm border px-2.5 py-1 text-body text-muted-foreground hover:text-foreground"
         >
           Jump to latest
         </button>
diff --git a/webui/src/components/RunPanel.tsx b/webui/src/components/RunPanel.tsx
index 8fa2812..493c3bb 100644
--- a/webui/src/components/RunPanel.tsx
+++ b/webui/src/components/RunPanel.tsx
@@ -431,7 +431,7 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
         <div>
           <label className="u-label mb-1.5 block">Intensity</label>
           <Select value={intensity} onValueChange={setIntensity}>
-            <SelectTrigger className="h-9 text-[13px]">
+            <SelectTrigger className="h-9 text-body">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -449,7 +449,7 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
           </label>
           <Input
             id="duration"
-            className="h-9 font-mono text-[13px]"
+            className="h-9 font-mono text-data"
             placeholder="preset"
             value={duration}
             onChange={(e) => setDuration(e.target.value)}
@@ -461,7 +461,7 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
           </label>
           <Input
             id="seed"
-            className="h-9 font-mono text-[13px]"
+            className="h-9 font-mono text-data"
             value={seed}
             onChange={(e) => setSeed(e.target.value)}
           />
@@ -472,7 +472,7 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
           </label>
           <Input
             id="rate"
-            className="h-9 font-mono text-[13px]"
+            className="h-9 font-mono text-data"
             placeholder={`${epsCap}/s`}
             inputMode="numeric"
             title="Events per second. Blank uses the configured cap. Lower it if your collector drops events."
@@ -483,7 +483,7 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
         <div>
           <label className="u-label mb-1.5 block">Anchor</label>
           <Select value={anchor} onValueChange={(v) => setAnchor(v as AnchorChoice)}>
-            <SelectTrigger className="h-9 text-[13px]" aria-label="Event time anchor">
+            <SelectTrigger className="h-9 text-body" aria-label="Event time anchor">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -495,11 +495,11 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
         <div className="col-span-2 flex flex-col gap-2 sm:col-span-4 lg:col-span-1 lg:items-end">
           <span className="u-label">Destination</span>
           <div className="flex gap-4">
-            <label className={cn("flex items-center gap-2 text-[12.5px]", collector ? "text-muted-foreground" : "text-text-4")}>
+            <label className={cn("flex items-center gap-2 text-body", collector ? "text-muted-foreground" : "text-text-4")}>
               <Switch checked={sendToCollector} onCheckedChange={setSendChoice} disabled={!collector} />
               Collector
             </label>
-            <label className="flex items-center gap-2 text-[12.5px] text-muted-foreground">
+            <label className="flex items-center gap-2 text-body text-muted-foreground">
               <Switch checked={toFile} onCheckedChange={setToFile} />
               File
             </label>
@@ -525,7 +525,7 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
               return (
                 <label
                   key={choice}
-                  className="flex items-center gap-2 text-[12.5px] text-muted-foreground"
+                  className="flex items-center gap-2 text-body text-muted-foreground"
                 >
                   <input
                     type="radio"
@@ -537,7 +537,7 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
                   <span>
                     {choice === "plan" ? "Plan time" : "Burst"}
                     {projected !== null && (
-                      <b className="ml-1.5 font-mono text-[11.5px] font-medium text-foreground">
+                      <b className="ml-1.5 font-mono text-micro font-medium text-foreground">
                         {fmtSpan(projected)}
                       </b>
                     )}
@@ -553,26 +553,26 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
               </label>
               <Input
                 id="speed"
-                className="h-8 w-16 font-mono text-[12px]"
+                className="h-8 w-16 font-mono text-data"
                 inputMode="numeric"
                 title="Compress the plan timeline. Event times compress with it."
                 value={speed}
                 onChange={(e) => setSpeed(e.target.value)}
               />
-              <span className="text-[12px] text-text-3">x</span>
+              <span className="text-body text-text-3">x</span>
             </div>
           )}
         </div>
         <p
           data-testid="pace-consequence"
-          className="mt-2 text-[12px] leading-relaxed text-muted-foreground"
+          className="mt-2 text-body leading-relaxed text-muted-foreground"
         >
           {paceConsequence(pace, speedNum, preview)}
         </p>
       </div>
 
       {!collector && (
-        <p className="mt-2.5 font-mono text-[11px] leading-relaxed text-text-3">
+        <p className="mt-2.5 font-mono text-micro leading-relaxed text-text-3">
           No collector configured. Sends fail closed. Connect one, or write to file.
         </p>
       )}
@@ -581,7 +581,7 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
       {collector && !sending && !toFile && (
         <div
           role="status"
-          className="mt-2.5 rounded-md border border-signal/40 bg-signal/10 p-2.5 text-[12px] leading-relaxed text-signal"
+          className="mt-2.5 rounded-md border border-signal/40 bg-signal/10 p-2.5 text-body leading-relaxed text-signal"
         >
           No destination selected. This run will render events and neither send nor write
           them, and the readout will still show a rate, because it measures rendering. Turn
@@ -591,14 +591,14 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
       {anchorNotice(anchor, sending, anchorEpoch) && (
         <div
           role="status"
-          className="mt-2.5 rounded-md border border-signal/40 bg-signal/10 p-2.5 text-[12px] leading-relaxed text-signal"
+          className="mt-2.5 rounded-md border border-signal/40 bg-signal/10 p-2.5 text-body leading-relaxed text-signal"
         >
           {anchorNotice(anchor, sending, anchorEpoch)}
         </div>
       )}
       {toFile && (
         <Input
-          className="mt-2.5 h-8 max-w-xs font-mono text-[12px]"
+          className="mt-2.5 h-8 max-w-xs font-mono text-data"
           value={filePath}
           onChange={(e) => setFilePath(e.target.value)}
         />
@@ -611,7 +611,7 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
       {lockedBy && (
         <div
           role="status"
-          className="mt-4 flex flex-wrap items-center gap-x-3 gap-y-2 rounded-md border border-signal/40 bg-signal/10 p-2.5 text-[12px] leading-relaxed text-signal"
+          className="mt-4 flex flex-wrap items-center gap-x-3 gap-y-2 rounded-md border border-signal/40 bg-signal/10 p-2.5 text-body leading-relaxed text-signal"
         >
           <span>
             {lockedBy.technique_id ?? "Another run"} is already running, and only one run
@@ -622,7 +622,7 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
           </span>
           <button
             onClick={handleStopLocked}
-            className="inline-flex h-7 items-center gap-1.5 rounded-md border border-signal/50 px-2.5 text-[12px] font-medium transition-colors hover:bg-signal/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="inline-flex h-7 items-center gap-1.5 rounded-md border border-signal/50 px-2.5 text-body font-medium transition-colors hover:bg-signal/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
             <Square className="h-2.5 w-2.5" />
             Stop the running {lockedBy.technique_id ?? "run"}
@@ -635,7 +635,7 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
         <button
           onClick={handleStart}
           disabled={!canRun}
-          className="inline-flex h-9 items-center gap-2 rounded-md bg-primary px-4 text-[13px] font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="inline-flex h-9 items-center gap-2 rounded-md bg-primary px-4 text-body font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
           <Play className="h-3.5 w-3.5" />
           {destinationLabel}
@@ -643,7 +643,7 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
         <button
           onClick={handleStop}
           disabled={!running}
-          className="inline-flex h-9 items-center gap-2 rounded-md border px-4 text-[13px] font-medium text-muted-foreground transition-colors hover:text-foreground disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="inline-flex h-9 items-center gap-2 rounded-md border px-4 text-body font-medium text-muted-foreground transition-colors hover:text-foreground disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
           <Square className="h-3 w-3" />
           Stop
@@ -651,7 +651,7 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
       </div>
 
       {error && (
-        <div className="mt-4 rounded-md border border-destructive/40 bg-destructive/10 p-2.5 text-[12px] text-destructive">
+        <div className="mt-4 rounded-md border border-destructive/40 bg-destructive/10 p-2.5 text-body text-destructive">
           {error}
         </div>
       )}
@@ -672,11 +672,11 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
       {/* live stream */}
       <div className="mb-2 mt-[22px] flex items-center justify-between">
         <span className="u-label">Live CEF · {vendor}</span>
-        <span className="font-mono text-[10.5px] text-text-3">tail · last {MAX_VISIBLE}</span>
+        <span className="font-mono text-label text-text-3">tail · last {MAX_VISIBLE}</span>
       </div>
       <div
         ref={logRef}
-        className="scroll-thin h-[132px] overflow-y-auto rounded-lg border bg-well p-3 font-mono text-[11px] leading-[1.85] text-text-3"
+        className="scroll-thin h-[132px] overflow-y-auto rounded-lg border bg-well p-3 font-mono text-micro leading-[1.85] text-text-3"
       >
         {linesRef.current.length === 0 ? (
           <div className="grid h-full place-items-center text-text-3">
@@ -694,7 +694,7 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
       {/* manifest */}
       {manifest && (
         <div className="mt-4 rounded-lg border p-4">
-          <div className="mb-3 flex items-center gap-2 text-[12.5px] font-semibold">
+          <div className="mb-3 flex items-center gap-2 text-body font-semibold">
             <svg width="14" height="14" viewBox="0 0 14 14" fill="none" className="text-muted-foreground">
               <path d="M2.5 7.5 L5.5 10.5 L11.5 3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
             </svg>
@@ -714,14 +714,14 @@ export function RunPanel({ technique, defaultSeed, collector, vendor, epsCap, an
             ].map(([k, v]) => (
               <div key={k} className="u-label">
                 {k}
-                <b className="mt-0.5 block font-mono text-[12.5px] font-medium normal-case tracking-normal text-foreground">
+                <b className="mt-0.5 block font-mono text-data font-medium normal-case tracking-normal text-foreground">
                   {String(v)}
                 </b>
               </div>
             ))}
           </div>
           {manifest.warmup_note && (
-            <div className="mt-3 font-mono text-[11px] text-text-3">note: {manifest.warmup_note}</div>
+            <div className="mt-3 font-mono text-micro text-text-3">note: {manifest.warmup_note}</div>
           )}
         </div>
       )}
diff --git a/webui/src/components/SignalReadout.tsx b/webui/src/components/SignalReadout.tsx
index 1b07009..908e7c6 100644
--- a/webui/src/components/SignalReadout.tsx
+++ b/webui/src/components/SignalReadout.tsx
@@ -71,19 +71,19 @@ export function SignalReadout({
     <div className="my-5 overflow-hidden rounded-[10px] border bg-[linear-gradient(180deg,hsl(var(--signal)_/_0.03),transparent_40%)]">
       <div className="flex items-center justify-between px-4 pb-1.5 pt-3.5">
         <div className="flex items-baseline gap-2">
-          <span className="font-mono text-[25px] font-medium leading-none tracking-tight text-signal">
+          <span className="font-mono text-title font-medium leading-none tracking-tight text-signal">
             {eps}
           </span>
-          <span className="font-mono text-[11px] text-text-3">events / sec</span>
+          <span className="font-mono text-micro text-text-3">events / sec</span>
           {running && (
-            <span className="ml-1.5 inline-flex items-center gap-1.5 font-mono text-[9.5px] uppercase tracking-[0.12em] text-signal">
+            <span className="ml-1.5 inline-flex items-center gap-1.5 font-mono text-micro uppercase tracking-[0.12em] text-signal">
               <span className="h-[5px] w-[5px] rounded-full bg-signal" />
               emitting
             </span>
           )}
         </div>
         <span
-          className="font-mono text-[11px] text-text-3"
+          className="font-mono text-micro text-text-3"
           title={
             capApplies
               ? `Sends are held to ${cap} events per second.`
@@ -134,7 +134,7 @@ export function SignalReadout({
         <div className="absolute inset-y-0 left-0 bg-signal transition-[width]" style={{ width: `${pct}%` }} />
       </div>
 
-      <div className="flex justify-between border-t px-4 py-2.5 font-mono text-[11px] text-text-3">
+      <div className="flex justify-between border-t px-4 py-2.5 font-mono text-micro text-text-3">
         <span>
           elapsed <b className="font-medium text-muted-foreground">{elapsedLabel}</b>
         </span>
diff --git a/webui/src/components/TechniqueDetail.tsx b/webui/src/components/TechniqueDetail.tsx
index 146ba95..7a579e9 100644
--- a/webui/src/components/TechniqueDetail.tsx
+++ b/webui/src/components/TechniqueDetail.tsx
@@ -35,8 +35,8 @@ function Chip({ label, signal }: { label: string; signal?: boolean }) {
     <span
       className={
         signal
-          ? "rounded border border-signal/40 px-1.5 py-0.5 font-mono text-[10.5px] text-signal"
-          : "rounded border px-1.5 py-0.5 font-mono text-[10.5px] text-text-3"
+          ? "rounded border border-signal/40 px-1.5 py-0.5 font-mono text-label text-signal"
+          : "rounded border px-1.5 py-0.5 font-mono text-label text-text-3"
       }
     >
       {label}
@@ -61,8 +61,8 @@ function Card({ title, children }: { title: string; children: ReactNode }) {
 function Field({ k, v }: { k: string; v: string }) {
   return (
     <div className="flex items-baseline justify-between gap-3 border-b border-border/60 py-1.5 last:border-0">
-      <span className="text-[11.5px] text-muted-foreground">{k}</span>
-      <span className="text-right font-mono text-[11.5px] text-foreground">{v}</span>
+      <span className="text-label text-muted-foreground">{k}</span>
+      <span className="text-right font-mono text-micro text-foreground">{v}</span>
     </div>
   );
 }
@@ -84,7 +84,7 @@ function SampleLines({ technique, vendor }: Props) {
   }, [technique.id, vendor]);
 
   return (
-    <div className="scroll-thin overflow-x-auto rounded-lg border bg-well p-3 font-mono text-[11px] leading-[1.9] text-text-3">
+    <div className="scroll-thin overflow-x-auto rounded-lg border bg-well p-3 font-mono text-micro leading-[1.9] text-text-3">
       {err ? (
         <span className="text-destructive">sample unavailable: {err}</span>
       ) : !sample ? (
@@ -119,10 +119,10 @@ export function TechniqueDetail({ technique, vendor }: Props) {
   return (
     <div className="mx-auto max-w-[900px] pb-2">
       {/* identity */}
-      <div className="font-mono text-[11.5px] font-medium tracking-wide text-muted-foreground">
+      <div className="font-mono text-micro font-medium tracking-wide text-muted-foreground">
         {technique.id} · {technique.ndr_uc}
       </div>
-      <h1 className="mt-1 text-[23px] font-semibold tracking-[-0.028em]">{technique.name}</h1>
+      <h1 className="mt-1 text-title font-semibold tracking-[-0.028em]">{technique.name}</h1>
 
       {/* The objective, first and in the reading colour.
           This slot used to hold "Emits synthetic <log type> telemetry that
@@ -133,18 +133,18 @@ export function TechniqueDetail({ technique, vendor }: Props) {
       {technique.objective && (
         <p
           data-testid="technique-objective"
-          className="mt-2 max-w-[640px] text-[14px] leading-relaxed text-foreground"
+          className="mt-2 max-w-[640px] text-lede leading-relaxed text-foreground"
         >
           {technique.objective}
         </p>
       )}
-      <p className="mt-1.5 max-w-[600px] text-[13px] leading-relaxed text-muted-foreground">
+      <p className="mt-1.5 max-w-[600px] text-body leading-relaxed text-muted-foreground">
         Emits synthetic <span className="text-foreground">{technique.log_type}:{technique.subtype}</span>{" "}
         telemetry that exercises <span className="text-foreground">{technique.ndr_rule}</span>.
       </p>
       <div className="mt-3 flex flex-wrap items-center gap-1.5">
         {technique.tactics.map((t) => (
-          <span key={t} className="rounded bg-secondary px-1.5 py-0.5 text-[10.5px] text-secondary-foreground">
+          <span key={t} className="rounded bg-secondary px-1.5 py-0.5 text-label text-secondary-foreground">
             {t}
           </span>
         ))}
@@ -162,23 +162,23 @@ export function TechniqueDetail({ technique, vendor }: Props) {
       {/* detail cards */}
       <div className="mt-4 grid gap-4 md:grid-cols-2">
         <Card title="What the detection looks for">
-          <p className="mb-3 text-[12.5px] leading-relaxed text-muted-foreground">
+          <p className="mb-3 text-body leading-relaxed text-muted-foreground">
             The rule keys on the fields that move against a steady baseline.
           </p>
-          <div className="mb-1 text-[10.5px] font-semibold uppercase tracking-wide text-signal/90">Signal (varied)</div>
+          <div className="mb-1 text-label font-semibold uppercase tracking-wide text-signal/90">Signal (varied)</div>
           <div className="mb-3 flex flex-wrap gap-1.5">
             {technique.cef_fields_varied.map((f) => (
               <Chip key={f} label={f} signal />
             ))}
           </div>
-          <div className="mb-1 text-[10.5px] font-semibold uppercase tracking-wide text-text-3">Held constant</div>
+          <div className="mb-1 text-label font-semibold uppercase tracking-wide text-text-3">Held constant</div>
           <div className="mb-3 flex flex-wrap gap-1.5">
             {technique.cef_fields_held.map((f) => (
               <Chip key={f} label={f} />
             ))}
           </div>
           {technique.benign_baseline && (
-            <p className="border-t border-border/60 pt-2.5 text-[12px] leading-relaxed text-muted-foreground">
+            <p className="border-t border-border/60 pt-2.5 text-body leading-relaxed text-muted-foreground">
               <span className="text-text-3">Baseline · </span>
               {technique.benign_baseline}
             </p>
@@ -194,11 +194,11 @@ export function TechniqueDetail({ technique, vendor }: Props) {
           <Field k="Intensities" v={intens.join(" · ")} />
           {paramKeys.length > 0 && (
             <div className="mt-3">
-              <div className="mb-1.5 text-[10.5px] font-semibold uppercase tracking-wide text-text-3">
+              <div className="mb-1.5 text-label font-semibold uppercase tracking-wide text-text-3">
                 Intensity presets
               </div>
               <div className="overflow-x-auto">
-                <table className="w-full border-collapse font-mono text-[11px]">
+                <table className="w-full border-collapse font-mono text-micro">
                   <thead>
                     <tr className="text-text-3">
                       <th className="py-1 text-left font-medium"> </th>
@@ -230,7 +230,7 @@ export function TechniqueDetail({ technique, vendor }: Props) {
         <section className="min-w-0 rounded-lg border bg-card p-4 md:col-span-2">
           <div className="mb-3 flex items-center justify-between">
             <div className="u-label">What the logs will show · {vendorLabel(vendor)}</div>
-            <span className="font-mono text-[10.5px] text-text-3">
+            <span className="font-mono text-label text-text-3">
               {technique.log_type}:{technique.subtype} · sig {technique.signature_id}
             </span>
           </div>
@@ -238,7 +238,7 @@ export function TechniqueDetail({ technique, vendor }: Props) {
           {distEntries.length > 0 && (
             <div className="mt-3 grid gap-x-6 gap-y-1.5 sm:grid-cols-2">
               {distEntries.map(([k, v]) => (
-                <div key={k} className="flex items-baseline gap-2 text-[11.5px]">
+                <div key={k} className="flex items-baseline gap-2 text-label">
                   <span className="shrink-0 font-mono text-text-3">{k}</span>
                   <span className="text-muted-foreground">{fmt(v)}</span>
                 </div>
@@ -249,7 +249,7 @@ export function TechniqueDetail({ technique, vendor }: Props) {
       </div>
 
       {(technique.references.length > 0 || technique.safety_notes) && (
-        <div className="mt-4 flex flex-wrap items-start gap-x-8 gap-y-2 px-1 text-[11.5px] text-text-3">
+        <div className="mt-4 flex flex-wrap items-start gap-x-8 gap-y-2 px-1 text-label text-text-3">
           {technique.references.length > 0 && (
             <div>
               <span className="font-semibold uppercase tracking-wide text-text-3">Refs · </span>
diff --git a/webui/src/components/TechniqueDiagram.tsx b/webui/src/components/TechniqueDiagram.tsx
index 488efec..c1d0111 100644
--- a/webui/src/components/TechniqueDiagram.tsx
+++ b/webui/src/components/TechniqueDiagram.tsx
@@ -99,7 +99,7 @@ function mono(
   y: number,
   text: string,
   fill = FG,
-  size = 10,
+  size = 11.5,
   anchor: "start" | "middle" | "end" = "middle",
 ) {
   return (
@@ -122,7 +122,7 @@ function Glyph({ arch }: { arch: Arch }) {
             </g>
           ))}
           <line x1={178} y1={YC + 24} x2={226} y2={YC + 24} stroke={T4} strokeWidth={1} />
-          {mono(202, YC + 21, "Δt", T3, 9)}
+          {mono(202, YC + 21, "Δt", T3, 10.5)}
         </g>
       );
     }
@@ -138,7 +138,7 @@ function Glyph({ arch }: { arch: Arch }) {
               <circle cx={px} cy={y} r={3} fill={i === 3 ? SIG : CARD} stroke={i === 3 ? SIG : EDGE} strokeWidth={1} />
             </g>
           ))}
-          {mono(px + 34, YC + 3, "dpt↑", T3, 9)}
+          {mono(px + 34, YC + 3, "dpt↑", T3, 10.5)}
         </g>
       );
     }
@@ -153,7 +153,7 @@ function Glyph({ arch }: { arch: Arch }) {
               <circle cx={x} cy={YC + 42} r={3} fill={CARD} stroke={EDGE} strokeWidth={1} />
             </g>
           ))}
-          {mono(338, YC + 62, "dst .1 → .254", T3, 9)}
+          {mono(338, YC + 62, "dst .1 → .254", T3, 10.5)}
         </g>
       );
     }
@@ -186,7 +186,7 @@ function Glyph({ arch }: { arch: Arch }) {
           {mono(321, YC + 4, "kf7x…q4z.sync.example.net", SIG, 10)}
           <line x1={428} y1={YC} x2={474} y2={YC} stroke={EDGE} strokeWidth={1.2} />
           <circle cx={480} cy={YC} r={4} fill={CARD} stroke={EDGE} strokeWidth={1} />
-          {mono(480, YC + 20, "resolver", T3, 9)}
+          {mono(480, YC + 20, "resolver", T3, 10.5)}
         </g>
       );
     }
@@ -202,7 +202,7 @@ function Glyph({ arch }: { arch: Arch }) {
           <path d={`M176 ${YC - 4} L430 ${YC - 16} L430 ${YC - 22} L470 ${YC} L430 ${YC + 22} L430 ${YC + 16} L176 ${YC + 4} Z`} fill="url(#volArrow)" />
           <rect x={200} y={YC + 30} width={240} height={9} rx={4.5} fill={CARD} stroke={HAIR} strokeWidth={1} />
           <rect x={202} y={YC + 32} width={206} height={5} rx={2.5} fill={SIG} />
-          {mono(320, YC + 56, "out ≫ in, sustained", T3, 9)}
+          {mono(320, YC + 56, "out ≫ in, sustained", T3, 10.5)}
         </g>
       );
     }
@@ -214,8 +214,8 @@ function Glyph({ arch }: { arch: Arch }) {
           {xs.map((x, i) =>
             i < 4 ? <Cross key={i} x={x} y={YC} s={5} color={RED} /> : <Check key={i} x={x} y={YC} color={SIG} />,
           )}
-          {mono(436, YC + 22, "success", SIG, 9)}
-          {mono(256, YC + 22, "fail ×N", T3, 9)}
+          {mono(436, YC + 22, "success", SIG, 10.5)}
+          {mono(256, YC + 22, "fail ×N", T3, 10.5)}
         </g>
       );
     }
@@ -233,7 +233,7 @@ function Glyph({ arch }: { arch: Arch }) {
               <Cross x={434} y={y} s={4} color={RED} />
             </g>
           ))}
-          {mono(360, YC + 74, "act=deny burst", T3, 9)}
+          {mono(360, YC + 74, "act=deny burst", T3, 10.5)}
         </g>
       );
     }
@@ -258,8 +258,8 @@ function Glyph({ arch }: { arch: Arch }) {
             d={pointsStar(452, 74, 6.5, 3)}
             fill={SIG}
           />
-          {mono(452, 56, "new dst", SIG, 9)}
-          {mono(300, 172, "known baseline", T3, 9)}
+          {mono(452, 56, "new dst", SIG, 10.5)}
+          {mono(300, 172, "known baseline", T3, 10.5)}
         </g>
       );
     }
@@ -271,7 +271,7 @@ function Glyph({ arch }: { arch: Arch }) {
           <path d={`${d} L482 ${base + 2} L172 ${base + 2} Z`} fill={SIG} opacity={0.13} />
           <path d={d} fill="none" stroke={SIG} strokeWidth={2} strokeLinejoin="round" strokeLinecap="round" />
           <line x1={172} y1={base} x2={482} y2={base} stroke={T4} strokeWidth={0.8} strokeDasharray="2 3" />
-          {mono(344, base - 74, "×20 events/s", SIG, 9)}
+          {mono(344, base - 74, "×20 events/s", SIG, 10.5)}
         </g>
       );
     }
@@ -281,7 +281,7 @@ function Glyph({ arch }: { arch: Arch }) {
           <path d={`M212 158 Q320 46 452 84`} fill="none" stroke={SIG} strokeWidth={1.6} strokeDasharray="4 4" />
           <Pin x={208} y={158} label="geo A" />
           <Pin x={452} y={84} label="geo B" accent />
-          {mono(332, 150, "Δt ≪ travel time", T3, 9)}
+          {mono(332, 150, "Δt ≪ travel time", T3, 10.5)}
         </g>
       );
     }
@@ -305,7 +305,7 @@ function Pin({ x, y, label, accent }: { x: number; y: number; label: string; acc
     <g>
       <path d={`M${x} ${y + 8} C${x - 8} ${y - 2} ${x - 6} ${y - 12} ${x} ${y - 12} C${x + 6} ${y - 12} ${x + 8} ${y - 2} ${x} ${y + 8} Z`} fill={CARD} stroke={c} strokeWidth={1.3} />
       <circle cx={x} cy={y - 5} r={2.4} fill={c} />
-      {mono(x, y + 22, label, accent ? SIG : T3, 9)}
+      {mono(x, y + 22, label, accent ? SIG : T3, 10.5)}
     </g>
   );
 }
@@ -327,13 +327,13 @@ export function TechniqueDiagram({ technique }: { technique: Technique }) {
       <title>{`${technique.name}: ${CAPTION[arch]}`}</title>
 
       {/* zone labels */}
-      <text x={24} y={26} fontFamily="'IBM Plex Sans',sans-serif" fontSize={9.5} letterSpacing="1.4" fill={T3}>
+      <text x={24} y={26} fontFamily="'IBM Plex Sans',sans-serif" fontSize={11} letterSpacing="1.4" fill={T3}>
         SOURCE
       </text>
-      <text x={320} y={26} textAnchor="middle" fontFamily="'IBM Plex Sans',sans-serif" fontSize={9.5} letterSpacing="1.4" fill={T3}>
+      <text x={320} y={26} textAnchor="middle" fontFamily="'IBM Plex Sans',sans-serif" fontSize={11} letterSpacing="1.4" fill={T3}>
         {CAPTION[arch].toUpperCase()}
       </text>
-      <text x={616} y={26} textAnchor="end" fontFamily="'IBM Plex Sans',sans-serif" fontSize={9.5} letterSpacing="1.4" fill={T3}>
+      <text x={616} y={26} textAnchor="end" fontFamily="'IBM Plex Sans',sans-serif" fontSize={11} letterSpacing="1.4" fill={T3}>
         DETECTION
       </text>
 
@@ -342,7 +342,7 @@ export function TechniqueDiagram({ technique }: { technique: Technique }) {
 
       {/* source chip */}
       <rect x={22} y={YC - 18} width={104} height={36} rx={7} fill={CARD} stroke={HAIR} strokeWidth={1} />
-      <text x={74} y={YC - 2} textAnchor="middle" fontFamily="'IBM Plex Sans',sans-serif" fontSize={11} fontWeight={600} fill={FG}>
+      <text x={74} y={YC - 2} textAnchor="middle" fontFamily="'IBM Plex Sans',sans-serif" fontSize={12.5} fontWeight={600} fill={FG}>
         {source[0]}
       </text>
       {mono(74, YC + 12, source[1], T3, 9.5)}
@@ -353,14 +353,14 @@ export function TechniqueDiagram({ technique }: { technique: Technique }) {
       {/* detection chip */}
       <rect x={512} y={YC - 20} width={106} height={40} rx={7} fill="hsl(var(--signal) / 0.06)" stroke={SIG} strokeWidth={1.2} />
       <circle cx={526} cy={YC - 8} r={2.8} fill={SIG} style={{ animation: "rsig 1.8s ease-in-out infinite" }} />
-      {mono(569, YC - 4, technique.ndr_uc, FG, 10)}
-      {mono(565, YC + 12, technique.ndr_rule, T3, 8.5)}
+      {mono(569, YC - 4, technique.ndr_uc, FG, 11)}
+      {mono(565, YC + 12, technique.ndr_rule, T3, 10.5)}
 
       {/* varied fields = the emitted signal */}
-      <text x={128} y={206} fontFamily="'IBM Plex Sans',sans-serif" fontSize={9.5} letterSpacing="1.2" fill={T3}>
+      <text x={128} y={206} fontFamily="'IBM Plex Sans',sans-serif" fontSize={11} letterSpacing="1.2" fill={T3}>
         SIGNAL FIELDS
       </text>
-      {mono(214, 206, technique.cef_fields_varied.join("  ·  ") || "—", SIG, 10, "start")}
+      {mono(238, 206, technique.cef_fields_varied.join("  ·  ") || "—", SIG, 11, "start")}
     </svg>
   );
 }
diff --git a/webui/src/index.css b/webui/src/index.css
index 6eeaae7..8389783 100644
--- a/webui/src/index.css
+++ b/webui/src/index.css
@@ -114,9 +114,12 @@
   background-size: 100% 100%, 34px 34px, 34px 34px;
 }
 
-/* Uppercase micro-label used across the instrument UI. */
+/* Uppercase micro-label used across the instrument UI.
+   Was 10px, which was the single most common size on the rendered page. Uppercase
+   plus letter-spacing at that size is the hardest combination here to read, and
+   these are navigation labels an operator has to read to use the tool. */
 .u-label {
-  font-size: 10px;
+  font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.11em;
   font-weight: 600;
@@ -140,7 +143,7 @@
    itself rather than push the page sideways. */
 .doc-prose {
   color: hsl(var(--foreground));
-  font-size: 13.5px;
+  font-size: 15px;
   line-height: 1.75;
 }
 .doc-prose h1,
@@ -204,7 +207,7 @@
 .doc-prose pre code {
   background: none;
   padding: 0;
-  font-size: 11.5px;
+  font-size: 12.5px;
   line-height: 1.7;
 }
 .doc-prose blockquote {
@@ -219,7 +222,7 @@
   overflow-x: auto;
   border-collapse: collapse;
   margin: 1em 0;
-  font-size: 12px;
+  font-size: 12.5px;
 }
 .doc-prose th,
 .doc-prose td {
diff --git a/webui/src/lib/catalogView.test.ts b/webui/src/lib/catalogView.test.ts
index fc8ba0c..988d38c 100644
--- a/webui/src/lib/catalogView.test.ts
+++ b/webui/src/lib/catalogView.test.ts
@@ -185,3 +185,37 @@ describe("filterTechniques", () => {
     ]);
   });
 });
+
+// The type scale.
+//
+// Before it there were eleven hardcoded sizes across 84 call sites and no scale
+// in the design doc at all. Measured on the rendered page, 58 of 104 text
+// elements sat below 12px and only 3 reached the 16px browser default. The
+// smallest thing on screen was an 8.5px rule id inside the signal-path diagram.
+//
+// This asserts the scale exists and stays ordered. It cannot catch a component
+// picking the wrong rung, which is a judgement call, but it does catch the scale
+// being quietly widened back out into eleven ad hoc values.
+describe("type scale", () => {
+  it("is ordered, and nothing reads below 11px", async () => {
+    // Imported as raw text, not as a module. The config is plain JS with no
+    // type declaration, so a normal import fails `tsc` under noImplicitAny, and
+    // the frontend build, the installer job and the wheel job all run that
+    // build. `?raw` is typed as string by vite/client, so this stays type-clean.
+    const source = (await import("../../tailwind.config.js?raw")).default;
+    const px: Record<string, number> = {};
+    for (const [, name, value] of source.matchAll(
+      /(\w+):\s*\["([0-9.]+)px"/g,
+    )) {
+      px[name] = parseFloat(value);
+    }
+
+    expect(px.micro).toBeGreaterThanOrEqual(11);
+    expect(px.label).toBeGreaterThan(px.micro);
+    expect(px.body).toBeGreaterThan(px.label);
+    expect(px.lede).toBeGreaterThan(px.body);
+    expect(px.title).toBeGreaterThan(px.lede);
+    // Prose has to clear the size the old UI used for everything.
+    expect(px.body).toBeGreaterThanOrEqual(14);
+  });
+});
diff --git a/webui/tailwind.config.js b/webui/tailwind.config.js
index 9f3ea5c..032ef2d 100644
--- a/webui/tailwind.config.js
+++ b/webui/tailwind.config.js
@@ -18,6 +18,27 @@ export default {
   content: ["./index.html", "./src/**/*.{ts,tsx}"],
   theme: {
     extend: {
+      // The type scale.
+      //
+      // Before this there were ELEVEN hardcoded sizes across 84 call sites
+      // (9, 9.5, 10.5, 11, 11.5, 12, 12.5, 13, 14, 23, 25) and no scale in the
+      // design doc at all. That is not a scale, it is eleven separate decisions
+      // made one component at a time, each locally reasonable and never compared.
+      // Measured on the rendered page: 58 of 104 text elements sat below 12px and
+      // only 3 reached the 16px browser default.
+      //
+      // The distinction that matters is READ versus SCAN. Prose is read in
+      // sentences and needs size; tabular and monospace data is scanned, and
+      // density genuinely helps there. So `data` and `mono` stay tight while
+      // `body` and `lede` grow, and nothing is below 11px any more.
+      fontSize: {
+        micro: ["11px", { lineHeight: "1.45" }],   // was 9 / 9.5, diagram captions
+        label: ["12px", { lineHeight: "1.5" }],    // was 10 / 10.5, section + nav labels
+        data: ["12.5px", { lineHeight: "1.55" }],  // scanned values, tags, chips
+        body: ["14px", { lineHeight: "1.6" }],     // was 13, prose you actually read
+        lede: ["15px", { lineHeight: "1.6" }],     // the technique objective
+        title: ["24px", { lineHeight: "1.25" }],
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",