diff --git a/apps/ui/src/components/metagraphed/gittensor-registered-repos.tsx b/apps/ui/src/components/metagraphed/gittensor-registered-repos.tsx
index 4c64a1d67..8b692cac0 100644
--- a/apps/ui/src/components/metagraphed/gittensor-registered-repos.tsx
+++ b/apps/ui/src/components/metagraphed/gittensor-registered-repos.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { BrandIcon } from "@jsonbored/ui-kit";
+import { BrandIcon, ExternalLink } from "@jsonbored/ui-kit";
 import { Panel } from "@/components/metagraphed/primitives";
 import { adapterQuery } from "@/lib/metagraphed/queries";
 
@@ -63,10 +63,9 @@ export function GittensorRegisteredRepos({ slug }: { slug: string }) {
           const sharePct = typeof row.emission_share === "number" ? row.emission_share * 100 : null;
           return (
             <li key={row.repository}>
-              <a
+              <ExternalLink
+                bare
                 href={repoUrl}
-                target="_blank"
-                rel="noopener noreferrer"
                 className="mg-row-hover flex items-center justify-between gap-2 rounded-md px-2 py-1.5"
               >
                 <span className="flex min-w-0 items-center gap-2">
@@ -79,20 +78,19 @@ export function GittensorRegisteredRepos({ slug }: { slug: string }) {
                 <span className="shrink-0 font-mono mg-type-caption tabular-nums text-ink-muted">
                   {sharePct !== null ? `${sharePct.toFixed(1)}%` : "—"}
                 </span>
-              </a>
+              </ExternalLink>
             </li>
           );
         })}
       </ol>
       {total && total > rows.length ? (
-        <a
+        <ExternalLink
+          bare
           href="https://gittensor.io/repositories"
-          target="_blank"
-          rel="noopener noreferrer"
           className="mt-2 block text-center text-xs text-accent hover:underline"
         >
           View all {total} registered repositories →
-        </a>
+        </ExternalLink>
       ) : null}
     </Panel>
   );
diff --git a/apps/ui/src/components/metagraphed/hero-subnet-chips.tsx b/apps/ui/src/components/metagraphed/hero-subnet-chips.tsx
index 9ca09b10e..5c6c98cc0 100644
--- a/apps/ui/src/components/metagraphed/hero-subnet-chips.tsx
+++ b/apps/ui/src/components/metagraphed/hero-subnet-chips.tsx
@@ -82,6 +82,7 @@ export function HeroSubnetChips({ limit = 14 }: { limit?: number }) {
               // glass tier (mg-glass would add unwanted blur + drop to 80/95%
               // depending on browser support; mg-glass-soft's 60% visibly lightens
               // this chip). Kept as a bare fraction rather than a wrong tier.
+              // eslint-disable-next-line no-restricted-syntax -- see exception above
               "inline-flex items-center gap-2 rounded-full border border-border bg-card/80",
               "px-2.5 py-1.5 hover:border-accent/40 transition-colors",
             )}
