diff --git a/app/src/app/(home)/loading.tsx b/app/src/app/(home)/loading.tsx
index a360c8e6..96b8c9cc 100644
--- a/app/src/app/(home)/loading.tsx
+++ b/app/src/app/(home)/loading.tsx
@@ -1,28 +1,27 @@
-import { Sk, SkPost, SkRow, SkStat } from "@/components/Skeleton";
+import { Sk, SkPost, SkRow } from "@/components/Skeleton";
 
 /** Home skeleton: hero + totals, list header, rows, side column. Same grid as page.tsx so nothing shifts. */
 export default function Loading() {
   return (
     <main className="relative mx-auto max-w-6xl px-4 pb-16 space-y-8" aria-busy="true" aria-label="loading">
-      <section className="pt-8 sm:pt-12 grid lg:grid-cols-[minmax(0,1fr)_22rem] gap-8 items-start">
-        <div className="space-y-4">
-          <Sk className="h-12 sm:h-14 w-4/5" />
-          <Sk className="h-12 sm:h-14 w-3/5" />
-          <Sk className="h-5 w-2/3 mt-6" />
-          <Sk className="h-5 w-1/2" />
-          <div className="flex gap-3 pt-2">
-            <Sk className="h-12 w-44 rounded-xl" />
-            <Sk className="h-12 w-32 rounded-xl" />
+      <section>
+        <div className="bb-hero-intro flex flex-col items-center gap-4">
+          <Sk className="h-4 w-64 max-w-full" />
+          <Sk className="h-12 sm:h-14 w-96 max-w-full" />
+          <Sk className="h-4 w-full max-w-xl" />
+          <Sk className="h-4 w-80 max-w-full" />
+          <div className="flex gap-3 pt-2 max-w-full">
+            <Sk className="h-11 w-40 rounded-full" />
+            <Sk className="h-11 w-32 rounded-full" />
           </div>
+          <Sk className="h-3 w-80 max-w-full mt-2" />
         </div>
-        <dl className="grid grid-cols-2 gap-2.5">
-          <SkStat />
-          <SkStat />
-          <SkStat />
-          <SkStat />
-        </dl>
+        <div className="bb-overview-stats" aria-hidden>
+          {Array.from({ length: 6 }, (_, i) => <div key={i} className="gap-2"><Sk className="h-8 w-20 max-w-full" /><Sk className="h-3 w-24 max-w-full" /><Sk className="h-3 w-16 max-w-full" /></div>)}
+        </div>
+        <Sk className="h-3 w-4/5 mx-auto mt-4" />
       </section>
-      <div className="grid lg:grid-cols-[minmax(0,1fr)_20rem] gap-6 items-start">
+      <div className="grid xl:grid-cols-[minmax(0,1fr)_18rem] gap-6 items-start">
         <section className="space-y-3">
           <div className="flex items-center justify-between gap-3">
             <Sk className="h-7 w-32" />
diff --git a/app/src/app/(home)/page.tsx b/app/src/app/(home)/page.tsx
index 7f6b95f4..22c91db6 100644
--- a/app/src/app/(home)/page.tsx
+++ b/app/src/app/(home)/page.tsx
@@ -26,13 +26,12 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
 
   return (
     <>
-      <div className="bb-sky" aria-hidden />
       <main className="relative mx-auto max-w-6xl px-4 pb-16 space-y-8">
         <LaunchHero configured={LAUNCHPAD_CONFIGURED} />
         <TrendingStrip initial={trending} />
-        <div className="grid lg:grid-cols-[minmax(0,1fr)_20rem] gap-6 items-start">
+        <div className="grid xl:grid-cols-[minmax(0,1fr)_18rem] gap-6 items-start">
           <LaunchList initial={page.items} initialHasMore={page.hasMore} initialSort={sort} initialWindow={window} initialChain={chain} initialFilter={filter} hasDb={dbConfigured()} />
-          <div className="lg:sticky lg:top-20 min-w-0 space-y-4">
+          <div className="xl:sticky xl:top-32 min-w-0 grid sm:grid-cols-2 xl:block gap-4 xl:space-y-4">
             <PostsFeed initial={posts} compact />
             <LaunchTape initial={feed} />
             <div className="rounded-2xl bg-card border border-line shadow-card p-4 text-[13px] leading-relaxed text-body">
diff --git a/app/src/app/globals.css b/app/src/app/globals.css
index bd498cdd..03bafbb5 100644
--- a/app/src/app/globals.css
+++ b/app/src/app/globals.css
@@ -1,73 +1,102 @@
 @import "tailwindcss";
 
-/* ── "Clear Sky" — light only ─────────────────────────────────────────────── */
+/* Gitlawb Explorer: neutral surfaces, mono typography, semantic status colors. */
 @theme {
-  --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-mono), ui-monospace, "SFMono-Regular", Consolas, monospace;
+  --font-mono: var(--font-geist-mono), ui-monospace, "SFMono-Regular", Consolas, monospace;
+  --font-display: var(--font-geist-mono), ui-monospace, "SFMono-Regular", Consolas, monospace;
 
   /* surfaces */
-  --color-paper: #fafaf8;
+  --color-paper: #ffffff;
   --color-card: #ffffff;
-  --color-line: #e7e5e4;
-  --color-line-strong: #d6d3d1;
+  --color-subtle: #fafafa;
+  --color-line: #d2d2d2;
+  --color-line-strong: #a3a3a3;
+  --color-line-muted: #eaeaea;
 
   /* text */
-  --color-ink: #0f172a;
-  --color-body: #475569;
-  --color-muted: #64748b; /* AA on paper/card at body sizes */
-  --color-faint: #94a3b8; /* decorative / placeholders only */
+  --color-ink: #111111;
+  --color-body: #454545;
+  --color-muted: #626262;
+  --color-faint: #707070;
 
   /* accent */
-  --color-brand: #0052ff;
-  --color-brand-strong: #0041cc;
-  --color-brand-soft: #eaf0ff;
-
-  /* money: up (refund / locked), down (displaced), warm (takeover / testnet) */
-  --color-up: #15803d;
-  --color-up-soft: #ecfdf3;
-  --color-down: #dc2626;
-  --color-down-ink: #b91c1c; /* text on down-soft */
-  --color-down-soft: #fef2f2;
-  --color-warm: #d97706;
-  --color-warm-ink: #b45309; /* text on warm-soft / paper */
+  --color-brand: #111111;
+  --color-brand-strong: #333333;
+  --color-brand-soft: #f3f3f3;
+  --color-brand-fg: #ffffff;
+
+  /* trading direction and status */
+  --color-up: #137333;
+  --color-up-soft: #edf7f0;
+  --color-down: #ba2737;
+  --color-down-ink: #ba2737;
+  --color-down-soft: #fff1f2;
+  --color-warm: #8a5700;
+  --color-warm-ink: #8a5700;
   --color-warm-soft: #fffbeb;
+  --color-status-fg: #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);
+  --radius-xl: 8px;
+  --radius-2xl: 12px;
+  --container-6xl: 1200px;
+  --shadow-card: 0 0 #0000;
+  --shadow-card-hover: 0 0 #0000;
+  --shadow-sheet: 0 -8px 40px #00000020;
+  --shadow-dialog: 0 24px 64px #00000030;
 }
 
 :root {
   color-scheme: light;
+  accent-color: var(--color-brand);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --color-paper: #000000;
+    --color-card: #050505;
+    --color-subtle: #0a0a0a;
+    --color-line: #333333;
+    --color-line-strong: #666666;
+    --color-line-muted: #1a1a1a;
+    --color-ink: #ffffff;
+    --color-body: #cccccc;
+    --color-muted: #aaaaaa;
+    --color-faint: #999999;
+    --color-brand: #ffffff;
+    --color-brand-strong: #dddddd;
+    --color-brand-soft: #141414;
+    --color-brand-fg: #000000;
+    --color-up: #05df72;
+    --color-up-soft: #071f12;
+    --color-down: #ff6467;
+    --color-down-ink: #ff6467;
+    --color-down-soft: #290e10;
+    --color-warm: #ffb900;
+    --color-warm-ink: #ffb900;
+    --color-warm-soft: #241b05;
+    --color-status-fg: #000000;
+  }
 }
 
 html {
   background: var(--color-paper);
+  scroll-padding-top: 120px;
 }
 
 body {
   background: var(--color-paper);
   color: var(--color-body);
   font-family: var(--font-sans);
-  font-size: 14px;
-  line-height: 1.5;
+  font-size: 13px;
+  line-height: 1.6;
   overflow-x: clip;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-feature-settings: "cv11", "ss01";
 }
 
-/* faint blue wash behind the hero only */
-.bb-sky {
-  position: absolute;
-  inset: 0 0 auto 0;
-  height: 520px;
-  pointer-events: none;
-  background: radial-gradient(1200px 400px at 50% -100px, var(--color-brand-soft), transparent);
-}
-
 /* tabular numbers everywhere money shows */
 .tnum {
   font-variant-numeric: tabular-nums;
@@ -119,7 +148,7 @@ input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
 input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
 
-::selection { background: var(--color-brand); color: #fff; }
+::selection { background: var(--color-brand); color: var(--color-brand-fg); }
 
 :focus-visible {
   outline: 2px solid var(--color-brand);
@@ -127,6 +156,50 @@ input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
   border-radius: 6px;
 }
 
+.bb-skip-link { position: fixed; z-index: 100; top: 8px; left: 16px; transform: translateY(-160%); padding: 10px 16px; background: var(--color-brand); color: var(--color-brand-fg); border-radius: 8px; }
+.bb-skip-link:focus { transform: translateY(0); }
+.bb-hero-intro { position: relative; isolation: isolate; padding: 40px 16px 28px; text-align: center; }
+.bb-hero-intro::before { content: ""; position: absolute; z-index: -1; inset: 0; max-width: 760px; margin: auto; background-image: radial-gradient(var(--color-line) .6px, transparent .8px); background-size: 24px 24px; mask-image: radial-gradient(ellipse at top, #000 10%, transparent 70%); pointer-events: none; }
+.bb-hero-intro h1 { margin: 16px 0 14px; font-size: clamp(30px, 4.5vw, 48px); line-height: 1.2; letter-spacing: -.055em; font-weight: 600; color: var(--color-ink); }
+.bb-hero-description { max-width: 640px; margin: auto; color: var(--color-muted); line-height: 1.9; }
+.bb-hero-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 22px; font-size: 11px; color: var(--color-muted); }
+.bb-overview-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--color-line); border-radius: 12px; background: var(--color-card); overflow: hidden; }
+.bb-overview-stats > div { display: flex; flex-direction: column; padding: 18px; border-right: 1px solid var(--color-line-muted); }
+.bb-overview-stats > div:last-child { border-right: 0; }
+.bb-stat-value { order: -1; margin-bottom: 4px; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; font-weight: 600; letter-spacing: -.04em; overflow-wrap: anywhere; }
+.bb-locker-note { max-width: 950px; margin: 12px auto 0; text-align: center; font-size: 11px; color: var(--color-muted); line-height: 1.8; }
+.bb-launch-table { border: 1px solid var(--color-line); border-radius: 12px; overflow: clip; }
+.bb-list-heading { background: var(--color-subtle); border-bottom: 1px solid var(--color-line); }
+.bb-launch-table > ul > li + li { border-top: 1px solid var(--color-line-muted); }
+.bb-launch-row:focus-within { outline: 2px solid var(--color-brand); outline-offset: -2px; }
+.bb-directory button { min-height: 36px; }
+.bb-directory button[aria-label="Clear search"] { min-height: 32px; width: 32px; right: 3px; }
+.bb-footer a { display: inline-flex; align-items: center; min-height: 32px; }
+.bb-network-bar [title^="cookie-free"] { border: 0; background: transparent; padding-inline: 0; }
+
+@media (min-width: 768px) {
+  .bb-launch-columns { grid-template-columns: minmax(0, 1fr) 6rem 5.5rem 5rem 3rem; }
+}
+@media (max-width: 1023px) {
+  .bb-overview-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .bb-overview-stats > div:nth-child(3n) { border-right: 0; }
+  .bb-overview-stats > div:nth-child(n+4) { border-top: 1px solid var(--color-line-muted); }
+}
+@media (max-width: 639px) {
+  .bb-hero-intro { padding: 28px 0 24px; }
+  .bb-hero-description { font-size: 12px; }
+  .bb-overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .bb-overview-stats > div { padding: 14px; }
+  .bb-overview-stats > div:nth-child(3n) { border-right: 1px solid var(--color-line-muted); }
+  .bb-overview-stats > div:nth-child(2n) { border-right: 0; }
+  .bb-overview-stats > div:nth-child(n+3) { border-top: 1px solid var(--color-line-muted); }
+  .bb-directory button { min-height: 44px; }
+  .bb-header-inner { gap: 8px; }
+  .bb-header-inner > a { gap: 6px; }
+  .bb-header-inner > a > span { font-size: 13px !important; }
+  .bb-footer a { min-height: 44px; }
+}
+
 /* transaction toasts */
 @keyframes bb-toast-in {
   from { transform: translateY(12px) scale(0.98); opacity: 0; }
@@ -157,8 +230,8 @@ input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
 
 /* live list highlights */
 @keyframes bb-row-new {
-  0% { box-shadow: 0 0 0 0 rgba(0, 82, 255, 0.45), var(--shadow-card); border-color: var(--color-brand); background-color: var(--color-brand-soft); }
-  60% { box-shadow: 0 0 0 10px rgba(0, 82, 255, 0), var(--shadow-card); }
+  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-brand) 25%, transparent), var(--shadow-card); border-color: var(--color-brand); background-color: var(--color-brand-soft); }
+  60% { box-shadow: 0 0 0 10px transparent, var(--shadow-card); }
   100% { box-shadow: var(--shadow-card); border-color: var(--color-brand); background-color: var(--color-card); }
 }
 .bb-row-new { animation: bb-row-new 1.6s ease-out 1; border-color: var(--color-brand) !important; }
