diff --git a/app/src/app/fonts.ts b/app/src/app/fonts.ts
index 60ba14b2..200b59d3 100644
--- a/app/src/app/fonts.ts
+++ b/app/src/app/fonts.ts
@@ -1,10 +1,12 @@
-import { Inter, Space_Mono, Unbounded } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
 
 /**
  * Font loaders shared by the root layout and global-error.tsx.
  * global-error replaces the root layout when active, so it cannot inherit
  * these variables — it imports them from here instead of duplicating them.
+ *
+ * One family for the interface, figures included (Geist, as most launchpads keep a single grotesk); Geist Mono only
+ * for addresses and transaction hashes, where every character must line up.
  */
-export const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
-export const spaceMono = Space_Mono({ subsets: ["latin"], weight: ["400", "700"], variable: "--font-space-mono", display: "swap" });
-export const unbounded = Unbounded({ subsets: ["latin"], weight: ["600", "700"], variable: "--font-unbounded", display: "swap" });
+export const geist = Geist({ subsets: ["latin"], variable: "--font-geist", display: "swap" });
+export const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono", display: "swap" });
diff --git a/app/src/app/global-error.tsx b/app/src/app/global-error.tsx
index 57c1de95..4268c6a9 100644
--- a/app/src/app/global-error.tsx
+++ b/app/src/app/global-error.tsx
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { useEffect } from "react";
 import "./globals.css";
-import { inter, spaceMono, unbounded } from "./fonts";
+import { geist, geistMono } from "./fonts";
 import { errorBody, errorRegionLabel, sanitizeDigest } from "@/lib/error-copy";
 
 /**
@@ -24,7 +24,7 @@ export default function GlobalError({
   }, [error]);
   const digest = sanitizeDigest(error.digest);
   return (
-    <html lang="en" className={`${inter.variable} ${spaceMono.variable} ${unbounded.variable}`}>
+    <html lang="en" className={`${geist.variable} ${geistMono.variable}`}>
       <body className="min-h-screen flex flex-col">
         <main aria-label={errorRegionLabel("global")} className="mx-auto max-w-3xl px-4 py-24 text-center space-y-5">
           <h1 className="font-display font-bold text-7xl">500</h1>
diff --git a/app/src/app/globals.css b/app/src/app/globals.css
index 11c15a93..d4fbc062 100644
--- a/app/src/app/globals.css
+++ b/app/src/app/globals.css
@@ -10,9 +10,13 @@
 
 /* Chart code reads tokens at runtime; retain even tokens with no utility class. */
 @theme static {
-  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --font-mono: var(--font-space-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
-  --font-display: var(--font-unbounded), var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+  --font-sans: var(--font-geist), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  /* figures: every price, amount and count. The same Geist as the words, with tabular digits (see .font-mono below),
+     the way other launchpads set their numbers; a typewriter face for money read as a terminal, not a market. */
+  --font-mono: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
+  /* addresses and transaction hashes: a true monospace, so 0x strings line up and read character by character */
+  --font-code: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-display: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
 
   /* surfaces */
   --color-paper: #fafaf8;
@@ -53,16 +57,69 @@
   --color-chart-grid: #f1f0ee;
   --color-chart-vol: #cbd5e1;
 
+  /* the dim second voice of a display headline: a neutral grey (no slate cast against the warm paper) */
+  --color-dim: #737373;
+  /* decorative glows (card edges, hover halos, beams, the hero grid): neutral on light, brand blue on dark,
+     so blue on light stays the action colour alone */
+  --color-glow: rgb(15 23 42 / 0.3);
+  --color-glow-soft: rgb(15 23 42 / 0.035);
+  /* segmented controls (components/vendor/toggle-group.tsx): a recessed track and a raised thumb that slides */
+  --color-track: #f1f1ef;
+  --color-thumb: #ffffff;
+
   --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
   --shadow-card-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 10px 28px rgba(15, 23, 42, 0.09);
   --shadow-sheet: 0 -8px 40px rgba(15, 23, 42, 0.12);
   --shadow-dialog: 0 24px 64px rgba(15, 23, 42, 0.18);
+  --shadow-track: inset 0 0 0 1px rgba(15, 23, 42, 0.05), inset 0 1px 2px rgba(15, 23, 42, 0.06);
+  --shadow-thumb: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.1), 0 3px 8px -3px rgba(15, 23, 42, 0.14);
+
+  /* Magic UI motion (components/vendor, MIT): each one stops under reduced motion at its call site */
+  --animate-marquee: marquee var(--duration) infinite linear;
+  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
+  --animate-shiny-text: shiny-text 8s infinite;
+  --animate-shine: shine var(--duration) infinite linear;
+}
+
+@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } }
+@keyframes marquee-vertical { from { transform: translateY(0); } to { transform: translateY(calc(-100% - var(--gap))); } }
+@keyframes shiny-text {
+  0%, 90%, 100% { background-position: calc(-100% - var(--shiny-width)) 0; }
+  30%, 60% { background-position: calc(100% + var(--shiny-width)) 0; }
+}
+@keyframes shine {
+  0% { background-position: 0% 0%; }
+  50% { background-position: 100% 100%; }
+  to { background-position: 0% 0%; }
 }
 
