diff --git a/apps/ui/src/components/metagraphed/account-history-chart.tsx b/apps/ui/src/components/metagraphed/account-history-chart.tsx
index 1994fd3982..de9731da05 100644
--- a/apps/ui/src/components/metagraphed/account-history-chart.tsx
+++ b/apps/ui/src/components/metagraphed/account-history-chart.tsx
@@ -172,6 +172,7 @@ export function AccountHistoryChart({ ss58 }: { ss58: string }) {
               glass tier (mg-glass would add unwanted blur; mg-glass-soft's 60%
               visibly lightens this segmented-toggle track). Kept as a bare
               fraction rather than a wrong tier. */}
+          {/* eslint-disable-next-line no-restricted-syntax -- #7842: bg-card/80 toggle track has no clean glass tier (mg-glass adds blur, mg-glass-soft lightens it -- see comment above); a pill toggle, not a card shell */}
           <div className="inline-flex flex-wrap rounded-full border border-border/80 bg-card/80 p-1 shadow-[var(--mg-shadow-pill)]">
             <button
               type="button"
@@ -204,7 +205,7 @@ export function AccountHistoryChart({ ss58 }: { ss58: string }) {
         </div>
       ) : null}
 
-      <div className="overflow-hidden rounded-2xl border border-border/80 bg-card/95 mg-card-glow">
+      <div className="overflow-hidden rounded-2xl border border-border/80 mg-glass mg-card-glow">
         <div className="grid gap-4 border-b border-border/70 px-4 py-4 md:grid-cols-3">
           <MetricBlock
             label="Total activity"
diff --git a/apps/ui/src/components/metagraphed/analytics/coverage-matrix.tsx b/apps/ui/src/components/metagraphed/analytics/coverage-matrix.tsx
index bb28fd5aeb..c780e89079 100644
--- a/apps/ui/src/components/metagraphed/analytics/coverage-matrix.tsx
+++ b/apps/ui/src/components/metagraphed/analytics/coverage-matrix.tsx
@@ -242,7 +242,7 @@ function CompletenessChip({ value, netuid }: { value: number; netuid: number })
     <span
       title={`SN${netuid}: ${pct}% of required public-interface kinds present`}
       className={classNames(
-        "ml-auto inline-flex shrink-0 items-center rounded-full border px-1.5 py-0.5 font-mono text-[9px] font-semibold tabular-nums md:hidden",
+        "ml-auto inline-flex shrink-0 items-center rounded-full border px-1.5 py-0.5 mg-type-data-sm font-semibold tabular-nums md:hidden",
         tone,
       )}
     >
diff --git a/apps/ui/src/components/metagraphed/analytics/drift-activity.tsx b/apps/ui/src/components/metagraphed/analytics/drift-activity.tsx
index c3e8b0544b..6794a3992b 100644
--- a/apps/ui/src/components/metagraphed/analytics/drift-activity.tsx
+++ b/apps/ui/src/components/metagraphed/analytics/drift-activity.tsx
@@ -89,8 +89,11 @@ export function DriftActivity({ schemas, fromPath }: Props) {
           <span className="text-health-warn">{drifting.length} drifting</span>
           <span className="text-ink-muted"> · {stable.length} stable</span>
         </div>
-        <div
-          className="ml-auto inline-flex items-center rounded-md border border-border bg-card p-0.5"
+        <Panel
+          as="div"
+          flush
+          className="ml-auto"
+          bodyClassName="inline-flex items-center p-0.5"
           role="tablist"
           aria-label="Drift scope"
         >
@@ -112,7 +115,7 @@ export function DriftActivity({ schemas, fromPath }: Props) {
               </button>
             );
           })}
-        </div>
+        </Panel>
       </div>
 
       {/* Drifting list */}
@@ -200,7 +203,7 @@ function DriftRow({ schema, onClick }: { schema: SchemaInfo; onClick: () => void
               </span>
             ) : null}
           </div>