@@ -169,17 +242,17 @@ input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
 @media (prefers-reduced-motion: reduce) { .bb-row-new, .bb-row-buy, .bb-row-sell { animation: none; } }
 
 /* ── loading system: route progress bar, skeleton shimmer, spinner ─────────── */
-.bb-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--color-brand); z-index: 100; opacity: 0; pointer-events: none; transition: width 0.25s ease, opacity 0.3s ease; box-shadow: 0 0 8px rgba(0, 82, 255, 0.45); }
+.bb-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--color-brand); z-index: 100; opacity: 0; pointer-events: none; transition: width 0.25s ease, opacity 0.3s ease; box-shadow: 0 0 8px color-mix(in srgb, var(--color-brand) 25%, transparent); }
 .bb-progress-run { opacity: 1; animation: bb-progress-creep 12s cubic-bezier(0.1, 0.6, 0.2, 1) forwards; }
 .bb-progress-done { opacity: 0; width: 100%; transition: width 0.2s ease, opacity 0.35s ease 0.15s; }
 @keyframes bb-progress-creep { 0% { width: 0; } 10% { width: 35%; } 40% { width: 70%; } 100% { width: 92%; } }
-.bb-skel { background: linear-gradient(90deg, #ecebe8 0%, #f5f4f1 40%, #ecebe8 80%); background-size: 200% 100%; animation: bb-shimmer 1.6s ease-in-out infinite; }
+.bb-skel { background: linear-gradient(90deg, var(--color-line-muted) 0%, var(--color-subtle) 40%, var(--color-line-muted) 80%); background-size: 200% 100%; animation: bb-shimmer 1.6s ease-in-out infinite; }
 @keyframes bb-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -80% 0; } }
 .bb-spin { animation: bb-rotate 0.8s linear infinite; }
 @keyframes bb-rotate { to { transform: rotate(360deg); } }
 @media (prefers-reduced-motion: reduce) {
   .bb-progress-run { animation: none; width: 60%; }
-  .bb-skel { animation: none; background: #ecebe8; }
+  .bb-skel { animation: none; background: var(--color-line-muted); }
   .bb-spin { animation-duration: 1.6s; }
 }
 
@@ -187,8 +260,3 @@ input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
 .bb-beacon::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: var(--color-up); opacity: 0.55; animation: bb-beacon 2s cubic-bezier(0.2, 0.7, 0.3, 1) infinite; }
 @keyframes bb-beacon { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(2.8); opacity: 0; } 100% { transform: scale(2.8); opacity: 0; } }
 @media (prefers-reduced-motion: reduce) { .bb-beacon::after { animation: none; opacity: 0; } }
-
-/* "Hot right now" card: slow warm glow around the border */
-.bb-hot { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.0); animation: bb-hot 2.8s ease-in-out infinite; }
-@keyframes bb-hot { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.0); } 50% { box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.14); } }
-@media (prefers-reduced-motion: reduce) { .bb-hot { animation: none; } }
diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
index 77bd3e85..778a22ca 100644
--- a/app/src/app/layout.tsx
+++ b/app/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata, Viewport } from "next";
-import { Inter, Space_Mono, Unbounded } from "next/font/google";
+import { Geist_Mono } from "next/font/google";
 import "./globals.css";
 import Web3Provider from "@/components/Web3Provider";
 import Header from "@/components/Header";
@@ -14,9 +14,7 @@ import Mark from "@/components/launchpad/Mark";
 import RouteProgress from "@/components/RouteProgress";
 import { Suspense } from "react";
 
-const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
-const spaceMono = Space_Mono({ subsets: ["latin"], weight: ["400", "700"], variable: "--font-space-mono", display: "swap" });
-const unbounded = Unbounded({ subsets: ["latin"], weight: ["600", "700"], variable: "--font-unbounded", display: "swap" });
+const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono", display: "swap" });
 
 const TITLE = SITE_TITLE;
 const DESCRIPTION = SITE_DESCRIPTION;
@@ -31,7 +29,10 @@ export const metadata: Metadata = {
   twitter: { card: "summary_large_image", site: `@${BRAND_X}`, title: TITLE, description: SOCIAL_DESCRIPTION },
 };
 
