fix(ui): swap raw Bone & Ink one-off values for design tokens in batch 5/5

apps/ui/src/components/metagraphed/subnets-highlights.tsx

@@ -74,8 +74,13 @@ function Card({
       </span>
       <div className="min-w-0 flex-1">
         <div className="mg-type-micro text-ink-muted">{eyebrow}</div>
-        <div className="font-display text-[15px] font-medium text-ink-strong">{value}</div>
-        {hint ? <div className="text-[11px] leading-snug text-ink-muted">{hint}</div> : null}
+        <div
+          className="font-display font-medium text-ink-strong"
+          style={{ fontSize: "var(--mg-type-body-lg)" }}
+        >
+          {value}
+        </div>
+        {hint ? <div className="mg-type-caption leading-snug text-ink-muted">{hint}</div> : null}
         <div className="mt-2 -mb-0.5">
           <Sparkline
             values={spark ?? []}

apps/ui/src/components/metagraphed/surface-fixture.tsx

@@ -56,9 +56,11 @@ export function SurfaceFixture({
       </button>
       {open ? (
         <div className="space-y-2 border-t border-border px-2 py-2">
-          {isLoading ? <span className="text-[11px] text-ink-muted">Loading sample…</span> : null}
+          {isLoading ? (
+            <span className="mg-type-caption text-ink-muted">Loading sample…</span>
+          ) : null}
           {isError ? (
-            <span className="text-[11px] text-ink-muted">Sample unavailable right now.</span>
+            <span className="mg-type-caption text-ink-muted">Sample unavailable right now.</span>
           ) : null}
           {fixture ? (
             <>
@@ -91,7 +93,7 @@ export function SurfaceFixture({
                     {bodyText}
                   </pre>
                 ) : (
-                  <span className="text-[11px] text-ink-muted">Empty response body.</span>
+                  <span className="mg-type-caption text-ink-muted">Empty response body.</span>
                 )}
               </div>
             </>

apps/ui/src/components/metagraphed/table-controls.tsx

@@ -105,7 +105,7 @@ export function SearchInput({
         // the aria-labelled sibling controls (SortButton, PageSizeSelect) in this file.
         aria-label={placeholder ?? "Search"}
         className={classNames(
-          "w-full rounded border border-border bg-paper pl-8 pr-14 py-1.5 text-sm text-ink-strong",
+          "w-full rounded border border-border bg-paper pl-8 pr-16 py-1.5 text-sm text-ink-strong",
           "placeholder:text-ink-muted focus:outline-none focus:border-accent/50 focus:ring-2 focus:ring-ring transition-colors",
         )}
       />
@@ -298,8 +298,8 @@ export function ResetFiltersButton({
       onClick={onReset}
       className={
         bare
-          ? "inline-flex items-center gap-1 rounded px-2 py-1 min-h-8 text-[11px] font-medium text-ink-muted hover:text-ink-strong hover:bg-surface transition-colors"
-          : "inline-flex items-center gap-1 rounded border border-border bg-card px-2 py-1 text-[11px] font-medium text-ink hover:border-ink/30 min-h-7"
+          ? "inline-flex items-center gap-1 rounded px-2 py-1 min-h-8 mg-type-caption font-medium text-ink-muted hover:text-ink-strong hover:bg-surface transition-colors"
+          : "inline-flex items-center gap-1 rounded border border-border bg-card px-2 py-1 mg-type-caption font-medium text-ink hover:border-ink/30 min-h-7"
       }
       title="Clear search, filters, and pagination"
     >

apps/ui/src/components/metagraphed/take-management-modal.tsx

@@ -19,6 +19,7 @@ import {
 } from "@jsonbored/ui-kit";
 import { WalletConnectPanel } from "@/components/metagraphed/wallet-connect";
 import { SearchInput } from "@/components/metagraphed/table-controls";
+import { Panel } from "@/components/metagraphed/primitives";
 import { shortHash } from "@/lib/metagraphed/blocks";
 import { classNames } from "@/lib/metagraphed/format";
 import { broadcastStatusLabel } from "@/components/metagraphed/stake-unstake-modal";
@@ -202,10 +203,12 @@ function TakeAmountStep({ flow }: { flow: UseTakeFlowResult }) {
   return (
     <div className="flex h-full flex-col">
       <div className="flex-1 space-y-4">
-        <div
+        <Panel
+          as="div"
           role="tablist"
           aria-label="Increase or decrease take"
-          className="inline-flex items-center rounded-md border border-border bg-card p-0.5"
+          flush
+          bodyClassName="inline-flex items-center !p-0.5"
         >
           {DIRECTIONS.map((d) => {
             const active = d === flow.direction;
@@ -225,7 +228,7 @@ function TakeAmountStep({ flow }: { flow: UseTakeFlowResult }) {
               </button>
             );
           })}
-        </div>
+        </Panel>
 
         <div className="flex flex-col gap-1">
           <span aria-hidden="true" className="mg-type-micro text-ink-muted">
@@ -240,7 +243,7 @@ function TakeAmountStep({ flow }: { flow: UseTakeFlowResult }) {
           />
         </div>
 
-        <dl className="grid grid-cols-2 gap-x-4 gap-y-2 rounded border border-border bg-surface/40 p-3 text-[11px]">
+        <dl className="grid grid-cols-2 gap-x-4 gap-y-2 rounded border border-border bg-surface/40 p-3 mg-type-caption">
           <dt className="text-ink-muted">Current take</dt>
           <dd className="text-right font-mono text-ink-strong">
             {flow.currentTakePct != null ? `${flow.currentTakePct.toFixed(2)}%` : "—"}
@@ -327,7 +330,7 @@ function TakeConfirmationStep({
         loading={flow.feeTao === 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
@@ -378,7 +381,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={classNames(
           "block mg-type-caption font-medium text-ink-strong",
@@ -415,7 +418,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>

apps/ui/src/components/metagraphed/validator-apy-panel.tsx

@@ -62,15 +62,15 @@ export function ValidatorApyPanel({
               <div className="mt-1 font-display text-2xl font-semibold tabular-nums text-ink-strong">
                 {anyLoading && row.apy == null ? "…" : formatApyPct(row.apy)}
               </div>
-              <p className="mt-1 text-[10px] leading-relaxed text-ink-muted">
+              <p className="mt-1 mg-type-caption leading-relaxed text-ink-muted">
                 Net of take · daily neuron_daily rollup
               </p>
             </div>
           </Panel>
         ))}
       </div>
       {!anyLoading && !anyValue ? (
-        <p className="text-[11px] text-ink-muted">
+        <p className="mg-type-caption text-ink-muted">
           APY estimates need stake and emission history — they appear once enough daily snapshots
           exist for this validator.
         </p>
@@ -80,7 +80,7 @@ export function ValidatorApyPanel({
         windowLabel="history windows"
         stakeRisk
       />
-      <p className="text-[11px] leading-relaxed text-ink-muted">
+      <p className="mg-type-caption leading-relaxed text-ink-muted">
         Delegator APY annualizes the latest daily rewards-per-1k-τ rate from neuron_daily, net of
         validator take. Snapshot-tier emission can lag; server-side modelling (#2551) will replace
         this client estimate.

apps/ui/src/components/metagraphed/validator-card-list.tsx

@@ -52,7 +52,7 @@ export function ValidatorCardList({ validators, className }: ValidatorCardListPr
               {/* Same AccountAddress hover-card treatment as the desktop column (#6338). */}
               <AccountAddress ss58={v.coldkey} compact fallback="—" />
             </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="Active subnets" value={f.subnetsLabel} />
               <Stat label="UIDs" value={f.uidsLabel} />
               <Stat label="Nominators" value={f.nominatorsLabel} />

apps/ui/src/components/metagraphed/validator-guide.tsx

@@ -88,15 +88,15 @@ export function ValidatorGuide() {
         </button>
         {open ? (
           <div className="border-t border-border px-3 py-3">
-            <dl className="grid gap-3 text-[11.5px] leading-relaxed text-ink-muted md:grid-cols-2">
+            <dl className="grid gap-3 mg-type-caption leading-relaxed text-ink-muted md:grid-cols-2">
               {METRICS.map((m) => (
                 <div key={m.term}>
                   <dt className="font-medium text-ink-strong">{m.term}</dt>
                   <dd className="mt-0.5">{m.def}</dd>
                 </div>
               ))}
             </dl>
-            <p className="mt-3 border-t border-border pt-3 text-[11.5px] leading-relaxed text-ink-muted">
+            <p className="mt-3 border-t border-border pt-3 mg-type-caption leading-relaxed text-ink-muted">
               {GUIDANCE}
             </p>
           </div>
@@ -119,11 +119,11 @@ export function ValidatorGuide() {
                 <span>{m.term}</span>
                 <ChevronDown className="size-3.5 shrink-0 text-ink-muted transition-transform group-open:rotate-180" />
               </summary>
-              <p className="pb-2.5 text-[11.5px] leading-relaxed text-ink-muted">{m.def}</p>
+              <p className="pb-2.5 mg-type-caption leading-relaxed text-ink-muted">{m.def}</p>
             </details>
           ))}
         </div>
-        <p className="border-t border-border px-3 py-3 text-[11.5px] leading-relaxed text-ink-muted">
+        <p className="border-t border-border px-3 py-3 mg-type-caption leading-relaxed text-ink-muted">
           {GUIDANCE}
         </p>
       </div>

apps/ui/src/components/metagraphed/verify-surface-button.tsx

@@ -28,7 +28,7 @@ export function VerifySurfaceButton({ surfaceId }: { surfaceId: string }) {
   const rateLimited = mutation.error instanceof ApiError && mutation.error.status === 429;
 
   return (
-    <div className="flex flex-wrap items-center gap-2 text-[11px]">
+    <div className="flex flex-wrap items-center gap-2 mg-type-data">
       <button
         type="button"
         onClick={() => mutation.mutate()}

apps/ui/src/components/metagraphed/wallet-connect.tsx

@@ -1,15 +1,7 @@
 import { useState } from "react";
 import { Link } from "@tanstack/react-router";
-import {
-  Wallet,
-  Check,
-  Copy,
-  LogOut,
-  Loader2,
-  ShieldCheck,
-  ExternalLink as ExternalLinkIcon,
-} from "lucide-react";
-import { Popover, PopoverTrigger, safeExternalUrl } from "@jsonbored/ui-kit";
+import { Wallet, Check, Copy, LogOut, Loader2, ShieldCheck } from "lucide-react";
+import { Popover, PopoverTrigger, ExternalLink } from "@jsonbored/ui-kit";
 import { ClampedPopoverContent } from "./clamped-popover-content";
 import { EmptyState } from "./states";
 import { useWallet } from "@/hooks/use-wallet";
@@ -109,15 +101,15 @@ export function WalletConnectPanel({ onConnected }: { onConnected?: () => void }
     <div className="space-y-3">
       <Disclaimer />
       {status === "no-accounts" ? (
-        <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">
           No accounts available — open your wallet extension and make sure at least one account is
           shared with this site.
         </div>
       ) : null}
       {status === "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 ?? "Failed to connect wallet."}
         </div>
@@ -148,7 +140,7 @@ export function WalletConnectPanel({ onConnected }: { onConnected?: () => void }
 
 function Disclaimer() {
   return (
-    <div className="flex items-start gap-1.5 text-[10px] text-ink-muted">
+    <div className="flex items-start gap-1.5 mg-type-caption text-ink-muted">
       <ShieldCheck className="mt-0.5 size-3 shrink-0 text-ink-muted" aria-hidden="true" />
       <span>{DISCLAIMER}</span>
     </div>
@@ -164,23 +156,16 @@ function NoExtensionView() {
         description="Install a supported extension, then reopen this menu."
       />
       <ul className="space-y-1">
-        {SUPPORTED_WALLETS.map((w) => {
-          const href = safeExternalUrl(w.href);
-          if (!href) return null;
-          return (
-            <li key={w.label}>
-              <a
-                href={href}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center justify-between gap-2 rounded border border-border bg-card px-2 py-1.5 text-[11px] text-ink-strong hover:border-ink/30 transition-colors"
-              >
-                {w.label}
-                <ExternalLinkIcon className="size-3 text-ink-muted" aria-hidden="true" />
-              </a>
-            </li>
-          );
-        })}
+        {SUPPORTED_WALLETS.map((w) => (
+          <li key={w.label}>
+            <ExternalLink
+              href={w.href}
+              className="w-full justify-between gap-2 rounded border border-border bg-card px-2 py-1.5 mg-type-caption text-ink-strong hover:border-ink/30 transition-colors"
+            >
+              {w.label}
+            </ExternalLink>
+          </li>
+        ))}
       </ul>
     </div>
   );
@@ -208,7 +193,7 @@ function AccountPicker({
                 <span className="block mg-type-caption font-medium text-ink-strong truncate">
                   {account.meta.name || shortHash(account.address, 6)}
                 </span>
-                <span className="block text-[10px] text-ink-muted truncate">
+                <span className="block mg-type-caption text-ink-muted truncate">
                   {shortHash(account.address, 6)} · {account.meta.source}
                 </span>
               </span>
@@ -238,7 +223,9 @@ function ConnectedView({
             <span className="block mg-type-caption font-medium text-ink-strong font-mono truncate">
               {shortHash(wallet.address, 6)}
             </span>
-            <span className="block text-[10px] text-ink-muted">Connected via {wallet.source}</span>
+            <span className="block mg-type-caption text-ink-muted">
+              Connected via {wallet.source}
+            </span>
           </span>
           <button
             type="button"
@@ -258,20 +245,20 @@ function ConnectedView({
       {/* #5243: the connected wallet's read-side entry point into its portfolio. */}
       <Link
         to="/portfolio"
-        className="w-full inline-flex items-center justify-center gap-1.5 rounded border border-accent/40 bg-primary-soft px-3 py-1.5 text-[11px] font-medium text-ink-strong hover:bg-primary-soft/80 transition-colors"
+        className="w-full inline-flex items-center justify-center gap-1.5 rounded border border-accent/40 bg-primary-soft px-3 py-1.5 mg-type-caption font-medium text-ink-strong hover:bg-primary-soft/80 transition-colors"
       >
         <Wallet className="size-3.5" aria-hidden="true" />
         Your positions
       </Link>
       <button
         type="button"
         onClick={onDisconnect}
-        className="w-full inline-flex items-center justify-center gap-1.5 rounded border border-border bg-card px-3 py-1.5 text-[11px] font-medium text-ink-muted hover:text-ink-strong hover:border-ink/30 transition-colors"
+        className="w-full inline-flex items-center justify-center gap-1.5 rounded border border-border bg-card px-3 py-1.5 mg-type-caption font-medium text-ink-muted hover:text-ink-strong hover:border-ink/30 transition-colors"
       >
         <LogOut className="size-3.5" aria-hidden="true" />
         Disconnect
       </button>
-      <p className="flex items-start gap-1.5 text-[9px] text-ink-muted">
+      <p className="flex items-start gap-1.5 mg-type-caption text-ink-muted">
         <ShieldCheck className="mt-0.5 size-2.5 shrink-0" aria-hidden="true" />
         <span>metagraphed never sees your keys.</span>
       </p>

apps/ui/src/components/metagraphed/watch-alert-form.tsx

@@ -60,7 +60,7 @@ export function Field({
         {required ? <span className="text-health-down"> *</span> : null}
       </span>
       {children}
-      {hint ? <span className="mt-1 block text-[11px] text-ink-muted">{hint}</span> : null}
+      {hint ? <span className="mt-1 block mg-type-caption text-ink-muted">{hint}</span> : null}
     </label>
   );
 }

apps/ui/src/components/metagraphed/webhook-subscription-manager.tsx

@@ -203,7 +203,7 @@ function CreateSubscriptionSection() {
             className={inputCls}
           />
           {netuidsError ? (
-            <p className="mt-1 text-[11px] text-health-down">{netuidsError}</p>
+            <p className="mt-1 mg-type-caption text-health-down">{netuidsError}</p>
           ) : null}
         </Field>
         <Field label="Kinds filter" hint="Optional — leave unchecked to receive all change kinds.">
@@ -234,7 +234,9 @@ function CreateSubscriptionSection() {
             }}
             className={inputCls}
           />
-          {secretError ? <p className="mt-1 text-[11px] text-health-down">{secretError}</p> : null}
+          {secretError ? (
+            <p className="mt-1 mg-type-caption text-health-down">{secretError}</p>
+          ) : null}
         </Field>
         <button
           type="submit"
@@ -264,7 +266,7 @@ function CreateSubscriptionSection() {
             truncate={false}
             className="w-full ph-no-capture"
           />
-          <div className="space-y-1 text-[11px] text-ink-muted">
+          <div className="space-y-1 mg-type-caption text-ink-muted">
             <p>
               Deliveries are signed {result.delivery.signature_algorithm} over the raw request body,
               keyed by the secret above.
@@ -372,7 +374,7 @@ function LookupSubscriptionSection() {
             <Row label="Dead-lettered" value={String(result.delivery.dead_letter)} />
           </dl>
           {result.delivery.last_failure ? (
-            <div className="rounded border border-health-warn/30 bg-health-warn/5 p-2 text-[11px] text-ink-muted">
+            <div className="rounded border border-health-warn/30 bg-health-warn/5 p-2 mg-type-caption text-ink-muted">
               Last failure: {result.delivery.last_failure.reason ?? "unknown"}
               {result.delivery.last_failure.status_code
                 ? ` (HTTP ${result.delivery.last_failure.status_code})`
@@ -524,7 +526,7 @@ function Field({
         {required ? <span className="text-health-down"> *</span> : null}
       </span>
       {children}
-      {hint ? <span className="mt-1 block text-[11px] text-ink-muted">{hint}</span> : null}
+      {hint ? <span className="mt-1 block mg-type-caption text-ink-muted">{hint}</span> : null}
     </label>
   );
 }