diff --git a/app/components/AppShell.tsx b/app/components/AppShell.tsx
index b329e94..2e28e3f 100644
--- a/app/components/AppShell.tsx
+++ b/app/components/AppShell.tsx
@@ -20,7 +20,7 @@ import { AnimatedBaseLogo, BaseMark } from './ui/AnimatedBaseLogo';
 import { Breadcrumb } from './ui/Breadcrumb';
 import { cn } from './ui/cn';
 import { AnimatedArrowIcon, CloseIcon } from './ui/icons';
-import { Text } from './ui/Text';
+import { Text, textVariantClasses } from './ui/Text';
 
 const SIDEBAR_WIDTH = 248;
 /** Matches base.org's nav logo size, which the animation timings are tuned for. */
@@ -84,7 +84,6 @@ const styles: Record<string, CSSProperties> = {
     gap: 10,
     padding: '9px 10px',
     borderRadius: 8,
-    fontSize: 14,
   },
   navIcon: { display: 'inline-flex', width: 20, height: 20 },
   soon: {
@@ -293,14 +292,7 @@ function NavRow({ icon, label, href, active, enabled, hasChildren, onNavigate }:
           <NavGlyph name={icon} />
         </span>
       )}
-      <Text
-        as="span"
-        variant="label.medium"
-        tone="inherit"
-        className="font-[500]"
-      >
-        {label}
-      </Text>
+      {label}
       {!enabled && <span style={styles.soon}>Soon</span>}
       {hasChildren && (
         <span style={{ marginLeft: 'auto', color: 'var(--bds-gray-50)' }}>
@@ -318,13 +310,13 @@ function NavRow({ icon, label, href, active, enabled, hasChildren, onNavigate }:
   };
 
   if (!enabled) {
-    return <div style={rowStyle}>{content}</div>;
+    return <div className={NAV_LABEL} style={rowStyle}>{content}</div>;
   }
 
   return (
     <Link
       href={href}
-      className={`${hasChildren ? 'group ' : ''}nav-row-hover${active ? ' nav-row-active' : ''} ${NAV_FOCUS_RING}`}
+      className={`${hasChildren ? 'group ' : ''}nav-row-hover${active ? ' nav-row-active' : ''} ${NAV_LABEL} ${NAV_FOCUS_RING}`}
       style={rowStyle}
       onClick={(event) => {
         if (opensInNewTab(event)) return;
@@ -385,8 +377,12 @@ const APP_BANNER_HEIGHT = '2.25rem';
 // slipped through), so it just has to be longer than a slow route.
 const PENDING_PATH_TIMEOUT_MS = 5000;
 
+const TEXT_TRIM = '[text-box-trim:trim-both] [text-box-edge:cap_alphabetic]';
+
+const NAV_LABEL = `${textVariantClasses['label.medium']} box-content min-h-[1lh] ${TEXT_TRIM}`;
+
 const SIDEBAR_FOOTER_LINK =
-  'group outline-none text-bds-gray-50 transition-colors duration-150 hover:text-bds-gray-80';
+  `group outline-none ${NAV_LABEL} text-bds-gray-50 transition-colors duration-150 hover:text-bds-gray-80`;
 
 const SIDEBAR_FOOTER_LINK_LABEL =
   'inline-flex items-center gap-2.5 rounded-lg group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-brand-blue';
@@ -515,7 +511,7 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC
                 >
                   <Link
                     href="/"
-                    className={`nav-header-hover group ${NAV_FOCUS_RING}`}
+                    className={`nav-header-hover group ${NAV_LABEL} ${NAV_FOCUS_RING}`}
                     style={{ ...styles.navLink, display: 'flex', alignItems: 'center', padding: '9px 6px 9px 2px', marginBottom: 2, color: 'var(--bds-gray-50)' }}
                     onClick={(event) => {
                       if (opensInNewTab(event)) return;
@@ -543,7 +539,7 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC
                         className="transition-[stroke-dashoffset] duration-200 ease-out group-hover:[stroke-dashoffset:0]"
                       />
                     </svg>
-                    <Text as="span" variant="label.medium" className="font-[500]" style={{ flex: 1, textAlign: 'center', paddingRight: 16 }}>{activeParent.label}</Text>
+                    <span className="flex-1 text-center pr-4">{activeParent.label}</span>
                   </Link>
                   <nav style={styles.nav}>
                     {activeParent.children!.map((child) => {
@@ -590,7 +586,7 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC
                 <path d="M2.25 12h4.5l2.25-6 4.5 12 2.25-6h6.75" />
               </svg>
             </span>
-            <Text as="span" variant="label.medium" tone="inherit" className="font-[500]">Status</Text>
+            Status
           </span>
         </a>
         <a href="https://base.org/discord" target="_blank" rel="noreferrer" className={SIDEBAR_FOOTER_LINK} style={styles.footerLink}>
@@ -600,7 +596,7 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC
                 <path d="M216.856 16.597C200.285 8.843 182.566 3.208 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.401-4.55-9.933-6.846-14.046C73.353 3.208 55.613 8.864 39.042 16.638 5.618 67.147-3.443 116.401 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193 5.215-7.177 9.866-14.807 13.873-22.848-7.631-2.9-14.94-6.478-21.846-10.632 1.832-1.357 3.624-2.776 5.356-4.237 42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237-6.926 4.174-14.255 7.753-21.886 10.653 4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36ZM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18Zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18Z" />
               </svg>
             </span>
-            <Text as="span" variant="label.medium" tone="inherit" className="font-[500]">Support</Text>
+            Support
           </span>
         </a>
         <a href="https://docs.base.org" target="_blank" rel="noreferrer" className={SIDEBAR_FOOTER_LINK} style={styles.footerLink}>
@@ -610,7 +606,7 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC
                 <path d="M15 15H19.5M15 25H19.5M15 20H16M24 15L25 15M24 25H25M21 20H25M13 31H27C29.2091 31 31 29.2091 31 27V13C31 10.7909 29.2091 9 27 9H13C10.7909 9 9 10.7909 9 13V27C9 29.2091 10.7909 31 13 31Z" />
               </svg>
             </span>
-            <Text as="span" variant="label.medium" tone="inherit" className="font-[500]">Docs</Text>
+            Docs
           </span>
         </a>
         <div style={styles.footerLastRow}>
@@ -621,7 +617,7 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC
                   <path d="M12.75 19.5V18.75C12.75 16.76 11.96 14.85 10.55 13.45C9.15 12.04 7.24 11.25 5.25 11.25H4.5M4.5 4.5H5.25C13.12 4.5 19.5 10.88 19.5 18.75V19.5M6 18.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
                 </svg>
               </span>
-              <Text as="span" variant="label.medium" tone="inherit" className="font-[500]">Blog</Text>
+              Blog
             </span>
           </a>
           {/* `role="switch"` rather than a plain button: the control reports a state
diff --git a/app/internal-explorer/page.tsx b/app/internal-explorer/page.tsx
index 603e843..10832d8 100644
--- a/app/internal-explorer/page.tsx
+++ b/app/internal-explorer/page.tsx
@@ -81,7 +81,7 @@ function SearchBar({ chain, onError }: { chain: ExplorerChain; onError: (error:
         spellCheck={false}
         autoComplete="off"
         className={cn(
-          'w-full rounded-full border border-bds-gray-10 bg-bds-gray-0 py-3 pl-9 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-bds-blue-40',
+          'w-full rounded-full border border-bds-gray-10 bg-bds-gray-0 py-3 pl-9 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-white/40',
           searchHash.trim() ? 'pr-24' : 'pr-3.5',
         )}
       />
@@ -499,7 +499,7 @@ function RejectedTransactionsTab({ chain }: { chain: ExplorerChain }) {
   });
 
   const inputClass =
-    'rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-1.5 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-bds-blue-40';
+    'rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-1.5 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-white/40';
 
   return (
     <section className="flex flex-col gap-4">
diff --git a/app/upgrades/changelog/ChangelogClient.tsx b/app/upgrades/changelog/ChangelogClient.tsx
index db732ab..caae28e 100644
--- a/app/upgrades/changelog/ChangelogClient.tsx
+++ b/app/upgrades/changelog/ChangelogClient.tsx
@@ -190,7 +190,7 @@ export function ChangelogClient() {
           onChange={handleQueryChange}
           placeholder="Search by title, EIP, or summary keyword"
           aria-label="Search changes"
-          className="h-[34px] min-w-[min(100%,14rem)] flex-1 rounded-full border border-bds-gray-10 bg-background px-4 text-[14px] text-foreground outline-none placeholder:text-bds-gray-50"
+          className="h-[34px] min-w-[min(100%,14rem)] flex-1 rounded-full border border-bds-gray-10 bg-background px-4 text-[14px] text-foreground outline-none transition-colors placeholder:text-bds-gray-50 focus:border-foreground dark:border-white/10 dark:focus:border-white/40"
         />
       </div>
 
diff --git a/app/vibenet/components/ExplorerSearch.tsx b/app/vibenet/components/ExplorerSearch.tsx
index 8a71b57..7dfca38 100644
--- a/app/vibenet/components/ExplorerSearch.tsx
+++ b/app/vibenet/components/ExplorerSearch.tsx
@@ -93,7 +93,7 @@ export function ExplorerSearch() {
           spellCheck={false}
           autoComplete="off"
           className={cn(
-            'w-full rounded-full border border-bds-gray-10 bg-bds-gray-0 py-3 pl-9 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-bds-blue-40',
+            'w-full rounded-full border border-bds-gray-10 bg-bds-gray-0 py-3 pl-9 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-white/40',
             hasQuery ? 'pr-20' : 'pr-3.5',
           )}
         />
diff --git a/app/vibenet/demos/account/components/CreateAccountModal.tsx b/app/vibenet/demos/account/components/CreateAccountModal.tsx
index 4b06595..8800040 100644
--- a/app/vibenet/demos/account/components/CreateAccountModal.tsx
+++ b/app/vibenet/demos/account/components/CreateAccountModal.tsx
@@ -251,7 +251,7 @@ export function CreateAccountModal({ open, onClose }: CreateAccountModalProps) {
               submit();
             }
           }}
-          className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] font-normal outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-bds-blue-40"
+          className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] font-normal outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40"
         />
       </label>
 
diff --git a/app/vibenet/demos/account/components/SessionKeyEditor.tsx b/app/vibenet/demos/account/components/SessionKeyEditor.tsx
index f4b455c..7180ce1 100644
--- a/app/vibenet/demos/account/components/SessionKeyEditor.tsx
+++ b/app/vibenet/demos/account/components/SessionKeyEditor.tsx
@@ -30,7 +30,7 @@ import { useAccountEngine } from '../useAccountEngine';
 
 const ADDR_RE = /^0x[0-9a-fA-F]{40}$/;
 const INPUT_CLS =
-  'w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-2 text-[13px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-bds-blue-40';
+  'w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-2 text-[13px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40';
 const CHIP_CLS =
   'rounded-full border border-bds-gray-10 px-2.5 py-1 text-[12px] text-bds-gray-60 transition-colors hover:border-bds-gray-15 dark:border-white/10 dark:text-bds-gray-40';
 const CHIP_ON = 'border-base-blue bg-bds-blue-0 text-base-blue';
diff --git a/app/vibenet/demos/account/components/TransactionModal.tsx b/app/vibenet/demos/account/components/TransactionModal.tsx
index 9478472..829732f 100644
--- a/app/vibenet/demos/account/components/TransactionModal.tsx
+++ b/app/vibenet/demos/account/components/TransactionModal.tsx
@@ -58,7 +58,7 @@ import { formatTokenAmount, KIND_LABEL, short, type WalletSigner } from '../shar
 import { conciseError, EstimateRevertedError, isSeqMismatch, TxPendingError, useAccountEngine } from '../useAccountEngine';
 
 const INPUT_CLS =
-  'w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-2 text-[13px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-bds-blue-40';
+  'w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-2 text-[13px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40';
 
 export type TransactPreset = { calls: CallRow[]; gasMode?: 'eth' | 'free' | 'usdv'; metadata?: string };
 /** Apply the staged owner change, or a specific session key's change. */
@@ -812,7 +812,7 @@ export function TransactionModal({ onClose, preset, applyTarget }: TransactionMo
               spellCheck={false}
               placeholder="Optional note / app data — e.g. invoice #4242"
               onChange={(e) => setMetaField(e.target.value)}
-              className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-bds-blue-40"
+              className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40"
             />
             {metadataHex ? (
               <p className="text-[12px] text-bds-gray-60 dark:text-bds-gray-40">
diff --git a/app/vibenet/explorer/address/[addr]/OwnedAccountView.tsx b/app/vibenet/explorer/address/[addr]/OwnedAccountView.tsx
index 6e8677d..dbf1543 100644
--- a/app/vibenet/explorer/address/[addr]/OwnedAccountView.tsx
+++ b/app/vibenet/explorer/address/[addr]/OwnedAccountView.tsx
@@ -41,7 +41,7 @@ import { ActivityTable } from './ActivityTable';
 import { AssetsCard } from './AssetsCard';
 
 const INPUT_CLS =
-  'w-full rounded-lg border border-bds-gray-10 bg-background px-3.5 py-2.5 text-[14px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-bds-blue-40';
+  'w-full rounded-lg border border-bds-gray-10 bg-background px-3.5 py-2.5 text-[14px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40';
 
 const SECTIONS: ShellSection[] = [
   { id: 'overview', label: 'Overview' },
diff --git a/app/vibenet/faucet/page.tsx b/app/vibenet/faucet/page.tsx
index 5c01970..1dce1f8 100644
--- a/app/vibenet/faucet/page.tsx
+++ b/app/vibenet/faucet/page.tsx
@@ -235,7 +235,7 @@ export default function FaucetPage() {
               placeholder="0x…"
               spellCheck={false}
               autoComplete="off"
-              className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] font-normal text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-bds-blue-40"
+              className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] font-normal text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-white/40"
             />
           </label>
           <div className="flex flex-wrap gap-3">