-          <div className="mt-0.5 flex flex-wrap items-center gap-2 font-mono text-[10.5px] text-ink-muted">
+          <div className="mt-0.5 flex flex-wrap items-center gap-2 mg-type-data text-ink-muted">
             {added != null ? <span className="text-health-ok">+{added}</span> : null}
             {removed != null ? <span className="text-health-down">−{removed}</span> : null}
             {schema.previous_hash && schema.hash ? (
@@ -263,6 +266,7 @@ function WeightBar({ weight: w, tone }: { weight: number; tone: "warn" | "muted"
             key={i}
             aria-hidden
             className={classNames(
+              // eslint-disable-next-line no-restricted-syntax -- heatmap/mosaic micro-radius: documented residual (CONTRIBUTING 'Border radius'); the smallest named step (rounded, 4px) would materially change these dense grids
               "h-3 w-1 rounded-[1px]",
               on ? (tone === "warn" ? "bg-health-warn" : "bg-ink-strong") : "bg-ink-subtle/25",
             )}
diff --git a/apps/ui/src/components/metagraphed/analytics/incidents-timeline.tsx b/apps/ui/src/components/metagraphed/analytics/incidents-timeline.tsx
index 4e1366c763..69c9965c5c 100644
--- a/apps/ui/src/components/metagraphed/analytics/incidents-timeline.tsx
+++ b/apps/ui/src/components/metagraphed/analytics/incidents-timeline.tsx
@@ -220,7 +220,7 @@ export function IncidentsTimeline({ className }: { className?: string }) {
                   </div>
                 </div>
                 <TimelineTrack now={now} totalMs={totalMs} items={r.items} />
-                <div className="flex items-center justify-end gap-2 text-[11px]">
+                <div className="flex items-center justify-end gap-2 mg-type-caption">
                   {r.netuid != null ? (
                     <Link
                       to="/subnets/$netuid"
diff --git a/apps/ui/src/components/metagraphed/analytics/registry-depth.tsx b/apps/ui/src/components/metagraphed/analytics/registry-depth.tsx
index 6f08d8ebd1..c51455819c 100644
--- a/apps/ui/src/components/metagraphed/analytics/registry-depth.tsx
+++ b/apps/ui/src/components/metagraphed/analytics/registry-depth.tsx
@@ -346,7 +346,7 @@ function QueueRow({ row }: { row: CoverageDepthQueueRow }) {
             {row.top_gap_codes.slice(0, 4).map((g) => (
               <span
                 key={g}
-                className="rounded border border-dashed border-ink-subtle bg-paper px-1 py-0.5 font-mono text-[9px] text-ink-muted"
+                className="rounded border border-dashed border-ink-subtle bg-paper px-1 py-0.5 mg-type-data-sm text-ink-muted"
               >
                 {g}
               </span>
diff --git a/apps/ui/src/components/metagraphed/analytics/schema-drift-matrix.tsx b/apps/ui/src/components/metagraphed/analytics/schema-drift-matrix.tsx
index 5559d0c25c..ad70f8600d 100644
--- a/apps/ui/src/components/metagraphed/analytics/schema-drift-matrix.tsx
+++ b/apps/ui/src/components/metagraphed/analytics/schema-drift-matrix.tsx
@@ -293,7 +293,7 @@ function DriftTile({
         />
         <span className="mg-type-data text-ink-strong truncate max-w-[180px]">{label}</span>
         {schema.updated_at ? (
-          <span className="font-mono text-[9px] text-ink-muted shrink-0">
+          <span className="mg-type-data-sm text-ink-muted shrink-0">
             <TimeAgo at={schema.updated_at} />
           </span>
         ) : null}
@@ -301,6 +301,7 @@ function DriftTile({
       {evidenceHref ? (
         <a
           href={evidenceHref}
+          // eslint-disable-next-line no-restricted-syntax -- evidence link needs onClick stopPropagation (row is clickable); <ExternalLink> doesn't forward onClick
           target="_blank"
           rel="noopener noreferrer"
           onClick={(e) => e.stopPropagation()}
diff --git a/apps/ui/src/components/metagraphed/analytics/status-mosaic.tsx b/apps/ui/src/components/metagraphed/analytics/status-mosaic.tsx
index 91a7e4a518..614a5cb3e9 100644
--- a/apps/ui/src/components/metagraphed/analytics/status-mosaic.tsx
+++ b/apps/ui/src/components/metagraphed/analytics/status-mosaic.tsx
@@ -96,6 +96,7 @@ export function StatusMosaic({ className, limit = 240 }: { className?: string; l
             const tile = (
               <span
                 className={classNames(
+                  // eslint-disable-next-line no-restricted-syntax -- heatmap/mosaic micro-radius: documented residual (CONTRIBUTING 'Border radius'); the smallest named step (rounded, 4px) would materially change these dense grids
                   "block aspect-square rounded-[2px] transition-transform hover:scale-110 hover:ring-1 hover:ring-accent/60",
                   TONE[state] ?? TONE.unknown,
                 )}
@@ -110,6 +111,7 @@ export function StatusMosaic({ className, limit = 240 }: { className?: string; l
                   <Link
                     to="/subnets/$netuid"
                     params={{ netuid: e.netuid }}
+                    // eslint-disable-next-line no-restricted-syntax -- heatmap/mosaic micro-radius: documented residual (CONTRIBUTING 'Border radius'); the smallest named step (rounded, 4px) would materially change these dense grids
                     className="block focus:outline-none focus-visible:ring-1 focus-visible:ring-accent rounded-[2px]"
                   >
                     {tile}
diff --git a/apps/ui/src/components/metagraphed/analytics/uptime-timeline.tsx b/apps/ui/src/components/metagraphed/analytics/uptime-timeline.tsx
index 46b629e37b..bfbe9209fd 100644
--- a/apps/ui/src/components/metagraphed/analytics/uptime-timeline.tsx
+++ b/apps/ui/src/components/metagraphed/analytics/uptime-timeline.tsx
@@ -147,7 +147,7 @@ export function UptimeTimeline({ netuid, className }: { netuid: number; classNam
           {usingFallbackWindow ? <span className="text-ink-muted/60"> (7d window)</span> : null}
         </div>
         {freshLine ? (
-          <span className="font-mono text-[9.5px] text-ink-muted/70">· {freshLine}</span>
+          <span className="mg-type-data-sm text-ink-muted/70">· {freshLine}</span>
         ) : null}
         {/* Aggregate window stats. */}
         <div className="ml-auto flex items-center gap-3 mg-type-data-sm text-ink-muted">
@@ -198,7 +198,7 @@ export function UptimeTimeline({ netuid, className }: { netuid: number; classNam
                   aria-hidden
                 />
               </div>
-              <div className="mt-1 flex items-center gap-3 font-mono text-[9.5px] text-ink-muted tabular-nums">
+              <div className="mt-1 flex items-center gap-3 mg-type-data-sm text-ink-muted tabular-nums">
                 {typeof s.samples === "number" ? (
                   <span>{formatNumber(s.samples)} samples</span>
                 ) : null}
@@ -270,7 +270,7 @@ export function UptimeTimeline({ netuid, className }: { netuid: number; classNam
                     <button
                       type="button"
                       aria-label={aria}
-                      className="inline-flex items-center gap-1.5 rounded border border-border bg-card px-1.5 py-0.5 font-mono text-[9.5px] text-ink-muted transition-colors hover:text-ink-strong focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                      className="inline-flex items-center gap-1.5 rounded border border-border bg-card px-1.5 py-0.5 mg-type-data-sm text-ink-muted transition-colors hover:text-ink-strong focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                     >
                       <span
                         aria-hidden
@@ -280,7 +280,7 @@ export function UptimeTimeline({ netuid, className }: { netuid: number; classNam
                       <span className="tabular-nums">{dur}</span>
                     </button>
                   </TooltipTrigger>
-                  <TooltipContent side="top" className="max-w-xs text-[11px] leading-relaxed">
+                  <TooltipContent side="top" className="max-w-xs mg-type-caption">
                     <div className="mg-type-micro text-primary-foreground/80">
                       {sev} · {dur}
                     </div>
diff --git a/apps/ui/src/components/metagraphed/api-drawer.tsx b/apps/ui/src/components/metagraphed/api-drawer.tsx
index 13bc6af2b7..8a99eda04b 100644
--- a/apps/ui/src/components/metagraphed/api-drawer.tsx
+++ b/apps/ui/src/components/metagraphed/api-drawer.tsx
@@ -15,7 +15,7 @@ import {
   TooltipTrigger,
   CopyableCode,
   Kbd,
-  safeExternalUrl,
+  ExternalLink,
 } from "@jsonbored/ui-kit";
 import { classNames } from "@/lib/metagraphed/format";
 import { Panel } from "@/components/metagraphed/primitives";
@@ -51,7 +51,7 @@ export function ApiDrawerTrigger() {
           <Code2 className="size-4" />
         </button>
       </TooltipTrigger>
-      <TooltipContent side="bottom" className="text-[11px]">
+      <TooltipContent side="bottom" className="mg-type-caption">
         View in API · <Kbd>⌘</Kbd>
         <Kbd>J</Kbd>
       </TooltipContent>
@@ -89,7 +89,7 @@ export function ApiDrawer() {
           <SheetTitle className="font-display text-base font-semibold text-ink-strong inline-flex items-center gap-2">
             <Code2 className="size-4 text-accent" /> API source
           </SheetTitle>
-          <p className="text-[11px] text-ink-muted leading-relaxed">
+          <p className="mg-type-caption text-ink-muted">
             Every screen in Metagraphed is powered by a documented JSON endpoint. Copy the URL, open
             it raw, or grab the curl snippet.
           </p>
@@ -167,15 +167,14 @@ function ApiSourceBody({ source }: { source: ApiSource }) {
               GET
             </span>
             <span className="min-w-0 flex-1">{fullUrl}</span>
-            <a
-              href={safeExternalUrl(fullUrl)}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Open raw"
+            <ExternalLink
+              bare
+              href={fullUrl}
+              ariaLabel="Open raw"
               className="text-ink-muted hover:text-ink-strong"
             >
               <ExternalLinkIcon className="size-3.5" />
-            </a>
+            </ExternalLink>
           </div>
         </Panel>
         <div className="flex flex-wrap gap-1.5">
diff --git a/apps/ui/src/components/metagraphed/api-keys-manager.tsx b/apps/ui/src/components/metagraphed/api-keys-manager.tsx
index 4082a2ccc0..d72d1855ea 100644
--- a/apps/ui/src/components/metagraphed/api-keys-manager.tsx
+++ b/apps/ui/src/components/metagraphed/api-keys-manager.tsx
@@ -101,7 +101,7 @@ function SignInPrompt({
       {error ? (
         <div
           role="alert"
-          className="rounded border border-health-down/30 bg-health-down/5 px-2 py-1.5 text-[11px] text-health-down"
+          className="rounded border border-health-down/30 bg-health-down/5 px-2 py-1.5 mg-type-caption text-health-down"
         >
           {error}
         </div>
@@ -165,13 +165,13 @@ function ApiKeysPanel({
   return (
     <div className="space-y-4">
       <div className="flex flex-wrap items-center justify-between gap-2">
-        <span className="text-[11px] text-ink-muted">
+        <span className="mg-type-caption text-ink-muted">
           Tier: <span className="font-mono text-ink-strong">{tier ?? "free"}</span>
         </span>
         <button
           type="button"
           onClick={onSignOut}
-          className="rounded border border-border bg-card px-2 py-1 text-[11px] text-ink-muted hover:text-ink-strong hover:border-ink/30"
+          className="rounded border border-border bg-card px-2 py-1 mg-type-caption text-ink-muted hover:text-ink-strong hover:border-ink/30"
         >
           Sign out
         </button>
@@ -232,7 +232,7 @@ function ApiKeysPanel({
           >
             <div className="min-w-0">
               <div className="font-mono mg-type-caption text-ink-strong truncate">{key.key_id}</div>
-              <div className="text-[10px] text-ink-muted">
+              <div className="mg-type-caption text-ink-muted">
                 Created {formatTimestamp(key.created_at)} · Last used{" "}
                 {formatTimestamp(key.last_used_at)}
               </div>
@@ -241,7 +241,7 @@ function ApiKeysPanel({
               type="button"
               onClick={() => revokeMutation.mutate(key.key_id)}
               disabled={revokeMutation.isPending && revokeMutation.variables === key.key_id}
-              className="shrink-0 rounded border border-health-down/40 bg-health-down/5 px-2 py-1 text-[11px] font-medium text-health-down hover:bg-health-down/10 disabled:opacity-50"
+              className="shrink-0 rounded border border-health-down/40 bg-health-down/5 px-2 py-1 mg-type-caption font-medium text-health-down hover:bg-health-down/10 disabled:opacity-50"
             >
               {revokeMutation.isPending && revokeMutation.variables === key.key_id
                 ? "Revoking…"
diff --git a/apps/ui/src/components/metagraphed/api-source-footer.tsx b/apps/ui/src/components/metagraphed/api-source-footer.tsx
index 164694d75d..804262b742 100644
--- a/apps/ui/src/components/metagraphed/api-source-footer.tsx
+++ b/apps/ui/src/components/metagraphed/api-source-footer.tsx
@@ -11,7 +11,7 @@ import { useRegisterApiSource } from "@/lib/metagraphed/api-source-context";
 export function ApiSourceFooter({ paths, artifacts }: { paths: string[]; artifacts?: string[] }) {
   useRegisterApiSource(paths, artifacts ?? []);
   return (
-    <footer className="mt-10 border-t border-border pt-4 text-[11px] text-ink-muted">
+    <footer className="mt-10 border-t border-border pt-4 mg-type-caption text-ink-muted">
       <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
         <span className="mg-type-micro">data sources</span>
         {paths.map((p) => (
diff --git a/apps/ui/src/components/metagraphed/app-shell.tsx b/apps/ui/src/components/metagraphed/app-shell.tsx
index 85e959a595..3c35fa00d2 100644
--- a/apps/ui/src/components/metagraphed/app-shell.tsx
+++ b/apps/ui/src/components/metagraphed/app-shell.tsx
@@ -28,6 +28,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
   CopyableCode,
+  ExternalLink,
   safeExternalUrl,
   DiscordIcon,
   TimeAgo,
@@ -271,7 +272,7 @@ export function AppShell({
                       <Webhook className="size-3.5" aria-hidden="true" />
                     </Link>
                   </TooltipTrigger>
-                  <TooltipContent side="bottom" className="text-[11px]">
+                  <TooltipContent side="bottom" className="mg-type-caption">
                     Developer settings — webhook subscriptions
                   </TooltipContent>
                 </Tooltip>
@@ -424,7 +425,7 @@ function ApiBaseRow() {
     <CopyableCode
       value={`${base}/api/v1`}
       truncate={true}
-      className="w-full max-w-full text-[10px]"
+      className="w-full max-w-full mg-type-caption"
     />
   );
 }
@@ -450,40 +451,37 @@ function SiteFooter() {
             data is public, chain-direct, and verifiable.
           </p>
           <div className="mt-4 flex items-center gap-1">
-            <a
+            <ExternalLink
+              bare
               href={GITHUB_HREF}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="GitHub repository"
+              ariaLabel="GitHub repository"
               title="Open source on GitHub"
               className="inline-flex items-center justify-center rounded-md size-8 text-ink-muted hover:text-ink-strong hover:bg-surface transition-colors"
             >
               <Github className="size-4" />
-            </a>
-            <a
+            </ExternalLink>
+            <ExternalLink
+              bare
               href={DISCORD_HREF}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Discord community"
+              ariaLabel="Discord community"
               title="Join us on Discord"
               className="inline-flex items-center justify-center rounded-md size-8 text-ink-muted hover:text-ink-strong hover:bg-surface transition-colors"
             >
               <DiscordIcon className="size-4" />
-            </a>
+            </ExternalLink>
             {/* #3351: discoverable RSS/Atom feed for the registry-changes feed
                 (/api/v1/feeds/registry, content-negotiated; .rss for a predictable
                 browser click). Same guarded external-link pattern as the openapi
                 link and the GitHub/Discord icons above. */}
-            <a
-              href={safeExternalUrl(`${API_BASE}/api/v1/feeds/registry.rss`)}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Registry changes RSS feed"
+            <ExternalLink
+              bare
+              href={`${API_BASE}/api/v1/feeds/registry.rss`}
+              ariaLabel="Registry changes RSS feed"
               title="Subscribe to the registry-changes feed (RSS)"
               className="inline-flex items-center justify-center rounded-md size-8 text-ink-muted hover:text-ink-strong hover:bg-surface transition-colors"
             >
               <Rss className="size-4" />
-            </a>
+            </ExternalLink>
           </div>
         </div>
         <FooterCol title="Registry">
@@ -586,14 +584,13 @@ function RegistryPulseStrip() {
         </>
       ) : null}
       <span>·</span>
-      <a
-        href={safeExternalUrl(`${API_BASE}/api/v1/openapi.json`)}
-        target="_blank"
-        rel="noopener noreferrer"
+      <ExternalLink
+        bare
+        href={`${API_BASE}/api/v1/openapi.json`}
         className="hover:text-ink-strong transition-colors"
       >
         openapi
-      </a>
+      </ExternalLink>
     </div>
   );
 }
@@ -629,10 +626,9 @@ function EndpointHealthPill() {
     status === "down" ? "unreachable" : status === "checking" ? "checking…" : `${ms} ms`;
   const title = `API endpoint · ${ENDPOINT_LABEL[status]}${ms != null ? ` · ${ms} ms` : ""}`;
   return (
-    <a
-      href={safeExternalUrl(`${base}/api/v1`)}
-      target="_blank"
-      rel="noopener noreferrer"
+    <ExternalLink
+      bare
+      href={`${base}/api/v1`}
       title={title}
       className="shrink-0 inline-flex items-center gap-2 text-ink-muted hover:text-ink-strong transition-colors"
     >
@@ -642,7 +638,7 @@ function EndpointHealthPill() {
         ·
       </span>
       <span>{detail}</span>
-    </a>
+    </ExternalLink>
   );
 }
 
diff --git a/apps/ui/src/components/metagraphed/blocks/author-share-panel.tsx b/apps/ui/src/components/metagraphed/blocks/author-share-panel.tsx
index b68377287b..2c2a0a9b0d 100644
--- a/apps/ui/src/components/metagraphed/blocks/author-share-panel.tsx
+++ b/apps/ui/src/components/metagraphed/blocks/author-share-panel.tsx
@@ -76,7 +76,7 @@ export function AuthorSharePanel({ rows }: { rows: Block[] }) {
                   <div>{formatNumber(count)}</div>
                   <div
                     className={classNames(
-                      "text-[10px]",
+                      "mg-type-caption",
                       heavy ? "text-health-warn-text" : "text-ink-muted",
                     )}
                   >
diff --git a/apps/ui/src/components/metagraphed/blocks/cadence-heatmap.tsx b/apps/ui/src/components/metagraphed/blocks/cadence-heatmap.tsx
index ea22696c8e..776eee80eb 100644
--- a/apps/ui/src/components/metagraphed/blocks/cadence-heatmap.tsx
+++ b/apps/ui/src/components/metagraphed/blocks/cadence-heatmap.tsx
@@ -68,6 +68,7 @@ export function CadenceHeatmap({ rows }: { rows: Block[] }) {
                 to="/blocks/$ref"
                 params={{ ref: String(block.block_number) }}
                 className={classNames(
+                  // eslint-disable-next-line no-restricted-syntax -- heatmap/mosaic micro-radius: documented residual (CONTRIBUTING 'Border radius'); the smallest named step (rounded, 4px) would materially change these dense grids
                   "mg-focus-ring block h-5 w-[10px] rounded-[2px] transition-transform hover:scale-125",
                   tone.cls,
                 )}
@@ -110,6 +111,7 @@ function Legend() {
       <div className="flex flex-wrap items-center gap-1">
         {items.map((i) => (
           <span key={i.label} className="inline-flex items-center gap-1">
+            {/* eslint-disable-next-line no-restricted-syntax -- heatmap/mosaic micro-radius: documented residual (CONTRIBUTING 'Border radius'); the smallest named step (rounded, 4px) would materially change these dense grids */}
             <span className={classNames("inline-block h-2 w-3 rounded-[2px]", i.cls)} />
             <span>{i.label}</span>
           </span>
diff --git a/apps/ui/src/components/metagraphed/blocks/live-block-rail.tsx b/apps/ui/src/components/metagraphed/blocks/live-block-rail.tsx
index 5ebcfca3b1..95b7a43f7d 100644
--- a/apps/ui/src/components/metagraphed/blocks/live-block-rail.tsx
+++ b/apps/ui/src/components/metagraphed/blocks/live-block-rail.tsx
@@ -60,6 +60,7 @@ export function LiveBlockRail() {
             <Link
               to="/blocks/$ref"
               params={{ ref: String(latest.block_number) }}
+              // eslint-disable-next-line no-restricted-syntax -- block-number display at 14px: no mg-type-body utility exists (--mg-type-body is a reserved CSS var per styles.css, not exposed as a class); nearest utility would resize
               className="mg-focus-ring rounded font-mono text-[14px] font-semibold tabular-nums text-ink-strong hover:text-accent"
             >
               #{formatNumber(latest.block_number)}
@@ -114,6 +115,7 @@ export function LiveBlockRail() {
       <div className="flex items-center justify-between gap-3 border-t border-border/60 pt-2 md:border-l md:border-t-0 md:pl-3 md:pt-0">
         <div>
           <div className="mg-type-micro text-ink-muted">Blocks · last 7d</div>
+          {/* eslint-disable-next-line no-restricted-syntax -- block-number display at 14px: no mg-type-body utility exists (--mg-type-body is a reserved CSS var per styles.css, not exposed as a class); nearest utility would resize */}
           <div className="mt-0.5 font-mono text-[14px] font-semibold tabular-nums text-ink-strong">
             {formatNumber(daily.reduce((s, n) => s + n, 0))}
           </div>
diff --git a/apps/ui/src/components/metagraphed/blocks/neighbor-compare.tsx b/apps/ui/src/components/metagraphed/blocks/neighbor-compare.tsx
index 457701f511..391091f9bc 100644
--- a/apps/ui/src/components/metagraphed/blocks/neighbor-compare.tsx
+++ b/apps/ui/src/components/metagraphed/blocks/neighbor-compare.tsx
@@ -106,7 +106,7 @@ function DeltaChip({
           {loading ? "…" : value != null ? formatNumber(value) : "—"}
         </span>
         {delta != null && !loading ? (
-          <span className={classNames("text-[10px]", tone)}>
+          <span className={classNames("mg-type-caption", tone)}>
             {delta > 0 ? "+" : ""}
             {formatNumber(delta)}
           </span>
diff --git a/apps/ui/src/components/metagraphed/charts/activity-heatmap.tsx b/apps/ui/src/components/metagraphed/charts/activity-heatmap.tsx
index cfd833a758..f6917d35da 100644
--- a/apps/ui/src/components/metagraphed/charts/activity-heatmap.tsx
+++ b/apps/ui/src/components/metagraphed/charts/activity-heatmap.tsx
@@ -131,13 +131,14 @@ export function ActivityHeatmap({ netuid, weeks = 12 }: Props) {
                     <div
                       role="button"
                       tabIndex={0}
+                      // eslint-disable-next-line no-restricted-syntax -- heatmap/mosaic micro-radius: documented residual (CONTRIBUTING 'Border radius'); the smallest named step (rounded, 4px) would materially change these dense grids
                       className="mg-focus-ring aspect-square rounded-[2px] border border-border/40"
                       style={{ background: tone(c.score, maxScore) }}
                       aria-label={`${c.key}: ${c.probes} probes, ${c.incidents} incidents`}
                     />
                   </TooltipTrigger>
                   <TooltipContent side="top" className="mg-type-data-sm">
-                    <div className="text-[11px] text-ink-strong">{c.key}</div>
+                    <div className="mg-type-caption text-ink-strong">{c.key}</div>
                     <div>
                       {c.probes} probe{c.probes === 1 ? "" : "s"}
                     </div>
@@ -153,11 +154,12 @@ export function ActivityHeatmap({ netuid, weeks = 12 }: Props) {
             </div>
           ))}
         </div>
-        <div className="mt-3 flex items-center justify-end gap-1.5 font-mono text-[9.5px] text-ink-muted">
+        <div className="mt-3 flex items-center justify-end gap-1.5 mg-type-data-sm text-ink-muted">
           <span>less</span>
           {[0, 0.25, 0.5, 0.75, 1].map((t) => (
             <span
               key={t}
+              // eslint-disable-next-line no-restricted-syntax -- heatmap/mosaic micro-radius: documented residual (CONTRIBUTING 'Border radius'); the smallest named step (rounded, 4px) would materially change these dense grids
               className="size-2.5 rounded-[2px] border border-border/40"
               style={{ background: tone(t * maxScore, maxScore) }}
             />