-export const viewport: Viewport = { themeColor: "#FAFAF8", colorScheme: "light", width: "device-width", initialScale: 1, viewportFit: "cover" };
+export const viewport: Viewport = {
+  themeColor: [{ media: "(prefers-color-scheme: light)", color: "#ffffff" }, { media: "(prefers-color-scheme: dark)", color: "#000000" }],
+  colorScheme: "light dark", width: "device-width", initialScale: 1, viewportFit: "cover",
+};
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const usd = await ethUsd();
@@ -39,8 +40,9 @@ export default async function RootLayout({ children }: { children: React.ReactNo
   const b = launchpad("base");
   const r = launchpad("robinhood");
   return (
-    <html lang="en" className={`${inter.variable} ${spaceMono.variable} ${unbounded.variable}`}>
+    <html lang="en" className={geistMono.variable}>
       <body className="min-h-screen flex flex-col">
+        <a href="#main-content" className="bb-skip-link">Skip to content</a>
         <Web3Provider>
           <LiveProvider initial={{ at: 0, feed, totals, ethUsd: usd }}>
           <Suspense fallback={null}>
@@ -48,8 +50,8 @@ export default async function RootLayout({ children }: { children: React.ReactNo
           </Suspense>
           <Header />
           <TxToasts />
-          <div className="flex-1 min-w-0">{children}</div>
-          <footer className="bb-footer mx-auto w-full max-w-6xl px-4 py-10 text-xs text-muted flex flex-wrap items-center gap-x-5 gap-y-2">
+          <div id="main-content" tabIndex={-1} className="flex-1 min-w-0">{children}</div>
+          <footer className="bb-footer mx-auto w-full max-w-6xl px-4 py-8 text-xs text-muted flex flex-wrap items-center gap-x-5 gap-y-3 border-t border-line">
             <span className="font-semibold text-ink inline-flex items-center gap-1.5">
               <Mark size={16} />
               {BRAND}<span className="text-brand">{BRAND_TLD}</span>
@@ -79,7 +81,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
               @{BRAND_X}
             </a>
             <a href="https://gitlawb.com" className="hover:text-ink" target="_blank" rel="noreferrer">
-              a gitlawb thing
+              Built by Gitlawb
             </a>
           </footer>
           </LiveProvider>
diff --git a/app/src/app/t/[chain]/[token]/page.tsx b/app/src/app/t/[chain]/[token]/page.tsx
index d09da700..411907a5 100644
--- a/app/src/app/t/[chain]/[token]/page.tsx
+++ b/app/src/app/t/[chain]/[token]/page.tsx
@@ -228,7 +228,7 @@ export default async function TokenPage({ params }: { params: Promise<{ chain: s
             </section>
           </div>
 
-          <div className="lg:sticky lg:top-20 min-w-0 space-y-4 order-1 lg:order-2">
+          <div className="lg:sticky lg:top-32 min-w-0 space-y-4 order-1 lg:order-2">
             <TradePanel chain={chain} token={l.token as Address} symbol={l.symbol} poolKey={poolKey} quote={quote} ethUsd={usd} />
             <CollectPanel
               chain={chain}
diff --git a/app/src/components/ConnectButton.tsx b/app/src/components/ConnectButton.tsx
index d480623f..65dd9f72 100644
--- a/app/src/components/ConnectButton.tsx
+++ b/app/src/components/ConnectButton.tsx
@@ -49,7 +49,7 @@ export default function ConnectButton({ block = false }: { block?: boolean }) {
     );
   }
   return (
-    <button onClick={() => disconnect()} title={`Disconnect (on ${CHAIN_SHORT[key]})`} className={`${base} bg-brand-soft text-brand hover:bg-brand hover:text-white font-mono tnum`}>
+    <button onClick={() => disconnect()} title={`Disconnect (on ${CHAIN_SHORT[key]})`} className={`${base} bg-brand-soft text-brand hover:bg-brand hover:text-brand-fg font-mono tnum`}>
       <span className="inline-block h-2 w-2 rounded-full bg-up" aria-hidden />
       {shortAddr(address)}
       <span className="font-sans text-[10px] font-semibold uppercase tracking-wide opacity-70">{CHAIN_SHORT[key]}</span>
diff --git a/app/src/components/HeaderNav.tsx b/app/src/components/HeaderNav.tsx
index 5c9cd67a..395abec8 100644
--- a/app/src/components/HeaderNav.tsx
+++ b/app/src/components/HeaderNav.tsx
@@ -21,19 +21,19 @@ export default function HeaderNav({ pulse }: { pulse: { visits: number; online:
   const pathname = usePathname();
 
   return (
-    <header className="sticky top-0 z-40 border-b border-line/80 bg-paper/85 backdrop-blur supports-[backdrop-filter]:bg-paper/70">
-      <div className="mx-auto max-w-6xl px-4 h-14 flex items-center gap-3">
+    <header className="sticky top-0 z-40 border-b border-line bg-paper">
+      <div className="bb-header-inner mx-auto max-w-6xl px-4 min-h-16 flex items-center gap-3">
         <Link href="/" className="flex items-center gap-2 shrink-0" aria-label="openlaunch.lol home">
           <Mark size={24} />
           <Wordmark />
         </Link>
-        <LivePulse initial={pulse} />
+        <span className="hidden xl:inline text-muted text-xs border-l border-line pl-3">by Gitlawb</span>
 
-        <nav className="hidden md:flex items-center gap-0.5 lg:gap-1 ml-1 lg:ml-3">
+        <nav aria-label="Main navigation" className="hidden lg:flex items-center gap-0.5 ml-auto">
           {NAV.map((n) => {
             const active = n.href === "/" ? pathname === "/" || pathname.startsWith("/t/") : pathname.startsWith(n.href);
             return (
-              <Link key={n.href} href={n.href} className={`px-2.5 lg:px-3 h-9 inline-flex items-center rounded-lg text-sm font-medium whitespace-nowrap ${active ? "text-ink bg-card shadow-card" : "text-body hover:text-ink hover:bg-card"}`}>
+              <Link key={n.href} href={n.href} aria-current={active ? "page" : undefined} className={`px-2.5 min-h-11 inline-flex items-center rounded-lg text-xs font-medium whitespace-nowrap ${active ? "text-ink bg-brand-soft" : "text-muted hover:text-ink hover:bg-subtle"}`}>
                 {n.label}
               </Link>
             );
@@ -41,19 +41,25 @@ export default function HeaderNav({ pulse }: { pulse: { visits: number; online:
         </nav>
 
         <div className="ml-auto flex items-center gap-2 min-w-0">
-          <Link href="/launch" className="inline-flex items-center h-9 px-3.5 rounded-xl bg-brand text-white text-[13px] font-semibold hover:bg-brand-strong whitespace-nowrap">
+          <Link href="/launch" className="inline-flex items-center min-h-11 px-3.5 rounded-full bg-brand text-brand-fg text-xs font-medium hover:bg-brand-strong whitespace-nowrap">
             Launch<span className="hidden sm:inline">&nbsp;a token</span>
           </Link>
-          <div className="hidden md:block">
+          <div className="hidden lg:block">
             <ConnectButton />
           </div>
-          <button type="button" onClick={() => setOpen(true)} aria-label="Open menu" aria-expanded={open} className="md:hidden h-10 w-10 inline-flex items-center justify-center rounded-xl border border-line bg-card text-ink hover:border-line-strong">
+          <button type="button" onClick={() => setOpen(true)} aria-label="Open menu" aria-expanded={open} className="lg:hidden h-11 w-11 inline-flex items-center justify-center rounded-xl border border-line bg-card text-ink hover:border-line-strong">
             <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
               <path d="M2.5 5h13M2.5 9h13M2.5 13h13" />
             </svg>
           </button>
         </div>
       </div>
+      <div className="bb-network-bar border-t border-line-muted">
+        <div className="mx-auto max-w-6xl px-4 min-h-10 flex flex-wrap items-center justify-between gap-x-4 gap-y-1 py-1 text-[11px] text-muted">
+          <span>Base + Robinhood Chain <span className="mx-2 text-line-strong" aria-hidden>/</span> 0% platform fee</span>
+          <LivePulse initial={pulse} />
+        </div>
+      </div>
 
       {open ? (
         <Sheet title="Menu" onClose={() => setOpen(false)}>
@@ -61,7 +67,7 @@ export default function HeaderNav({ pulse }: { pulse: { visits: number; online:
             {[{ href: "/launch", label: "Launch a token · free" }, ...NAV].map((n) => {
               const active = n.href === "/" ? pathname === "/" : pathname.startsWith(n.href);
               return (
-                <Link key={n.href} href={n.href} onClick={() => setOpen(false)} className={`min-h-12 px-3 inline-flex items-center rounded-xl text-base font-medium ${active ? "bg-brand-soft text-brand" : "text-ink hover:bg-paper"}`}>
+                <Link key={n.href} href={n.href} aria-current={active ? "page" : undefined} onClick={() => setOpen(false)} className={`min-h-12 px-3 inline-flex items-center rounded-xl text-base font-medium ${active ? "bg-brand-soft text-brand" : "text-ink hover:bg-paper"}`}>
                   {n.label}
                 </Link>
               );
diff --git a/app/src/components/Skeleton.tsx b/app/src/components/Skeleton.tsx
index 0cd2708c..2c80a87f 100644
--- a/app/src/components/Skeleton.tsx
+++ b/app/src/components/Skeleton.tsx
@@ -11,7 +11,7 @@ export function Sk({ className = "", style }: { className?: string; style?: Reac
 export function SkRow({ i }: { i: number }) {
   return (
     <li className="px-3 sm:px-4 py-3 border-t border-line first:border-t-0">
-      <div className="grid md:grid-cols-[minmax(0,1fr)_7rem_6rem_6rem_4rem] items-center gap-3">
+      <div className="bb-launch-columns grid items-center gap-3">
         <div className="flex items-center gap-3 min-w-0">
           <Sk className="h-10 w-10 rounded-xl shrink-0" />
           <div className="min-w-0 space-y-2">
diff --git a/app/src/components/launchpad/ChainBadge.tsx b/app/src/components/launchpad/ChainBadge.tsx
index b088cd09..ab316a58 100644
--- a/app/src/components/launchpad/ChainBadge.tsx
+++ b/app/src/components/launchpad/ChainBadge.tsx
@@ -4,7 +4,7 @@ import { CHAIN_SHORT, type ChainKey } from "@/lib/chainPublic";
 export default function ChainBadge({ chain, className = "", size = "sm" }: { chain: ChainKey; className?: string; size?: "sm" | "md" }) {
   const tone = chain === "base" ? "bg-brand-soft text-brand border-brand/20" : "bg-up-soft text-up border-up/20";
   return (
-    <span className={`inline-flex items-center rounded-md border font-semibold whitespace-nowrap ${size === "md" ? "h-6 px-2 text-[11px]" : "h-5 px-1.5 text-[10px] uppercase tracking-wide"} ${tone} ${className}`} title={chain === "base" ? "Base" : "Robinhood Chain"}>
+    <span className={`inline-flex items-center rounded-md border font-medium whitespace-nowrap ${size === "md" ? "h-6 px-2 text-[11px]" : "h-5 px-1.5 text-[10px]"} ${tone} ${className}`} title={chain === "base" ? "Base" : "Robinhood Chain"}>
       {CHAIN_SHORT[chain]}
     </span>
   );
diff --git a/app/src/components/launchpad/HoldersPanel.tsx b/app/src/components/launchpad/HoldersPanel.tsx
index a2c77c44..d7389eb4 100644
--- a/app/src/components/launchpad/HoldersPanel.tsx
+++ b/app/src/components/launchpad/HoldersPanel.tsx
@@ -14,7 +14,7 @@ const TAG_STYLE: Record<string, string> = {
   sniper: "border-warm/40 bg-warm-soft text-warm-ink",
   whale: "border-line-strong bg-card text-ink",
 };
-const NOTE_STYLE = { warn: "border-warm/40 bg-warm-soft text-warm-ink", info: "border-line bg-card text-body", good: "border-[#bbf7d0] bg-[#ECFDF3] text-up" } as const;
+const NOTE_STYLE = { warn: "border-warm/40 bg-warm-soft text-warm-ink", info: "border-line bg-card text-body", good: "border-up/30 bg-up-soft text-up" } as const;
 
 export default function HoldersPanel({ chain, symbol, p }: { chain: ChainKey; symbol: string; p: HolderPanel | null }) {
   if (!p) return null;
diff --git a/app/src/components/launchpad/LaunchForm.tsx b/app/src/components/launchpad/LaunchForm.tsx
index e87c75b2..d039fd6f 100644
--- a/app/src/components/launchpad/LaunchForm.tsx
+++ b/app/src/components/launchpad/LaunchForm.tsx
@@ -264,7 +264,7 @@ export default function LaunchForm({ ethUsd, initialChain = "base" }: { ethUsd:
                       setMcapPick(null);
                       setCustomMcap("");
                     }}
-                    className={`h-8 px-3 rounded-full text-xs font-mono font-bold ${quoteKey === q.key ? "bg-ink text-white" : "text-body hover:text-ink"}`}
+                    className={`h-8 px-3 rounded-full text-xs font-mono font-bold ${quoteKey === q.key ? "bg-ink text-brand-fg" : "text-body hover:text-ink"}`}
                     aria-pressed={quoteKey === q.key}
                   >
                     {q.label}
@@ -394,7 +394,7 @@ export default function LaunchForm({ ethUsd, initialChain = "base" }: { ethUsd:
                     setMcapPick(v);
                     setCustomMcap("");
                   }}
-                  className={`h-11 px-4 rounded-xl border font-mono text-sm font-bold tnum ${active ? "bg-ink text-white border-ink" : "bg-card text-ink border-line-strong hover:border-ink/40"}`}
+                  className={`h-11 px-4 rounded-xl border font-mono text-sm font-bold tnum ${active ? "bg-ink text-brand-fg border-ink" : "bg-card text-ink border-line-strong hover:border-ink/40"}`}
                 >
                   {quote.key === "stock" ? `$${fmtCompact(v * (quote.usd ?? 0), 0)}` : quote.decimals <= 6 ? `$${fmtCompact(v, 0)}` : `${v} ${quote.symbol}`}
                 </button>
@@ -516,7 +516,7 @@ export default function LaunchForm({ ethUsd, initialChain = "base" }: { ethUsd:
       </form>
 
       {/* preview */}
-      <aside className="lg:sticky lg:top-20 space-y-4 min-w-0 order-first lg:order-none">
+      <aside className="lg:sticky lg:top-32 space-y-4 min-w-0 order-first lg:order-none">
         <div className={`${card} p-4`}>
           <p className="text-[11px] font-semibold uppercase tracking-[0.08em] text-muted">Preview</p>
           <div className="mt-3 flex items-center gap-3">
diff --git a/app/src/components/launchpad/LaunchHero.tsx b/app/src/components/launchpad/LaunchHero.tsx
index a7a5d696..bc64c76c 100644
--- a/app/src/components/launchpad/LaunchHero.tsx
+++ b/app/src/components/launchpad/LaunchHero.tsx
@@ -1,5 +1,5 @@
-import Link from "next/link";
-import { btn, pill } from "@/components/ui";
+import Link from "next/link";
+import { btn } from "@/components/ui";
 import LiveTotals from "./LiveTotals";
 import { launchpad } from "@/lib/launchpad/config";
 import { explorerAddress } from "@/lib/chainPublic";
@@ -9,69 +9,40 @@ export default function LaunchHero({ configured }: { ethUsd?: number | null; con
   const b = launchpad("base");
   const r = launchpad("robinhood");
   return (
-    <section className="relative pt-8 sm:pt-12 pb-2">
-      <div className="flex flex-wrap items-center gap-2">
-        <span className={`${pill} text-up border-up/20 bg-up-soft`}>0% platform fee</span>
-        <a href={BRAND_GITHUB} target="_blank" rel="noreferrer" className={`${pill} hover:text-ink hover:border-line-strong`}>
-          open source · GitHub ↗
-        </a>
-        <a href="/rules#contracts" className={`${pill} hover:text-ink hover:border-line-strong`}>
-          verified contracts
-        </a>
-        <span className={pill}>Base + Robinhood Chain · Uniswap v4</span>
-        <span className={pill}>liquidity locked forever</span>
-        <span className={pill}>no owner, no admin</span>
-      </div>
-
-      <div className="mt-6 sm:mt-8 grid lg:grid-cols-[minmax(0,1fr)_24rem] gap-8 lg:gap-12 items-end">
-        <div className="min-w-0">
-          <h1 className="font-display font-bold leading-[0.98] tracking-[-0.03em] text-ink text-5xl sm:text-6xl lg:text-7xl break-words">
-            Launch a token.
-            <br />
-            <span className="text-brand">Free.</span> On Base or Robinhood.
-          </h1>
-          <p className="mt-5 text-lg sm:text-xl text-body max-w-xl">
-            One transaction deploys your token, opens a Uniswap v4 pool and locks 100% of the supply as liquidity — forever. We take nothing. The only cost is gas.
-          </p>
-          <div className="mt-7 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5">
-            <Link href="/launch" className={`${btn.primary} w-full sm:w-auto min-h-12 px-7 text-[15px]`}>
-              Launch a token
-              <span aria-hidden className="ml-1">→</span>
-            </Link>
-            <Link href="/rules#launchpad" className="text-sm font-medium text-brand hover:underline underline-offset-4 text-center sm:text-left">
-              How it works
-            </Link>
-          </div>
-          {!configured ? (
-            <p className="mt-5 inline-block rounded-xl bg-warm-soft border border-warm/30 text-warm-ink text-sm px-3 py-2">
-              Launchpad contracts are not configured yet — read-only until NEXT_PUBLIC_LAUNCH_FACTORY / _LOCKER are set.
-            </p>
-          ) : null}
+    <section className="bb-launch-hero">
+      <div className="bb-hero-intro">
+        <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-xs text-muted">
+          <span className="inline-flex items-center gap-2"><span className="h-1.5 w-1.5 rounded-full bg-up" aria-hidden />Free to launch. Open by default.</span>
+          <a href={BRAND_GITHUB} target="_blank" rel="noreferrer" className="underline underline-offset-4 hover:text-ink">View source</a>
         </div>
-
-        <div className="min-w-0">
-          <LiveTotals />
-          <p className="mt-3 text-xs text-muted leading-relaxed">
-            Liquidity lives in Uniswap&apos;s PoolManager; the position NFT in an ownerless locker on each chain (
-            {b.locker ? (
-              <a href={explorerAddress("base", b.locker)} target="_blank" rel="noreferrer" className="underline underline-offset-2 hover:text-ink">
-                Base
-              </a>
-            ) : (
-              "Base"
-            )}
-            ,{" "}
-            {r.locker ? (
-              <a href={explorerAddress("robinhood", r.locker)} target="_blank" rel="noreferrer" className="underline underline-offset-2 hover:text-ink">
-                Robinhood
-              </a>
-            ) : (
-              "Robinhood"
-            )}
-            ). Nobody can pull it — not the creator, not us.
-          </p>
+        <h1>Launch a token.</h1>
+        <p className="bb-hero-description">
+          One transaction. A token, a Uniswap v4 pool, and liquidity locked forever.
+          Launch on Base or Robinhood Chain. The only cost is gas.
+        </p>
+        <div className="flex flex-wrap items-center justify-center gap-3 mt-6">
+          <Link href="/launch" className={`${btn.primary} rounded-full px-6`}>Launch a token</Link>
+          <Link href="/rules#launchpad" className={`${btn.secondary} rounded-full px-6`}>How it works</Link>
+        </div>
+        <div className="bb-hero-facts">
+          <span>0% platform fee</span>
+          <span>No owner or admin</span>
+          <a href="/rules#contracts" className="hover:text-ink underline underline-offset-4">Verified contracts</a>
         </div>
+        {!configured ? (
+          <p className="mt-5 inline-block rounded-xl bg-warm-soft border border-warm/30 text-warm-ink text-xs px-3 py-2">
+            Launching is not available yet. You can still explore the launchpad.
+          </p>
+        ) : null}
       </div>
+      <LiveTotals />
+      <p className="bb-locker-note">
+        Liquidity is held in Uniswap&apos;s PoolManager, with the position NFT in an ownerless locker on each chain (
+        {b.locker ? <a href={explorerAddress("base", b.locker)} target="_blank" rel="noreferrer" className="underline underline-offset-2 hover:text-ink">Base</a> : "Base"}
+        ,{" "}
+        {r.locker ? <a href={explorerAddress("robinhood", r.locker)} target="_blank" rel="noreferrer" className="underline underline-offset-2 hover:text-ink">Robinhood</a> : "Robinhood"}
+        ). Nobody can withdraw it.
+      </p>
     </section>
   );
 }
diff --git a/app/src/components/launchpad/LaunchList.tsx b/app/src/components/launchpad/LaunchList.tsx
index 6657acf5..e97a84d8 100644
--- a/app/src/components/launchpad/LaunchList.tsx
+++ b/app/src/components/launchpad/LaunchList.tsx
@@ -265,20 +265,20 @@ export default function LaunchList({ initial, initialHasMore = false, initialSor
   const ranked = sort !== "new";
 
   return (
-    <section className="min-w-0 space-y-2">
+    <section className="bb-directory min-w-0 space-y-3">
       <div className="space-y-2 pb-1">
-        <div className="flex items-center gap-3 min-w-0">
+        <div className="flex flex-wrap items-center gap-3 min-w-0">
           <h2 className="text-base font-semibold text-ink shrink-0">
             Launches
             <span className="ml-2 text-xs font-normal text-muted font-mono tnum">{live.totals.launches}</span>
           </h2>
-          <label className="relative flex-1 min-w-0 max-w-sm ml-auto">
+          <label className="relative flex-1 min-w-48 max-w-sm ml-auto">
             <span className="sr-only">Search launches</span>
             <input
               value={q}
               onChange={(e) => setQ(e.target.value)}
               placeholder="Search name, symbol or 0x…"
-              className="w-full h-9 rounded-full border border-line bg-card pl-8 pr-8 text-[13px] text-ink placeholder:text-faint focus:border-brand focus:ring-4 focus:ring-brand/10 outline-none"
+              className="w-full h-11 rounded-xl border border-line bg-card pl-8 pr-8 text-xs text-ink placeholder:text-faint focus:border-brand focus:ring-4 focus:ring-brand/10 outline-none"
               autoComplete="off"
               spellCheck={false}
             />
@@ -296,7 +296,7 @@ export default function LaunchList({ initial, initialHasMore = false, initialSor
         <div className="flex items-center gap-2 flex-wrap">
           <div className="flex items-center rounded-full border border-line bg-card p-0.5 shrink-0" role="group" aria-label="chain">
             {CHAIN_FILTERS.map((c) => (
-              <button key={c.label} type="button" onClick={() => pick(sort, window_, c.key)} className={`h-8 sm:h-7 px-2.5 rounded-full text-[11px] font-medium whitespace-nowrap ${c.key === chain ? (c.key === "robinhood" ? "bg-up-soft text-up" : c.key === "base" ? "bg-brand-soft text-brand" : "bg-ink text-white") : "text-muted hover:text-ink"}`} aria-pressed={c.key === chain}>
+              <button key={c.label} type="button" onClick={() => pick(sort, window_, c.key)} className={`h-8 sm:h-7 px-2.5 rounded-full text-[11px] font-medium whitespace-nowrap ${c.key === chain ? (c.key === "robinhood" ? "bg-up-soft text-up" : c.key === "base" ? "bg-brand-soft text-brand" : "bg-ink text-brand-fg") : "text-muted hover:text-ink"}`} aria-pressed={c.key === chain}>
                 {c.label}
               </button>
             ))}
@@ -312,7 +312,7 @@ export default function LaunchList({ initial, initialHasMore = false, initialSor
           ) : null}
           <nav className="flex items-center gap-1 rounded-full border border-line bg-card p-0.5 max-w-full overflow-x-auto bb-scroll ml-auto" aria-label="sort">
             {SORTS.map((s) => (
-              <button key={s.key} type="button" onClick={() => pick(s.key)} className={`h-8 sm:h-7 px-3 inline-flex items-center rounded-full text-xs font-medium whitespace-nowrap ${s.key === sort ? "bg-ink text-white" : "text-body hover:text-ink"}`} aria-pressed={s.key === sort}>
+              <button key={s.key} type="button" onClick={() => pick(s.key)} className={`h-8 sm:h-7 px-3 inline-flex items-center rounded-full text-xs font-medium whitespace-nowrap ${s.key === sort ? "bg-ink text-brand-fg" : "text-body hover:text-ink"}`} aria-pressed={s.key === sort}>
                 {s.label}
               </button>
             ))}
@@ -321,30 +321,32 @@ export default function LaunchList({ initial, initialHasMore = false, initialSor
       </div>
       <div className="flex items-center gap-1.5 flex-wrap pb-1">
         {FILTERS.map((f) => (
-          <button key={f.key} type="button" title={f.title} onClick={() => pick(sort, window_, chain, filter === f.key ? null : f.key)} className={`h-7 px-2.5 rounded-full border text-[11px] font-medium whitespace-nowrap ${filter === f.key ? "bg-ink text-white border-ink" : "bg-card text-body border-line hover:border-line-strong hover:text-ink"}`} aria-pressed={filter === f.key}>
+          <button key={f.key} type="button" title={f.title} onClick={() => pick(sort, window_, chain, filter === f.key ? null : f.key)} className={`h-7 px-2.5 rounded-full border text-[11px] font-medium whitespace-nowrap ${filter === f.key ? "bg-ink text-brand-fg border-ink" : "bg-card text-body border-line hover:border-line-strong hover:text-ink"}`} aria-pressed={filter === f.key}>
             {f.label}
           </button>
         ))}
         {nq ? <span className="text-[11px] text-muted ml-1 inline-flex items-center gap-1">{searching && nq ? <><Spinner size={10} /> searching…</> : `${shown.length} match${shown.length === 1 ? "" : "es"}`}</span> : null}
       </div>
-      <LaunchListHeader window={showWindow ? window_ : "all"} />
-      <ul ref={listRef} className="space-y-2">
-        {shown.map((l, i) => (
-          <li key={l.token} data-token={l.token} className="list-none">
-            <ul>
-              <LaunchRow l={l} rank={ranked && !nq ? i + 1 : undefined} window={showWindow ? window_ : "all"} hl={hl.get(l.token) ?? null} now={now} pop={pop.has(l.token)} />
-            </ul>
-          </li>
-        ))}
-        {shown.length === 0 ? (
-          <li className="rounded-2xl bg-card border border-line p-10 text-center space-y-3">
-            <p className="text-sm text-muted">{nq ? (searching ? "Searching…" : "Nothing matches.") : filter ? "Nothing matches this filter yet." : hasDb ? "No launches yet. Yours would be the first." : "Database not configured — the list is empty until it is."}</p>
-            <Link href="/launch" className={btn.primarySm}>
-              Launch the first token
-            </Link>
-          </li>
-        ) : null}
-      </ul>
+      <div className="bb-launch-table">
+        <LaunchListHeader window={showWindow ? window_ : "all"} />
+        <ul ref={listRef}>
+          {shown.map((l, i) => (
+            <li key={l.token} data-token={l.token} className="list-none">
+              <ul>
+                <LaunchRow l={l} rank={ranked && !nq ? i + 1 : undefined} window={showWindow ? window_ : "all"} hl={hl.get(l.token) ?? null} now={now} pop={pop.has(l.token)} />
+              </ul>
+            </li>
+          ))}
+          {shown.length === 0 ? (
+            <li className="rounded-2xl bg-card border border-line p-10 text-center space-y-3">
+              <p className="text-sm text-muted">{nq ? (searching ? "Searching…" : "Nothing matches.") : filter ? "Nothing matches this filter yet." : hasDb ? "No launches yet. Yours would be the first." : "Database not configured — the list is empty until it is."}</p>
+              <Link href="/launch" className={btn.primarySm}>
+                Launch the first token
+              </Link>
+            </li>
+          ) : null}
+        </ul>
+      </div>
       {!nq && hasMore && rows.length < 200 ? (
         <div className="pt-3 flex justify-center">
           <button type="button" onClick={() => void loadMore()} disabled={loadingMore} className={btn.secondarySm}>
diff --git a/app/src/components/launchpad/LaunchRow.tsx b/app/src/components/launchpad/LaunchRow.tsx
index c7e650db..dd2ef291 100644
--- a/app/src/components/launchpad/LaunchRow.tsx
+++ b/app/src/components/launchpad/LaunchRow.tsx
@@ -11,7 +11,7 @@ import ChangeChip from "./ChangeChip";
 
 export function LaunchListHeader({ window }: { window: VolumeWindow }) {
   return (
-    <div className="hidden md:grid grid-cols-[minmax(0,1fr)_7rem_7rem_6rem_4.5rem] gap-3 px-4 pb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted">
+    <div className="bb-launch-columns bb-list-heading hidden md:grid gap-3 px-4 py-3 text-[11px] font-medium text-muted">
       <span>Token</span>
       <span className="text-right">Market cap</span>
       <span className="text-right">Volume{window === "all" ? "" : ` ${window}`}</span>
@@ -36,9 +36,9 @@ export default function LaunchRow({ l, rank, window = "all", hl = null, now, pop
   const hot = l.trades_1h >= 3;
   const flash = hl ? (hl.kind === "new" ? "bb-row-new" : hl.kind === "buy" ? "bb-row-buy" : "bb-row-sell") : "";
   return (
-    <li className={`relative group rounded-2xl bg-card border border-line shadow-card hover:shadow-card-hover hover:border-line-strong transition-[box-shadow,border-color,transform] hover:-translate-y-px ${flash}`}>
-      <Link href={`/t/${l.chain}/${l.token}`} className="absolute inset-0 rounded-2xl" aria-label={`${l.name} (${l.symbol})`} />
-      <div className="grid md:grid-cols-[minmax(0,1fr)_7rem_7rem_6rem_4.5rem] gap-x-3 gap-y-2 items-center px-4 py-3">
+    <li className={`bb-launch-row relative group bg-card hover:bg-subtle transition-colors ${flash}`}>
+      <Link href={`/t/${l.chain}/${l.token}`} className="absolute inset-0" aria-label={`${l.name} (${l.symbol})`} />
+      <div className="bb-launch-columns grid gap-x-3 gap-y-3 items-center px-4 py-4">
         <div className="flex items-center gap-3 min-w-0">
           {typeof rank === "number" ? <span className="hidden sm:inline w-5 text-right font-mono text-xs text-faint tnum shrink-0">{rank}</span> : null}
           <div className="relative shrink-0">
@@ -50,19 +50,19 @@ export default function LaunchRow({ l, rank, window = "all", hl = null, now, pop
               </span>
             ) : null}
           </div>
-          <div className="min-w-0">
-            <div className="flex items-center gap-2 min-w-0">
-              <span className="font-semibold text-[15px] text-ink truncate">{l.name}</span>
-              <span className="font-mono text-xs text-muted shrink-0">{l.symbol}</span>
+          <div className="min-w-0 flex-1">
+            <div className="bb-token-identity flex flex-wrap items-center gap-x-2 gap-y-1 min-w-0">
+              <span className="font-semibold text-[13px] text-ink truncate max-w-full">{l.name}</span>
+              <span className="font-mono text-[11px] text-muted truncate max-w-24" title={l.symbol}>{l.symbol}</span>
               <ChangeChip v={l.change_from_launch} className={`shrink-0 ${pop ? "bb-pop" : ""}`} />
               <ChainBadge chain={l.chain} className="shrink-0" />
-              {hl?.kind === "new" ? <span className="shrink-0 inline-flex items-center rounded-md px-1.5 h-5 text-[10px] font-bold uppercase tracking-wide bg-brand text-white">new</span> : null}
+              {hl?.kind === "new" ? <span className="shrink-0 inline-flex items-center rounded-md px-1.5 h-5 text-[10px] font-bold uppercase tracking-wide bg-brand text-brand-fg">new</span> : null}
             </div>
-            <div className="mt-0.5 flex items-center gap-2 min-w-0">
+            <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 min-w-0">
               <FeeChip lpFee={l.lp_fee} mode={mode} />
               {hot ? (
                 <span className="inline-flex items-center gap-1 rounded-full border border-warm/30 bg-warm-soft px-2 h-6 text-[11px] font-medium text-warm-ink whitespace-nowrap" title="trades in the last hour">
-                  🔥 {l.trades_1h} / 1h
+                  {l.trades_1h} / 1h
                 </span>
               ) : null}
               {l.last_trade_at ? <span className="text-[11px] text-muted font-mono whitespace-nowrap hidden sm:inline" suppressHydrationWarning>traded {ago(l.last_trade_at, now)} ago</span> : null}
@@ -70,7 +70,7 @@ export default function LaunchRow({ l, rank, window = "all", hl = null, now, pop
             </div>
           </div>
         </div>
-        <div className="md:hidden flex items-center justify-between font-mono text-xs tnum text-body pl-[3.25rem]">
+        <div className="md:hidden flex flex-wrap gap-x-3 gap-y-1 items-center justify-between font-mono text-[11px] tnum text-body">
           <span>
             <span className="text-faint">mc </span>
             <span className={`text-ink font-bold ${pop ? "bb-pop inline-block" : ""}`}>{fdvUsd !== null ? fmtUsd(fdvUsd, { compact: true }) : fdvQuoteLabel}</span>
diff --git a/app/src/components/launchpad/LiveTotals.tsx b/app/src/components/launchpad/LiveTotals.tsx
index 1c623d22..d2b1a580 100644
--- a/app/src/components/launchpad/LiveTotals.tsx
+++ b/app/src/components/launchpad/LiveTotals.tsx
@@ -35,23 +35,23 @@ export default function LiveTotals() {
   const rhUsd = units(bc.robinhood.volume_quote_usdg, 6) + units(bc.robinhood.volume_quote_eth, 18) * eu;
   const volSub = `${fmtUsd(baseUsd, { compact: true })} Base · ${fmtUsd(rhUsd, { compact: true })} Robinhood`;
   return (
-    <dl className="grid grid-cols-2 gap-2.5">
+    <dl className="bb-overview-stats">
       <Stat k="Launches" v={t.launches.toLocaleString("en-US")} sub={`${bc.base.launches} Base · ${bc.robinhood.launches} Robinhood`} pop={popped.has("launches")} />
       <Stat k="Trades" v={t.trades.toLocaleString("en-US")} sub={`${bc.base.trades} Base · ${bc.robinhood.trades} Robinhood`} pop={popped.has("trades")} />
       <Stat k="Volume" v={fmtUsd(t.volume_usd, { compact: true })} sub={volSub} pop={popped.has("vol")} />
       <Stat k="Fees burned" v={fmtUsd(t.fees_burned_usd, { compact: true })} accent="warm" pop={popped.has("burned")} />
       <Stat k="Fees to creators" v={fmtUsd(t.fees_to_creators_usd, { compact: true })} accent="up" pop={popped.has("creators")} />
-      <Stat k="Platform fee" v="0" sub="both chains" accent="up" />
+      <Stat k="Platform fee" v="0%" sub="both chains" accent="up" />
     </dl>
   );
 }
 
 function Stat({ k, v, sub, accent, pop }: { k: string; v: string; sub?: string | null; accent?: "up" | "warm"; pop?: boolean }) {
   return (
-    <div className="rounded-xl bg-card border border-line shadow-card px-3.5 py-3 min-w-0">
-      <dt className="text-xs text-muted truncate">{k}</dt>
-      <dd className={`mt-0.5 font-mono font-bold text-lg tnum truncate ${pop ? "bb-pop" : ""} ${accent === "up" ? "text-up" : accent === "warm" ? "text-warm-ink" : "text-ink"}`}>{v}</dd>
-      {sub ? <dd className="text-[11px] font-mono tnum text-muted truncate">{sub}</dd> : null}
+    <div className="min-w-0">
+      <dt className="text-xs text-muted">{k}</dt>
+      <dd className={`bb-stat-value tnum ${pop ? "bb-pop" : ""} ${accent === "up" ? "text-up" : accent === "warm" ? "text-warm-ink" : "text-ink"}`}>{v}</dd>
+      {sub ? <dd className="text-[10px] tnum text-muted mt-1">{sub}</dd> : null}
     </div>
   );
 }
diff --git a/app/src/components/launchpad/Mark.tsx b/app/src/components/launchpad/Mark.tsx
index 29a9113f..8acf0c4f 100644
--- a/app/src/components/launchpad/Mark.tsx
+++ b/app/src/components/launchpad/Mark.tsx
@@ -1,14 +1,12 @@
 /**
- * The openlaunch mark: brand-blue tile, white geometric "oL" — same family as
- * the old basebid "b" tile. Plain SVG: usable in server components, the OG
- * image and favicons. `tile=false` draws the letters alone (ink/brand) for
- * light backgrounds.
+ * The original geometric oL mark in the shared Gitlawb monochrome palette.
+ * `tile=false` draws only the letters in the supplied color.
  */
 export default function Mark({ size = 24, className = "", title = "openlaunch", tile = true, color = "#FFFFFF" }: { size?: number; className?: string; title?: string; tile?: boolean; color?: string }) {
-  const fg = tile ? "#FFFFFF" : color;
+  const fg = tile ? "var(--color-brand-fg)" : color;
   return (
     <svg width={size} height={size} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" className={className} role="img" aria-label={title}>
-      {tile ? <rect width="32" height="32" rx="7" fill="#0052FF" /> : null}
+      {tile ? <rect width="32" height="32" rx="7" fill="var(--color-brand)" /> : null}
       <path fill={fg} fillRule="evenodd" d="M10.5 13a6.5 6.5 0 1 1 0 13a6.5 6.5 0 1 1 0-13ZM10.5 16.4a3.1 3.1 0 1 0 0 6.2a3.1 3.1 0 1 0 0-6.2Z" />
       <rect x="19.5" y="6" width="4.6" height="20" rx="1.4" fill={fg} />
       <rect x="19.5" y="21.4" width="8.2" height="4.6" rx="1.4" fill={fg} />
@@ -16,11 +14,11 @@ export default function Mark({ size = 24, className = "", title = "openlaunch",
   );
 }
 
-/** Wordmark: "openlaunch" + ".lol" in brand blue. */
+/** Keep the product name readable alongside the Gitlawb family attribution. */
 export function Wordmark({ className = "", size = 15 }: { className?: string; size?: number }) {
   return (
     <span className={`font-semibold tracking-tight text-ink ${className}`} style={{ fontSize: size }}>
-      openlaunch<span className="text-brand">.lol</span>
+      openlaunch<span className="text-muted">.lol</span>
     </span>
   );
 }
diff --git a/app/src/components/launchpad/MobileBuyBar.tsx b/app/src/components/launchpad/MobileBuyBar.tsx
index 3b6a8719..0808fbf9 100644
--- a/app/src/components/launchpad/MobileBuyBar.tsx
+++ b/app/src/components/launchpad/MobileBuyBar.tsx
@@ -22,7 +22,7 @@ export default function MobileBuyBar({ symbol, mcap }: { symbol: string; mcap: s
           <div className="text-xs text-muted">{symbol} · market cap</div>
           <div className="font-mono font-bold text-ink tnum">{mcap}</div>
         </div>
-        <a href="#trade" onClick={(e) => { e.preventDefault(); document.getElementById("trade")?.scrollIntoView({ behavior: "smooth", block: "start" }); }} className="inline-flex items-center justify-center min-h-11 px-6 rounded-xl bg-up text-white text-sm font-semibold">
+        <a href="#trade" onClick={(e) => { e.preventDefault(); document.getElementById("trade")?.scrollIntoView({ behavior: "smooth", block: "start" }); }} className="inline-flex items-center justify-center min-h-11 px-6 rounded-xl bg-up text-status-fg text-sm font-semibold">
           Buy {symbol}
         </a>
       </div>
diff --git a/app/src/components/launchpad/PriceChart.tsx b/app/src/components/launchpad/PriceChart.tsx
index 90373462..2c77bd5b 100644
--- a/app/src/components/launchpad/PriceChart.tsx
+++ b/app/src/components/launchpad/PriceChart.tsx
@@ -13,8 +13,8 @@ import { Sk } from "@/components/Skeleton";
 type Payload = { interval: Interval; from: number; launch: { t: number; price: number }; quote: { symbol: string; decimals: number; usd: number | null }; supply: number; candles: RawCandle[]; mine: { t: number; is_buy: boolean; quote: string }[] | null };
 type Unit = "usd" | "quote" | "mcap";
 
-const UP = "#15803D";
-const DOWN = "#DC2626";
+const UP = "#21864a";
+const DOWN = "#dc454e";
 
 /**
  * Candles + volume from the indexed swaps. Units: USD (default when the quote
@@ -92,22 +92,36 @@ export default function PriceChart({ chain, token, symbol, launchedAt }: { chain
     if (!el) return;
     const c = createChart(el, {
       autoSize: true,
-      layout: { background: { color: "transparent" }, textColor: "#64748B", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 },
-      grid: { vertLines: { color: "#F1F0EE" }, horzLines: { color: "#F1F0EE" } },
-      rightPriceScale: { borderColor: "#E7E5E4", scaleMargins: { top: 0.08, bottom: 0.25 } },
-      timeScale: { borderColor: "#E7E5E4", timeVisible: true, secondsVisible: false, rightOffset: 3 },
-      crosshair: { horzLine: { labelBackgroundColor: "#0F172A" }, vertLine: { labelBackgroundColor: "#0F172A" } },
+      layout: { background: { color: "transparent" }, fontFamily: getComputedStyle(el).fontFamily, fontSize: 11 },
+      rightPriceScale: { scaleMargins: { top: 0.08, bottom: 0.25 } },
+      timeScale: { timeVisible: true, secondsVisible: false, rightOffset: 3 },
+      crosshair: { horzLine: { labelBackgroundColor: "#454545" }, vertLine: { labelBackgroundColor: "#454545" } },
       handleScale: { axisPressedMouseMove: true },
       localization: { priceFormatter: (p: number) => (p >= 1000 ? fmtCompact(p, 1) : p >= 1 ? p.toFixed(2) : fmtPrice(p)) },
     });
     const cs = c.addSeries(CandlestickSeries, { upColor: UP, downColor: DOWN, borderUpColor: UP, borderDownColor: DOWN, wickUpColor: UP, wickDownColor: DOWN, priceFormat: { type: "price", precision: 8, minMove: 1e-8 } });
-    const vs = c.addSeries(HistogramSeries, { priceFormat: { type: "volume" }, priceScaleId: "vol", color: "#CBD5E1" });
+    const vs = c.addSeries(HistogramSeries, { priceFormat: { type: "volume" }, priceScaleId: "vol", color: "#888888" });
+    const theme = window.matchMedia("(prefers-color-scheme: dark)");
+    const syncTheme = () => {
+      const styles = getComputedStyle(el);
+      const color = (name: string) => styles.getPropertyValue(`--color-${name}`).trim();
+      c.applyOptions({
+        layout: { textColor: color("muted") },
+        grid: { vertLines: { color: color("line-muted") }, horzLines: { color: color("line-muted") } },
+        rightPriceScale: { borderColor: color("line") },
+        timeScale: { borderColor: color("line") },
+      });
+      cs.applyOptions({ upColor: color("up"), borderUpColor: color("up"), wickUpColor: color("up"), downColor: color("down"), borderDownColor: color("down"), wickDownColor: color("down") });
+    };
+    syncTheme();
+    theme.addEventListener("change", syncTheme);
     c.priceScale("vol").applyOptions({ scaleMargins: { top: 0.82, bottom: 0 } });
     chart.current = c;
     candleSeries.current = cs;
     volSeries.current = vs;
     markers.current = createSeriesMarkers(cs, []);
     return () => {
+      theme.removeEventListener("change", syncTheme);
       c.remove();
       chart.current = null;
       candleSeries.current = null;
@@ -153,7 +167,7 @@ export default function PriceChart({ chain, token, symbol, launchedAt }: { chain
         <div className="flex items-center gap-1.5 flex-wrap">
           <div className="flex items-center rounded-full border border-line bg-paper p-0.5" role="group" aria-label="interval">
             {INTERVAL_KEYS.map((k) => (
-              <button key={k} type="button" onClick={() => setInterval_(k)} className={`h-7 px-2 rounded-full text-[11px] font-mono font-medium ${k === interval ? "bg-ink text-white" : "text-muted hover:text-ink"}`} aria-pressed={k === interval}>
+              <button key={k} type="button" onClick={() => setInterval_(k)} className={`h-7 px-2 rounded-full text-[11px] font-mono font-medium ${k === interval ? "bg-ink text-brand-fg" : "text-muted hover:text-ink"}`} aria-pressed={k === interval}>
                 {k}
               </button>
             ))}
diff --git a/app/src/components/launchpad/TokenAvatar.tsx b/app/src/components/launchpad/TokenAvatar.tsx
index 0844c3e0..67f83e5c 100644
--- a/app/src/components/launchpad/TokenAvatar.tsx
+++ b/app/src/components/launchpad/TokenAvatar.tsx
@@ -9,10 +9,9 @@ export function hueOf(addr: string): number {
   return h;
 }
 
-/** Token image with a graceful fallback: a soft gradient tile with the first letter of the symbol. */
-export default function TokenAvatar({ token, symbol, image, size = 40, className = "" }: { token: string; symbol: string; image?: string | null; size?: number; className?: string }) {
+/** Keep token artwork; missing images use a neutral initial tile. */
+export default function TokenAvatar({ symbol, image, size = 40, className = "" }: { token: string; symbol: string; image?: string | null; size?: number; className?: string }) {
   const [broken, setBroken] = useState(false);
-  const h = hueOf(token);
   const style = { width: size, height: size, fontSize: Math.max(11, Math.round(size * 0.42)) };
   if (image && !broken) {
     return (
@@ -32,8 +31,8 @@ export default function TokenAvatar({ token, symbol, image, size = 40, className
   return (
     <div
       aria-hidden
-      className={`shrink-0 rounded-xl grid place-items-center font-display font-bold text-white select-none ${className}`}
-      style={{ ...style, background: `linear-gradient(135deg, hsl(${h} 70% 55%), hsl(${(h + 40) % 360} 75% 45%))` }}
+      className={`shrink-0 rounded-xl grid place-items-center font-display font-medium bg-brand-soft text-ink border border-line select-none ${className}`}
+      style={style}
     >
       {symbol.slice(0, 1).toUpperCase()}
     </div>
diff --git a/app/src/components/launchpad/TradePanel.tsx b/app/src/components/launchpad/TradePanel.tsx
index e08f7df4..68850a52 100644
--- a/app/src/components/launchpad/TradePanel.tsx
+++ b/app/src/components/launchpad/TradePanel.tsx
@@ -172,7 +172,7 @@ export default function TradePanel({ chain, token, symbol, poolKey, quote, ethUs
   const inUsd = amountIn !== null && side === "buy" && quoteUsd ? fmtUsd(units(amountIn, quote.decimals) * quoteUsd) : null;
 
   return (
-    <section className="rounded-2xl bg-card border border-line shadow-card p-4 space-y-4 scroll-mt-20" id="trade">
+    <section className="rounded-2xl bg-card border border-line shadow-card p-4 space-y-4" id="trade">
       <div className="grid grid-cols-2 gap-1 rounded-xl bg-paper p-1 border border-line">
         {(["buy", "sell"] as Side[]).map((s) => (
           <button
@@ -184,7 +184,7 @@ export default function TradePanel({ chain, token, symbol, poolKey, quote, ethUs
               setQuote(null);
               setPhase({ k: "idle" });
             }}
-            className={`h-10 rounded-lg text-sm font-semibold capitalize transition-colors ${side === s ? (s === "buy" ? "bg-up text-white" : "bg-down text-white") : "text-body hover:text-ink"}`}
+            className={`h-10 rounded-lg text-sm font-semibold capitalize transition-colors ${side === s ? (s === "buy" ? "bg-up text-status-fg" : "bg-down text-status-fg") : "text-body hover:text-ink"}`}
             aria-pressed={side === s}
           >
             {s}
diff --git a/app/src/components/launchpad/TrendingStrip.tsx b/app/src/components/launchpad/TrendingStrip.tsx
index 60462f61..5cef5a36 100644
--- a/app/src/components/launchpad/TrendingStrip.tsx
+++ b/app/src/components/launchpad/TrendingStrip.tsx
@@ -78,21 +78,21 @@ export default function TrendingStrip({ initial }: { initial: Snap }) {
         <h2 className="font-semibold text-ink">Trending</h2>
         <span className="text-xs text-muted">{windowLabel}</span>
       </div>
-      <ul ref={track} className="flex gap-3 overflow-x-auto bb-scroll snap-x snap-mandatory pb-1 -mx-4 px-4 sm:mx-0 sm:px-0 lg:grid lg:grid-cols-6 lg:overflow-visible">
+      <ul ref={track} className="flex gap-3 overflow-x-auto bb-scroll snap-x snap-mandatory pb-1 -mx-4 px-4 sm:mx-0 sm:px-0 xl:grid xl:grid-cols-5 xl:overflow-visible">
         {items.map((l, i) => {
           const isKing = i === 0 && l.token === king;
           const win = snap.window;
           const trades = win === "1h" ? l.trades_1h : l.trades_24h;
           const vol = win === "1h" ? l.volume_1h_usd : l.volume_24h_usd;
           return (
-            <li key={l.token} data-token={l.token} className={`snap-start shrink-0 w-[15.5rem] sm:w-[16.5rem] lg:w-auto ${isKing ? "lg:col-span-2" : ""} ${fresh.has(l.token) ? "bb-flash-up" : ""}`}>
-              <Link href={`/t/${l.chain}/${l.token}`} className={`block h-full rounded-2xl border bg-card shadow-card p-3.5 transition-colors hover:border-ink/40 ${isKing ? "bb-hot border-warm/50" : "border-line"}`}>
+            <li key={l.token} data-token={l.token} className={`snap-start shrink-0 min-w-0 w-[15.5rem] sm:w-[16.5rem] xl:w-auto ${fresh.has(l.token) ? "bb-flash-up" : ""}`}>
+              <Link href={`/t/${l.chain}/${l.token}`} className={`block h-full rounded-2xl border bg-card p-3.5 transition-colors hover:border-ink/40 ${isKing ? "border-line-strong" : "border-line"}`}>
                 <div className="flex items-center gap-3 min-w-0">
-                  <TokenAvatar token={l.token} symbol={l.symbol} image={l.image_url} size={isKing ? 48 : 40} className={isKing ? "rounded-xl" : "rounded-lg"} />
+                  <TokenAvatar token={l.token} symbol={l.symbol} image={l.image_url} size={32} />
                   <div className="min-w-0 flex-1">
-                    <div className="flex items-center gap-1.5 min-w-0">
+                    <div className="flex flex-wrap items-center gap-1.5 min-w-0">
                       {isKing ? (
-                        <span className="inline-flex items-center h-5 px-1.5 rounded-full bg-warm-soft text-warm-ink text-[10px] font-bold uppercase tracking-wide whitespace-nowrap">🔥 Hot right now</span>
+                        <span className="text-[10px] text-muted whitespace-nowrap">#1 Trending</span>
                       ) : (
                         <span className="font-mono text-[11px] text-faint">#{i + 1}</span>
                       )}
@@ -100,7 +100,7 @@ export default function TrendingStrip({ initial }: { initial: Snap }) {
                     </div>
                     <div className="mt-0.5 flex items-baseline gap-1.5 min-w-0">
                       <span className={`font-semibold text-ink truncate ${isKing ? "text-base" : "text-sm"}`}>{l.name}</span>
-                      <span className="font-mono text-xs text-muted shrink-0">{l.symbol}</span>
+                      <span className="font-mono text-[10px] text-muted truncate max-w-16">{l.symbol}</span>
                     </div>
                   </div>
                 </div>
diff --git a/app/src/components/theme.test.ts b/app/src/components/theme.test.ts
new file mode 100644
index 00000000..4a9ff065
--- /dev/null
+++ b/app/src/components/theme.test.ts
@@ -0,0 +1,39 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import test from "node:test";
+
+const css = readFileSync(new URL("../app/globals.css", import.meta.url), "utf8");
+const colors = (source: string) => Object.fromEntries(Array.from(source.matchAll(/--color-([\w-]+):\s*(#[\da-f]{6});/gi), ([, name, hex]) => [name, hex]));
+const light = colors(css.split("@media (prefers-color-scheme: dark)")[0]);
+const dark = { ...light, ...colors(css.match(/@media \(prefers-color-scheme: dark\)\s*\{\s*:root\s*\{([^}]+)\}/)?.[1] ?? "") };
+
+function luminance(hex: string) {
+  assert.match(hex, /^#[\da-f]{6}$/i, "Every tested role needs an opaque color");
+  const rgb = [1, 3, 5].map((offset) => parseInt(hex.slice(offset, offset + 2), 16) / 255);
+  const linear = rgb.map((channel) => channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4);
+  return linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722;
+}
+
+test("system dark preference supplies a distinct dark surface and inverse controls", () => {
+  assert.notEqual(dark.paper, light.paper);
+  assert.ok(luminance(dark.paper) < 0.01);
+  assert.ok(luminance(dark["brand-fg"]) < luminance(dark.brand));
+  assert.ok(luminance(light["brand-fg"]) > luminance(light.brand));
+});
+
+for (const [theme, palette] of Object.entries({ light, dark })) {
+  test(`${theme} theme maintains AA contrast for text, status labels, and filled controls`, () => {
+    const pairs = [
+      ...["paper", "card", "subtle"].flatMap((surface) => ["ink", "body", "muted", "faint", "up", "down-ink", "warm-ink"].map((text) => [text, surface])),
+      ["brand-fg", "brand"], ["brand-fg", "brand-strong"], ["brand", "brand-soft"],
+      ["up", "up-soft"], ["down-ink", "down-soft"], ["warm-ink", "warm-soft"],
+      ["status-fg", "up"], ["status-fg", "down"], ["status-fg", "warm"],
+    ];
+    for (const [foreground, background] of pairs) {
+      const a = luminance(palette[foreground]);
+      const b = luminance(palette[background]);
+      const ratio = (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+      assert.ok(ratio >= 4.5, `${theme}: ${foreground} on ${background} has ${ratio.toFixed(2)}:1 contrast`);
+    }
+  });
+}
diff --git a/app/src/components/ui.ts b/app/src/components/ui.ts
index 9eb958ca..975cc638 100644
--- a/app/src/components/ui.ts
+++ b/app/src/components/ui.ts
@@ -1,17 +1,17 @@
-/** Shared class strings for the "Clear Sky" design system. Presentation only. */
+/** Shared controls for the Gitlawb Explorer design system. */
 
 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-medium text-sm whitespace-nowrap transition-colors disabled:opacity-40 disabled:cursor-not-allowed select-none";
 
 export const btn = {
-  primary: `${btnBase} min-h-11 px-5 bg-brand text-white hover:bg-brand-strong`,
-  primarySm: `${btnBase} min-h-9 px-3.5 text-[13px] bg-brand text-white hover:bg-brand-strong`,
+  primary: `${btnBase} min-h-11 px-5 bg-brand text-brand-fg hover:bg-brand-strong`,
+  primarySm: `${btnBase} min-h-11 px-3.5 text-[13px] bg-brand text-brand-fg 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-white`,
-  softSm: `${btnBase} min-h-9 px-3.5 text-[13px] bg-brand-soft text-brand hover:bg-brand hover:text-white`,
-  up: `${btnBase} min-h-11 px-5 bg-up text-white hover:brightness-110`,
-  warm: `${btnBase} min-h-11 px-5 bg-warm text-white hover:brightness-110`,
+  soft: `${btnBase} min-h-11 px-5 bg-brand-soft text-brand hover:bg-brand hover:text-brand-fg`,
+  softSm: `${btnBase} min-h-11 px-3.5 text-[13px] bg-brand-soft text-brand hover:bg-brand hover:text-brand-fg`,
+  up: `${btnBase} min-h-11 px-5 bg-up text-status-fg hover:brightness-110`,
+  warm: `${btnBase} min-h-11 px-5 bg-warm text-status-fg 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`,
 };
@@ -19,8 +19,8 @@ export const btn = {
 export const card = "rounded-2xl bg-card border border-line shadow-card";
 export const cardPad = `${card} p-5`;
 
-/** Small uppercase eyebrow label (Inter 11px). Use sparingly. */
-export const eyebrow = "text-[11px] font-semibold uppercase tracking-[0.08em] text-muted";
+/** Quiet section label; hierarchy comes from spacing rather than uppercase. */
+export const eyebrow = "text-xs font-medium text-muted";
 
 export const input =
   "w-full rounded-xl bg-card border border-line-strong focus:border-brand focus:ring-4 focus:ring-brand/10 outline-none h-12 px-4 text-base text-ink placeholder:text-faint transition-shadow";