+/* A band of light that crosses a filled call to action now and then (and once, quickly, on hover). The host needs
+   relative + overflow-hidden. A shine, not a colour: white at low opacity over the button's own fill. */
+.bb-sheen::after {
+  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
+  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.34) 50%, transparent 62%);
+  transform: translateX(-100%);
+  animation: bb-sheen 5s linear 1.2s infinite; /* a steady 1.2s crossing every 5s */
+}
+@keyframes bb-sheen { 0%, 76% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
+@media (prefers-reduced-motion: reduce) { .bb-sheen::after { display: none; } }
+
+/* The hero's first-paint entrance: pure CSS so the words are there before any script runs. `--d` staggers it. */
+.bb-rise { animation: bb-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: var(--d, 0ms); }
+@keyframes bb-rise { from { opacity: 0; transform: translateY(12px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
+@media (prefers-reduced-motion: reduce) { .bb-rise { animation: none; } }
+
 :root {
   color-scheme: light;
 }
 
+/* The page column, boxed like other launchpads: 72rem by default, and 80rem on the market pages (home and token),
+   which hold a .bb-mid element, so the board fits four cards a row and the chart sits beside its trade column, with
+   margins showing on any laptop screen. The header's resting row lines up with whichever column the page uses. */
+:root { --page-max: 72rem; --page-pad: 1rem; }
+:root:has(.bb-mid) { --page-max: 80rem; --page-pad: clamp(1rem, 2.5vw, 2rem); }
+.bb-page { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-pad); }
+
 /* ── Dark: black ground, alpha ramp of white, near-zero chroma greys. The blue
    and green brighten because the light values drop under 3:1 on black. ── */
 .dark {
@@ -94,11 +151,18 @@
   --color-holder-good-bg: #06241a;
   --color-chart-grid: #1a1a1a;
   --color-chart-vol: #333333;
+  --color-dim: #8c8c8c;
+  --color-glow: #4d8bff;
+  --color-glow-soft: rgb(77 139 255 / 0.09);
+  --color-track: #000000;
+  --color-thumb: #232323;
   --color-scrim: #000000;
   --shadow-card: 0 1px 2px #00000026, 0 4px 16px #00000026;
   --shadow-card-hover: 0 2px 4px #00000033, 0 10px 28px #00000040;
   --shadow-sheet: 0 -8px 40px #00000066;
   --shadow-dialog: 0 24px 64px #00000080;
+  --shadow-track: inset 0 0 0 1px #1f1f1f, inset 0 1px 2px #00000099;
+  --shadow-thumb: inset 0 1px 0 #ffffff17, 0 0 0 1px #ffffff0d, 0 2px 6px -1px #000000b3;
 }
 
 /* Black paper does not print: a class-based theme survives into the print
@@ -132,11 +196,11 @@ body {
   overflow-x: clip;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-feature-settings: "cv11", "ss01";
 }
 
-/* tabular numbers everywhere money shows */
-.tnum {
+/* tabular numbers everywhere money shows; figures (font-mono) always line up in columns */
+.tnum,
+.font-mono {
   font-variant-numeric: tabular-nums;
 }
 
@@ -277,7 +341,14 @@ input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
 @keyframes bb-row-sell { 0% { background-color: var(--color-down-soft); border-color: var(--color-down); } 100% { background-color: var(--color-card); border-color: var(--color-line); } }
 .bb-row-buy { animation: bb-row-buy 2.2s ease-out 1; }
 .bb-row-sell { animation: bb-row-sell 2.2s ease-out 1; }
-@media (prefers-reduced-motion: reduce) { .bb-row-new, .bb-row-buy, .bb-row-sell { animation: none; } }
+/* the card layout's version: a ring in the event's colour instead of a row fill */
+@keyframes bb-card-new { 0% { box-shadow: 0 0 0 2px var(--color-ink); } 100% { box-shadow: 0 0 0 2px transparent; } }
+@keyframes bb-card-buy { 0% { box-shadow: 0 0 0 2px var(--color-up), 0 0 28px -6px var(--color-up); } 100% { box-shadow: 0 0 0 2px transparent, 0 0 28px -6px transparent; } }
+@keyframes bb-card-sell { 0% { box-shadow: 0 0 0 2px var(--color-down), 0 0 28px -6px var(--color-down); } 100% { box-shadow: 0 0 0 2px transparent, 0 0 28px -6px transparent; } }
+.bb-card-new { animation: bb-card-new 1.6s ease-out 1; }
+.bb-card-buy { animation: bb-card-buy 2.2s ease-out 1; }
+.bb-card-sell { animation: bb-card-sell 2.2s ease-out 1; }
+@media (prefers-reduced-motion: reduce) { .bb-row-new, .bb-row-buy, .bb-row-sell, .bb-card-new, .bb-card-buy, .bb-card-sell { animation: none; } }
 
 /* ── loading system: route progress bar, skeleton shimmer, spinner ─────────── */
 /* scaleX rather than width: the bar animates on the compositor instead of
diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
index 07146233..0571eeb9 100644
--- a/app/src/app/layout.tsx
+++ b/app/src/app/layout.tsx
@@ -14,7 +14,7 @@ import Footer from "@/components/Footer";
 import RouteProgress from "@/components/RouteProgress";
 import ThemeProvider from "@/components/ThemeProvider";
 import { Suspense } from "react";
-import { inter, spaceMono, unbounded } from "./fonts";
+import { geist, geistMono } from "./fonts";
 
 const TITLE = SITE_TITLE;
 const DESCRIPTION = SITE_DESCRIPTION;
@@ -44,7 +44,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
   // Organization + WebSite + WebApplication: the entity record search engines reconcile the brand word against.
   const siteJsonLd = siteJsonLdHtml({ siteUrl: SITE_URL, brand: BRAND, domain: BRAND_DOMAIN, description: SITE_DESCRIPTION, sameAs: [`https://x.com/${BRAND_X}`, BRAND_GITHUB] });
   return (
-    <html lang="en" className={`${inter.variable} ${spaceMono.variable} ${unbounded.variable}`} suppressHydrationWarning>
+    <html lang="en" className={`${geist.variable} ${geistMono.variable}`} suppressHydrationWarning>
       <body id="site-top" tabIndex={-1} className="min-h-screen flex flex-col">
         <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: siteJsonLd }} />
         <ThemeProvider nonce={nonce}>
diff --git a/app/src/app/opengraph-image.tsx b/app/src/app/opengraph-image.tsx
index 00789a43..c819b080 100644
--- a/app/src/app/opengraph-image.tsx
+++ b/app/src/app/opengraph-image.tsx
@@ -35,7 +35,7 @@ export default async function OgImage() {
   const stat = totals && totals.launches > 0 ? `${totals.launches} launches · ${fmtUsd(totals.volume_usd, { compact: true })} traded · $0 in fees, ever` : "no platform fee, ever";
   return new ImageResponse(
     (
-      <div style={{ width: "100%", height: "100%", background: PAPER, display: "flex", flexDirection: "column", fontFamily: "Inter, sans-serif", position: "relative", overflow: "hidden", color: INK }}>
+      <div style={{ width: "100%", height: "100%", background: PAPER, display: "flex", flexDirection: "column", fontFamily: "Geist, sans-serif", position: "relative", overflow: "hidden", color: INK }}>
         <div style={{ position: "absolute", top: -320, left: -120, width: 900, height: 640, borderRadius: "50%", background: "radial-gradient(closest-side, #EAF0FF 0%, rgba(234,240,255,0) 100%)" }} />
         <div style={{ position: "absolute", right: -140, bottom: -260, width: 620, height: 620, borderRadius: "50%", border: `18px solid ${LINE}`, opacity: 0.7 }} />
 
@@ -48,12 +48,12 @@ export default async function OgImage() {
               <span style={{ color: BLUE }}>{BRAND_TLD}</span>
             </span>
           </div>
-          <span style={{ fontSize: 18, color: MUTED, fontFamily: "Space Mono, monospace" }}>{stat}</span>
+          <span style={{ fontSize: 18, color: MUTED, fontFamily: "Geist, sans-serif" }}>{stat}</span>
         </div>
 
         {/* headline */}
         <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 64px" }}>
-          <div style={{ fontFamily: "Unbounded, Inter, sans-serif", fontWeight: 700, fontSize: 86, lineHeight: 1.0, letterSpacing: -3, display: "flex", flexDirection: "column" }}>
+          <div style={{ fontFamily: "Geist, sans-serif", fontWeight: 700, fontSize: 86, lineHeight: 1.0, letterSpacing: -3, display: "flex", flexDirection: "column" }}>
             <span style={{ display: "flex" }}>
               Launch a token.&nbsp;<span style={{ color: BLUE }}>Free.</span>
             </span>
diff --git a/app/src/app/t/[chain]/[token]/opengraph-image.tsx b/app/src/app/t/[chain]/[token]/opengraph-image.tsx
index e6c02239..a38c705c 100644
--- a/app/src/app/t/[chain]/[token]/opengraph-image.tsx
+++ b/app/src/app/t/[chain]/[token]/opengraph-image.tsx
@@ -84,7 +84,7 @@ export default async function TokenOg({ params }: { params: Promise<{ chain: str
   const h = hueOf(token);
   return new ImageResponse(
     (
-      <div style={{ width: "100%", height: "100%", background: PAPER, display: "flex", flexDirection: "column", fontFamily: "Inter, sans-serif", position: "relative", overflow: "hidden", color: INK }}>
+      <div style={{ width: "100%", height: "100%", background: PAPER, display: "flex", flexDirection: "column", fontFamily: "Geist, sans-serif", position: "relative", overflow: "hidden", color: INK }}>
         <div style={{ position: "absolute", top: -320, left: -120, width: 900, height: 640, borderRadius: "50%", background: "radial-gradient(closest-side, #EAF0FF 0%, rgba(234,240,255,0) 100%)" }} />
         <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "40px 64px 0" }}>
           <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
@@ -111,18 +111,18 @@ export default async function TokenOg({ params }: { params: Promise<{ chain: str
             {logo ? (
               <img src={logo} alt="" width={220} height={220} style={{ width: 220, height: 220, borderRadius: 48, objectFit: "cover", border: `1px solid ${LINE}` }} />
             ) : (
-              <div style={{ width: 220, height: 220, borderRadius: 48, display: "flex", alignItems: "center", justifyContent: "center", background: `linear-gradient(135deg, hsl(${h} 70% 55%), hsl(${(h + 40) % 360} 75% 45%))`, color: "#fff", fontFamily: "Unbounded, Inter, sans-serif", fontWeight: 700, fontSize: 110 }}>
+              <div style={{ width: 220, height: 220, borderRadius: 48, display: "flex", alignItems: "center", justifyContent: "center", background: `linear-gradient(135deg, hsl(${h} 70% 55%), hsl(${(h + 40) % 360} 75% 45%))`, color: "#fff", fontFamily: "Geist, sans-serif", fontWeight: 700, fontSize: 110 }}>
                 {card.symbol.slice(0, 1)}
               </div>
             )}
             <div style={{ display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }}>
               <div style={{ display: "flex", alignItems: "baseline", gap: 18 }}>
-                <span style={{ fontFamily: "Unbounded, Inter, sans-serif", fontWeight: 700, fontSize: 72, letterSpacing: -2, lineHeight: 1.05 }}>{card.title}</span>
-                <span style={{ fontFamily: "Space Mono, monospace", fontSize: 30, color: MUTED }}>{card.symbol}</span>
+                <span style={{ fontFamily: "Geist, sans-serif", fontWeight: 700, fontSize: 72, letterSpacing: -2, lineHeight: 1.05 }}>{card.title}</span>
+                <span style={{ fontFamily: "Geist, sans-serif", fontSize: 30, color: MUTED }}>{card.symbol}</span>
               </div>
               <div style={{ display: "flex", alignItems: "baseline", gap: 18, marginTop: 18 }}>
-                <span style={{ fontFamily: "Unbounded, Inter, sans-serif", fontWeight: 700, fontSize: 64, letterSpacing: -2 }}>{card.mcap}</span>
-                <span style={{ fontFamily: "Space Mono, monospace", fontSize: 32, fontWeight: 700, color: card.up === null ? MUTED : card.up ? UP : DOWN }}>{card.change}</span>
+                <span style={{ fontFamily: "Geist, sans-serif", fontWeight: 700, fontSize: 64, letterSpacing: -2 }}>{card.mcap}</span>
+                <span style={{ fontFamily: "Geist, sans-serif", fontSize: 32, fontWeight: 700, color: card.up === null ? MUTED : card.up ? UP : DOWN }}>{card.change}</span>
                 <span style={{ fontSize: 22, color: MUTED }}>market cap · since launch</span>
               </div>
               <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 26 }}>
diff --git a/app/src/components/WalletMenu.module.css b/app/src/components/WalletMenu.module.css
index 41c23f38..d830af5a 100644
--- a/app/src/components/WalletMenu.module.css
+++ b/app/src/components/WalletMenu.module.css
@@ -16,7 +16,7 @@
 .trigger:hover, .trigger[data-popup-open] { border-color: var(--color-line-strong); background: var(--color-line); }
 .triggerMark { position: relative; display: flex; flex-shrink: 0; }
 .connectionDot { position: absolute; right: 0; bottom: 0; width: 7px; height: 7px; background: var(--color-up); border: 2px solid var(--color-card); border-radius: 50%; }
-.triggerAddress { font: 400 12px var(--font-mono); font-variant-numeric: tabular-nums; }
+.triggerAddress { font: 400 12px var(--font-code); font-variant-numeric: tabular-nums; }
 .triggerNetwork { padding-left: 8px; border-left: 1px solid var(--color-line-strong); font: 500 10px var(--font-sans); color: var(--color-muted); }
 .chevron { color: var(--color-muted); transition: transform 160ms; }
 .trigger[data-popup-open] .chevron { transform: rotate(180deg); }
@@ -59,9 +59,9 @@
 .close:hover { color: var(--color-ink); background: var(--color-card); }
 .identity { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
 .identityText { min-width: 0; }
-.account { font: 400 20px var(--font-mono); letter-spacing: -.045em; }
+.account { font: 400 20px var(--font-code); letter-spacing: -.02em; }
 .provider { margin-top: 4px; font-size: 12px; color: var(--color-muted); overflow-wrap: anywhere; }
-.fullAddress { margin-top: 16px; font: 400 11px/1.75 var(--font-mono); color: var(--color-muted); overflow-wrap: anywhere; user-select: all; }
+.fullAddress { margin-top: 16px; font: 400 11px/1.75 var(--font-code); color: var(--color-muted); overflow-wrap: anywhere; user-select: all; }
 .shortcuts { display: flex; gap: 8px; margin: 12px 0 20px; }
 .shortcut { display: inline-flex; justify-content: center; align-items: center; gap: 7px; flex: 1; min-height: 44px; padding: 8px; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-card); font-size: 12px; font-weight: 500; cursor: pointer; }
 .shortcut:hover { border-color: var(--color-line-strong); }
diff --git a/app/src/components/launchpad/AdminQueue.tsx b/app/src/components/launchpad/AdminQueue.tsx
index ae0213ca..3482e78b 100644
--- a/app/src/components/launchpad/AdminQueue.tsx
+++ b/app/src/components/launchpad/AdminQueue.tsx
@@ -2,7 +2,8 @@
 
 import Link from "next/link";
 import { useCallback, useEffect, useState } from "react";
-import { useAccount, useConfig } from "wagmi";
+import { useConfig } from "wagmi";
+import { useHydratedAccount } from "@/lib/useHydratedAccount";
 import { getWalletClient } from "wagmi/actions";
 import { btn, card } from "@/components/ui";
 import { buildModMessage } from "@/lib/launchpad/posts";
@@ -19,7 +20,7 @@ function nonce(): string {
 
 /** Moderation queue: reported posts, hide/unhide with an admin-wallet signature. */
 export default function AdminQueue() {
-  const { address } = useAccount();
+  const { address } = useHydratedAccount();
   const config = useConfig();
   const [posts, setPosts] = useState<PostRow[] | null>(null);
   const [err, setErr] = useState<string | null>(null);
diff --git a/app/src/components/launchpad/BrandMarks.tsx b/app/src/components/launchpad/BrandMarks.tsx
new file mode 100644
index 00000000..a63ce3f3
--- /dev/null
+++ b/app/src/components/launchpad/BrandMarks.tsx
@@ -0,0 +1,8 @@
+/** The X mark (lucide ships no brand icons). Decorative: the link around it carries the words. */
+export function XMark({ className = "size-3" }: { className?: string }) {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24" className={className} fill="currentColor">
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+    </svg>
+  );
+}
diff --git a/app/src/components/launchpad/ChainLogo.tsx b/app/src/components/launchpad/ChainLogo.tsx
new file mode 100644
index 00000000..a4cbbac7
--- /dev/null
+++ b/app/src/components/launchpad/ChainLogo.tsx
@@ -0,0 +1,44 @@
+import Image from "next/image";
+import type { ChainKey } from "@/lib/chainPublic";
+
+/**
+ * Official network marks (public/brand; each file names its source), each on its own rounded tile so a white mark
+ * reads on the light theme too. Base's blue square is its own tile; Robinhood's feather and Arc's arch sit on black,
+ * as in their own app icons. Always decorative: the chain's name is in the text beside it.
+ */
+/** Black tiles keep a hairline inner edge, so they still read as tiles on the black dark theme. */
+const DARK_TILE = "bg-black shadow-[inset_0_0_0_1px_rgba(255,255,255,0.16)]";
+// `fill`: the mark is its own tile and covers it edge to edge
+const MARK: Record<ChainKey, { src: string; tile: string; w: number; h: number; scale: number; fill: boolean }> = {
+  base: { src: "/brand/base.svg", tile: "", w: 1, h: 1, scale: 1, fill: true },
+  robinhood: { src: "/brand/robinhood-white.svg", tile: DARK_TILE, w: 32, h: 42, scale: 0.62, fill: false },
+  arc: { src: "/brand/arc.svg", tile: DARK_TILE, w: 31, h: 32, scale: 0.56, fill: false },
+};
+
+export function ChainLogo({ chain, size = 18, className = "" }: { chain: ChainKey; size?: number; className?: string }) {
+  const mark = MARK[chain];
+  const box = Math.round(size * mark.scale);
+  const height = box;
+  const width = Math.round((box * mark.w) / mark.h);
+  return (
+    <span aria-hidden="true" className={`inline-grid shrink-0 place-items-center overflow-hidden rounded-[28%] ${mark.tile} ${className}`} style={{ width: size, height: size }}>
+      <Image src={mark.src} alt="" width={mark.fill ? size : width} height={mark.fill ? size : height} draggable={false} className={mark.fill ? "size-full" : ""} />
+    </span>
+  );
+}
+
+/** The networks as one overlapping row; inside a `group` they fan out on hover. */
+export function ChainLogoStack({ chains, size = 18 }: { chains: readonly ChainKey[]; size?: number }) {
+  return (
+    <span aria-hidden="true" className="inline-flex shrink-0 items-center">
+      {chains.map((chain, i) => (
+        <ChainLogo key={chain} chain={chain} size={size} className={`ring-2 ring-paper transition-[margin] duration-200 motion-reduce:transition-none ${i ? "-ml-1.5 group-hover:ml-0.5" : ""}`} />
+      ))}
+    </span>
+  );
+}
+
+/** A small network mark pinned to the corner of a token avatar. Wrap the avatar in a `relative` element. */
+export function ChainCorner({ chain, size = 14 }: { chain: ChainKey; size?: number }) {
+  return <ChainLogo chain={chain} size={size} className="absolute -right-1 -bottom-1 ring-2 ring-paper" />;
+}
diff --git a/app/src/components/launchpad/LaunchTape.tsx b/app/src/components/launchpad/LaunchTape.tsx
index d2c6d9f9..2a527d20 100644
--- a/app/src/components/launchpad/LaunchTape.tsx
+++ b/app/src/components/launchpad/LaunchTape.tsx
@@ -36,7 +36,7 @@ export function TapeList({ items, now, fresh, label = "Recent launches and trade
                 {item.kind === "swap" && item.is_dev ? <span className="text-warm-ink">by the creator</span> : null}
                 <span className="ml-auto shrink-0 text-[10px] text-muted">{CHAIN_SHORT[item.chain]}</span>
               </div>
-              <p className="mt-1 font-mono text-[10px] text-muted">{shortAddr(item.kind === "launch" ? item.launcher : item.trader)}{item.kind === "launch" && item.lp_fee === 0 ? <span className="font-sans">, 0% trading fee</span> : null}</p>
+              <p className="mt-1 font-code text-[10px] text-muted">{shortAddr(item.kind === "launch" ? item.launcher : item.trader)}{item.kind === "launch" && item.lp_fee === 0 ? <span className="font-sans">, 0% trading fee</span> : null}</p>
             </Link>
           </li>
         );
diff --git a/app/src/components/launchpad/TokenAvatar.tsx b/app/src/components/launchpad/TokenAvatar.tsx
index 04aa738b..5152b35c 100644
--- a/app/src/components/launchpad/TokenAvatar.tsx
+++ b/app/src/components/launchpad/TokenAvatar.tsx
@@ -1,13 +1,7 @@
 "use client";
 
 import { useState } from "react";
-
-/** Deterministic hue from an address — same identity trick as the tape dots. */
-export function hueOf(addr: string): number {
-  let h = 0;
-  for (let i = 2; i < Math.min(addr.length, 18); i++) h = (h * 31 + addr.charCodeAt(i)) % 360;
-  return h;
-}
+import { addressHue } from "@/lib/launchpad/tint";
 
 /**
  * Token image with a graceful fallback: a soft gradient tile with the first letter of the symbol
@@ -17,7 +11,7 @@ export function hueOf(addr: string): number {
 export default function TokenAvatar({ token, symbol, image, size = 40, className = "" }: { chain?: string; token: string; symbol: string; image?: string | null; size?: number; className?: string }) {
   const [failedSrc, setFailedSrc] = useState<string | null>(null);
   const src = image?.trim() || null;
-  const h = hueOf(token);
+  const h = addressHue(token); // the same hue the token page tint falls back to
   const style = { width: size, height: size, fontSize: Math.max(11, Math.round(size * 0.42)) };
   if (src && src !== failedSrc) {
     return (
diff --git a/app/src/components/sections/SectionIntro.tsx b/app/src/components/sections/SectionIntro.tsx
index 3d9d9fa7..6f5e1897 100644
--- a/app/src/components/sections/SectionIntro.tsx
+++ b/app/src/components/sections/SectionIntro.tsx
@@ -1,15 +1,17 @@
 import type { ReactNode } from "react";
 import styles from "./SectionShell.module.css";
 
-/** Shared editorial hierarchy for the supporting product pages. */
-export default function SectionIntro({ eyebrow, title, description, children }: {
+/** Shared page header for the supporting product pages: a small label chip, the title, one paragraph and the page's actions. */
+export default function SectionIntro({ eyebrow, icon, title, description, children }: {
   eyebrow: string;
+  /** a small mark for the chip; the same icon the navigation uses for the page */
+  icon?: ReactNode;
   title: string;
   description: ReactNode;
   children?: ReactNode;
 }) {
   return <header className={styles.intro}>
-    <p className={styles.eyebrow}><span aria-hidden="true" />{eyebrow}</p>
+    <p className={styles.eyebrow}>{icon ? <span aria-hidden="true" className={styles.eyebrowIcon}>{icon}</span> : null}{eyebrow}</p>
     <div className={styles.introRow}>
       <div className={styles.introCopy}>
         <h1 className={`font-display ${styles.title}`}>{title}</h1>
diff --git a/app/src/components/sections/SectionShell.module.css b/app/src/components/sections/SectionShell.module.css
index 4232a531..8c4b554e 100644
--- a/app/src/components/sections/SectionShell.module.css
+++ b/app/src/components/sections/SectionShell.module.css
@@ -1,20 +1,25 @@
 .page { max-width: 1152px; margin-inline: auto; padding: 40px 16px 32px; min-width: 0; }
-.intro { padding-bottom: 32px; border-bottom: 1px solid var(--color-line); margin-bottom: 32px; }
-.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--color-muted); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
-.eyebrow > span { width: 6px; height: 6px; background: var(--color-brand); border-radius: 1px; }
+.intro { margin-bottom: 36px; }
+/* the page's label as a chip, like the one on the home hero: sentence case, never a tracked all-caps eyebrow */
+.eyebrow { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 28px; padding: 0 11px; border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-card); color: var(--color-body); font-size: 12px; font-weight: 500; }
+.eyebrowIcon { display: inline-flex; flex-shrink: 0; color: var(--color-brand); }
+.eyebrowIcon svg { width: 14px; height: 14px; }
 .introRow { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 18px; }
 .introCopy { min-width: 0; max-width: 740px; }
-.title { color: var(--color-ink); font-size: 32px; line-height: 1.14; font-weight: 700; letter-spacing: -.04em; text-wrap: balance; overflow-wrap: anywhere; }
-.description { max-width: 620px; margin-top: 16px; color: var(--color-body); font-size: 15px; line-height: 1.7; text-wrap: pretty; }
+.title { color: var(--color-ink); font-size: 32px; line-height: 1.12; font-weight: 700; letter-spacing: -.04em; text-wrap: balance; overflow-wrap: anywhere; }
+.description { max-width: 620px; margin-top: 14px; color: var(--color-body); font-size: 15px; line-height: 1.7; text-wrap: pretty; }
 .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; flex-shrink: 0; }
-.action { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 44px; padding: 10px 17px; border: 1px solid var(--color-line-strong); border-radius: 999px; color: var(--color-ink); font-size: 13px; font-weight: 600; transition: background-color 160ms, border-color 160ms; }
-.action:hover { background: var(--color-card); border-color: var(--color-ink); }
+/* the site's secondary button: a card-coloured rounded rectangle with a strong hairline */
+.action { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--color-line-strong); border-radius: 12px; background: var(--color-card); color: var(--color-ink); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color 160ms, border-color 160ms, transform 150ms; }
+.action:hover { background: var(--color-paper); border-color: color-mix(in srgb, var(--color-ink) 40%, transparent); }
+.action:active { transform: scale(.98); }
+.action:disabled { opacity: .5; cursor: wait; }
 .textLink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; color: var(--color-body); }
 .textLink:hover { color: var(--color-ink); }
-.panel { min-width: 0; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-paper); overflow: hidden; }
+.panel { min-width: 0; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-card); overflow: hidden; }
 .panelHeading { min-height: 64px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--color-line); color: var(--color-ink); font-size: 14px; font-weight: 600; }
 .anchorSection { scroll-margin-top: 104px; }
 .page :is(a, button, summary, input, textarea):focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }
-@media (min-width: 640px) { .page { padding-top: 56px; } .title { font-size: 44px; } .description { font-size: 16px; } }
+@media (min-width: 640px) { .page { padding-top: 48px; } .title { font-size: 44px; } .description { font-size: 16px; } }
 @media (max-width: 1023px) { .introRow { align-items: flex-start; flex-direction: column; } }
-@media (prefers-reduced-motion: reduce) { .action { transition: none; } }
+@media (prefers-reduced-motion: reduce) { .action { transition: none; } .action:active { transform: none; } }
diff --git a/app/src/components/theme.test.ts b/app/src/components/theme.test.ts
index 30099aaa..3f87c52f 100644
--- a/app/src/components/theme.test.ts
+++ b/app/src/components/theme.test.ts
@@ -60,10 +60,12 @@ test("light is the original Clear Sky palette, unchanged, and the unclassed base
   assert.match(darkBlock, /color-scheme:\s*dark/);
 });
 
-test("typography is unchanged", () => {
-  assert.match(themeBlock, /--font-sans:\s*var\(--font-inter\)/);
-  assert.match(themeBlock, /--font-mono:\s*var\(--font-space-mono\)/);
-  assert.match(themeBlock, /--font-display:\s*var\(--font-unbounded\)/);
+test("typography is one family: Geist for words and figures, Geist Mono only for addresses and hashes", () => {
+  assert.match(themeBlock, /--font-sans:\s*var\(--font-geist\)/);
+  assert.match(themeBlock, /--font-mono:\s*var\(--font-geist\)/);
+  assert.match(themeBlock, /--font-code:\s*var\(--font-geist-mono\)/);
+  assert.match(themeBlock, /--font-display:\s*var\(--font-geist\)/);
+  assert.match(css, /\.font-mono\s*\{\s*font-variant-numeric:\s*tabular-nums;/, "figures line up in columns");
 });
 
 test("the dark: variant resolves against a class, not a media query", () => {
diff --git a/app/src/components/ui.ts b/app/src/components/ui.ts
index fb45a9b4..2041cc35 100644
--- a/app/src/components/ui.ts
+++ b/app/src/components/ui.ts
@@ -1,18 +1,20 @@
 /** Shared class strings for the "Clear Sky" design system. Presentation only. */
 
+// every button presses in a touch (scale 0.98) and filled ones carry a hairline top highlight; disabled ones stay still
 const btnBase =
-  "inline-flex items-center justify-center gap-1.5 rounded-xl font-semibold text-sm whitespace-nowrap transition-colors disabled:opacity-40 disabled:cursor-not-allowed select-none";
+  "inline-flex items-center justify-center gap-1.5 rounded-xl font-semibold text-sm whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform,filter] duration-150 active:scale-[0.98] disabled:opacity-40 disabled:cursor-not-allowed disabled:active:scale-100 select-none motion-reduce:transition-colors motion-reduce:active:scale-100";
+const lit = "shadow-[inset_0_1px_0_rgb(255_255_255/0.18)]";
 
 export const btn = {
-  primary: `${btnBase} min-h-11 px-5 bg-brand text-inverse hover:bg-brand-strong`,
-  primarySm: `${btnBase} min-h-9 px-3.5 text-[13px] bg-brand text-inverse hover:bg-brand-strong`,
+  primary: `${btnBase} ${lit} min-h-11 px-5 bg-brand text-inverse hover:bg-brand-strong hover:shadow-[inset_0_1px_0_rgb(255_255_255/0.18),0_10px_24px_-12px_var(--color-glow)]`,
+  primarySm: `${btnBase} ${lit} min-h-9 px-3.5 text-[13px] bg-brand text-inverse hover:bg-brand-strong`,
   secondary: `${btnBase} min-h-11 px-5 bg-card text-ink border border-line-strong hover:border-ink/40 hover:bg-paper`,
   secondarySm: `${btnBase} min-h-9 px-3.5 text-[13px] bg-card text-ink border border-line-strong hover:border-ink/40`,
   soft: `${btnBase} min-h-11 px-5 bg-brand-soft text-brand hover:bg-brand hover:text-inverse`,
   softSm: `${btnBase} min-h-9 px-3.5 text-[13px] bg-brand-soft text-brand hover:bg-brand hover:text-inverse`,
-  up: `${btnBase} min-h-11 px-5 bg-up text-inverse hover:brightness-110`,
+  up: `${btnBase} ${lit} min-h-11 px-5 bg-up text-inverse hover:brightness-110 hover:shadow-[inset_0_1px_0_rgb(255_255_255/0.18),0_10px_24px_-12px_var(--color-glow)]`,
   // bg-warm-ink, not bg-warm: white on #d97706 is 3.19:1, below AA for a filled control.
-  warm: `${btnBase} min-h-11 px-5 bg-warm-ink text-inverse hover:brightness-110`,
+  warm: `${btnBase} ${lit} min-h-11 px-5 bg-warm-ink text-inverse hover:brightness-110`,
   warmOutline: `${btnBase} min-h-11 px-5 bg-warm-soft text-warm-ink border border-warm/40 hover:border-warm`,
   icon: `${btnBase} h-10 w-10 rounded-xl text-ink hover:bg-paper border border-transparent hover:border-line`,
 };
@@ -32,4 +34,4 @@ export const helper = "mt-1.5 text-xs text-muted";
 export const pill = "inline-flex items-center gap-1.5 rounded-full border border-line bg-card px-3 py-1.5 text-xs font-medium text-body whitespace-nowrap";
 
 export const codeBlock =
-  "overflow-x-auto rounded-xl bg-paper border border-line px-4 py-3 font-mono text-[13px] leading-relaxed text-ink bb-scroll";
+  "overflow-x-auto rounded-xl bg-paper border border-line px-4 py-3 font-code text-[13px] leading-relaxed text-ink bb-scroll";
diff --git a/app/src/components/vendor/LICENSES.md b/app/src/components/vendor/LICENSES.md
index e41c8321..3745ccc8 100644
--- a/app/src/components/vendor/LICENSES.md
+++ b/app/src/components/vendor/LICENSES.md
@@ -14,6 +14,8 @@ The upstream [licensing guide](https://github.com/cosscom/coss/blob/main/LICENSI
 
 `animated-theme-toggler.tsx` is adapted from the [Magic UI component](https://magicui.design/docs/components/animated-theme-toggler). The upstream [license](https://github.com/magicuidesign/magicui/blob/main/LICENSE.md) is reproduced below. Openlaunch-specific changes are noted in the source.
 
+These are adapted from Magic UI registry items under the same license, each with its local changes noted at the top of the file: `border-beam.tsx` ([border-beam](https://magicui.design/r/border-beam.json)), `marquee.tsx` ([marquee](https://magicui.design/r/marquee.json)), `flickering-grid.tsx` ([flickering-grid](https://magicui.design/r/flickering-grid.json)), `animated-shiny-text.tsx` ([animated-shiny-text](https://magicui.design/r/animated-shiny-text.json)), `magic-card.tsx` ([magic-card](https://magicui.design/r/magic-card.json)), `shine-border.tsx` ([shine-border](https://magicui.design/r/shine-border.json)) and `animated-list.tsx` ([animated-list](https://magicui.design/r/animated-list.json)).
+
 MIT License
 
 Copyright (c) Magic UI
diff --git a/app/src/components/vendor/animated-list.tsx b/app/src/components/vendor/animated-list.tsx
new file mode 100644
index 00000000..4e541d02
--- /dev/null
+++ b/app/src/components/vendor/animated-list.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+// Adapted from Magic UI: https://magicui.design/r/animated-list.json (MIT, see ./LICENSES.md).
+// LOCAL PATCH (openlaunch): driven by real data instead of a timed reveal. The list renders the items it is given;
+// an item whose key is new springs in at the top while the rest slide down, and nothing animates on the first paint.
+// Reduced motion swaps the spring for an instant change.
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { cn } from "@/lib/utils";
+
+export function AnimatedListItem({ children, className }: { children: ReactNode; className?: string }) {
+  const reduced = useReducedMotion();
+  return (
+    <motion.li
+      layout={reduced ? false : "position"}
+      initial={reduced ? false : { scale: 0.6, opacity: 0, y: -12 }}
+      animate={{ scale: 1, opacity: 1, y: 0, originY: 0 }}
+      exit={reduced ? undefined : { scale: 0.9, opacity: 0, transition: { duration: 0.15 } }}
+      transition={{ type: "spring", stiffness: 350, damping: 40 }}
+      className={cn("w-full", className)}
+    >
+      {children}
+    </motion.li>
+  );
+}
+
+export function AnimatedList({ children, className, ...props }: ComponentPropsWithoutRef<"ol">) {
+  return (
+    <ol className={cn("flex flex-col gap-2", className)} {...props}>
+      <AnimatePresence initial={false}>{children}</AnimatePresence>
+    </ol>
+  );
+}
diff --git a/app/src/components/vendor/animated-shiny-text.tsx b/app/src/components/vendor/animated-shiny-text.tsx
new file mode 100644
index 00000000..5ace5752
--- /dev/null
+++ b/app/src/components/vendor/animated-shiny-text.tsx
@@ -0,0 +1,21 @@
+// Adapted from Magic UI: https://magicui.design/r/animated-shiny-text.json (MIT, see ./LICENSES.md).
+// LOCAL PATCH (openlaunch): theme tokens instead of neutral greys; no sweep under reduced motion.
+import type { ComponentPropsWithoutRef, CSSProperties } from "react";
+import { cn } from "@/lib/utils";
+
+export function AnimatedShinyText({ children, className, shimmerWidth = 100, ...props }: ComponentPropsWithoutRef<"span"> & { shimmerWidth?: number }) {
+  return (
+    <span
+      style={{ "--shiny-width": `${shimmerWidth}px` } as CSSProperties}
+      className={cn(
+        "text-muted",
+        "animate-shiny-text bg-size-[var(--shiny-width)_100%] bg-clip-text bg-position-[0_0] bg-no-repeat [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite] motion-reduce:animate-none",
+        "bg-linear-to-r from-transparent via-ink/80 via-50% to-transparent",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
diff --git a/app/src/components/vendor/border-beam.tsx b/app/src/components/vendor/border-beam.tsx
new file mode 100644
index 00000000..8fda95b5
--- /dev/null
+++ b/app/src/components/vendor/border-beam.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+// Adapted from Magic UI: https://magicui.design/r/border-beam.json (MIT, see ./LICENSES.md).
+// LOCAL PATCH (openlaunch): colours default to the theme's glow token; reduced motion shows no beam
+// (a still beam reads as a stray mark on the border) by hiding it with CSS and never starting it, so the server and the
+// browser render the same markup at hydration; the beam is clipped to its box so it never widens the page.
+import { motion, useReducedMotion, type MotionStyle, type Transition } from "motion/react";
+import { cn } from "@/lib/utils";
+
+interface BorderBeamProps {
+  size?: number;
+  duration?: number;
+  delay?: number;
+  colorFrom?: string;
+  colorTo?: string;
+  transition?: Transition;
+  className?: string;
+  style?: React.CSSProperties;
+  reverse?: boolean;
+  initialOffset?: number;
+  borderWidth?: number;
+}
+
+export function BorderBeam({ className, size = 50, delay = 0, duration = 6, colorFrom = "var(--color-glow)", colorTo = "var(--color-glow)", transition, style, reverse = false, initialOffset = 0, borderWidth = 1 }: BorderBeamProps) {
+  const reduced = useReducedMotion();
+  return (
+    <div
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] border-(length:--border-beam-width) border-transparent mask-[linear-gradient(transparent,transparent),linear-gradient(#000,#000)] mask-intersect [mask-clip:padding-box,border-box] motion-reduce:hidden"
+      style={{ "--border-beam-width": `${borderWidth}px` } as React.CSSProperties}
+    >
+      <motion.div
+        className={cn("absolute aspect-square", "bg-linear-to-l from-(--color-from) via-(--color-to) to-transparent", className)}
+        style={{ width: size, offsetPath: `rect(0 auto auto 0 round ${size}px)`, "--color-from": colorFrom, "--color-to": colorTo, ...style } as MotionStyle}
+        initial={{ offsetDistance: `${initialOffset}%` }}
+        animate={reduced ? undefined : { offsetDistance: reverse ? [`${100 - initialOffset}%`, `${-initialOffset}%`] : [`${initialOffset}%`, `${100 + initialOffset}%`] }}
+        transition={{ repeat: Infinity, ease: "linear", duration, delay: -delay, ...transition }}
+      />
+    </div>
+  );
+}
diff --git a/app/src/components/vendor/flickering-grid.tsx b/app/src/components/vendor/flickering-grid.tsx
new file mode 100644
index 00000000..75d2ff11
--- /dev/null
+++ b/app/src/components/vendor/flickering-grid.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+// Adapted from Magic UI: https://magicui.design/r/flickering-grid.json (MIT, see ./LICENSES.md).
+// LOCAL PATCH (openlaunch): the colour is a CSS colour or variable read from the page (so it follows the theme toggle),
+// reduced motion draws one still frame, a hidden tab stops drawing, and frames are capped at ~30fps.
+import { useEffect, useRef } from "react";
+import { cn } from "@/lib/utils";
+
+interface FlickeringGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  squareSize?: number;
+  gridGap?: number;
+  flickerChance?: number;
+  /** Any CSS colour, including `var(--token)`; resolved against the element so a theme change repaints it. */
+  color?: string;
+  maxOpacity?: number;
+}
+
+export function FlickeringGrid({ squareSize = 4, gridGap = 6, flickerChance = 0.3, color = "var(--color-brand)", maxOpacity = 0.3, className, ...props }: FlickeringGridProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!container || !canvas || !ctx) return;
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
+    let rgb = "0, 0, 0";
+    const readColor = () => {
+      const probe = document.createElement("span");
+      probe.style.color = color;
+      container.appendChild(probe);
+      const parsed = getComputedStyle(probe).color.match(/\d+(\.\d+)?/g);
+      probe.remove();
+      if (parsed && parsed.length >= 3) rgb = `${parsed[0]}, ${parsed[1]}, ${parsed[2]}`;
+    };
+    let cols = 0, rows = 0, dpr = 1;
+    let squares = new Float32Array(0);
+    const setup = () => {
+      dpr = window.devicePixelRatio || 1;
+      const width = container.clientWidth, height = container.clientHeight;
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      cols = Math.ceil(width / (squareSize + gridGap));
+      rows = Math.ceil(height / (squareSize + gridGap));
+      squares = new Float32Array(cols * rows);
+      for (let i = 0; i < squares.length; i++) squares[i] = Math.random() * maxOpacity;
+    };
+    const draw = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      for (let i = 0; i < cols; i++) {
+        for (let j = 0; j < rows; j++) {
+          ctx.fillStyle = `rgba(${rgb}, ${squares[i * rows + j]})`;
+          ctx.fillRect(i * (squareSize + gridGap) * dpr, j * (squareSize + gridGap) * dpr, squareSize * dpr, squareSize * dpr);
+        }
+      }
+    };
+    readColor();
+    setup();
+    draw();
+
+    let frame = 0, last = 0, visible = false;
+    const tick = (time: number) => {
+      frame = 0;
+      if (!visible || document.hidden || reduced.matches) return;
+      if (time - last >= 33) {
+        const delta = Math.min(0.1, (time - last) / 1000);
+        last = time;
+        for (let i = 0; i < squares.length; i++) if (Math.random() < flickerChance * delta) squares[i] = Math.random() * maxOpacity;
+        draw();
+      }
+      frame = requestAnimationFrame(tick);
+    };
+    const start = () => { if (!frame && visible && !document.hidden && !reduced.matches) frame = requestAnimationFrame(tick); };
+    const io = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; start(); });
+    io.observe(canvas);
+    const ro = new ResizeObserver(() => { setup(); draw(); });
+    ro.observe(container);
+    const theme = new MutationObserver(() => { readColor(); draw(); });
+    theme.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    document.addEventListener("visibilitychange", start);
+    reduced.addEventListener("change", start);
+    return () => { cancelAnimationFrame(frame); io.disconnect(); ro.disconnect(); theme.disconnect(); document.removeEventListener("visibilitychange", start); reduced.removeEventListener("change", start); };
+  }, [squareSize, gridGap, flickerChance, color, maxOpacity]);
+
+  return (
+    <div ref={containerRef} aria-hidden="true" className={cn("h-full w-full", className)} {...props}>
+      <canvas ref={canvasRef} className="pointer-events-none" />
+    </div>
+  );
+}
diff --git a/app/src/components/vendor/magic-card.tsx b/app/src/components/vendor/magic-card.tsx
new file mode 100644
index 00000000..382a6879
--- /dev/null
+++ b/app/src/components/vendor/magic-card.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+// Adapted from Magic UI: https://magicui.design/r/magic-card.json (MIT, see ./LICENSES.md).
+// LOCAL PATCH (openlaunch): gradient mode only, painted with the theme tokens (paper surface, line border, the glow token); the
+// border glow follows the pointer and the inner spotlight is optional. Touch and reduced motion get the plain card.
+import { useCallback } from "react";
+import { motion, useMotionTemplate, useMotionValue } from "motion/react";
+import { cn } from "@/lib/utils";
+
+export function MagicCard({ children, className, gradientSize = 220, gradientFrom = "var(--color-glow)", gradientTo = "var(--color-glow)", spotlight = "var(--color-glow-soft)" }: { children?: React.ReactNode; className?: string; gradientSize?: number; gradientFrom?: string; gradientTo?: string; spotlight?: string | null }) {
+  const mouseX = useMotionValue(-gradientSize);
+  const mouseY = useMotionValue(-gradientSize);
+  const move = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (e.pointerType !== "mouse") return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    mouseX.set(e.clientX - rect.left);
+    mouseY.set(e.clientY - rect.top);
+  }, [mouseX, mouseY]);
+  const leave = useCallback(() => { mouseX.set(-gradientSize); mouseY.set(-gradientSize); }, [mouseX, mouseY, gradientSize]);
+  const border = useMotionTemplate`linear-gradient(var(--color-paper) 0 0) padding-box, radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px, ${gradientFrom}, ${gradientTo}, var(--color-line) 100%) border-box`;
+  const glow = useMotionTemplate`radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px, ${spotlight ?? "transparent"}, transparent 100%)`;
+  return (
+    <motion.div className={cn("group relative isolate rounded-[inherit] border border-transparent motion-reduce:[background:var(--color-paper)]", className)} onPointerMove={move} onPointerLeave={leave} style={{ background: border }}>
+      {spotlight ? <motion.div aria-hidden="true" className="pointer-events-none absolute inset-px z-0 rounded-[inherit] opacity-0 transition-opacity duration-300 group-hover:opacity-100 motion-reduce:hidden" style={{ background: glow }} /> : null}
+      <div className="relative z-10 h-full rounded-[inherit]">{children}</div>
+    </motion.div>
+  );
+}
diff --git a/app/src/components/vendor/marquee.tsx b/app/src/components/vendor/marquee.tsx
new file mode 100644
index 00000000..534b7a21
--- /dev/null
+++ b/app/src/components/vendor/marquee.tsx
@@ -0,0 +1,36 @@
+// Adapted from Magic UI: https://magicui.design/r/marquee.json (MIT, see ./LICENSES.md).
+// LOCAL PATCH (openlaunch): pauses on hover and focus inside it, stops under reduced motion, and only the first copy
+// of the content is exposed to assistive tech (the repeats are decorative duplicates).
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "@/lib/utils";
+
+interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
+  className?: string;
+  reverse?: boolean;
+  pauseOnHover?: boolean;
+  children: React.ReactNode;
+  vertical?: boolean;
+  repeat?: number;
+}
+
+export function Marquee({ className, reverse = false, pauseOnHover = false, children, vertical = false, repeat = 4, ...props }: MarqueeProps) {
+  return (
+    <div {...props} className={cn("group flex gap-(--gap) overflow-hidden p-2 [--duration:40s] [--gap:1rem]", vertical ? "flex-col" : "flex-row", className)}>
+      {Array.from({ length: repeat }, (_, i) => (
+        <div
+          key={i}
+          aria-hidden={i > 0 ? true : undefined}
+          inert={i > 0 ? true : undefined}
+          className={cn(
+            "flex shrink-0 justify-around gap-(--gap) motion-reduce:animate-none",
+            vertical ? "animate-marquee-vertical flex-col" : "animate-marquee flex-row",
+            pauseOnHover && "group-hover:[animation-play-state:paused] group-focus-within:[animation-play-state:paused]",
+            reverse && "[animation-direction:reverse]",
+          )}
+        >
+          {children}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/app/src/components/vendor/shine-border.tsx b/app/src/components/vendor/shine-border.tsx
new file mode 100644
index 00000000..972695d3
--- /dev/null
+++ b/app/src/components/vendor/shine-border.tsx
@@ -0,0 +1,25 @@
+// Adapted from Magic UI: https://magicui.design/r/shine-border.json (MIT, see ./LICENSES.md).
+// LOCAL PATCH (openlaunch): the theme's glow colour by default (neutral on light, blue on dark); the shine only moves when motion is allowed.
+import { cn } from "@/lib/utils";
+
+export function ShineBorder({ borderWidth = 1, duration = 14, shineColor = "var(--color-glow)", className, style, ...props }: React.HTMLAttributes<HTMLDivElement> & { borderWidth?: number; duration?: number; shineColor?: string | string[] }) {
+  return (
+    <div
+      aria-hidden="true"
+      style={{
+        "--border-width": `${borderWidth}px`,
+        "--duration": `${duration}s`,
+        backgroundImage: `radial-gradient(transparent,transparent, ${Array.isArray(shineColor) ? shineColor.join(",") : shineColor},transparent,transparent)`,
+        backgroundSize: "300% 300%",
+        mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+        WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+        WebkitMaskComposite: "xor",
+        maskComposite: "exclude",
+        padding: "var(--border-width)",
+        ...style,
+      } as React.CSSProperties}
+      className={cn("pointer-events-none absolute inset-0 size-full rounded-[inherit] will-change-[background-position] motion-safe:animate-shine", className)}
+      {...props}
+    />
+  );
+}
diff --git a/app/src/components/vendor/tabs.tsx b/app/src/components/vendor/tabs.tsx
index 259dea0e..c5769dad 100644
--- a/app/src/components/vendor/tabs.tsx
+++ b/app/src/components/vendor/tabs.tsx
@@ -2,19 +2,24 @@
 
 // Adapted from coss ui: https://coss.com/ui/r/tabs.json
 // MIT-licensed apps/ui registry source; licensing details: ./LICENSES.md.
-// LOCAL PATCH (openlaunch): one flat underline recipe, existing tokens, no
-// shadows or animated indicator. Base UI owns keyboard/ARIA tab semantics.
+// LOCAL PATCH (openlaunch): one flat underline recipe on existing tokens, no shadows. The underline is Base UI's
+// indicator, so it slides to the active tab (still under reduced motion). Base UI owns keyboard/ARIA tab semantics.
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import { cn } from "@/lib/utils";
 
 export function Tabs({ className, ...props }: TabsPrimitive.Root.Props) {
   return <TabsPrimitive.Root className={cn("min-w-0", className)} {...props} />;
 }
-export function TabsList({ className, ...props }: TabsPrimitive.List.Props) {
-  return <TabsPrimitive.List className={cn("flex gap-5 overflow-x-auto border-b border-line px-5 bb-scroll", className)} {...props} />;
+export function TabsList({ className, children, ...props }: TabsPrimitive.List.Props & { className?: string }) {
+  return (
+    <TabsPrimitive.List className={cn("relative flex gap-5 overflow-x-auto border-b border-line px-5 bb-scroll", className)} {...props}>
+      {children}
+      <TabsPrimitive.Indicator className="absolute bottom-0 left-0 h-0.5 w-(--active-tab-width) translate-x-(--active-tab-left) rounded-full bg-ink transition-[translate,width] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] motion-reduce:transition-none" />
+    </TabsPrimitive.List>
+  );
 }
 export function TabsTab({ className, ...props }: TabsPrimitive.Tab.Props) {
-  return <TabsPrimitive.Tab className={cn("flex min-h-12 shrink-0 cursor-pointer items-center gap-2 border-b-2 border-transparent text-sm font-medium text-muted hover:text-ink data-active:border-ink data-active:text-ink", className)} {...props} />;
+  return <TabsPrimitive.Tab className={cn("flex min-h-12 shrink-0 cursor-pointer items-center gap-2 text-sm font-medium text-muted transition-colors hover:text-ink data-active:text-ink motion-reduce:transition-none", className)} {...props} />;
 }
 export function TabsPanel({ className, ...props }: TabsPrimitive.Panel.Props) {
   return <TabsPrimitive.Panel className={cn("min-w-0", className)} {...props} />;
diff --git a/app/src/components/vendor/toggle-group.tsx b/app/src/components/vendor/toggle-group.tsx
index 2a09c5f5..9c80e55d 100644
--- a/app/src/components/vendor/toggle-group.tsx
+++ b/app/src/components/vendor/toggle-group.tsx
@@ -2,17 +2,61 @@
 
 // Adapted from coss ui: https://coss.com/ui/r/toggle-group.json and /toggle.json.
 // MIT-licensed apps/ui registry source; licensing details: ./LICENSES.md.
-// LOCAL PATCH (openlaunch): only the single-style segmented recipe is needed.
-// Keep Base UI's roving focus / pressed semantics, replace Coss theme tokens,
-// shadows, variants and separators with our flat, two-theme control recipe.
+// LOCAL PATCH (openlaunch): segmented recipes only. Keeps Base UI's roving focus and pressed semantics,
+// replaces Coss theme tokens, variants and separators with our two-theme recipe: a recessed track with a raised thumb
+// that slides to the pressed item (a Motion shared layout); the same thumb over a row of chips with no track; or, for
+// tab-like rows, a sliding underline.
+import { createContext, useContext, useId } from "react";
+import { motion, useReducedMotion } from "motion/react";
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
 import { cn } from "@/lib/utils";
 
-export function ToggleGroup({ className, ...props }: ToggleGroupPrimitive.Props) {
-  return <ToggleGroupPrimitive data-slot="toggle-group" className={cn("inline-flex max-w-full items-center gap-1 rounded-xl border border-line bg-card p-1", className)} {...props} />;
+type Variant = "segmented" | "chips" | "underline";
+// the shadows read the theme variables at run time (a plain shadow-* utility would bake in the light values)
+const TRACK = { segmented: "inline-flex max-w-full items-center gap-0.5 rounded-xl bg-track p-[3px] shadow-(--shadow-track)", chips: "inline-flex max-w-full items-center gap-1", underline: "inline-flex max-w-full items-stretch" };
+const Group = createContext<{ id: string; variant: Variant }>({ id: "", variant: "segmented" });
+
+export function ToggleGroup({ className, variant = "segmented", ...props }: ToggleGroupPrimitive.Props & { className?: string; variant?: Variant }) {
+  const id = useId();
+  return (
+    <Group.Provider value={{ id, variant }}>
+      <ToggleGroupPrimitive
+        data-slot="toggle-group"
+        data-variant={variant}
+        className={cn(TRACK[variant], className)}
+        {...props}
+      />
+    </Group.Provider>
+  );
 }
 
-export function ToggleGroupItem({ className, ...props }: TogglePrimitive.Props) {
-  return <TogglePrimitive data-slot="toggle" className={cn("inline-flex min-h-9 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-transparent px-3 text-xs font-medium whitespace-nowrap text-muted transition-colors hover:text-ink data-pressed:border-line-strong data-pressed:bg-paper data-pressed:text-ink disabled:cursor-not-allowed disabled:opacity-40 motion-reduce:transition-none", className)} {...props} />;
+/** `thumbClassName` tints the thumb while this item holds it (the trade panel's green buy and red sell). */
+export function ToggleGroupItem({ className, thumbClassName, ...props }: TogglePrimitive.Props & { className?: string; thumbClassName?: string }) {
+  const { id, variant } = useContext(Group);
+  const reduced = useReducedMotion();
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(
+        "relative isolate inline-flex min-h-8 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-[9px] px-3 text-xs font-medium whitespace-nowrap text-muted transition-colors duration-150 select-none hover:text-ink data-pressed:text-ink disabled:cursor-not-allowed disabled:opacity-40 motion-reduce:transition-none",
+        variant !== "underline" && "hover:bg-ink/[0.04] data-pressed:hover:bg-transparent",
+        className,
+      )}
+      render={(renderProps, state) => (
+        <button {...renderProps}>
+          {state.pressed ? (
+            <motion.span
+              aria-hidden="true"
+              layoutId={id}
+              transition={reduced ? { duration: 0 } : { type: "spring", stiffness: 520, damping: 40, mass: 0.7 }}
+              className={cn(variant === "underline" ? "absolute inset-x-1.5 bottom-0 -z-10 h-0.5 rounded-full bg-ink" : "absolute inset-0 -z-10 rounded-[inherit] bg-thumb shadow-(--shadow-thumb)", thumbClassName)}
+            />
+          ) : null}
+          {renderProps.children}
+        </button>
+      )}
+      {...props}
+    />
+  );
 }
diff --git a/app/src/lib/launchpad/socials.test.ts b/app/src/lib/launchpad/socials.test.ts
new file mode 100644
index 00000000..1646faf8
--- /dev/null
+++ b/app/src/lib/launchpad/socials.test.ts
@@ -0,0 +1,17 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { safeSocials } from "./socials.ts";
+
+test("an https website and a bare handle become links, with a short host to show", () => {
+  assert.deepEqual(safeSocials({ website: "https://www.dottie.land/about", x_handle: "dottie_land" }), { x: "dottie_land", site: "https://www.dottie.land/about", host: "dottie.land" });
+});
+
+test("anything else is dropped rather than linked", () => {
+  for (const website of ["http://dottie.land", "javascript:alert(1)", "ftp://dottie.land", "not a url", "https://user:pass@dottie.land", ""]) {
+    assert.equal(safeSocials({ website, x_handle: null }).site, null, website);
+  }
+  for (const x_handle of ["@dottie", "dottie land", "a".repeat(16), "dottie/land", ""]) {
+    assert.equal(safeSocials({ website: null, x_handle }).x, null, x_handle);
+  }
+  assert.deepEqual(safeSocials({ website: null, x_handle: null }), { x: null, site: null, host: null });
+});
diff --git a/app/src/lib/launchpad/socials.ts b/app/src/lib/launchpad/socials.ts
new file mode 100644
index 00000000..b3c3a95a
--- /dev/null
+++ b/app/src/lib/launchpad/socials.ts
@@ -0,0 +1,26 @@
+/**
+ * A token's social links, ready to render. The server only stores https websites and bare X handles (metaShared.ts,
+ * editAuth.ts); this checks again at the edge where they become links, so a bad row can never become a javascript:
+ * or off-shape URL. Pure, so node --test loads it directly.
+ */
+const X_HANDLE = /^\w{1,15}$/;
+
+export type Socials = { x: string | null; site: string | null; host: string | null };
+
+export function safeSocials(meta: { website: string | null; x_handle: string | null }): Socials {
+  const x = meta.x_handle && X_HANDLE.test(meta.x_handle) ? meta.x_handle : null;
+  let site: string | null = null;
+  let host: string | null = null;
+  if (meta.website) {
+    try {
+      const u = new URL(meta.website);
+      if (u.protocol === "https:" && !u.username && !u.password) {
+        site = u.toString();
+        host = u.hostname.replace(/^www\./, "");
+      }
+    } catch {
+      /* not a URL: no link */
+    }
+  }
+  return { x, site, host };
+}
diff --git a/app/src/lib/launchpad/tint.test.ts b/app/src/lib/launchpad/tint.test.ts
new file mode 100644
index 00000000..d015e2b1
--- /dev/null
+++ b/app/src/lib/launchpad/tint.test.ts
@@ -0,0 +1,68 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { TINT_MIN_CONTRAST, addressHue, contrastRatio, dominantHue, fallbackTint, hslToRgb, tintFor, toHex } from "./tint.ts";
+
+const rgb = (hex: string): [number, number, number] => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16)) as [number, number, number];
+/** An image as raw RGBA: `n` pixels of each colour. */
+function image(...parts: [number, number, number, number, number][]): Uint8Array {
+  const out: number[] = [];
+  for (const [r, g, b, a, n] of parts) for (let i = 0; i < n; i++) out.push(r, g, b, a);
+  return Uint8Array.from(out);
+}
+
+test("hsl converts to the expected rgb at the primaries", () => {
+  assert.deepEqual(hslToRgb(0, 1, 0.5), [255, 0, 0]);
+  assert.deepEqual(hslToRgb(120, 1, 0.5), [0, 255, 0]);
+  assert.deepEqual(hslToRgb(240, 1, 0.5), [0, 0, 255]);
+  assert.equal(toHex([255, 128, 0]), "#ff8000");
+});
+
+test("every hue clears 3:1 against both pages", () => {
+  for (let hue = 0; hue < 360; hue += 5) {
+    for (const sat of [0.2, 0.6, 1]) {
+      const t = tintFor(hue, sat);
+      assert.ok(contrastRatio(rgb(t.light), [250, 250, 248]) >= TINT_MIN_CONTRAST, `light ${hue}/${sat} ${t.light}`);
+      assert.ok(contrastRatio(rgb(t.dark), [0, 0, 0]) >= TINT_MIN_CONTRAST, `dark ${hue}/${sat} ${t.dark}`);
+    }
+  }
+});
+
+test("a logo lends the hue most of its colourful pixels share", () => {
+  // mostly orange with a white background and a little blue
+  const px = image([255, 255, 255, 255, 600], [245, 130, 20, 255, 300], [30, 60, 220, 255, 60]);
+  const hue = dominantHue(px, 4);
+  assert.ok(hue);
+  assert.ok(Math.abs(hue.hue - 29) <= 4, `got ${hue.hue}`);
+});
+
+test("transparent pixels never vote", () => {
+  const px = image([255, 0, 0, 0, 900], [20, 180, 60, 255, 100]);
+  assert.ok(Math.abs(dominantHue(px, 4)!.hue - 137) <= 4);
+});
+
+test("a black-and-white or grey logo stays neutral", () => {
+  assert.equal(dominantHue(image([0, 0, 0, 255, 500], [255, 255, 255, 255, 500]), 4), null);
+  assert.equal(dominantHue(image([120, 122, 125, 255, 1000]), 4), null);
+  // a speck of colour under the threshold does not count
+  assert.equal(dominantHue(image([255, 255, 255, 255, 970], [255, 0, 0, 255, 30]), 4), null);
+  assert.equal(dominantHue(new Uint8Array(0), 4), null);
+});
+
+test("a hue split across a bin edge still wins as one colour", () => {
+  // 9° and 11° sit in neighbouring 10° bins; together they outweigh a single purple bin
+  const px = image([255, 41, 0, 255, 200], [255, 47, 0, 255, 200], [140, 0, 255, 255, 300]);
+  const hue = dominantHue(px, 4)!.hue;
+  assert.ok(hue >= 8 && hue <= 12, `got ${hue}`);
+});
+
+test("rgb input without alpha reads the same", () => {
+  const px = Uint8Array.from([10, 200, 90, 10, 200, 90, 10, 200, 90]);
+  assert.ok(Math.abs(dominantHue(px, 3)!.hue - 147) <= 4);
+});
+
+test("a token without a logo takes its fallback avatar's hue", () => {
+  const token = "0x648a5382bdcf286e7ff5122d01a983db314e620a";
+  assert.equal(fallbackTint(token).hue, addressHue(token));
+  assert.ok(addressHue(token) >= 0 && addressHue(token) < 360);
+  assert.notEqual(addressHue(token), addressHue("0x5b3c2cd87083ea5c4436525dca6213740405b69e"), "different tokens, different hues");
+});
diff --git a/app/src/lib/launchpad/tint.ts b/app/src/lib/launchpad/tint.ts
new file mode 100644
index 00000000..559451d1
--- /dev/null
+++ b/app/src/lib/launchpad/tint.ts
@@ -0,0 +1,113 @@
+/**
+ * A token's quiet accent, taken from its logo: the hue the logo is mostly made of, tuned per theme so a ring or a
+ * chart line clears 3:1 against the page (WCAG 1.4.11 for graphics). Never used for text or actions; blue stays
+ * the only action colour. Pure: the pixels come from tintServer.ts, so this runs in tests without an image.
+ */
+export type TokenTint = { hue: number; light: string; dark: string };
+type Rgb = readonly [number, number, number];
+
+const PAPER: Record<"light" | "dark", Rgb> = { light: [250, 250, 248], dark: [0, 0, 0] };
+export const TINT_MIN_CONTRAST = 3;
+/** A logo needs at least this share of colourful pixels to lend its hue; a black-and-white mark stays neutral. */
+const MIN_COLOURFUL_SHARE = 0.06;
+
+/** Deterministic hue from an address: the same seed the fallback avatar gradient uses. */
+export function addressHue(addr: string): number {
+  let h = 0;
+  for (let i = 2; i < Math.min(addr.length, 18); i++) h = (h * 31 + addr.charCodeAt(i)) % 360;
+  return h;
+}
+
+export function hslToRgb(h: number, s: number, l: number): Rgb {
+  const k = (n: number) => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n: number) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  return [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
+}
+
+export function relativeLuminance([r, g, b]: Rgb): number {
+  const lin = (c: number) => { const v = c / 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+export function contrastRatio(a: Rgb, b: Rgb): number {
+  const [hi, lo] = [relativeLuminance(a), relativeLuminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+export function toHex([r, g, b]: Rgb): string {
+  return `#${[r, g, b].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+}
+
+/**
+ * The hue most of a logo's colourful pixels share, weighted by chroma, or null when the logo is essentially grey,
+ * black or white. Transparent pixels (alpha under half) are ignored.
+ */
+export function dominantHue(pixels: ArrayLike<number>, channels: 3 | 4): { hue: number; sat: number } | null {
+  const BINS = 36;
+  const weight = new Float64Array(BINS);
+  const x = new Float64Array(BINS);
+  const y = new Float64Array(BINS);
+  const sat = new Float64Array(BINS);
+  let opaque = 0;
+  let colourful = 0;
+  for (let i = 0; i + channels - 1 < pixels.length; i += channels) {
+    if (channels === 4 && pixels[i + 3] < 128) continue;
+    opaque++;
+    const r = pixels[i] / 255, g = pixels[i + 1] / 255, b = pixels[i + 2] / 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    const chroma = max - min;
+    const l = (max + min) / 2;
+    const s = chroma === 0 ? 0 : chroma / (1 - Math.abs(2 * l - 1));
+    if (chroma < 0.08 || s < 0.2 || l < 0.1 || l > 0.94) continue;
+    colourful++;
+    let h = max === r ? ((g - b) / chroma) % 6 : max === g ? (b - r) / chroma + 2 : (r - g) / chroma + 4;
+    h = (h * 60 + 360) % 360;
+    const bin = Math.floor(h / (360 / BINS)) % BINS;
+    weight[bin] += chroma;
+    x[bin] += Math.cos((h * Math.PI) / 180) * chroma;
+    y[bin] += Math.sin((h * Math.PI) / 180) * chroma;
+    sat[bin] += s * chroma;
+  }
+  if (!opaque || colourful / opaque < MIN_COLOURFUL_SHARE) return null;
+  // the strongest neighbourhood of three bins, so a hue split across a bin edge still wins
+  let best = 0;
+  let bestWeight = -1;
+  for (let i = 0; i < BINS; i++) {
+    const w = weight[(i + BINS - 1) % BINS] + weight[i] + weight[(i + 1) % BINS];
+    if (w > bestWeight) { bestWeight = w; best = i; }
+  }
+  let sx = 0, sy = 0, ss = 0, sw = 0;
+  for (const i of [(best + BINS - 1) % BINS, best, (best + 1) % BINS]) { sx += x[i]; sy += y[i]; ss += sat[i]; sw += weight[i]; }
+  const hue = Math.round(((Math.atan2(sy, sx) * 180) / Math.PI + 360) % 360) % 360;
+  return { hue, sat: ss / sw };
+}
+
+/**
+ * Theme colours for a hue: as vivid as the logo allows (within a calm band), darkened for the light theme and
+ * lightened for the dark one until each clears 3:1 against its page.
+ */
+export function tintFor(hue: number, saturation: number): TokenTint {
+  const s = Math.min(0.85, Math.max(0.45, saturation));
+  let light = hslToRgb(hue, s, 0.46);
+  for (let l = 0.46; l >= 0.12 && contrastRatio(light, PAPER.light) < TINT_MIN_CONTRAST; l -= 0.01) light = hslToRgb(hue, s, l);
+  let dark = hslToRgb(hue, s, 0.6);
+  for (let l = 0.6; l <= 0.9 && contrastRatio(dark, PAPER.dark) < TINT_MIN_CONTRAST; l += 0.01) dark = hslToRgb(hue, s, l);
+  return { hue, light: toHex(light), dark: toHex(dark) };
+}
+
+/** A token with no logo takes its avatar's hue, so the page matches the generated mark. */
+export function fallbackTint(token: string): TokenTint {
+  return tintFor(addressHue(token), 0.7);
+}
+
+/** A black-and-white logo lends no colour: the page keeps the theme's own muted grey (hue -1). */
+export function neutralTint(): TokenTint {
+  return { hue: -1, light: "#64748b", dark: "#8c8c8c" };
+}
+
+/** The tint for a logo's pixels: its dominant hue, or neutral when it has none. */
+export function tintFromPixels(pixels: ArrayLike<number>, channels: 3 | 4): TokenTint {
+  const found = dominantHue(pixels, channels);
+  return found ? tintFor(found.hue, found.sat) : neutralTint();
+}
diff --git a/app/src/lib/ogFonts.ts b/app/src/lib/ogFonts.ts
index ca76bbd8..5e9ecfbc 100644
--- a/app/src/lib/ogFonts.ts
+++ b/app/src/lib/ogFonts.ts
@@ -1,16 +1,12 @@
 import "server-only";
 
 /**
- * Fonts for next/og (satori needs TTF/OTF/WOFF, not woff2). Space Mono uses
- * pinned gstatic URLs (same as ads); Inter and Unbounded are resolved through
- * the Google Fonts CSS endpoint with a legacy UA so it hands back TTF/WOFF.
+ * Fonts for next/og (satori needs TTF/OTF/WOFF, not woff2): Geist, the site's one family, resolved through the
+ * Google Fonts CSS endpoint with a legacy UA so it hands back TTF/WOFF.
  * All best-effort: an OG image with system fallbacks beats a broken one.
  */
 export type OgFont = { name: string; data: ArrayBuffer; style: "normal"; weight: 400 | 500 | 600 | 700 | 800 | 900 };
 
-const SPACE_MONO_400 = "https://fonts.gstatic.com/s/spacemono/v17/i7dPIFZifjKcF5UAWdDRUEY.ttf";
-const SPACE_MONO_700 = "https://fonts.gstatic.com/s/spacemono/v17/i7dMIFZifjKcF5UAWdDRaPpZYFI.ttf";
-
 async function fetchBuf(url: string): Promise<ArrayBuffer | null> {
   try {
     const r = await fetch(url, { next: { revalidate: 86400 } });
@@ -36,18 +32,7 @@ async function googleTtf(family: string, weight: number): Promise<ArrayBuffer |
 }
 
 export async function loadOgFonts(): Promise<OgFont[]> {
-  const [m400, m700, u700, i500, i700] = await Promise.all([
-    fetchBuf(SPACE_MONO_400),
-    fetchBuf(SPACE_MONO_700),
-    googleTtf("Unbounded", 700),
-    googleTtf("Inter", 500),
-    googleTtf("Inter", 700),
-  ]);
-  const fonts: OgFont[] = [];
-  if (m400) fonts.push({ name: "Space Mono", data: m400, style: "normal", weight: 400 });
-  if (m700) fonts.push({ name: "Space Mono", data: m700, style: "normal", weight: 700 });
-  if (u700) fonts.push({ name: "Unbounded", data: u700, style: "normal", weight: 700 });
-  if (i500) fonts.push({ name: "Inter", data: i500, style: "normal", weight: 500 });
-  if (i700) fonts.push({ name: "Inter", data: i700, style: "normal", weight: 700 });
-  return fonts;
+  const weights = [400, 500, 700] as const;
+  const files = await Promise.all(weights.map((weight) => googleTtf("Geist", weight)));
+  return weights.flatMap((weight, i) => { const data = files[i]; return data ? [{ name: "Geist", data, style: "normal" as const, weight }] : []; });
 }
diff --git a/app/src/lib/useHydratedAccount.ts b/app/src/lib/useHydratedAccount.ts
new file mode 100644
index 00000000..de016bed
--- /dev/null
+++ b/app/src/lib/useHydratedAccount.ts
@@ -0,0 +1,24 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import { useAccount } from "wagmi";
+
+type Account = ReturnType<typeof useAccount>;
+/** The account fields the wallet-aware views read. */
+export type HydratedAccount = Pick<Account, "address" | "isConnected" | "chainId" | "connector">;
+
+const SIGNED_OUT: HydratedAccount = { address: undefined, isConnected: false, chainId: undefined, connector: undefined };
+const noSubscribe = () => () => {};
+
+/**
+ * wagmi's account, read so the first browser render matches the server's HTML. The server never knows a wallet, so it
+ * renders every wallet-aware view signed out. A wallet that reconnects before part of the page has hydrated (anything
+ * inside a Suspense boundary, such as a route with a loading screen) would otherwise hydrate that part signed in, and
+ * React throws the server HTML away. Until the calling component has hydrated this reads as no wallet; right after,
+ * it reads wagmi's account, which is the same moment wagmi's own reconnect lands for most visitors.
+ */
+export function useHydratedAccount(): HydratedAccount {
+  const { address, isConnected, chainId, connector } = useAccount();
+  const hydrated = useSyncExternalStore(noSubscribe, () => true, () => false);
+  return hydrated ? { address, isConnected, chainId, connector } : SIGNED_OUT;
+}