diff --git a/apps/ui/src/components/metagraphed/integrability-board.tsx b/apps/ui/src/components/metagraphed/integrability-board.tsx
index 0a2b7835d..579710233 100644
--- a/apps/ui/src/components/metagraphed/integrability-board.tsx
+++ b/apps/ui/src/components/metagraphed/integrability-board.tsx
@@ -78,7 +78,7 @@ export function IntegrabilityBoard() {
               <span className="mg-label">% of subnets</span>
             </div>
             <BarMini data={dimensionData} max={100} />
-            <p className="mt-2 text-[11px] text-ink-muted">
+            <p className="mt-2 mg-type-caption text-ink-muted">
               Lowest-coverage dimensions first — the biggest gaps to fill.
             </p>
           </Panel>
@@ -93,7 +93,7 @@ export function IntegrabilityBoard() {
               <span className="mg-label">subnets</span>
             </div>
             <BarMini data={distribution} />
-            <p className="mt-2 text-[11px] text-ink-muted">
+            <p className="mt-2 mg-type-caption text-ink-muted">
               How subnet completeness scores are distributed across the registry.
             </p>
           </Panel>
diff --git a/apps/ui/src/components/metagraphed/mega-menu-live-preview-link.tsx b/apps/ui/src/components/metagraphed/mega-menu-live-preview-link.tsx
index 028c10aa0..6cf1625f1 100644
--- a/apps/ui/src/components/metagraphed/mega-menu-live-preview-link.tsx
+++ b/apps/ui/src/components/metagraphed/mega-menu-live-preview-link.tsx
@@ -44,7 +44,7 @@ function LiveRowLink({ item, onNavigate, registerItem, itemIndex }: MegaMenuLive
     >
       <span className="min-w-0">
         <span className="block text-sm text-ink-strong truncate">{item.label}</span>
-        <span className="block text-[11px] text-ink-muted truncate">{item.sub}</span>
+        <span className="block mg-type-caption text-ink-muted truncate">{item.sub}</span>
       </span>
       <ArrowUpRight className="size-3 text-ink-muted shrink-0" />
     </Link>
diff --git a/apps/ui/src/components/metagraphed/move-stake-destination-input.tsx b/apps/ui/src/components/metagraphed/move-stake-destination-input.tsx
index 1d0b193d5..f4fb87356 100644
--- a/apps/ui/src/components/metagraphed/move-stake-destination-input.tsx
+++ b/apps/ui/src/components/metagraphed/move-stake-destination-input.tsx
@@ -63,7 +63,7 @@ export function MoveStakeDestinationInput({
 
   return (
     <div className="space-y-4">
-      <div className="rounded border border-border bg-surface/40 px-2.5 py-2 text-[11px] text-ink-muted">
+      <div className="rounded border border-border bg-surface/40 px-2.5 py-2 mg-type-caption text-ink-muted">
         Moving from{" "}
         <span className="font-medium text-ink-strong">
           {originValidatorName ?? shortHash(originHotkey, 6)}
diff --git a/apps/ui/src/components/metagraphed/move-stake-modal.tsx b/apps/ui/src/components/metagraphed/move-stake-modal.tsx
index 2f6ee6cb3..e9baab6ae 100644
--- a/apps/ui/src/components/metagraphed/move-stake-modal.tsx
+++ b/apps/ui/src/components/metagraphed/move-stake-modal.tsx
@@ -274,7 +274,7 @@ function StatusView({
           >
             {shortHash(txHash, 8)}
           </Link>
-          <p className="text-[10px] text-ink-muted">
+          <p className="mg-type-caption text-ink-muted">
             May take a few moments to appear once indexed.
           </p>
         </div>
diff --git a/apps/ui/src/components/metagraphed/nav-mega-menu-content.tsx b/apps/ui/src/components/metagraphed/nav-mega-menu-content.tsx
index af74fe6e6..6fcb0eab9 100644
--- a/apps/ui/src/components/metagraphed/nav-mega-menu-content.tsx
+++ b/apps/ui/src/components/metagraphed/nav-mega-menu-content.tsx
@@ -17,7 +17,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   CopyButton,
-  safeExternalUrl,
+  ExternalLink,
 } from "@jsonbored/ui-kit";
 import {
   MEGA_PANELS,
@@ -256,7 +256,7 @@ export function MegaPanelBody({
           </div>
         </div>
         {showOverallEmpty ? (
-          <div className="mt-3 rounded-md border border-dashed border-ink-subtle bg-surface/40 px-3 py-2 text-[11px] text-ink-muted flex items-center justify-between">
+          <div className="mt-3 rounded-md border border-dashed border-ink-subtle bg-surface/40 px-3 py-2 mg-type-caption text-ink-muted flex items-center justify-between">
             <span>
               No results for <span className="text-ink-strong">"{filterValue}"</span>.
             </span>
@@ -276,7 +276,7 @@ export function MegaPanelBody({
       <div className="col-span-5">
         <div className="mg-label mb-3">Browse</div>
         {browseEmpty && !supportsLive ? (
-          <div className="text-[11px] text-ink-muted">No matches in this section.</div>
+          <div className="mg-type-caption text-ink-muted">No matches in this section.</div>
         ) : browseEmpty ? null : (
           <ul className="grid grid-cols-2 gap-x-4 gap-y-1.5">
             {browseFiltered.map((l) => {
@@ -295,7 +295,7 @@ export function MegaPanelBody({
                       {l.label}
                     </div>
                     {l.hint ? (
-                      <div className="text-[11px] text-ink-muted truncate">{l.hint}</div>
+                      <div className="mg-type-caption text-ink-muted truncate">{l.hint}</div>
                     ) : null}
                   </Link>
                 </li>
@@ -316,19 +316,19 @@ export function MegaPanelBody({
               </ul>
             ) : liveError ? (
               <div className="flex items-center justify-between rounded-md border border-health-down/30 bg-health-down/5 px-2.5 py-1.5">
-                <span className="text-[11px] text-health-down">
+                <span className="mg-type-caption text-health-down">
                   Couldn't load live {panel.label.toLowerCase()}.
                 </span>
                 <button
                   type="button"
                   onClick={liveRetry}
-                  className="inline-flex items-center gap-1 text-[11px] font-medium text-ink-strong hover:text-accent"
+                  className="inline-flex items-center gap-1 mg-type-caption font-medium text-ink-strong hover:text-accent"
                 >
                   <RefreshCw className="size-3" /> Retry
                 </button>
               </div>
             ) : liveEmpty ? (
-              <div className="text-[11px] text-ink-muted px-2 py-1.5">
+              <div className="mg-type-caption text-ink-muted px-2 py-1.5">
                 No live matches for "{filterValue}".
               </div>
             ) : (
@@ -363,7 +363,7 @@ export function MegaPanelBody({
                       to={r.to}
                       onClick={onNavigate}
                       ref={(el) => registerItem(el, i)}
-                      className="rounded-full border border-border bg-card px-2.5 py-1 text-[11px] text-ink hover:border-accent/40 hover:text-accent focus:border-accent/60 focus:outline-none transition-colors"
+                      className="rounded-full border border-border bg-card px-2.5 py-1 mg-type-caption text-ink hover:border-accent/40 hover:text-accent focus:border-accent/60 focus:outline-none transition-colors"
                       preload="intent"
                     >
                       {r.label}
@@ -390,7 +390,7 @@ export function MegaPanelBody({
                     search={(l.search ?? undefined) as never}
                     onClick={onNavigate}
                     ref={(el) => registerItem(el, i)}
-                    className="inline-flex items-center rounded-full border border-border bg-paper px-2.5 py-1 text-[11px] text-ink-muted hover:text-ink-strong hover:border-accent/50 focus:border-accent/60 focus:outline-none transition-colors"
+                    className="inline-flex items-center rounded-full border border-border bg-paper px-2.5 py-1 mg-type-caption text-ink-muted hover:text-ink-strong hover:border-accent/50 focus:border-accent/60 focus:outline-none transition-colors"
                     preload="intent"
                   >
                     {l.label}
@@ -400,7 +400,7 @@ export function MegaPanelBody({
             })}
           </ul>
         ) : (
-          <div className="text-[11px] text-ink-muted">No quick filters.</div>
+          <div className="mg-type-caption text-ink-muted">No quick filters.</div>
         )}
       </div>
 
@@ -414,7 +414,7 @@ export function MegaPanelBody({
             ))}
           </div>
         ) : snapshot.isError ? (
-          <div className="rounded-md border border-health-down/30 bg-health-down/5 px-2.5 py-2 text-[11px] text-health-down">
+          <div className="rounded-md border border-health-down/30 bg-health-down/5 px-2.5 py-2 mg-type-caption text-health-down">
             Snapshot unavailable.
           </div>
         ) : (
@@ -444,14 +444,13 @@ export function MegaPanelBody({
         <div className="flex items-center gap-2 mg-type-data text-ink-muted">
           <span>{panel.apiPath}</span>
           <CopyButton value={`${API_BASE}${panel.apiPath}`} label={`${panel.apiPath} URL`} />
-          <a
-            href={safeExternalUrl(`${API_BASE}${panel.apiPath}`)}
-            target="_blank"
-            rel="noopener noreferrer"
+          <ExternalLink
+            bare
+            href={`${API_BASE}${panel.apiPath}`}
             className="inline-flex items-center gap-1 hover:text-ink-strong"
           >
             <Boxes className="size-3" /> JSON
-          </a>
+          </ExternalLink>
         </div>
       </div>
     </div>
@@ -535,7 +534,7 @@ export function MobileMegaMenuBody({ onNavigate }: { onNavigate?: () => void })
                           >
                             {l.label}
                             {l.hint ? (
-                              <span className="block text-[11px] text-ink-muted">{l.hint}</span>
+                              <span className="block mg-type-caption text-ink-muted">{l.hint}</span>
                             ) : null}
                           </Link>
                         </li>
@@ -552,7 +551,7 @@ export function MobileMegaMenuBody({ onNavigate }: { onNavigate?: () => void })
                               to={l.to}
                               search={(l.search ?? undefined) as never}
                               onClick={onNavigate}
-                              className="inline-flex items-center rounded-full border border-border bg-paper px-2.5 py-1 text-[11px] text-ink-muted hover:text-ink-strong"
+                              className="inline-flex items-center rounded-full border border-border bg-paper px-2.5 py-1 mg-type-caption text-ink-muted hover:text-ink-strong"
                               preload="intent"
                             >
                               {l.label}
diff --git a/apps/ui/src/components/metagraphed/nav-omnibox.tsx b/apps/ui/src/components/metagraphed/nav-omnibox.tsx
index 29834fdae..b7a92afde 100644
--- a/apps/ui/src/components/metagraphed/nav-omnibox.tsx
+++ b/apps/ui/src/components/metagraphed/nav-omnibox.tsx
@@ -18,6 +18,7 @@ import {
 import { searchQuery } from "@/lib/metagraphed/queries";
 import { classNames } from "@/lib/metagraphed/format";
 import { Kbd, safeExternalUrl } from "@jsonbored/ui-kit";
+import { Panel } from "@/components/metagraphed/primitives";
 import { loadRecent, pushRecent } from "@/lib/metagraphed/search-history";
 import { isValidSs58 } from "@/lib/metagraphed/accounts";
 import { shortHash } from "@/lib/metagraphed/blocks";
@@ -362,11 +363,14 @@ export function NavOmnibox({ onOpenPalette }: Props) {
       className="hidden md:block relative flex-1 max-w-xl lg:max-w-2xl xl:max-w-3xl min-w-0"
     >
       {/* Input */}
-      <div
+      <Panel
+        as="div"
+        flush
         className={classNames(
-          "inline-flex w-full items-center gap-2 rounded-full border bg-card pl-3 pr-2 py-2 text-left text-sm transition-all min-h-10",
-          open ? "border-accent/60 ring-2 ring-accent/20" : "border-border hover:border-accent/40",
+          "w-full !rounded-full text-left text-sm transition-all",
+          open ? "!border-accent/60 ring-2 ring-accent/20" : "hover:border-accent/40",
         )}
+        bodyClassName="inline-flex w-full items-center gap-2 !pl-3 !pr-2 !py-2 min-h-10"
       >
         <Search className="size-3.5 shrink-0 text-ink-muted" />
         <input
@@ -387,7 +391,7 @@ export function NavOmnibox({ onOpenPalette }: Props) {
           aria-activedescendant={activeOptionId}
           className="flex-1 min-w-0 bg-transparent outline-none text-ink-strong placeholder:text-ink-muted text-sm"
         />
-      </div>
+      </Panel>
 
       {/* Dropdown — wider than the input, right-aligned */}
       {open ? (
@@ -414,7 +418,9 @@ export function NavOmnibox({ onOpenPalette }: Props) {
                         <span className="block mg-type-caption font-medium text-ink-strong truncate">
                           {r.label}
                         </span>
-                        <span className="block text-[10px] text-ink-muted truncate">{r.hint}</span>
+                        <span className="block mg-type-caption text-ink-muted truncate">
+                          {r.hint}
+                        </span>
                       </span>
                     </Link>
                   ))}
@@ -422,7 +428,7 @@ export function NavOmnibox({ onOpenPalette }: Props) {
               </div>
 
               <div className="mx-3 mb-2 rounded-md border border-border/60 mg-glass-soft px-3 py-2">
-                <p className="text-[11px] text-ink-muted leading-relaxed">
+                <p className="mg-type-caption text-ink-muted leading-relaxed">
                   <span className="font-medium text-ink">Paste anything:</span> wallet address
                   (ss58), block number, transaction hash (0x…) or block hash to jump directly.
                 </p>
@@ -444,7 +450,7 @@ export function NavOmnibox({ onOpenPalette }: Props) {
                           setOpen(true);
                           inputRef.current?.focus();
                         }}
-                        className="rounded-full border border-border bg-card px-2.5 py-0.5 text-[11px] text-ink-muted hover:text-ink-strong hover:border-accent/40 transition-colors"
+                        className="rounded-full border border-border bg-card px-2.5 py-0.5 mg-type-caption text-ink-muted hover:text-ink-strong hover:border-accent/40 transition-colors"
                       >
                         {r}
                       </button>
diff --git a/apps/ui/src/components/metagraphed/network-switcher.tsx b/apps/ui/src/components/metagraphed/network-switcher.tsx
index 3955b9a69..64cbe8b13 100644
--- a/apps/ui/src/components/metagraphed/network-switcher.tsx
+++ b/apps/ui/src/components/metagraphed/network-switcher.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { Check, ChevronDown, Globe2, Pencil, TerminalSquare } from "lucide-react";
-import { Popover, PopoverTrigger } from "@jsonbored/ui-kit";
+import { ExternalLink, Popover, PopoverTrigger } from "@jsonbored/ui-kit";
 import { ClampedPopoverContent } from "./clamped-popover-content";
 import { useApiBase, useNetwork } from "@/hooks/use-api-base";
 import { CHAIN_NETWORKS, LOCAL_DEV, DEFAULT_API_BASE } from "@/lib/metagraphed/config";
@@ -116,7 +116,7 @@ export function NetworkSwitcher() {
                         </span>
                         {active ? <Check className="size-3 text-health-ok" /> : null}
                       </span>
-                      <span className="mt-0.5 block text-[10px] text-ink-muted">
+                      <span className="mt-0.5 block mg-type-caption text-ink-muted">
                         {n.description}
                       </span>
                     </span>
@@ -133,19 +133,18 @@ export function NetworkSwitcher() {
                       {LOCAL_DEV.label}
                     </span>
                   </div>
-                  <span className="mt-0.5 block text-[10px] text-ink-muted">
+                  <span className="mt-0.5 block mg-type-caption text-ink-muted">
                     {LOCAL_DEV.description}
                   </span>
                   <div className="mt-1 flex items-center justify-between gap-2">
                     <code className="mg-type-data-sm text-ink-muted truncate">{LOCAL_DEV.rpc}</code>
-                    <a
+                    <ExternalLink
+                      bare
                       href={LOCAL_DEV.guideUrl}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="text-[10px] text-ink-muted hover:text-ink-strong underline underline-offset-2 shrink-0"
+                      className="mg-type-caption text-ink-muted hover:text-ink-strong underline underline-offset-2 shrink-0"
                     >
                       setup →
-                    </a>
+                    </ExternalLink>
                   </div>
                 </div>
               </Panel>
@@ -153,7 +152,7 @@ export function NetworkSwitcher() {
           </ul>
         </div>
 
-        <div className="rounded border border-border bg-surface/40 px-2 py-1.5 text-[11px] text-ink-muted">
+        <div className="rounded border border-border bg-surface/40 px-2 py-1.5 mg-type-caption text-ink-muted">
           <div className="flex items-center gap-2">
             <span
               className={classNames("inline-block size-1.5 rounded-full", dotCls)}
@@ -208,7 +207,7 @@ export function NetworkSwitcher() {
                 />
                 <button
                   type="submit"
-                  className="rounded border border-border bg-card px-2 py-1 text-[11px] hover:border-ink/30"
+                  className="rounded border border-border bg-card px-2 py-1 mg-type-caption hover:border-ink/30"
                 >
                   set
                 </button>
@@ -219,7 +218,7 @@ export function NetworkSwitcher() {
                   <button
                     type="button"
                     onClick={() => changeBase(DEFAULT_API_BASE)}
-                    className="text-[10px] text-ink-muted hover:text-ink-strong underline underline-offset-2 shrink-0"
+                    className="mg-type-caption text-ink-muted hover:text-ink-strong underline underline-offset-2 shrink-0"
                   >
                     reset
                   </button>
diff --git a/apps/ui/src/components/metagraphed/neuron-table.tsx b/apps/ui/src/components/metagraphed/neuron-table.tsx
index e1cae760d..a1ee3c821 100644
--- a/apps/ui/src/components/metagraphed/neuron-table.tsx
+++ b/apps/ui/src/components/metagraphed/neuron-table.tsx
@@ -1,7 +1,7 @@
 import { useMemo, useState } from "react";
 import { Link } from "@tanstack/react-router";
 import { Coins, Download } from "lucide-react";
-import { CopyButton } from "@jsonbored/ui-kit";
+import { CopyButton, ExternalLink } from "@jsonbored/ui-kit";
 import { SortHeader, ariaSort } from "@/components/metagraphed/table-controls";
 import { classNames } from "@/lib/metagraphed/format";
 import { shortHash } from "@/lib/metagraphed/blocks";
@@ -291,7 +291,7 @@ export function NeuronTable({
                             <button
                               type="button"
                               onClick={open}
-                              className="inline-flex items-center gap-1 rounded-full border border-border bg-card px-2.5 py-1 text-[11px] font-medium text-ink-strong transition-colors hover:border-accent/50 hover:text-accent"
+                              className="inline-flex items-center gap-1 rounded-full border border-border bg-card px-2.5 py-1 mg-type-caption font-medium text-ink-strong transition-colors hover:border-accent/50 hover:text-accent"
                             >
                               <Coins className="size-3 text-ink-muted" aria-hidden />
                               Delegate
@@ -311,16 +311,16 @@ export function NeuronTable({
         <span>
           {sorted.length} {sorted.length === 1 ? "neuron" : "neurons"} · subnet {netuid}
         </span>
-        <a
-          href={csvUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center gap-1.5 rounded border border-border bg-surface/40 px-2.5 py-1 mg-type-label uppercase text-ink-muted transition-colors hover:border-ink/30 hover:text-ink-strong focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Download className="size-3" aria-hidden />
-          Download CSV
-        </a>
+        <span onClick={(e) => e.stopPropagation()}>
+          <ExternalLink
+            bare
+            href={csvUrl}
+            className="inline-flex items-center gap-1.5 rounded border border-border bg-surface/40 px-2.5 py-1 mg-type-label uppercase text-ink-muted transition-colors hover:border-ink/30 hover:text-ink-strong focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <Download className="size-3" aria-hidden />
+            Download CSV
+          </ExternalLink>
+        </span>
       </div>
     </Panel>
   );
@@ -397,7 +397,7 @@ function NeuronCard({
           "—"
         )}
       </div>
-      <dl className="grid grid-cols-2 gap-x-3 gap-y-1.5 text-[11px]">
+      <dl className="grid grid-cols-2 gap-x-3 gap-y-1.5 mg-type-caption">
         <Stat label="Stake τ" value={taoCompact(n.stake_tao)} />
         <Stat label="Emission τ" value={taoCompact(n.emission_tao)} />
         {isValidator ? (
@@ -428,7 +428,7 @@ function NeuronCard({
             <button
               type="button"
               onClick={open}
-              className="inline-flex items-center gap-1 rounded-full border border-border bg-card px-2.5 py-1 text-[11px] font-medium text-ink-strong transition-colors hover:border-accent/50 hover:text-accent"
+              className="inline-flex items-center gap-1 rounded-full border border-border bg-card px-2.5 py-1 mg-type-caption font-medium text-ink-strong transition-colors hover:border-accent/50 hover:text-accent"
             >
               <Coins className="size-3 text-ink-muted" aria-hidden />
               Delegate
diff --git a/apps/ui/src/components/metagraphed/operational-panel.tsx b/apps/ui/src/components/metagraphed/operational-panel.tsx
index b7928cd71..97b147c16 100644
--- a/apps/ui/src/components/metagraphed/operational-panel.tsx
+++ b/apps/ui/src/components/metagraphed/operational-panel.tsx
@@ -207,7 +207,7 @@ export function OperationalPanel({ netuid }: { netuid: number }) {
                   Endpoint mosaic · {endpoints.length}
                   <InfoTooltip label="One cell per tracked endpoint, colored by the last probe result: ok (2xx within latency budget), warn (slow / intermittent 5xx), down (consecutive failures), or unknown (no probe in window). Source: /api/v1/subnets/{netuid}/endpoints joined with /health. Stale snapshots still render — check the panel's `updated` stamp." />
                 </span>
-                <span className="font-mono text-[9.5px] text-ink-muted/80">
+                <span className="mg-type-data-sm text-ink-muted/80">
                   one cell = one tracked endpoint, colored by last probe
                 </span>
               </div>
@@ -221,6 +221,11 @@ export function OperationalPanel({ netuid }: { netuid: number }) {
                     <TooltipTrigger asChild>
                       <span
                         className={classNames(
+                          // CONTRIBUTING.md documents the status-mosaic micro-radius
+                          // as a standing sub-token residual: every named step on the
+                          // approved scale is visually much larger and would
+                          // materially change this dense per-cell grid.
+                          // eslint-disable-next-line no-restricted-syntax -- documented dense-grid exception
                           "size-3 rounded-[2px] border border-border/40",
                           (e.health ?? "unknown") === "ok" && "bg-health-ok",
                           (e.health ?? "") === "warn" && "bg-health-warn",
@@ -249,7 +254,7 @@ export function OperationalPanel({ netuid }: { netuid: number }) {
               <div className="flex items-center justify-between gap-2 border-b border-border bg-paper/40 px-4 py-2">
                 <div>
                   <div className="mg-type-micro text-ink-strong">Health trend</div>
-                  <div className="font-mono text-[9.5px] text-ink-muted/80">
+                  <div className="mg-type-data-sm text-ink-muted/80">
                     uptime &amp; latency over the selected window, with incident markers
                     {healthRes?.meta?.generated_at
                       ? ` · ${formatFreshness(healthRes.meta.generated_at) ?? ""}`
@@ -285,7 +290,7 @@ export function OperationalPanel({ netuid }: { netuid: number }) {
               ) : incidents.length === 0 ? (
                 <div className="rounded-md border border-dashed border-border bg-paper/40 px-3 py-6 text-center">
                   <div className="mg-type-micro text-ink-muted">Clean history</div>
-                  <div className="mt-1 text-[11px] text-ink-muted">
+                  <div className="mt-1 mg-type-caption text-ink-muted">
                     No incidents recorded for this subnet.
                   </div>
                 </div>
@@ -437,7 +442,7 @@ function Stat({
           </div>
         </div>
       </TooltipTrigger>
-      <TooltipContent side="bottom" className="max-w-xs text-[11px] leading-relaxed">
+      <TooltipContent side="bottom" className="max-w-xs mg-type-caption leading-relaxed">
         {hint}
       </TooltipContent>
     </Tooltip>
diff --git a/apps/ui/src/components/metagraphed/pre-sign-confirmation.tsx b/apps/ui/src/components/metagraphed/pre-sign-confirmation.tsx
index ee749d46d..e2c92e5eb 100644
--- a/apps/ui/src/components/metagraphed/pre-sign-confirmation.tsx
+++ b/apps/ui/src/components/metagraphed/pre-sign-confirmation.tsx
@@ -100,7 +100,7 @@ export function PreSignConfirmation({
         />
       ) : null}
 
-      <div className="flex items-start gap-1.5 rounded border border-border bg-surface/40 px-2.5 py-2 text-[11px] text-ink-muted">
+      <div className="flex items-start gap-1.5 rounded border border-border bg-surface/40 px-2.5 py-2 mg-type-caption text-ink-muted">
         <ShieldCheck className="mt-0.5 size-3.5 shrink-0 text-ink-muted" aria-hidden="true" />
         <span>
           metagraphed builds this transaction for your wallet to sign — we never see your keys and
@@ -153,7 +153,7 @@ function SummaryRow({
 }) {
   return (
     <div className="flex items-center justify-between gap-3 border-b border-border/60 py-1.5 last:border-b-0">
-      <span className="text-[11px] text-ink-muted">{label}</span>
+      <span className="mg-type-caption text-ink-muted">{label}</span>
       <span className="text-right">
         <span
           className={classNames(
@@ -163,7 +163,7 @@ function SummaryRow({
         >
           {value}
         </span>
-        {detail ? <span className="block text-[10px] text-ink-muted">{detail}</span> : null}
+        {detail ? <span className="block mg-type-caption text-ink-muted">{detail}</span> : null}
       </span>
     </div>
   );
diff --git a/apps/ui/src/components/metagraphed/registry-ticker.tsx b/apps/ui/src/components/metagraphed/registry-ticker.tsx
index a4217e061..be5494d39 100644
--- a/apps/ui/src/components/metagraphed/registry-ticker.tsx
+++ b/apps/ui/src/components/metagraphed/registry-ticker.tsx
@@ -75,7 +75,7 @@ export function RegistryTicker() {
                   <span className="text-ink-strong tabular-nums">#{formatNumber(blockNumber)}</span>
                 </Link>
               </TooltipTrigger>
-              <TooltipContent side="bottom" className="text-[11px]">
+              <TooltipContent side="bottom" className="mg-type-caption">
                 Chain head · <TimeAgo at={head?.observed_at} />
               </TooltipContent>
             </Tooltip>
@@ -88,7 +88,7 @@ export function RegistryTicker() {
                 <span className="text-ink-strong tabular-nums">{formatUsd(market?.price)}</span>
               </span>
             </TooltipTrigger>
-            <TooltipContent side="bottom" className="text-[11px]">
+            <TooltipContent side="bottom" className="mg-type-caption">
               Current TAO price · CoinPaprika
             </TooltipContent>
           </Tooltip>
diff --git a/apps/ui/src/components/metagraphed/resource-explorer.tsx b/apps/ui/src/components/metagraphed/resource-explorer.tsx
index 5c8e4f24c..674acb79c 100644
--- a/apps/ui/src/components/metagraphed/resource-explorer.tsx
+++ b/apps/ui/src/components/metagraphed/resource-explorer.tsx
@@ -131,7 +131,7 @@ function FiltersTrigger({ filter }: { filter: ReturnType<typeof useSubnetFilter>
       <SheetTrigger asChild>
         <button
           type="button"
-          className="inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-2 py-1 text-[11px] font-medium text-ink-strong hover:border-accent/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-2 py-1 mg-type-caption font-medium text-ink-strong hover:border-accent/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           aria-label="Open resource filters"
         >
           <Filter className="size-3" />
@@ -181,7 +181,7 @@ function FiltersTrigger({ filter }: { filter: ReturnType<typeof useSubnetFilter>
           <button
             type="button"
             onClick={filter.reset}
-            className="inline-flex items-center gap-1 rounded-md border border-border bg-card px-2.5 py-1 text-[11px] font-medium text-ink-muted hover:text-ink-strong"
+            className="inline-flex items-center gap-1 rounded-md border border-border bg-card px-2.5 py-1 mg-type-caption font-medium text-ink-muted hover:text-ink-strong"
           >
             <X className="size-3" /> Reset
           </button>
@@ -221,7 +221,7 @@ function SegmentBar({
             aria-selected={active}
             onClick={() => onChange(s.id)}
             className={classNames(
-              "px-2.5 py-1 text-[11px] font-medium rounded transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "px-2.5 py-1 mg-type-caption font-medium rounded transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               active ? "bg-ink-strong text-paper" : "text-ink-muted hover:text-ink-strong",
             )}
           >
@@ -447,7 +447,7 @@ function EndpointRow({ e }: { e: Endpoint }) {
                   )}
                 </button>
               </TooltipTrigger>
-              <TooltipContent side="top" className="text-[11px]">
+              <TooltipContent side="top" className="mg-type-caption">
                 Copy URL
               </TooltipContent>
             </Tooltip>
@@ -456,6 +456,11 @@ function EndpointRow({ e }: { e: Endpoint }) {
                 {safeUrl ? (
                   <a
                     href={safeUrl}
+                    // Already routed through safeExternalUrl above (with a custom
+                    // blocked-state fallback below); ui-kit's <ExternalLink>
+                    // can't sit under TooltipTrigger asChild because it doesn't
+                    // forward the ref/hover handlers Radix's Slot injects.
+                    // eslint-disable-next-line no-restricted-syntax -- see above
                     target="_blank"
                     rel="noopener noreferrer"
                     aria-label="Open endpoint"
@@ -479,7 +484,7 @@ function EndpointRow({ e }: { e: Endpoint }) {
                   </span>
                 )}
               </TooltipTrigger>
-              <TooltipContent side="top" className="text-[11px]">
+              <TooltipContent side="top" className="mg-type-caption">
                 {safeUrl ? "Open in new tab" : "Blocked unsafe URL"}
               </TooltipContent>
             </Tooltip>
@@ -617,6 +622,11 @@ function SurfaceRow({ s }: { s: Surface }) {
               {safeUrl ? (
                 <a
                   href={safeUrl}
+                  // Already routed through safeExternalUrl above (with a custom
+                  // blocked-state fallback below); ui-kit's <ExternalLink>
+                  // can't sit under TooltipTrigger asChild because it doesn't
+                  // forward the ref/hover handlers Radix's Slot injects.
+                  // eslint-disable-next-line no-restricted-syntax -- see above
                   target="_blank"
                   rel="noopener noreferrer"
                   className="mt-0.5 block truncate mg-type-data text-ink-muted hover:text-ink-strong"
diff --git a/apps/ui/src/components/metagraphed/rpc-proxy.tsx b/apps/ui/src/components/metagraphed/rpc-proxy.tsx
index 47c5e8149..b1b844907 100644
--- a/apps/ui/src/components/metagraphed/rpc-proxy.tsx
+++ b/apps/ui/src/components/metagraphed/rpc-proxy.tsx
@@ -110,7 +110,7 @@ export function ProxyHero() {
             <Icon className="mt-0.5 size-4 shrink-0 text-accent" aria-hidden />
             <div>
               <p className="mg-type-caption font-medium text-ink-strong">{title}</p>
-              <p className="text-[11px] leading-snug text-ink-muted">{body}</p>
+              <p className="mg-type-caption leading-snug text-ink-muted">{body}</p>
             </div>
           </li>
         ))}
@@ -175,7 +175,7 @@ export function ProxyUsagePanel() {
             "Live from the proxy telemetry"
           )}
         </p>
-        <div className="inline-flex rounded border border-border bg-card p-0.5">
+        <Panel as="div" flush bodyClassName="inline-flex !p-0.5">
           {(["7d", "30d"] as const).map((w) => (
             <button
               key={w}
@@ -189,7 +189,7 @@ export function ProxyUsagePanel() {
               {w}
             </button>
           ))}
-        </div>
+        </Panel>
       </div>
 
       {stale ? <StaleBanner generatedAt={data.meta?.generated_at} /> : null}
diff --git a/apps/ui/src/components/metagraphed/schema-drift-detail.tsx b/apps/ui/src/components/metagraphed/schema-drift-detail.tsx
index 23e5e63b8..2d711fd56 100644
--- a/apps/ui/src/components/metagraphed/schema-drift-detail.tsx
+++ b/apps/ui/src/components/metagraphed/schema-drift-detail.tsx
@@ -192,7 +192,7 @@ function EvidenceSection({
               {l.label}
             </span>
             {l.href.startsWith("http") ? (
-              <ExternalLink href={l.href} className="truncate text-[11px]">
+              <ExternalLink href={l.href} className="truncate mg-type-data">
                 <span className="inline-flex items-center gap-1">
                   <ExternalIcon className="size-3" />
                   <span className="truncate">{l.href}</span>
@@ -204,7 +204,7 @@ function EvidenceSection({
             <button
               type="button"
               onClick={() => onCopy(l.href)}
-              className="ml-auto inline-flex items-center gap-1 rounded border border-border bg-paper px-1.5 py-0.5 text-[10px] text-ink-muted hover:text-ink-strong"
+              className="ml-auto inline-flex items-center gap-1 rounded border border-border bg-paper px-1.5 py-0.5 mg-type-data-sm text-ink-muted hover:text-ink-strong"
               aria-label={`Copy ${l.label}`}
             >
               {copied ? <Check className="size-3 text-health-ok" /> : <Copy className="size-3" />}
diff --git a/apps/ui/src/components/metagraphed/schema-drift.tsx b/apps/ui/src/components/metagraphed/schema-drift.tsx
index 3ee9017cb..8482be2a3 100644
--- a/apps/ui/src/components/metagraphed/schema-drift.tsx
+++ b/apps/ui/src/components/metagraphed/schema-drift.tsx
@@ -90,15 +90,13 @@ export function SchemaDriftSummary({ netuid, compact }: { netuid: number; compac
           ))}
         </div>
         {drift.length > 0 ? (
-          <ul className="mt-2 space-y-0.5 text-[11px] text-ink-muted">
+          <ul className="mt-2 space-y-0.5 mg-type-caption text-ink-muted">
             {drift.slice(0, 3).map((s) => (
               <li key={s.id} className="truncate font-mono">
                 · {s.name ?? s.url}
               </li>
             ))}
-            {drift.length > 3 ? (
-              <li className="text-[10px]">+ {drift.length - 3} more changed</li>
-            ) : null}
+            {drift.length > 3 ? <li>+ {drift.length - 3} more changed</li> : null}
           </ul>
         ) : null}
       </Panel>