From 0c11332ac21caaf3b2829db234b03c55854c17da Mon Sep 17 00:00:00 2001
From: Vedh Krishnan <admin@Vedhs-MacBook-Pro-2.local>
Date: Sat, 20 Jun 2026 18:39:30 -0500
Subject: [PATCH 1/4] design(host39): adopt outshift-style design tokens,
 fonts, and key page restyle

Restyles host39's frontend toward the ai-catalog.outshift.io
visual language - cool blue Cisco-inspired palette, Inter sans
throughout, soft blue-tinted card shadows on an 8px radius.

* globals.css: replace warm-cream tokens with full Outshift token
  set (colors / fonts / radii / shadows), expose them to Tailwind v4
  via @theme inline {}, keep legacy --page-bg/--panel/--border/--text
  /--muted/--soft as aliases so unswept components don't break.
* layout.tsx: load Inter via next/font/google.
* Header / PageShell / Footer: brand-tile + Inter wordmark + ink-weak
  subtitle, drop serif italic display, drop uppercase tracked nav.
* Landing / list pages: shared Card pattern, new pill / button /
  input shapes, semantic accent mapping for status pills.

No route, data, or behavior changes.
---
 web/next-env.d.ts                         |   6 +
 web/src/app/dashboard/cards/[id]/page.tsx | 102 ++++++++-------
 web/src/app/dashboard/cards/new/page.tsx  | 134 ++++++++++++--------
 web/src/app/dashboard/page.tsx            |  77 ++++++-----
 web/src/app/globals.css                   | 148 +++++++++++++++++++---
 web/src/app/layout.tsx                    |  12 +-
 web/src/app/login/page.tsx                |  77 ++++++-----
 web/src/app/page.tsx                      |  68 +++++-----
 web/src/components/Footer.tsx             |   4 +-
 web/src/components/Header.tsx             |  41 +++---
 web/src/components/PageShell.tsx          |  12 +-
 11 files changed, 452 insertions(+), 229 deletions(-)
 create mode 100644 web/next-env.d.ts

diff --git a/web/next-env.d.ts b/web/next-env.d.ts
new file mode 100644
index 0000000..9edff1c
--- /dev/null
+++ b/web/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/web/src/app/dashboard/cards/[id]/page.tsx b/web/src/app/dashboard/cards/[id]/page.tsx
index 716c8b8..cae9cd0 100644
--- a/web/src/app/dashboard/cards/[id]/page.tsx
+++ b/web/src/app/dashboard/cards/[id]/page.tsx
@@ -8,9 +8,26 @@ import type { AgentCard, Me } from "@/lib/api";
 import { clearAuthToken } from "@/lib/auth";
 import { useRequireAuth } from "@/hooks/useRequireAuth";
 
+// ── Shared primitives (token-bound) ───────────────────────────────────────────
+
+const cardClass =
+  "rounded-[var(--radius-card)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] shadow-[var(--shadow-card)]";
+
+const inputClass =
+  "w-full h-10 rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 text-sm text-[color:var(--color-fg-default)] outline-none transition focus:border-[color:var(--color-primary)] focus:ring-2 focus:ring-[color:var(--color-primary-soft)]";
+
+const textareaClass =
+  "w-full rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 py-2 text-sm text-[color:var(--color-fg-default)] outline-none transition focus:border-[color:var(--color-primary)] focus:ring-2 focus:ring-[color:var(--color-primary-soft)] resize-none";
+
+const primaryBtnClass =
+  "inline-flex h-10 items-center rounded-[var(--radius-control)] bg-[color:var(--color-primary)] px-5 text-sm font-medium text-white transition hover:bg-[color:var(--color-primary-hover)] disabled:opacity-60";
+
+const secondaryBtnClass =
+  "inline-flex h-10 items-center rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-4 text-sm font-medium text-[color:var(--color-fg-default)] transition hover:bg-[color:var(--color-surface-2)]";
+
 function FieldLabel({ children }: { children: React.ReactNode }) {
   return (
-    <p className="mb-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">
+    <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]">
       {children}
     </p>
   );
@@ -167,7 +184,7 @@ export default function EditCardPage() {
   if (loading) {
     return (
       <PageShell title="Edit card" description="Loading…">
-        <div className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm text-sm text-slate-400">
+        <div className={`${cardClass} p-6 text-sm text-[color:var(--color-fg-weak)]`}>
           Loading…
         </div>
       </PageShell>
@@ -177,7 +194,7 @@ export default function EditCardPage() {
   if (!card || !me) {
     return (
       <PageShell title="Edit card" description="">
-        <div className="rounded-3xl border border-rose-200 bg-rose-50 p-4 text-rose-700">
+        <div className="rounded-[var(--radius-card)] border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] p-4 text-[color:var(--color-danger)]">
           {error ?? "Card not found."}
         </div>
       </PageShell>
@@ -191,9 +208,6 @@ export default function EditCardPage() {
     me.handle
   );
 
-  const inputClass =
-    "w-full rounded-xl border border-black/10 px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-slate-300";
-
   return (
     <PageShell
       title={`Edit: ${card.display_name}`}
@@ -202,17 +216,17 @@ export default function EditCardPage() {
       <div className="max-w-lg space-y-6">
         {/* Public URL banner */}
         {isPublic ? (
-          <div className="rounded-3xl border border-black/10 bg-white p-5 shadow-sm">
-            <p className="mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">
+          <div className="rounded-[var(--radius-card)] border border-[color:var(--color-border-strong)] bg-[color:var(--color-primary-soft)] p-5 shadow-[var(--shadow-card)]">
+            <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-[color:var(--color-primary-deep)]">
               Public URL
             </p>
             <div className="flex items-center gap-2">
-              <code className="min-w-0 flex-1 truncate font-mono text-sm text-slate-800">
+              <code className="min-w-0 flex-1 truncate font-mono text-sm text-[color:var(--color-primary-deep)]">
                 {publicUrl}
               </code>
               <button
                 onClick={() => copyUrl(publicUrl)}
-                className="shrink-0 rounded-lg border border-black/10 px-3 py-1.5 text-xs text-slate-600 hover:bg-slate-50"
+                className="shrink-0 rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 py-1.5 text-xs text-[color:var(--color-fg-default)] hover:bg-[color:var(--color-surface-2)]"
               >
                 {copiedUrl ? "Copied!" : "Copy"}
               </button>
@@ -220,25 +234,25 @@ export default function EditCardPage() {
                 href={publicUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="shrink-0 rounded-lg border border-black/10 px-3 py-1.5 text-xs text-slate-600 hover:bg-slate-50"
+                className="shrink-0 rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 py-1.5 text-xs text-[color:var(--color-fg-default)] hover:bg-[color:var(--color-surface-2)]"
               >
                 Open
               </a>
             </div>
           </div>
         ) : (
-          <div className="rounded-3xl border border-amber-200 bg-amber-50 p-5">
-            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-amber-600">Private</p>
-            <p className="mt-1 text-sm text-amber-700">This card is not publicly accessible. Enable &ldquo;Public&rdquo; below to publish it.</p>
+          <div className="rounded-[var(--radius-card)] border border-[color:var(--color-warning-soft)] bg-[color:var(--color-warning-soft)] p-5">
+            <p className="text-xs font-semibold uppercase tracking-wide text-[color:var(--color-warning)]">Private</p>
+            <p className="mt-1 text-sm text-[color:var(--color-warning)]">This card is not publicly accessible. Enable &ldquo;Public&rdquo; below to publish it.</p>
           </div>
         )}
 
         {/* Edit form */}
-        <form onSubmit={onSave} className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm space-y-5">
+        <form onSubmit={onSave} className={`${cardClass} space-y-5 p-6`}>
 
           {/* Basic */}
           <div>
-            <h2 className="mb-4 text-sm font-semibold text-slate-950">Basic info</h2>
+            <h2 className="mb-4 text-sm font-semibold text-[color:var(--color-fg-strong)]">Basic info</h2>
             <div className="space-y-4">
               <div>
                 <FieldLabel>Slug *</FieldLabel>
@@ -267,17 +281,17 @@ export default function EditCardPage() {
                   value={description}
                   onChange={(e) => setDescription(e.target.value)}
                   rows={3}
-                  className={`${inputClass} resize-none`}
+                  className={textareaClass}
                 />
               </div>
             </div>
           </div>
 
-          <div className="border-t border-black/5" />
+          <div className="border-t border-[color:var(--color-border)]" />
 
           {/* Runtime */}
           <div>
-            <h2 className="mb-4 text-sm font-semibold text-slate-950">Runtime</h2>
+            <h2 className="mb-4 text-sm font-semibold text-[color:var(--color-fg-strong)]">Runtime</h2>
             <div className="space-y-4">
               <div>
                 <FieldLabel>Runtime URL</FieldLabel>
@@ -319,23 +333,23 @@ export default function EditCardPage() {
             </div>
           </div>
 
-          <div className="border-t border-black/5" />
+          <div className="border-t border-[color:var(--color-border)]" />
 
           {/* Capabilities */}
           <div>
-            <h2 className="mb-4 text-sm font-semibold text-slate-950">Capabilities & Auth</h2>
+            <h2 className="mb-4 text-sm font-semibold text-[color:var(--color-fg-strong)]">Capabilities & Auth</h2>
             <div className="space-y-4">
-              <div className="rounded-xl border border-black/10 p-4 space-y-2">
+              <div className="rounded-[var(--radius-control)] border border-[color:var(--color-border)] p-4 space-y-2">
                 <label className="flex items-center gap-3 cursor-pointer">
                   <input
                     type="checkbox"
                     checked={isPublic}
                     onChange={(e) => setIsPublic(e.target.checked)}
-                    className="accent-slate-950"
+                    className="accent-[color:var(--color-primary)]"
                   />
                   <div>
-                    <span className="text-sm text-slate-700">Public</span>
-                    <p className="text-xs text-slate-400">Accessible at the public URL. Uncheck to make private.</p>
+                    <span className="text-sm text-[color:var(--color-fg-default)]">Public</span>
+                    <p className="text-xs text-[color:var(--color-fg-weak)]">Accessible at the public URL. Uncheck to make private.</p>
                   </div>
                 </label>
                 <label className="flex items-center gap-3 cursor-pointer">
@@ -343,18 +357,18 @@ export default function EditCardPage() {
                     type="checkbox"
                     checked={streaming}
                     onChange={(e) => setStreaming(e.target.checked)}
-                    className="accent-slate-950"
+                    className="accent-[color:var(--color-primary)]"
                   />
-                  <span className="text-sm text-slate-700">Streaming</span>
+                  <span className="text-sm text-[color:var(--color-fg-default)]">Streaming</span>
                 </label>
                 <label className="flex items-center gap-3 cursor-pointer">
                   <input
                     type="checkbox"
                     checked={pushNotifications}
                     onChange={(e) => setPushNotifications(e.target.checked)}
-                    className="accent-slate-950"
+                    className="accent-[color:var(--color-primary)]"
                   />
-                  <span className="text-sm text-slate-700">Push notifications</span>
+                  <span className="text-sm text-[color:var(--color-fg-default)]">Push notifications</span>
                 </label>
               </div>
 
@@ -363,7 +377,7 @@ export default function EditCardPage() {
                 <select
                   value={authScheme}
                   onChange={(e) => setAuthScheme(e.target.value)}
-                  className={`${inputClass} bg-white`}
+                  className={inputClass}
                 >
                   <option value="none">None</option>
                   <option value="Bearer">Bearer token</option>
@@ -378,7 +392,7 @@ export default function EditCardPage() {
                   value={skillsJson}
                   onChange={(e) => setSkillsJson(e.target.value)}
                   rows={7}
-                  className={`${inputClass} font-mono resize-none text-xs`}
+                  className={`${textareaClass} font-mono text-xs`}
                   placeholder='[{"name": "mySkill", "description": "What it does"}]'
                 />
               </div>
@@ -388,7 +402,7 @@ export default function EditCardPage() {
                 <select
                   value={status}
                   onChange={(e) => setStatus(e.target.value as "active" | "inactive")}
-                  className={`${inputClass} bg-white`}
+                  className={inputClass}
                 >
                   <option value="active">Active</option>
                   <option value="inactive">Inactive</option>
@@ -398,12 +412,12 @@ export default function EditCardPage() {
           </div>
 
           {error && (
-            <p className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-2.5 text-sm text-rose-700">
+            <p className="rounded-[var(--radius-control)] border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] px-4 py-2.5 text-sm text-[color:var(--color-danger)]">
               {error}
             </p>
           )}
           {success && (
-            <p className="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-2.5 text-sm text-emerald-700">
+            <p className="rounded-[var(--radius-control)] border border-[color:var(--color-success-soft)] bg-[color:var(--color-success-soft)] px-4 py-2.5 text-sm text-[color:var(--color-success)]">
               {success}
             </p>
           )}
@@ -412,14 +426,14 @@ export default function EditCardPage() {
             <button
               type="button"
               onClick={() => router.push("/dashboard")}
-              className="rounded-xl border border-black/10 px-4 py-2 text-sm text-slate-600 hover:bg-slate-50"
+              className={secondaryBtnClass}
             >
               Cancel
             </button>
             <button
               type="submit"
               disabled={saving}
-              className="rounded-xl bg-slate-950 px-6 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-60"
+              className={primaryBtnClass}
             >
               {saving ? "Saving…" : "Save changes"}
             </button>
@@ -427,32 +441,32 @@ export default function EditCardPage() {
         </form>
 
         {/* Delete zone */}
-        <div className="rounded-3xl border border-rose-200 bg-rose-50 p-5">
-          <h3 className="text-sm font-semibold text-rose-800">Danger zone</h3>
-          <p className="mt-1 text-sm text-rose-600">
+        <div className="rounded-[var(--radius-card)] border border-[color:var(--color-danger)] bg-[color:var(--color-danger-soft)] p-5">
+          <h3 className="text-sm font-semibold text-[color:var(--color-danger)]">Danger zone</h3>
+          <p className="mt-1 text-sm text-[color:var(--color-danger)]/85">
             Permanently delete this agent card. This action cannot be undone.
           </p>
           <div className="mt-4">
             {!confirmDelete ? (
               <button
                 onClick={() => setConfirmDelete(true)}
-                className="rounded-xl border border-rose-300 bg-white px-4 py-2 text-sm font-medium text-rose-700 hover:bg-rose-50"
+                className="inline-flex h-10 items-center rounded-[var(--radius-control)] border border-[color:var(--color-danger)] bg-[color:var(--color-surface)] px-4 text-sm font-medium text-[color:var(--color-danger)] hover:bg-[color:var(--color-danger-soft)]"
               >
                 Delete card
               </button>
             ) : (
-              <div className="flex items-center gap-3">
-                <p className="text-sm text-rose-700 font-medium">Are you sure?</p>
+              <div className="flex flex-wrap items-center gap-3">
+                <p className="text-sm font-medium text-[color:var(--color-danger)]">Are you sure?</p>
                 <button
                   onClick={onDelete}
                   disabled={deleting}
-                  className="rounded-xl bg-rose-600 px-4 py-2 text-sm font-medium text-white hover:bg-rose-700 disabled:opacity-60"
+                  className="inline-flex h-10 items-center rounded-[var(--radius-control)] bg-[color:var(--color-danger)] px-4 text-sm font-medium text-white hover:opacity-90 disabled:opacity-60"
                 >
                   {deleting ? "Deleting…" : "Yes, delete"}
                 </button>
                 <button
                   onClick={() => setConfirmDelete(false)}
-                  className="rounded-xl border border-black/10 px-4 py-2 text-sm text-slate-600 hover:bg-white"
+                  className={secondaryBtnClass}
                 >
                   Cancel
                 </button>
diff --git a/web/src/app/dashboard/cards/new/page.tsx b/web/src/app/dashboard/cards/new/page.tsx
index b283c82..f1132f1 100644
--- a/web/src/app/dashboard/cards/new/page.tsx
+++ b/web/src/app/dashboard/cards/new/page.tsx
@@ -26,6 +26,26 @@ interface FormState {
   is_public: boolean;
 }
 
+// ── Shared primitives (token-bound) ───────────────────────────────────────────
+
+const cardClass =
+  "rounded-[var(--radius-card)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] shadow-[var(--shadow-card)]";
+
+const inputClass =
+  "w-full h-10 rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 text-sm text-[color:var(--color-fg-default)] outline-none transition focus:border-[color:var(--color-primary)] focus:ring-2 focus:ring-[color:var(--color-primary-soft)]";
+
+const textareaClass =
+  "w-full rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 py-2 text-sm text-[color:var(--color-fg-default)] outline-none transition focus:border-[color:var(--color-primary)] focus:ring-2 focus:ring-[color:var(--color-primary-soft)] resize-none";
+
+const primaryBtnClass =
+  "inline-flex h-10 items-center rounded-[var(--radius-control)] bg-[color:var(--color-primary)] px-5 text-sm font-medium text-white transition hover:bg-[color:var(--color-primary-hover)] disabled:opacity-60";
+
+const secondaryBtnClass =
+  "inline-flex h-10 items-center rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-5 text-sm font-medium text-[color:var(--color-fg-default)] transition hover:bg-[color:var(--color-surface-2)]";
+
+const microLabelClass =
+  "mb-1 block text-xs font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]";
+
 // ── Defaults per identity type ────────────────────────────────────────────────
 
 function defaultsForMe(me: Me): Partial<FormState> {
@@ -79,27 +99,27 @@ function Field({
   mono?: boolean; textarea?: boolean; optional?: boolean;
 }) {
   const base = cn(
-    "w-full rounded-2xl border px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-slate-300 bg-white transition",
+    textarea ? textareaClass : inputClass,
     mono && "font-mono",
-    error ? "border-rose-300 bg-rose-50/40" : "border-black/10",
+    error && "border-[color:var(--color-danger)] focus:border-[color:var(--color-danger)] focus:ring-[color:var(--color-danger-soft)]",
   );
   return (
     <label className="block">
-      <span className="mb-1 block text-xs font-medium uppercase tracking-[0.16em] text-slate-500">
+      <span className={microLabelClass}>
         {label}
-        {optional && <span className="ml-1 font-normal normal-case tracking-normal text-slate-400">(optional)</span>}
+        {optional && <span className="ml-1 font-normal normal-case tracking-normal text-[color:var(--color-fg-weak)]">(optional)</span>}
       </span>
       {textarea ? (
         <textarea value={value} onChange={(e) => onChange(e.target.value)}
-          placeholder={placeholder} rows={4} className={cn(base, "resize-none")} />
+          placeholder={placeholder} rows={4} className={base} />
       ) : (
         <input type={type} value={value} onChange={(e) => onChange(e.target.value)}
           placeholder={placeholder} className={base} />
       )}
       {error
-        ? <p className="mt-1 text-[11px] text-rose-500">{error}</p>
+        ? <p className="mt-1 text-[11px] text-[color:var(--color-danger)]">{error}</p>
         : hint
-          ? <p className="mt-1 text-[11px] text-slate-400">{hint}</p>
+          ? <p className="mt-1 text-[11px] text-[color:var(--color-fg-weak)]">{hint}</p>
           : null}
     </label>
   );
@@ -115,27 +135,33 @@ function IdentityBadge({ me, slug }: { me: Me; slug: string }) {
 
   return (
     <div className={cn(
-      "rounded-2xl border px-4 py-3 flex items-start gap-3",
+      "rounded-[var(--radius-card)] border px-4 py-3 flex items-start gap-3",
       isSmb
-        ? "border-indigo-100 bg-indigo-50"
-        : "border-violet-100 bg-violet-50",
+        ? "border-[color:var(--color-border-strong)] bg-[color:var(--color-primary-soft)]"
+        : "border-[color:var(--color-border-strong)] bg-[color:var(--color-accent-soft)]",
     )}>
       <div className={cn(
-        "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold",
-        isSmb ? "bg-indigo-600 text-white" : "bg-violet-600 text-white",
+        "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white",
+        isSmb ? "bg-[color:var(--color-primary)]" : "bg-[color:var(--color-accent)]",
       )}>
         {isSmb ? "B" : "P"}
       </div>
       <div className="min-w-0">
+        <p className={cn(
+          "text-[10px] font-semibold uppercase tracking-wide",
+          isSmb ? "text-[color:var(--color-primary-deep)]" : "text-[color:var(--color-accent)]",
+        )}>
+          {isSmb ? "Business" : "Personal"}
+        </p>
         <p className={cn(
           "text-xs font-semibold",
-          isSmb ? "text-indigo-800" : "text-violet-800",
+          isSmb ? "text-[color:var(--color-primary-deep)]" : "text-[color:var(--color-accent)]",
         )}>
-          {isSmb ? `Business · ${me.domain}` : `Personal · @${me.handle}`}
+          {isSmb ? me.domain : `@${me.handle}`}
         </p>
         <p className={cn(
           "mt-0.5 break-all font-mono text-[11px]",
-          isSmb ? "text-indigo-600" : "text-violet-600",
+          isSmb ? "text-[color:var(--color-primary-deep)]/80" : "text-[color:var(--color-accent)]/80",
         )}>
           {url}
         </p>
@@ -156,19 +182,22 @@ function StepIndicator({ current }: { current: Step }) {
           <div className={cn(
             "flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition",
             s === current
-              ? "bg-slate-950 text-white shadow-sm"
+              ? "bg-[color:var(--color-primary)] text-white"
               : s < current
-                ? "bg-emerald-100 text-emerald-700"
-                : "border border-black/10 bg-white text-slate-400",
+                ? "bg-[color:var(--color-accent-soft)] text-[color:var(--color-accent)]"
+                : "border border-[color:var(--color-border)] bg-[color:var(--color-surface)] text-[color:var(--color-fg-weak)]",
           )}>
             {s < current ? "✓" : s}
           </div>
           {i < 3 && (
-            <div className={cn("h-px w-8 transition", s < current ? "bg-emerald-300" : "bg-black/10")} />
+            <div className={cn(
+              "h-px w-8 transition",
+              s < current ? "bg-[color:var(--color-accent)]" : "bg-[color:var(--color-border)]"
+            )} />
           )}
         </div>
       ))}
-      <span className="ml-2 text-xs font-medium text-slate-500">
+      <span className="ml-2 text-xs font-medium text-[color:var(--color-fg-muted)]">
         {STEP_LABELS[(current - 1)]}
       </span>
     </div>
@@ -303,7 +332,7 @@ export default function NewCardPage() {
         {/* Identity badge — always visible */}
         {me && <IdentityBadge me={me} slug={form.slug} />}
 
-        <div className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm">
+        <div className={`${cardClass} p-6`}>
           <StepIndicator current={step} />
 
           {/* ── Step 1: Basic ── */}
@@ -389,50 +418,50 @@ export default function NewCardPage() {
           {step === 3 && (
             <div className="space-y-5">
               <div>
-                <span className="mb-1 block text-xs font-medium uppercase tracking-[0.16em] text-slate-500">
+                <span className={microLabelClass}>
                   Capabilities
                 </span>
-                <div className="space-y-2 rounded-2xl border border-black/10 p-4">
+                <div className="space-y-2 rounded-[var(--radius-control)] border border-[color:var(--color-border)] p-4">
                   <label className="flex cursor-pointer items-center gap-3">
                     <input type="checkbox" checked={form.streaming}
-                      onChange={(e) => set("streaming", e.target.checked)} className="accent-slate-950" />
+                      onChange={(e) => set("streaming", e.target.checked)} className="accent-[color:var(--color-primary)]" />
                     <div>
-                      <span className="text-sm text-slate-700">Streaming</span>
-                      <p className="text-[11px] text-slate-400">Agent streams responses incrementally.</p>
+                      <span className="text-sm text-[color:var(--color-fg-default)]">Streaming</span>
+                      <p className="text-[11px] text-[color:var(--color-fg-weak)]">Agent streams responses incrementally.</p>
                     </div>
                   </label>
                   <label className="flex cursor-pointer items-center gap-3">
                     <input type="checkbox" checked={form.pushNotifications}
-                      onChange={(e) => set("pushNotifications", e.target.checked)} className="accent-slate-950" />
+                      onChange={(e) => set("pushNotifications", e.target.checked)} className="accent-[color:var(--color-primary)]" />
                     <div>
-                      <span className="text-sm text-slate-700">Push notifications</span>
-                      <p className="text-[11px] text-slate-400">Agent can push updates to callers.</p>
+                      <span className="text-sm text-[color:var(--color-fg-default)]">Push notifications</span>
+                      <p className="text-[11px] text-[color:var(--color-fg-weak)]">Agent can push updates to callers.</p>
                     </div>
                   </label>
                   <label className="flex cursor-pointer items-center gap-3">
                     <input type="checkbox" checked={form.is_public}
-                      onChange={(e) => set("is_public", e.target.checked)} className="accent-slate-950" />
+                      onChange={(e) => set("is_public", e.target.checked)} className="accent-[color:var(--color-primary)]" />
                     <div>
-                      <span className="text-sm text-slate-700">Public</span>
-                      <p className="text-[11px] text-slate-400">Accessible at the public URL. Uncheck to keep private.</p>
+                      <span className="text-sm text-[color:var(--color-fg-default)]">Public</span>
+                      <p className="text-[11px] text-[color:var(--color-fg-weak)]">Accessible at the public URL. Uncheck to keep private.</p>
                     </div>
                   </label>
                 </div>
               </div>
 
               <div>
-                <span className="mb-1 block text-xs font-medium uppercase tracking-[0.16em] text-slate-500">
+                <span className={microLabelClass}>
                   Authentication scheme
                 </span>
                 <select value={form.authScheme} onChange={(e) => set("authScheme", e.target.value)}
-                  className="w-full rounded-2xl border border-black/10 bg-white px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-slate-300">
+                  className={inputClass}>
                   <option value="none">None — public access</option>
                   <option value="Bearer">Bearer token</option>
                   <option value="OAuth2">OAuth 2.0</option>
                   <option value="ApiKey">API key</option>
                   {!c.isSmb && <option value="user_consent">User consent required</option>}
                 </select>
-                <p className="mt-1 text-[11px] text-slate-400">{c.authHint}</p>
+                <p className="mt-1 text-[11px] text-[color:var(--color-fg-weak)]">{c.authHint}</p>
               </div>
 
               <Field
@@ -453,18 +482,20 @@ export default function NewCardPage() {
             <div className="space-y-4">
               {/* URL highlight */}
               <div className={cn(
-                "rounded-2xl border p-4",
-                c.isSmb ? "border-indigo-100 bg-indigo-50" : "border-violet-100 bg-violet-50",
+                "rounded-[var(--radius-card)] border p-4",
+                c.isSmb
+                  ? "border-[color:var(--color-border-strong)] bg-[color:var(--color-primary-soft)]"
+                  : "border-[color:var(--color-border-strong)] bg-[color:var(--color-accent-soft)]",
               )}>
                 <p className={cn(
-                  "mb-1 text-[10px] font-semibold uppercase tracking-[0.18em]",
-                  c.isSmb ? "text-indigo-500" : "text-violet-500",
+                  "mb-1 text-[10px] font-semibold uppercase tracking-wide",
+                  c.isSmb ? "text-[color:var(--color-primary-deep)]" : "text-[color:var(--color-accent)]",
                 )}>
                   Public URL
                 </p>
                 <code className={cn(
                   "break-all font-mono text-sm",
-                  c.isSmb ? "text-indigo-800" : "text-violet-800",
+                  c.isSmb ? "text-[color:var(--color-primary-deep)]" : "text-[color:var(--color-accent)]",
                 )}>
                   {getPublicUrl(
                     me.identity_type,
@@ -475,7 +506,7 @@ export default function NewCardPage() {
                 </code>
               </div>
 
-              <dl className="divide-y divide-black/5">
+              <dl className="divide-y divide-[color:var(--color-border)]">
                 {[
                   { label: "Slug",               value: form.slug,                           mono: true  },
                   { label: "Display name",        value: form.display_name,                   mono: false },
@@ -490,16 +521,16 @@ export default function NewCardPage() {
                   { label: "Visibility",          value: form.is_public ? "Public" : "Private", mono: false },
                 ].map(({ label, value, mono }) => (
                   <div key={label} className="flex items-baseline justify-between gap-4 py-2.5">
-                    <dt className="shrink-0 text-xs text-slate-400">{label}</dt>
-                    <dd className={cn("text-right text-sm text-slate-800", mono && "font-mono")}>{value}</dd>
+                    <dt className="shrink-0 text-xs text-[color:var(--color-fg-weak)]">{label}</dt>
+                    <dd className={cn("text-right text-sm text-[color:var(--color-fg-default)]", mono && "font-mono")}>{value}</dd>
                   </div>
                 ))}
               </dl>
 
               {form.skillsJson.trim() && (
-                <div className="rounded-2xl border border-black/5 bg-slate-50 p-3">
-                  <p className="mb-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400">Skills</p>
-                  <pre className="overflow-x-auto font-mono text-xs text-slate-700">{form.skillsJson}</pre>
+                <div className="rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface-2)] p-3">
+                  <p className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]">Skills</p>
+                  <pre className="overflow-x-auto font-mono text-xs text-[color:var(--color-fg-default)]">{form.skillsJson}</pre>
                 </div>
               )}
             </div>
@@ -507,7 +538,7 @@ export default function NewCardPage() {
 
           {/* Error */}
           {error && (
-            <p className="mt-4 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-2.5 text-sm text-rose-700">
+            <p className="mt-4 rounded-[var(--radius-control)] border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] px-4 py-2.5 text-sm text-[color:var(--color-danger)]">
               {error}
             </p>
           )}
@@ -515,8 +546,7 @@ export default function NewCardPage() {
           {/* Navigation */}
           <div className="mt-6 flex items-center justify-between">
             {step > 1 ? (
-              <button onClick={prevStep}
-                className="rounded-2xl border border-black/10 px-5 py-2 text-sm text-slate-600 hover:bg-slate-50">
+              <button onClick={prevStep} className={secondaryBtnClass}>
                 ← Back
               </button>
             ) : (
@@ -524,13 +554,11 @@ export default function NewCardPage() {
             )}
 
             {step < 4 ? (
-              <button onClick={nextStep}
-                className="rounded-2xl bg-slate-950 px-6 py-2 text-sm font-medium text-white hover:bg-slate-800">
+              <button onClick={nextStep} className={primaryBtnClass}>
                 Continue →
               </button>
             ) : (
-              <button onClick={onSubmit} disabled={loading}
-                className="rounded-2xl bg-slate-950 px-6 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-60">
+              <button onClick={onSubmit} disabled={loading} className={primaryBtnClass}>
                 {loading ? "Creating…" : "Create card"}
               </button>
             )}
diff --git a/web/src/app/dashboard/page.tsx b/web/src/app/dashboard/page.tsx
index e3922f1..42863e4 100644
--- a/web/src/app/dashboard/page.tsx
+++ b/web/src/app/dashboard/page.tsx
@@ -9,6 +9,9 @@ import type { Me, AgentCard } from "@/lib/api";
 import { clearAuthToken } from "@/lib/auth";
 import { useRequireAuth } from "@/hooks/useRequireAuth";
 
+const cardClass =
+  "rounded-[var(--radius-card)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] shadow-[var(--shadow-card)]";
+
 export default function DashboardPage() {
   useRequireAuth();
   const router = useRouter();
@@ -59,7 +62,7 @@ export default function DashboardPage() {
   if (loading) {
     return (
       <PageShell title="Dashboard" description="Loading your agent cards…">
-        <div className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm text-sm text-slate-400">
+        <div className={`${cardClass} p-6 text-sm text-[color:var(--color-fg-weak)]`}>
           Loading…
         </div>
       </PageShell>
@@ -69,13 +72,18 @@ export default function DashboardPage() {
   if (error || !me) {
     return (
       <PageShell title="Dashboard" description="">
-        <div className="rounded-3xl border border-rose-200 bg-rose-50 p-4 text-rose-700">
+        <div className="rounded-[var(--radius-card)] border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] p-4 text-[color:var(--color-danger)]">
           {error ?? "Something went wrong."}
         </div>
       </PageShell>
     );
   }
 
+  const isDomain = me.identity_type === "domain";
+  const identityPillClass = isDomain
+    ? "bg-[color:var(--color-primary-soft)] text-[color:var(--color-primary-deep)]"
+    : "bg-[color:var(--color-accent-soft)] text-[color:var(--color-accent)]";
+
   return (
     <PageShell
       title="Dashboard"
@@ -83,22 +91,22 @@ export default function DashboardPage() {
     >
       <div className="space-y-6">
         {/* Profile card */}
-        <div className="flex items-center justify-between rounded-3xl border border-black/10 bg-white p-5 shadow-sm">
+        <div className={`${cardClass} flex items-center justify-between p-5`}>
           <div>
-            <p className="font-semibold text-slate-950">{me.display_name ?? me.email}</p>
-            <p className="text-sm text-slate-500">{me.email}</p>
-            <div className="mt-1 flex items-center gap-2">
-              <span className="rounded-full border border-black/10 bg-slate-50 px-2.5 py-0.5 font-mono text-xs text-slate-500">
+            <p className="font-semibold text-[color:var(--color-fg-strong)]">{me.display_name ?? me.email}</p>
+            <p className="text-sm text-[color:var(--color-fg-muted)]">{me.email}</p>
+            <div className="mt-2 flex flex-wrap items-center gap-2">
+              <span className="rounded-full bg-[color:var(--color-surface-2)] px-2.5 py-0.5 font-mono text-xs text-[color:var(--color-fg-muted)]">
                 @{me.handle}
               </span>
-              <span className="rounded-full border border-black/10 bg-slate-50 px-2.5 py-0.5 font-mono text-xs text-slate-500">
-                {me.identity_type === "domain" ? `domain: ${me.domain}` : "personal"}
+              <span className={`rounded-full px-2.5 py-0.5 text-xs font-medium uppercase tracking-wide ${identityPillClass}`}>
+                {isDomain ? `Business · ${me.domain}` : "Personal"}
               </span>
             </div>
           </div>
           <button
             onClick={signOut}
-            className="rounded-2xl border border-black/10 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
+            className="inline-flex h-9 items-center rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-4 text-sm font-medium text-[color:var(--color-fg-default)] hover:bg-[color:var(--color-surface-2)]"
           >
             Sign out
           </button>
@@ -107,26 +115,28 @@ export default function DashboardPage() {
         {/* Agent cards */}
         <div>
           <div className="mb-3 flex items-center justify-between">
-            <h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-slate-500">
+            <h2 className="text-xs font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]">
               Agent Cards
             </h2>
             <Link
               href="/dashboard/cards/new"
-              className="rounded-full border border-black/10 bg-white px-4 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50"
+              className="inline-flex h-9 items-center rounded-[var(--radius-control)] bg-[color:var(--color-primary)] px-4 text-sm font-medium text-white transition hover:bg-[color:var(--color-primary-hover)]"
             >
               + New card
             </Link>
           </div>
 
           {cards.length === 0 ? (
-            <div className="rounded-3xl border border-black/10 bg-white p-8 shadow-sm text-center">
-              <p className="text-sm text-slate-400">
-                You have no agent cards yet.{" "}
-                <Link href="/dashboard/cards/new" className="text-slate-700 underline hover:text-slate-950">
-                  Create your first card
-                </Link>
-                .
+            <div className={`${cardClass} p-8 text-center`}>
+              <p className="text-sm text-[color:var(--color-fg-muted)]">
+                You have no agent cards yet.
               </p>
+              <Link
+                href="/dashboard/cards/new"
+                className="mt-4 inline-flex h-10 items-center rounded-[var(--radius-control)] bg-[color:var(--color-primary)] px-5 text-sm font-medium text-white transition hover:bg-[color:var(--color-primary-hover)]"
+              >
+                Create your first card
+              </Link>
             </div>
           ) : (
             <div className="space-y-3">
@@ -138,41 +148,42 @@ export default function DashboardPage() {
                   me.handle
                 );
 
+                const statusClass =
+                  card.status === "active"
+                    ? "bg-[color:var(--color-accent-soft)] text-[color:var(--color-accent)]"
+                    : "bg-[color:var(--color-surface-2)] text-[color:var(--color-fg-weak)]";
+
                 return (
                   <div
                     key={card.id}
-                    className="rounded-3xl border border-black/10 bg-white p-5 shadow-sm"
+                    className={`${cardClass} p-5 transition hover:border-[color:var(--color-border-strong)] hover:shadow-[var(--shadow-card-hover)]`}
                   >
                     <div className="flex items-start justify-between gap-4">
                       <div className="min-w-0 flex-1">
-                        <div className="flex items-center gap-2">
-                          <p className="font-medium text-slate-950">{card.display_name}</p>
-                          <span className={`rounded-full px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.18em] ${
-                            card.status === "active"
-                              ? "border border-emerald-200 bg-emerald-50 text-emerald-600"
-                              : "border border-slate-200 bg-slate-50 text-slate-500"
-                          }`}>
+                        <div className="flex flex-wrap items-center gap-2">
+                          <p className="font-medium text-[color:var(--color-fg-strong)]">{card.display_name}</p>
+                          <span className={`rounded-full px-2.5 py-0.5 text-[10px] font-medium uppercase tracking-wide ${statusClass}`}>
                             {card.status}
                           </span>
                           {!card.is_public && (
-                            <span className="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.18em] text-amber-600">
+                            <span className="rounded-full bg-[color:var(--color-warning-soft)] px-2.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-[color:var(--color-warning)]">
                               Private
                             </span>
                           )}
                         </div>
-                        <p className="font-mono text-xs text-slate-400">/{card.slug}</p>
+                        <p className="mt-1 font-mono text-xs text-[color:var(--color-fg-weak)]">/{card.slug}</p>
                         {card.description && (
-                          <p className="mt-1 text-sm text-slate-500 line-clamp-1">{card.description}</p>
+                          <p className="mt-1 text-sm text-[color:var(--color-fg-muted)] line-clamp-1">{card.description}</p>
                         )}
 
                         {/* Public URL */}
                         <div className="mt-3 flex items-center gap-2">
-                          <code className="min-w-0 flex-1 truncate rounded-lg border border-black/5 bg-slate-50 px-3 py-1.5 font-mono text-xs text-slate-600">
+                          <code className="min-w-0 flex-1 truncate rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface-2)] px-3 py-1.5 font-mono text-xs text-[color:var(--color-fg-muted)]">
                             {publicUrl}
                           </code>
                           <button
                             onClick={() => copyUrl(publicUrl, card.id)}
-                            className="shrink-0 rounded-lg border border-black/10 bg-white px-3 py-1.5 text-xs text-slate-600 hover:bg-slate-50"
+                            className="shrink-0 rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 py-1.5 text-xs text-[color:var(--color-fg-default)] hover:bg-[color:var(--color-surface-2)]"
                           >
                             {copiedId === card.id ? "Copied!" : "Copy"}
                           </button>
@@ -181,7 +192,7 @@ export default function DashboardPage() {
 
                       <Link
                         href={`/dashboard/cards/${card.id}`}
-                        className="shrink-0 rounded-xl border border-black/10 px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-50"
+                        className="shrink-0 rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 py-1.5 text-sm text-[color:var(--color-fg-default)] hover:bg-[color:var(--color-surface-2)]"
                       >
                         Edit
                       </Link>
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index e67147c..a9200f4 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -1,28 +1,146 @@
 @import "tailwindcss";
 
+@theme inline {
+  --color-bg: var(--color-bg);
+  --color-bg-light: var(--color-bg-light);
+  --color-surface: var(--color-surface);
+  --color-surface-2: var(--color-surface-2);
+  --color-surface-tag: var(--color-surface-tag);
+
+  --color-fg: var(--color-fg);
+  --color-fg-strong: var(--color-fg-strong);
+  --color-fg-default: var(--color-fg-default);
+  --color-fg-muted: var(--color-fg-muted);
+  --color-fg-weak: var(--color-fg-weak);
+
+  --color-border: var(--color-border);
+  --color-border-strong: var(--color-border-strong);
+
+  --color-primary: var(--color-primary);
+  --color-primary-hover: var(--color-primary-hover);
+  --color-primary-active: var(--color-primary-active);
+  --color-primary-deep: var(--color-primary-deep);
+  --color-primary-soft: var(--color-primary-soft);
+  --color-primary-soft-strong: var(--color-primary-soft-strong);
+
+  --color-accent: var(--color-accent);
+  --color-accent-soft: var(--color-accent-soft);
+  --color-success: var(--color-success);
+  --color-success-soft: var(--color-success-soft);
+  --color-warning: var(--color-warning);
+  --color-warning-soft: var(--color-warning-soft);
+  --color-danger: var(--color-danger);
+  --color-danger-soft: var(--color-danger-soft);
+  --color-star-gold: var(--color-star-gold);
+
+  --color-code-bg: var(--color-code-bg);
+  --color-code-fg: var(--color-code-fg);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-display: var(--font-display);
+
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-full: var(--radius-full);
+  --radius-control: var(--radius-control);
+  --radius-card: var(--radius-card);
+
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-modal: var(--shadow-modal);
+  --shadow-card: var(--shadow-card);
+  --shadow-card-hover: var(--shadow-card-hover);
+}
+
 :root {
-  --page-bg: #fbf8f2;
-  --panel: rgba(255, 255, 255, 0.72);
-  --border: rgba(15, 23, 42, 0.12);
-  --text: #0f172a;
-  --muted: #475569;
-  --soft: #e2dccf;
+  /* Surfaces */
+  --color-bg: #f5f8fd;
+  --color-bg-light: #fbfcfe;
+  --color-surface: #ffffff;
+  --color-surface-2: #eff3fc;
+  --color-surface-tag: #e3eafa;
+
+  /* Foreground */
+  --color-fg: #00142b;
+  --color-fg-strong: #00142b;
+  --color-fg-default: #3c4551;
+  --color-fg-muted: #59616b;
+  --color-fg-weak: #777d85;
+
+  /* Borders */
+  --color-border: #d5dff7;
+  --color-border-strong: #c8d5f5;
+
+  /* Brand / primary (Cisco-blue inspired) */
+  --color-primary: #187adc;
+  --color-primary-hover: #0051af;
+  --color-primary-active: #004ba8;
+  --color-primary-deep: #0d274d;
+  --color-primary-soft: #e8f1ff;
+  --color-primary-soft-strong: #d5dff7;
+
+  /* Semantic accents */
+  --color-accent: #0f6e85;
+  --color-accent-soft: #dff1f5;
+  --color-success: #0f6e85;
+  --color-success-soft: #dff1f5;
+  --color-warning: #8a5a06;
+  --color-warning-soft: #fdeccc;
+  --color-danger: #b42318;
+  --color-danger-soft: #fef3f2;
+  --color-star-gold: #fbbf24;
+
+  /* Code surface */
+  --color-code-bg: #0d274d;
+  --color-code-fg: #fbfcfe;
+
+  /* Typography */
+  --font-sans: var(--font-sans-inter, 'Inter'), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --font-display: var(--font-sans-inter, 'Inter'), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+
+  /* Radii */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-full: 9999px;
+  --radius-control: 4px;
+  --radius-card: 8px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(13, 39, 77, 0.04);
+  --shadow-md: 0 4px 4px 0 rgba(200, 213, 245, 0.33);
+  --shadow-lg: 0 6px 16px 0 rgba(200, 213, 245, 0.55);
+  --shadow-modal: 0 25px 50px -12px rgba(0, 20, 43, 0.25);
+  --shadow-card: 0 4px 4px 0 rgba(200, 213, 245, 0.33);
+  --shadow-card-hover: 0 6px 16px 0 rgba(200, 213, 245, 0.55);
+
+  /* Legacy aliases — keep existing bg-[color:var(--page-bg)] utilities working */
+  --page-bg: var(--color-bg);
+  --panel: var(--color-surface);
+  --border: var(--color-border);
+  --text: var(--color-fg-strong);
+  --muted: var(--color-fg-muted);
+  --soft: var(--color-surface-2);
 }
 
 html {
   scroll-behavior: smooth;
-  background: var(--page-bg);
+  background: var(--color-bg);
 }
 
 body {
   margin: 0;
   min-height: 100vh;
-  background:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.8), transparent 35%),
-    radial-gradient(circle at top right, rgba(226, 220, 207, 0.35), transparent 28%),
-    var(--page-bg);
-  color: var(--text);
-  font-family: Georgia, "Times New Roman", Times, serif;
+  background: var(--color-bg);
+  color: var(--color-fg-default);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
 
@@ -31,6 +149,6 @@ body {
 }
 
 ::selection {
-  background: #0f172a;
-  color: #ffffff;
+  background: var(--color-primary-soft);
+  color: var(--color-primary-deep);
 }
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 5710523..858a8fa 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -1,8 +1,16 @@
 import type { Metadata } from "next";
+import { Inter } from "next/font/google";
 import "./globals.css";
 import { Header } from "@/components/Header";
 import { Footer } from "@/components/Footer";
 
+const inter = Inter({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-sans-inter",
+  display: "swap",
+});
+
 export const metadata: Metadata = {
   title: "host39 — A2A Agent Card Hosting",
   description:
@@ -22,8 +30,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className="min-h-screen bg-[color:var(--page-bg)] text-slate-900 antialiased">
+    <html lang="en" className={inter.variable}>
+      <body className="min-h-screen bg-[color:var(--color-bg)] text-[color:var(--color-fg-default)] antialiased">
         <div id="top" className="min-h-screen flex flex-col">
           <Header />
           <main className="flex-1">{children}</main>
diff --git a/web/src/app/login/page.tsx b/web/src/app/login/page.tsx
index 5ce2e88..06f5495 100644
--- a/web/src/app/login/page.tsx
+++ b/web/src/app/login/page.tsx
@@ -9,6 +9,9 @@ import { setAuthToken, getAuthToken, isTokenExpired } from "@/lib/auth";
 type Mode = "login" | "register";
 type IdentityType = "email" | "domain";
 
+const inputClass =
+  "w-full h-10 rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 text-sm text-[color:var(--color-fg-default)] outline-none transition focus:border-[color:var(--color-primary)] focus:ring-2 focus:ring-[color:var(--color-primary-soft)]";
+
 function LoginPageInner() {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -70,21 +73,23 @@ function LoginPageInner() {
       title={mode === "login" ? "Sign in" : "Create account"}
       description="Manage your A2A agent cards on host39."
     >
-      <div className="mx-auto max-w-sm space-y-5">
+      <div className="mx-auto max-w-md space-y-5">
         {reason === "session_expired" && (
-          <p className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-2.5 text-sm text-amber-700">
+          <p className="rounded-[var(--radius-control)] border border-[color:var(--color-warning-soft)] bg-[color:var(--color-warning-soft)] px-4 py-2.5 text-sm text-[color:var(--color-warning)]">
             Your session expired. Please sign in again.
           </p>
         )}
 
-        <div className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm">
+        <div className="rounded-[var(--radius-card)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] p-8 shadow-[var(--shadow-card)]">
           {/* Mode toggle */}
-          <div className="mb-5 flex rounded-xl border border-black/10 p-1 text-sm">
+          <div className="mb-5 flex rounded-[var(--radius-control)] border border-[color:var(--color-border)] p-1 text-sm">
             <button
               type="button"
               onClick={() => { setMode("login"); setError(null); }}
-              className={`flex-1 rounded-lg py-1.5 font-medium transition ${
-                mode === "login" ? "bg-slate-950 text-white" : "text-slate-500 hover:text-slate-700"
+              className={`flex-1 rounded-[var(--radius-control)] py-1.5 font-medium transition ${
+                mode === "login"
+                  ? "bg-[color:var(--color-primary)] text-white"
+                  : "text-[color:var(--color-fg-muted)] hover:text-[color:var(--color-fg-default)]"
               }`}
             >
               Sign in
@@ -92,8 +97,10 @@ function LoginPageInner() {
             <button
               type="button"
               onClick={() => { setMode("register"); setError(null); }}
-              className={`flex-1 rounded-lg py-1.5 font-medium transition ${
-                mode === "register" ? "bg-slate-950 text-white" : "text-slate-500 hover:text-slate-700"
+              className={`flex-1 rounded-[var(--radius-control)] py-1.5 font-medium transition ${
+                mode === "register"
+                  ? "bg-[color:var(--color-primary)] text-white"
+                  : "text-[color:var(--color-fg-muted)] hover:text-[color:var(--color-fg-default)]"
               }`}
             >
               Create account
@@ -108,7 +115,7 @@ function LoginPageInner() {
                   placeholder="Display name (optional)"
                   value={displayName}
                   onChange={(e) => setDisplayName(e.target.value)}
-                  className="w-full rounded-xl border border-black/10 px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-slate-300"
+                  className={inputClass}
                 />
                 <div>
                   <input
@@ -120,42 +127,54 @@ function LoginPageInner() {
                     minLength={2}
                     maxLength={32}
                     pattern="^[a-z0-9][a-z0-9-]{1,31}$"
-                    className="w-full rounded-xl border border-black/10 px-4 py-2.5 font-mono text-sm outline-none focus:ring-2 focus:ring-slate-300"
+                    className={`${inputClass} font-mono`}
                   />
                   {handle && (
-                    <p className="mt-1 text-xs text-slate-400">
-                      Your cards will be at /personal/<span className="font-medium text-slate-600">{handle}</span>/slug.json
+                    <p className="mt-1 font-mono text-xs text-[color:var(--color-fg-muted)]">
+                      Your cards will be at /personal/<span className="font-medium text-[color:var(--color-fg-default)]">{handle}</span>/slug.json
                     </p>
                   )}
                 </div>
 
                 {/* Identity type */}
-                <div className="rounded-xl border border-black/10 p-3">
-                  <p className="mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">
+                <div className="rounded-[var(--radius-control)] border border-[color:var(--color-border)] p-3">
+                  <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]">
                     Identity type
                   </p>
-                  <div className="flex gap-4">
-                    <label className="flex items-center gap-2 cursor-pointer">
+                  <div className="flex flex-col gap-2 sm:flex-row sm:gap-3">
+                    <label
+                      className={`flex flex-1 cursor-pointer items-center gap-2 rounded-[var(--radius-control)] border px-3 py-2 transition ${
+                        identityType === "email"
+                          ? "border-[color:var(--color-accent)] bg-[color:var(--color-accent-soft)]"
+                          : "border-[color:var(--color-border)] bg-[color:var(--color-surface)] hover:bg-[color:var(--color-surface-2)]"
+                      }`}
+                    >
                       <input
                         type="radio"
                         name="identity_type"
                         value="email"
                         checked={identityType === "email"}
                         onChange={() => setIdentityType("email")}
-                        className="accent-slate-950"
+                        className="accent-[color:var(--color-accent)]"
                       />
-                      <span className="text-sm text-slate-700">Personal (email)</span>
+                      <span className="text-sm text-[color:var(--color-fg-default)]">Personal (email)</span>
                     </label>
-                    <label className="flex items-center gap-2 cursor-pointer">
+                    <label
+                      className={`flex flex-1 cursor-pointer items-center gap-2 rounded-[var(--radius-control)] border px-3 py-2 transition ${
+                        identityType === "domain"
+                          ? "border-[color:var(--color-primary)] bg-[color:var(--color-primary-soft)]"
+                          : "border-[color:var(--color-border)] bg-[color:var(--color-surface)] hover:bg-[color:var(--color-surface-2)]"
+                      }`}
+                    >
                       <input
                         type="radio"
                         name="identity_type"
                         value="domain"
                         checked={identityType === "domain"}
                         onChange={() => setIdentityType("domain")}
-                        className="accent-slate-950"
+                        className="accent-[color:var(--color-primary)]"
                       />
-                      <span className="text-sm text-slate-700">Business (domain)</span>
+                      <span className="text-sm text-[color:var(--color-fg-default)]">Business (domain)</span>
                     </label>
                   </div>
 
@@ -168,16 +187,16 @@ function LoginPageInner() {
                         onChange={(e) => setDomain(e.target.value)}
                         required={identityType === "domain"}
                         pattern="^[a-zA-Z0-9][a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
-                        className="w-full rounded-xl border border-black/10 px-4 py-2.5 font-mono text-sm outline-none focus:ring-2 focus:ring-slate-300"
+                        className={`${inputClass} font-mono`}
                       />
-                      <p className="mt-1.5 text-xs text-slate-400">
+                      <p className="mt-1.5 font-mono text-xs text-[color:var(--color-fg-muted)]">
                         Your cards will be at /{domain || "yourdomain.com"}/slug.json
                       </p>
                     </div>
                   )}
 
                   {identityType === "email" && (
-                    <p className="mt-2 text-xs text-slate-400">
+                    <p className="mt-2 font-mono text-xs text-[color:var(--color-fg-muted)]">
                       Your cards will be at /personal/{handle || "username"}/slug.json
                     </p>
                   )}
@@ -191,7 +210,7 @@ function LoginPageInner() {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
-              className="w-full rounded-xl border border-black/10 px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-slate-300"
+              className={inputClass}
             />
             <input
               type="password"
@@ -200,11 +219,11 @@ function LoginPageInner() {
               onChange={(e) => setPassword(e.target.value)}
               required
               minLength={8}
-              className="w-full rounded-xl border border-black/10 px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-slate-300"
+              className={inputClass}
             />
 
             {error && (
-              <p className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-2.5 text-sm text-rose-700">
+              <p className="rounded-[var(--radius-control)] border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] px-4 py-2.5 text-sm text-[color:var(--color-danger)]">
                 {error}
               </p>
             )}
@@ -212,7 +231,7 @@ function LoginPageInner() {
             <button
               type="submit"
               disabled={loading}
-              className="w-full rounded-xl bg-slate-950 py-2.5 text-sm font-medium text-white disabled:opacity-60"
+              className="inline-flex h-10 w-full items-center justify-center rounded-[var(--radius-control)] bg-[color:var(--color-primary)] px-4 text-sm font-medium text-white transition hover:bg-[color:var(--color-primary-hover)] disabled:opacity-60"
             >
               {loading ? "…" : mode === "register" ? "Create account" : "Sign in"}
             </button>
@@ -227,7 +246,7 @@ export default function LoginPage() {
   return (
     <Suspense fallback={
       <div className="flex min-h-screen items-center justify-center">
-        <p className="text-sm text-slate-400">Loading…</p>
+        <p className="text-sm text-[color:var(--color-fg-weak)]">Loading…</p>
       </div>
     }>
       <LoginPageInner />
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index fa05264..d7bb562 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -25,28 +25,28 @@ export default function HomePage() {
       {/* Hero */}
       <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
         <div className="max-w-3xl">
-          <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-black/10 bg-white px-4 py-1.5 text-xs uppercase tracking-[0.22em] text-slate-500 shadow-sm">
+          <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 py-1 text-xs font-medium uppercase tracking-wide text-[color:var(--color-fg-weak)]">
             Agent Card Hosting
           </div>
-          <h1 className="font-serif text-5xl italic leading-tight tracking-tight text-slate-950 sm:text-6xl">
+          <h1 className="text-4xl font-semibold leading-tight tracking-[-0.01em] text-[color:var(--color-fg-strong)] sm:text-5xl">
             host your agents
             <br />
-            <span className="text-slate-400">at predictable URLs</span>
+            <span className="text-[color:var(--color-fg-weak)]">at predictable URLs</span>
           </h1>
-          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-slate-600">
+          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-[color:var(--color-fg-muted)]">
             host39 is a third-party A2A agent card host. Register your identity, create agent cards,
             and publish them at stable public URLs — no server required.
           </p>
-          <div className="mt-8 flex flex-wrap gap-4">
+          <div className="mt-8 flex flex-wrap gap-3">
             <Link
               href="/login"
-              className="rounded-2xl bg-slate-950 px-6 py-3 text-sm font-medium text-white shadow-sm transition hover:bg-slate-800"
+              className="inline-flex h-10 items-center rounded-[var(--radius-control)] bg-[color:var(--color-primary)] px-5 text-sm font-medium text-white shadow-[var(--shadow-sm)] transition hover:bg-[color:var(--color-primary-hover)]"
             >
               Get started free
             </Link>
             <Link
               href="/dashboard"
-              className="rounded-2xl border border-black/10 bg-white px-6 py-3 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50"
+              className="inline-flex h-10 items-center rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-5 text-sm font-medium text-[color:var(--color-fg-default)] transition hover:bg-[color:var(--color-surface-2)] hover:border-[color:var(--color-border-strong)]"
             >
               Go to dashboard
             </Link>
@@ -56,12 +56,12 @@ export default function HomePage() {
 
       {/* How it works */}
       <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-        <h2 className="mb-2 text-xs font-semibold uppercase tracking-[0.22em] text-slate-400">
+        <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]">
           How it works
-        </h2>
-        <p className="mb-8 font-serif text-3xl italic text-slate-950">
-          Three steps to publish your agent
         </p>
+        <h2 className="mb-8 text-2xl font-semibold tracking-[-0.01em] text-[color:var(--color-fg-strong)] sm:text-3xl">
+          Three steps to publish your agent
+        </h2>
 
         <div className="grid gap-6 sm:grid-cols-3">
           {[
@@ -83,11 +83,13 @@ export default function HomePage() {
           ].map((item) => (
             <div
               key={item.step}
-              className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm"
+              className="rounded-[var(--radius-card)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] p-6 shadow-[var(--shadow-card)] transition hover:shadow-[var(--shadow-card-hover)] hover:border-[color:var(--color-border-strong)]"
             >
-              <span className="font-mono text-xs text-slate-400">{item.step}</span>
-              <h3 className="mt-2 text-xl font-semibold text-slate-950">{item.title}</h3>
-              <p className="mt-2 text-sm leading-6 text-slate-600">{item.desc}</p>
+              <span className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-[color:var(--color-primary-soft)] text-xs font-semibold text-[color:var(--color-primary-deep)]">
+                {item.step}
+              </span>
+              <h3 className="mt-3 text-lg font-semibold text-[color:var(--color-fg-strong)]">{item.title}</h3>
+              <p className="mt-2 text-sm leading-relaxed text-[color:var(--color-fg-muted)]">{item.desc}</p>
             </div>
           ))}
         </div>
@@ -95,29 +97,29 @@ export default function HomePage() {
 
       {/* URL patterns */}
       <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-        <h2 className="mb-2 text-xs font-semibold uppercase tracking-[0.22em] text-slate-400">
+        <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]">
           URL patterns
-        </h2>
-        <p className="mb-8 font-serif text-3xl italic text-slate-950">
-          Predictable, stable, public
         </p>
+        <h2 className="mb-8 text-2xl font-semibold tracking-[-0.01em] text-[color:var(--color-fg-strong)] sm:text-3xl">
+          Predictable, stable, public
+        </h2>
 
         <div className="grid gap-6 sm:grid-cols-2">
-          <div className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm">
-            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Business / Domain</p>
-            <code className="mt-3 block rounded-xl border border-black/5 bg-slate-50 p-4 font-mono text-sm text-slate-800">
+          <div className="rounded-[var(--radius-card)] border border-[color:var(--color-border-strong)] bg-[color:var(--color-primary-soft)] p-6 shadow-[var(--shadow-card)]">
+            <p className="text-xs font-semibold uppercase tracking-wide text-[color:var(--color-primary-deep)]">Business / Domain</p>
+            <code className="mt-3 block rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] p-4 font-mono text-sm text-[color:var(--color-primary-deep)]">
               /moonbakery.com/orders.json
             </code>
-            <p className="mt-3 text-sm text-slate-600">
+            <p className="mt-3 text-sm leading-relaxed text-[color:var(--color-fg-muted)]">
               Register with a domain identity to get clean, branded URLs for your business agents.
             </p>
           </div>
-          <div className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm">
-            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Personal / Email</p>
-            <code className="mt-3 block rounded-xl border border-black/5 bg-slate-50 p-4 font-mono text-sm text-slate-800">
+          <div className="rounded-[var(--radius-card)] border border-[color:var(--color-border-strong)] bg-[color:var(--color-accent-soft)] p-6 shadow-[var(--shadow-card)]">
+            <p className="text-xs font-semibold uppercase tracking-wide text-[color:var(--color-accent)]">Personal / Email</p>
+            <code className="mt-3 block rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] p-4 font-mono text-sm text-[color:var(--color-accent)]">
               /personal/john@hotmail.com/card.json
             </code>
-            <p className="mt-3 text-sm text-slate-600">
+            <p className="mt-3 text-sm leading-relaxed text-[color:var(--color-fg-muted)]">
               Register with your email for personal agent cards — great for developers and individuals.
             </p>
           </div>
@@ -126,15 +128,15 @@ export default function HomePage() {
 
       {/* Sample agent card */}
       <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-        <h2 className="mb-2 text-xs font-semibold uppercase tracking-[0.22em] text-slate-400">
+        <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]">
           A2A Agent Card format
-        </h2>
-        <p className="mb-8 font-serif text-3xl italic text-slate-950">
-          Standard JSON, served instantly
         </p>
+        <h2 className="mb-8 text-2xl font-semibold tracking-[-0.01em] text-[color:var(--color-fg-strong)] sm:text-3xl">
+          Standard JSON, served instantly
+        </h2>
 
-        <div className="overflow-x-auto rounded-3xl border border-black/10 bg-slate-950 p-6 shadow-sm">
-          <pre className="font-mono text-sm leading-6 text-slate-200">
+        <div className="overflow-x-auto rounded-[var(--radius-card)] border border-[color:var(--color-border)] bg-[color:var(--color-code-bg)] p-6 shadow-[var(--shadow-card)]">
+          <pre className="font-mono text-sm leading-6 text-[color:var(--color-code-fg)]">
             {JSON.stringify(SAMPLE_CARD, null, 2)}
           </pre>
         </div>
diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
index 29e4fa6..279bc98 100644
--- a/web/src/components/Footer.tsx
+++ b/web/src/components/Footer.tsx
@@ -1,7 +1,7 @@
 export function Footer() {
   return (
-    <footer className="border-t border-black/5 bg-white">
-      <div className="mx-auto flex max-w-7xl flex-col gap-2 px-4 py-6 text-sm text-slate-500 sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:px-8">
+    <footer className="border-t border-[color:var(--color-border)] bg-[color:var(--color-surface)]">
+      <div className="mx-auto flex max-w-7xl flex-col gap-2 px-4 py-6 text-xs text-[color:var(--color-fg-weak)] sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:px-8">
         <p>host39 — A2A Agent Card Hosting Service</p>
         <p>Predictable public URLs for AI agent discovery.</p>
       </div>
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 0501794..016cc69 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -36,24 +36,32 @@ export function Header() {
     { href: "/dashboard", label: "Dashboard" },
   ];
 
+  const initial = email ? email.charAt(0).toUpperCase() : "?";
+
   return (
-    <header className="sticky top-0 z-50 border-b border-black/5 bg-[color:var(--page-bg)]/90 backdrop-blur-xl">
-      <div className="mx-auto flex max-w-7xl items-center gap-4 px-4 py-4 sm:px-6 lg:px-8">
+    <header className="sticky top-0 z-50 border-b border-[color:var(--color-border)] bg-[color:var(--color-surface)]/90 backdrop-blur-md">
+      <div className="mx-auto flex h-16 max-w-7xl items-center gap-3 px-4 sm:px-6 lg:px-8">
         <Link href="/" className="flex min-w-0 items-center gap-3">
-          <span className="inline-flex h-10 shrink-0 items-center justify-center whitespace-nowrap rounded-sm border border-black/10 bg-white px-3 text-sm font-semibold tracking-[0.28em] text-slate-900 shadow-sm">
+          <span className="inline-flex h-8 w-10 shrink-0 items-center justify-center rounded-[var(--radius-card)] bg-[color:var(--color-primary-deep)] text-[11px] font-semibold tracking-wide text-white">
             H39
           </span>
-          <span className="hidden truncate font-serif text-lg italic tracking-tight text-slate-950 sm:block">
-            host39
+          <span className="mx-1 hidden h-6 border-l border-[color:var(--color-border)] sm:block" />
+          <span className="hidden min-w-0 flex-col sm:flex">
+            <span className="truncate text-base font-semibold text-[color:var(--color-fg-strong)] leading-tight">
+              host39
+            </span>
+            <span className="truncate text-xs text-[color:var(--color-fg-weak)] leading-tight">
+              A2A agent card hosting
+            </span>
           </span>
         </Link>
 
-        <nav className="ml-auto hidden items-center gap-7 text-[0.72rem] uppercase tracking-[0.22em] text-slate-600 lg:flex">
+        <nav className="ml-auto hidden items-center gap-6 lg:flex">
           {navLinks.map((item) => (
             <Link
               key={item.href}
               href={item.href}
-              className="transition-colors hover:text-slate-950"
+              className="text-sm font-medium text-[color:var(--color-fg-default)] transition-colors hover:text-[color:var(--color-primary)]"
             >
               {item.label}
             </Link>
@@ -63,15 +71,18 @@ export function Header() {
         <div className="hidden lg:block">
           {email ? (
             <div className="flex items-center gap-3">
+              <span className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-[color:var(--color-primary-soft)] text-xs font-semibold text-[color:var(--color-primary-deep)]">
+                {initial}
+              </span>
               <Link
                 href="/dashboard"
-                className="text-[0.72rem] uppercase tracking-[0.22em] text-slate-600 transition-colors hover:text-slate-950"
+                className="max-w-[180px] truncate text-sm text-[color:var(--color-fg-default)] transition-colors hover:text-[color:var(--color-primary)]"
               >
                 {email}
               </Link>
               <button
                 onClick={signOut}
-                className="rounded-full border border-black/10 bg-white px-3 py-1 text-[0.72rem] uppercase tracking-[0.22em] text-slate-500 hover:bg-slate-50"
+                className="text-xs text-[color:var(--color-fg-weak)] transition-colors hover:text-[color:var(--color-fg-default)]"
               >
                 Sign out
               </button>
@@ -79,7 +90,7 @@ export function Header() {
           ) : (
             <Link
               href="/login"
-              className="rounded-full border border-black/10 bg-white px-4 py-2 text-[0.72rem] font-medium uppercase tracking-[0.22em] text-slate-700 shadow-sm transition hover:bg-slate-50"
+              className="inline-flex h-9 items-center rounded-[var(--radius-control)] bg-[color:var(--color-primary)] px-4 text-sm font-medium text-white transition hover:bg-[color:var(--color-primary-hover)]"
             >
               Sign in
             </Link>
@@ -87,16 +98,16 @@ export function Header() {
         </div>
 
         <details ref={detailsRef} className="relative ml-auto lg:hidden">
-          <summary className="cursor-pointer list-none border border-black/10 bg-white px-4 py-2 text-xs uppercase tracking-[0.2em] text-slate-700 shadow-sm">
+          <summary className="cursor-pointer list-none rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 py-1.5 text-xs font-medium text-[color:var(--color-fg-default)]">
             Menu
           </summary>
-          <div className="absolute right-0 mt-2 w-56 rounded-2xl border border-black/10 bg-white p-2 shadow-lg">
+          <div className="absolute right-0 mt-2 w-56 rounded-[var(--radius-card)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] p-2 shadow-[var(--shadow-card)]">
             {navLinks.map((item) => (
               <Link
                 key={item.href}
                 href={item.href}
                 onClick={closeMobileMenu}
-                className="block rounded-xl px-3 py-2 text-sm text-slate-700 transition-colors hover:bg-slate-50 hover:text-slate-950"
+                className="block rounded-[var(--radius-control)] px-3 py-2 text-sm text-[color:var(--color-fg-default)] transition-colors hover:bg-[color:var(--color-surface-2)] hover:text-[color:var(--color-primary)]"
               >
                 {item.label}
               </Link>
@@ -104,7 +115,7 @@ export function Header() {
             {email ? (
               <button
                 onClick={() => { closeMobileMenu(); signOut(); }}
-                className="block w-full rounded-xl px-3 py-2 text-left text-sm text-slate-500 hover:bg-slate-50"
+                className="block w-full rounded-[var(--radius-control)] px-3 py-2 text-left text-sm text-[color:var(--color-fg-weak)] hover:bg-[color:var(--color-surface-2)]"
               >
                 Sign out ({email})
               </button>
@@ -112,7 +123,7 @@ export function Header() {
               <Link
                 href="/login"
                 onClick={closeMobileMenu}
-                className="block rounded-xl px-3 py-2 text-sm text-slate-700 hover:bg-slate-50"
+                className="block rounded-[var(--radius-control)] px-3 py-2 text-sm text-[color:var(--color-fg-default)] hover:bg-[color:var(--color-surface-2)]"
               >
                 Sign in
               </Link>
diff --git a/web/src/components/PageShell.tsx b/web/src/components/PageShell.tsx
index f1a0631..b6e1334 100644
--- a/web/src/components/PageShell.tsx
+++ b/web/src/components/PageShell.tsx
@@ -3,18 +3,24 @@ import type { ReactNode } from "react";
 type Props = {
   title: string;
   description: string;
+  eyebrow?: string;
   children: ReactNode;
 };
 
-export function PageShell({ title, description, children }: Props) {
+export function PageShell({ title, description, eyebrow, children }: Props) {
   return (
     <section className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
       <div className="mb-8">
-        <h1 className="font-serif text-4xl italic tracking-tight text-slate-950">
+        {eyebrow && (
+          <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]">
+            {eyebrow}
+          </p>
+        )}
+        <h1 className="text-3xl font-semibold text-[color:var(--color-fg-strong)] leading-tight tracking-[-0.01em]">
           {title}
         </h1>
         {description && (
-          <p className="mt-3 max-w-3xl text-sm leading-6 text-slate-600">
+          <p className="mt-3 max-w-3xl text-sm leading-relaxed text-[color:var(--color-fg-muted)]">
             {description}
           </p>
         )}

From 9997043d46eabb60598d631ddf47f72a9c8578ab Mon Sep 17 00:00:00 2001
From: Vedh Krishnan <admin@Vedhs-MacBook-Pro-2.local>
Date: Sat, 20 Jun 2026 18:59:57 -0500
Subject: [PATCH 2/4] refactor(design): adopt outshift's exact token names and
 utility classes

Pixel-faithful pass: replaces my custom --color-bg/--color-fg-*/
--color-border/--color-primary* with outshift's actual names from
their CSS bundle (--color-surface/--color-ink-{strong,medium,weak}/
--color-line/--color-brand-{200,300,500,600,700,800}/
--color-accent-teal/--color-surface-tag). Old names kept as aliases
so unswept code still resolves.

Header swapped to outshift's bg-surface-light / 60px / "powered by"
subtitle pattern. Page headings use font-display text-2xl
font-bold text-ink-strong leading-tight (24px/700) to match
outshift's "Explore" treatment. Cards refactored to <article>
with the exact outshift class string. Inputs and secondary buttons
use border-2 border-line bg-surface-light. Tag pills use
bg-surface-tag rounded-full px-2.5 py-0.5 text-xs font-semibold.
---
 web/src/app/dashboard/cards/[id]/page.tsx |  74 +++----
 web/src/app/dashboard/cards/new/page.tsx  | 101 ++++-----
 web/src/app/dashboard/page.tsx            | 115 ++++++-----
 web/src/app/globals.css                   | 236 ++++++++++++----------
 web/src/app/layout.tsx                    |   2 +-
 web/src/app/login/page.tsx                |  58 +++---
 web/src/app/page.tsx                      |  64 +++---
 web/src/components/Footer.tsx             |   4 +-
 web/src/components/Header.tsx             | 175 ++++++++--------
 web/src/components/PageShell.tsx          |   8 +-
 10 files changed, 431 insertions(+), 406 deletions(-)

diff --git a/web/src/app/dashboard/cards/[id]/page.tsx b/web/src/app/dashboard/cards/[id]/page.tsx
index cae9cd0..892b9ce 100644
--- a/web/src/app/dashboard/cards/[id]/page.tsx
+++ b/web/src/app/dashboard/cards/[id]/page.tsx
@@ -8,26 +8,26 @@ import type { AgentCard, Me } from "@/lib/api";
 import { clearAuthToken } from "@/lib/auth";
 import { useRequireAuth } from "@/hooks/useRequireAuth";
 
-// ── Shared primitives (token-bound) ───────────────────────────────────────────
+// ── Shared primitives (outshift utility classes) ──────────────────────────────
 
-const cardClass =
-  "rounded-[var(--radius-card)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] shadow-[var(--shadow-card)]";
+const infoCardClass =
+  "bg-surface-light rounded-card border border-line p-6 shadow-card";
 
 const inputClass =
-  "w-full h-10 rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 text-sm text-[color:var(--color-fg-default)] outline-none transition focus:border-[color:var(--color-primary)] focus:ring-2 focus:ring-[color:var(--color-primary-soft)]";
+  "w-full h-10 rounded-control border-2 border-line bg-surface-light px-3 text-sm text-ink placeholder:text-ink-weak focus:outline-none focus:border-brand-500 transition-colors";
 
 const textareaClass =
-  "w-full rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 py-2 text-sm text-[color:var(--color-fg-default)] outline-none transition focus:border-[color:var(--color-primary)] focus:ring-2 focus:ring-[color:var(--color-primary-soft)] resize-none";
+  "w-full rounded-control border-2 border-line bg-surface-light px-3 py-2 text-sm text-ink placeholder:text-ink-weak focus:outline-none focus:border-brand-500 transition-colors resize-none";
 
 const primaryBtnClass =
-  "inline-flex h-10 items-center rounded-[var(--radius-control)] bg-[color:var(--color-primary)] px-5 text-sm font-medium text-white transition hover:bg-[color:var(--color-primary-hover)] disabled:opacity-60";
+  "inline-flex items-center justify-center h-9 rounded-control bg-brand-500 px-4 text-sm font-medium text-white hover:bg-brand-600 transition disabled:opacity-60";
 
 const secondaryBtnClass =
-  "inline-flex h-10 items-center rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-4 text-sm font-medium text-[color:var(--color-fg-default)] transition hover:bg-[color:var(--color-surface-2)]";
+  "inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-sm font-medium text-ink hover:border-line-strong transition";
 
 function FieldLabel({ children }: { children: React.ReactNode }) {
   return (
-    <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]">
+    <p className="mb-1 text-xs font-bold uppercase tracking-wide text-ink-weak">
       {children}
     </p>
   );
@@ -184,7 +184,7 @@ export default function EditCardPage() {
   if (loading) {
     return (
       <PageShell title="Edit card" description="Loading…">
-        <div className={`${cardClass} p-6 text-sm text-[color:var(--color-fg-weak)]`}>
+        <div className={`${infoCardClass} text-sm text-ink-weak`}>
           Loading…
         </div>
       </PageShell>
@@ -194,7 +194,7 @@ export default function EditCardPage() {
   if (!card || !me) {
     return (
       <PageShell title="Edit card" description="">
-        <div className="rounded-[var(--radius-card)] border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] p-4 text-[color:var(--color-danger)]">
+        <div className="rounded-card border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] p-4 text-[color:var(--color-danger)]">
           {error ?? "Card not found."}
         </div>
       </PageShell>
@@ -216,17 +216,17 @@ export default function EditCardPage() {
       <div className="max-w-lg space-y-6">
         {/* Public URL banner */}
         {isPublic ? (
-          <div className="rounded-[var(--radius-card)] border border-[color:var(--color-border-strong)] bg-[color:var(--color-primary-soft)] p-5 shadow-[var(--shadow-card)]">
-            <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-[color:var(--color-primary-deep)]">
+          <div className="rounded-card border border-line-strong bg-brand-200 p-5 shadow-card">
+            <p className="mb-2 text-xs font-bold uppercase tracking-wide text-brand-800">
               Public URL
             </p>
             <div className="flex items-center gap-2">
-              <code className="min-w-0 flex-1 truncate font-mono text-sm text-[color:var(--color-primary-deep)]">
+              <code className="min-w-0 flex-1 truncate font-mono text-sm text-brand-800">
                 {publicUrl}
               </code>
               <button
                 onClick={() => copyUrl(publicUrl)}
-                className="shrink-0 rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 py-1.5 text-xs text-[color:var(--color-fg-default)] hover:bg-[color:var(--color-surface-2)]"
+                className="shrink-0 inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-xs font-medium text-ink hover:border-line-strong transition"
               >
                 {copiedUrl ? "Copied!" : "Copy"}
               </button>
@@ -234,25 +234,25 @@ export default function EditCardPage() {
                 href={publicUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="shrink-0 rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 py-1.5 text-xs text-[color:var(--color-fg-default)] hover:bg-[color:var(--color-surface-2)]"
+                className="shrink-0 inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-xs font-medium text-ink hover:border-line-strong transition"
               >
                 Open
               </a>
             </div>
           </div>
         ) : (
-          <div className="rounded-[var(--radius-card)] border border-[color:var(--color-warning-soft)] bg-[color:var(--color-warning-soft)] p-5">
-            <p className="text-xs font-semibold uppercase tracking-wide text-[color:var(--color-warning)]">Private</p>
-            <p className="mt-1 text-sm text-[color:var(--color-warning)]">This card is not publicly accessible. Enable &ldquo;Public&rdquo; below to publish it.</p>
+          <div className="rounded-card border border-[#fdeccc] bg-[#fdeccc] p-5">
+            <p className="text-xs font-bold uppercase tracking-wide text-[#8a5a06]">Private</p>
+            <p className="mt-1 text-sm text-[#8a5a06]">This card is not publicly accessible. Enable &ldquo;Public&rdquo; below to publish it.</p>
           </div>
         )}
 
         {/* Edit form */}
-        <form onSubmit={onSave} className={`${cardClass} space-y-5 p-6`}>
+        <form onSubmit={onSave} className={`${infoCardClass} space-y-5`}>
 
           {/* Basic */}
           <div>
-            <h2 className="mb-4 text-sm font-semibold text-[color:var(--color-fg-strong)]">Basic info</h2>
+            <h2 className="mb-4 text-sm font-semibold text-ink-strong">Basic info</h2>
             <div className="space-y-4">
               <div>
                 <FieldLabel>Slug *</FieldLabel>
@@ -287,11 +287,11 @@ export default function EditCardPage() {
             </div>
           </div>
 
-          <div className="border-t border-[color:var(--color-border)]" />
+          <div className="border-t border-line" />
 
           {/* Runtime */}
           <div>
-            <h2 className="mb-4 text-sm font-semibold text-[color:var(--color-fg-strong)]">Runtime</h2>
+            <h2 className="mb-4 text-sm font-semibold text-ink-strong">Runtime</h2>
             <div className="space-y-4">
               <div>
                 <FieldLabel>Runtime URL</FieldLabel>
@@ -333,23 +333,23 @@ export default function EditCardPage() {
             </div>
           </div>
 
-          <div className="border-t border-[color:var(--color-border)]" />
+          <div className="border-t border-line" />
 
           {/* Capabilities */}
           <div>
-            <h2 className="mb-4 text-sm font-semibold text-[color:var(--color-fg-strong)]">Capabilities & Auth</h2>
+            <h2 className="mb-4 text-sm font-semibold text-ink-strong">Capabilities & Auth</h2>
             <div className="space-y-4">
-              <div className="rounded-[var(--radius-control)] border border-[color:var(--color-border)] p-4 space-y-2">
+              <div className="rounded-control border border-line p-4 space-y-2">
                 <label className="flex items-center gap-3 cursor-pointer">
                   <input
                     type="checkbox"
                     checked={isPublic}
                     onChange={(e) => setIsPublic(e.target.checked)}
-                    className="accent-[color:var(--color-primary)]"
+                    className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
                   />
                   <div>
-                    <span className="text-sm text-[color:var(--color-fg-default)]">Public</span>
-                    <p className="text-xs text-[color:var(--color-fg-weak)]">Accessible at the public URL. Uncheck to make private.</p>
+                    <span className="text-sm text-ink">Public</span>
+                    <p className="text-xs text-ink-weak">Accessible at the public URL. Uncheck to make private.</p>
                   </div>
                 </label>
                 <label className="flex items-center gap-3 cursor-pointer">
@@ -357,18 +357,18 @@ export default function EditCardPage() {
                     type="checkbox"
                     checked={streaming}
                     onChange={(e) => setStreaming(e.target.checked)}
-                    className="accent-[color:var(--color-primary)]"
+                    className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
                   />
-                  <span className="text-sm text-[color:var(--color-fg-default)]">Streaming</span>
+                  <span className="text-sm text-ink">Streaming</span>
                 </label>
                 <label className="flex items-center gap-3 cursor-pointer">
                   <input
                     type="checkbox"
                     checked={pushNotifications}
                     onChange={(e) => setPushNotifications(e.target.checked)}
-                    className="accent-[color:var(--color-primary)]"
+                    className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
                   />
-                  <span className="text-sm text-[color:var(--color-fg-default)]">Push notifications</span>
+                  <span className="text-sm text-ink">Push notifications</span>
                 </label>
               </div>
 
@@ -412,12 +412,12 @@ export default function EditCardPage() {
           </div>
 
           {error && (
-            <p className="rounded-[var(--radius-control)] border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] px-4 py-2.5 text-sm text-[color:var(--color-danger)]">
+            <p className="rounded-control border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] px-4 py-2.5 text-sm text-[color:var(--color-danger)]">
               {error}
             </p>
           )}
           {success && (
-            <p className="rounded-[var(--radius-control)] border border-[color:var(--color-success-soft)] bg-[color:var(--color-success-soft)] px-4 py-2.5 text-sm text-[color:var(--color-success)]">
+            <p className="rounded-control border border-accent-teal bg-accent-teal px-4 py-2.5 text-sm text-accent-teal-ink">
               {success}
             </p>
           )}
@@ -441,7 +441,7 @@ export default function EditCardPage() {
         </form>
 
         {/* Delete zone */}
-        <div className="rounded-[var(--radius-card)] border border-[color:var(--color-danger)] bg-[color:var(--color-danger-soft)] p-5">
+        <div className="rounded-card border border-[color:var(--color-danger)] bg-[color:var(--color-danger-soft)] p-5">
           <h3 className="text-sm font-semibold text-[color:var(--color-danger)]">Danger zone</h3>
           <p className="mt-1 text-sm text-[color:var(--color-danger)]/85">
             Permanently delete this agent card. This action cannot be undone.
@@ -450,7 +450,7 @@ export default function EditCardPage() {
             {!confirmDelete ? (
               <button
                 onClick={() => setConfirmDelete(true)}
-                className="inline-flex h-10 items-center rounded-[var(--radius-control)] border border-[color:var(--color-danger)] bg-[color:var(--color-surface)] px-4 text-sm font-medium text-[color:var(--color-danger)] hover:bg-[color:var(--color-danger-soft)]"
+                className="inline-flex items-center justify-center h-9 rounded-control border-2 border-[color:var(--color-danger)] bg-surface-light px-3 text-sm font-medium text-[color:var(--color-danger)] hover:bg-[color:var(--color-danger-soft)] transition"
               >
                 Delete card
               </button>
@@ -460,7 +460,7 @@ export default function EditCardPage() {
                 <button
                   onClick={onDelete}
                   disabled={deleting}
-                  className="inline-flex h-10 items-center rounded-[var(--radius-control)] bg-[color:var(--color-danger)] px-4 text-sm font-medium text-white hover:opacity-90 disabled:opacity-60"
+                  className="inline-flex items-center justify-center h-9 rounded-control bg-[color:var(--color-danger)] px-3 text-sm font-medium text-white hover:opacity-90 disabled:opacity-60 transition"
                 >
                   {deleting ? "Deleting…" : "Yes, delete"}
                 </button>
diff --git a/web/src/app/dashboard/cards/new/page.tsx b/web/src/app/dashboard/cards/new/page.tsx
index f1132f1..2cb80e5 100644
--- a/web/src/app/dashboard/cards/new/page.tsx
+++ b/web/src/app/dashboard/cards/new/page.tsx
@@ -26,25 +26,25 @@ interface FormState {
   is_public: boolean;
 }
 
-// ── Shared primitives (token-bound) ───────────────────────────────────────────
+// ── Shared primitives (outshift utility classes) ──────────────────────────────
 
-const cardClass =
-  "rounded-[var(--radius-card)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] shadow-[var(--shadow-card)]";
+const infoCardClass =
+  "bg-surface-light rounded-card border border-line p-6 shadow-card";
 
 const inputClass =
-  "w-full h-10 rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 text-sm text-[color:var(--color-fg-default)] outline-none transition focus:border-[color:var(--color-primary)] focus:ring-2 focus:ring-[color:var(--color-primary-soft)]";
+  "w-full h-10 rounded-control border-2 border-line bg-surface-light px-3 text-sm text-ink placeholder:text-ink-weak focus:outline-none focus:border-brand-500 transition-colors";
 
 const textareaClass =
-  "w-full rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 py-2 text-sm text-[color:var(--color-fg-default)] outline-none transition focus:border-[color:var(--color-primary)] focus:ring-2 focus:ring-[color:var(--color-primary-soft)] resize-none";
+  "w-full rounded-control border-2 border-line bg-surface-light px-3 py-2 text-sm text-ink placeholder:text-ink-weak focus:outline-none focus:border-brand-500 transition-colors resize-none";
 
 const primaryBtnClass =
-  "inline-flex h-10 items-center rounded-[var(--radius-control)] bg-[color:var(--color-primary)] px-5 text-sm font-medium text-white transition hover:bg-[color:var(--color-primary-hover)] disabled:opacity-60";
+  "inline-flex items-center justify-center h-9 rounded-control bg-brand-500 px-4 text-sm font-medium text-white hover:bg-brand-600 transition disabled:opacity-60";
 
 const secondaryBtnClass =
-  "inline-flex h-10 items-center rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-5 text-sm font-medium text-[color:var(--color-fg-default)] transition hover:bg-[color:var(--color-surface-2)]";
+  "inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-sm font-medium text-ink hover:border-line-strong transition";
 
 const microLabelClass =
-  "mb-1 block text-xs font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]";
+  "mb-1 block text-xs font-bold uppercase tracking-wide text-ink-weak";
 
 // ── Defaults per identity type ────────────────────────────────────────────────
 
@@ -101,13 +101,13 @@ function Field({
   const base = cn(
     textarea ? textareaClass : inputClass,
     mono && "font-mono",
-    error && "border-[color:var(--color-danger)] focus:border-[color:var(--color-danger)] focus:ring-[color:var(--color-danger-soft)]",
+    error && "border-[color:var(--color-danger)] focus:border-[color:var(--color-danger)]",
   );
   return (
     <label className="block">
       <span className={microLabelClass}>
         {label}
-        {optional && <span className="ml-1 font-normal normal-case tracking-normal text-[color:var(--color-fg-weak)]">(optional)</span>}
+        {optional && <span className="ml-1 font-normal normal-case tracking-normal text-ink-weak">(optional)</span>}
       </span>
       {textarea ? (
         <textarea value={value} onChange={(e) => onChange(e.target.value)}
@@ -119,7 +119,7 @@ function Field({
       {error
         ? <p className="mt-1 text-[11px] text-[color:var(--color-danger)]">{error}</p>
         : hint
-          ? <p className="mt-1 text-[11px] text-[color:var(--color-fg-weak)]">{hint}</p>
+          ? <p className="mt-1 text-[11px] text-ink-weak">{hint}</p>
           : null}
     </label>
   );
@@ -135,33 +135,33 @@ function IdentityBadge({ me, slug }: { me: Me; slug: string }) {
 
   return (
     <div className={cn(
-      "rounded-[var(--radius-card)] border px-4 py-3 flex items-start gap-3",
+      "rounded-card border px-4 py-3 flex items-start gap-3",
       isSmb
-        ? "border-[color:var(--color-border-strong)] bg-[color:var(--color-primary-soft)]"
-        : "border-[color:var(--color-border-strong)] bg-[color:var(--color-accent-soft)]",
+        ? "border-line-strong bg-brand-200"
+        : "border-line-strong bg-accent-teal",
     )}>
       <div className={cn(
         "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white",
-        isSmb ? "bg-[color:var(--color-primary)]" : "bg-[color:var(--color-accent)]",
+        isSmb ? "bg-brand-500" : "bg-accent-teal-ink",
       )}>
         {isSmb ? "B" : "P"}
       </div>
       <div className="min-w-0">
         <p className={cn(
-          "text-[10px] font-semibold uppercase tracking-wide",
-          isSmb ? "text-[color:var(--color-primary-deep)]" : "text-[color:var(--color-accent)]",
+          "text-[10px] font-bold uppercase tracking-wide",
+          isSmb ? "text-brand-800" : "text-accent-teal-ink",
         )}>
           {isSmb ? "Business" : "Personal"}
         </p>
         <p className={cn(
           "text-xs font-semibold",
-          isSmb ? "text-[color:var(--color-primary-deep)]" : "text-[color:var(--color-accent)]",
+          isSmb ? "text-brand-800" : "text-accent-teal-ink",
         )}>
           {isSmb ? me.domain : `@${me.handle}`}
         </p>
         <p className={cn(
           "mt-0.5 break-all font-mono text-[11px]",
-          isSmb ? "text-[color:var(--color-primary-deep)]/80" : "text-[color:var(--color-accent)]/80",
+          isSmb ? "text-brand-800/80" : "text-accent-teal-ink/80",
         )}>
           {url}
         </p>
@@ -182,22 +182,22 @@ function StepIndicator({ current }: { current: Step }) {
           <div className={cn(
             "flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition",
             s === current
-              ? "bg-[color:var(--color-primary)] text-white"
+              ? "bg-brand-500 text-white"
               : s < current
-                ? "bg-[color:var(--color-accent-soft)] text-[color:var(--color-accent)]"
-                : "border border-[color:var(--color-border)] bg-[color:var(--color-surface)] text-[color:var(--color-fg-weak)]",
+                ? "bg-accent-teal text-accent-teal-ink"
+                : "border border-line bg-surface-light text-ink-weak",
           )}>
             {s < current ? "✓" : s}
           </div>
           {i < 3 && (
             <div className={cn(
               "h-px w-8 transition",
-              s < current ? "bg-[color:var(--color-accent)]" : "bg-[color:var(--color-border)]"
+              s < current ? "bg-accent-teal-ink" : "bg-line"
             )} />
           )}
         </div>
       ))}
-      <span className="ml-2 text-xs font-medium text-[color:var(--color-fg-muted)]">
+      <span className="ml-2 text-xs font-medium text-ink-medium">
         {STEP_LABELS[(current - 1)]}
       </span>
     </div>
@@ -332,7 +332,7 @@ export default function NewCardPage() {
         {/* Identity badge — always visible */}
         {me && <IdentityBadge me={me} slug={form.slug} />}
 
-        <div className={`${cardClass} p-6`}>
+        <div className={infoCardClass}>
           <StepIndicator current={step} />
 
           {/* ── Step 1: Basic ── */}
@@ -421,29 +421,32 @@ export default function NewCardPage() {
                 <span className={microLabelClass}>
                   Capabilities
                 </span>
-                <div className="space-y-2 rounded-[var(--radius-control)] border border-[color:var(--color-border)] p-4">
+                <div className="space-y-2 rounded-control border border-line p-4">
                   <label className="flex cursor-pointer items-center gap-3">
                     <input type="checkbox" checked={form.streaming}
-                      onChange={(e) => set("streaming", e.target.checked)} className="accent-[color:var(--color-primary)]" />
+                      onChange={(e) => set("streaming", e.target.checked)}
+                      className="rounded border-line-strong text-brand-500 focus:ring-brand-500" />
                     <div>
-                      <span className="text-sm text-[color:var(--color-fg-default)]">Streaming</span>
-                      <p className="text-[11px] text-[color:var(--color-fg-weak)]">Agent streams responses incrementally.</p>
+                      <span className="text-sm text-ink">Streaming</span>
+                      <p className="text-[11px] text-ink-weak">Agent streams responses incrementally.</p>
                     </div>
                   </label>
                   <label className="flex cursor-pointer items-center gap-3">
                     <input type="checkbox" checked={form.pushNotifications}
-                      onChange={(e) => set("pushNotifications", e.target.checked)} className="accent-[color:var(--color-primary)]" />
+                      onChange={(e) => set("pushNotifications", e.target.checked)}
+                      className="rounded border-line-strong text-brand-500 focus:ring-brand-500" />
                     <div>
-                      <span className="text-sm text-[color:var(--color-fg-default)]">Push notifications</span>
-                      <p className="text-[11px] text-[color:var(--color-fg-weak)]">Agent can push updates to callers.</p>
+                      <span className="text-sm text-ink">Push notifications</span>
+                      <p className="text-[11px] text-ink-weak">Agent can push updates to callers.</p>
                     </div>
                   </label>
                   <label className="flex cursor-pointer items-center gap-3">
                     <input type="checkbox" checked={form.is_public}
-                      onChange={(e) => set("is_public", e.target.checked)} className="accent-[color:var(--color-primary)]" />
+                      onChange={(e) => set("is_public", e.target.checked)}
+                      className="rounded border-line-strong text-brand-500 focus:ring-brand-500" />
                     <div>
-                      <span className="text-sm text-[color:var(--color-fg-default)]">Public</span>
-                      <p className="text-[11px] text-[color:var(--color-fg-weak)]">Accessible at the public URL. Uncheck to keep private.</p>
+                      <span className="text-sm text-ink">Public</span>
+                      <p className="text-[11px] text-ink-weak">Accessible at the public URL. Uncheck to keep private.</p>
                     </div>
                   </label>
                 </div>
@@ -461,7 +464,7 @@ export default function NewCardPage() {
                   <option value="ApiKey">API key</option>
                   {!c.isSmb && <option value="user_consent">User consent required</option>}
                 </select>
-                <p className="mt-1 text-[11px] text-[color:var(--color-fg-weak)]">{c.authHint}</p>
+                <p className="mt-1 text-[11px] text-ink-weak">{c.authHint}</p>
               </div>
 
               <Field
@@ -482,20 +485,20 @@ export default function NewCardPage() {
             <div className="space-y-4">
               {/* URL highlight */}
               <div className={cn(
-                "rounded-[var(--radius-card)] border p-4",
+                "rounded-card border p-4",
                 c.isSmb
-                  ? "border-[color:var(--color-border-strong)] bg-[color:var(--color-primary-soft)]"
-                  : "border-[color:var(--color-border-strong)] bg-[color:var(--color-accent-soft)]",
+                  ? "border-line-strong bg-brand-200"
+                  : "border-line-strong bg-accent-teal",
               )}>
                 <p className={cn(
-                  "mb-1 text-[10px] font-semibold uppercase tracking-wide",
-                  c.isSmb ? "text-[color:var(--color-primary-deep)]" : "text-[color:var(--color-accent)]",
+                  "mb-1 text-[10px] font-bold uppercase tracking-wide",
+                  c.isSmb ? "text-brand-800" : "text-accent-teal-ink",
                 )}>
                   Public URL
                 </p>
                 <code className={cn(
                   "break-all font-mono text-sm",
-                  c.isSmb ? "text-[color:var(--color-primary-deep)]" : "text-[color:var(--color-accent)]",
+                  c.isSmb ? "text-brand-800" : "text-accent-teal-ink",
                 )}>
                   {getPublicUrl(
                     me.identity_type,
@@ -506,7 +509,7 @@ export default function NewCardPage() {
                 </code>
               </div>
 
-              <dl className="divide-y divide-[color:var(--color-border)]">
+              <dl className="divide-y divide-line">
                 {[
                   { label: "Slug",               value: form.slug,                           mono: true  },
                   { label: "Display name",        value: form.display_name,                   mono: false },
@@ -521,16 +524,16 @@ export default function NewCardPage() {
                   { label: "Visibility",          value: form.is_public ? "Public" : "Private", mono: false },
                 ].map(({ label, value, mono }) => (
                   <div key={label} className="flex items-baseline justify-between gap-4 py-2.5">
-                    <dt className="shrink-0 text-xs text-[color:var(--color-fg-weak)]">{label}</dt>
-                    <dd className={cn("text-right text-sm text-[color:var(--color-fg-default)]", mono && "font-mono")}>{value}</dd>
+                    <dt className="shrink-0 text-xs text-ink-weak">{label}</dt>
+                    <dd className={cn("text-right text-sm text-ink", mono && "font-mono")}>{value}</dd>
                   </div>
                 ))}
               </dl>
 
               {form.skillsJson.trim() && (
-                <div className="rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface-2)] p-3">
-                  <p className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]">Skills</p>
-                  <pre className="overflow-x-auto font-mono text-xs text-[color:var(--color-fg-default)]">{form.skillsJson}</pre>
+                <div className="rounded-control border border-line bg-surface-strong p-3">
+                  <p className="mb-1 text-[10px] font-bold uppercase tracking-wide text-ink-weak">Skills</p>
+                  <pre className="overflow-x-auto font-mono text-xs text-ink">{form.skillsJson}</pre>
                 </div>
               )}
             </div>
@@ -538,7 +541,7 @@ export default function NewCardPage() {
 
           {/* Error */}
           {error && (
-            <p className="mt-4 rounded-[var(--radius-control)] border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] px-4 py-2.5 text-sm text-[color:var(--color-danger)]">
+            <p className="mt-4 rounded-control border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] px-4 py-2.5 text-sm text-[color:var(--color-danger)]">
               {error}
             </p>
           )}
diff --git a/web/src/app/dashboard/page.tsx b/web/src/app/dashboard/page.tsx
index 42863e4..cd0fd71 100644
--- a/web/src/app/dashboard/page.tsx
+++ b/web/src/app/dashboard/page.tsx
@@ -9,8 +9,13 @@ import type { Me, AgentCard } from "@/lib/api";
 import { clearAuthToken } from "@/lib/auth";
 import { useRequireAuth } from "@/hooks/useRequireAuth";
 
-const cardClass =
-  "rounded-[var(--radius-card)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] shadow-[var(--shadow-card)]";
+// Static info-card pattern (slightly more padding, no hover transform)
+const infoCardClass =
+  "bg-surface-light rounded-card border border-line p-6 shadow-card";
+
+// Outshift exact card pattern (grid item, interactive)
+const gridCardClass =
+  "bg-surface-light rounded-card border border-line/70 shadow-card p-4 hover:shadow-card-hover hover:border-line-strong transition flex flex-col h-full gap-3";
 
 export default function DashboardPage() {
   useRequireAuth();
@@ -62,7 +67,7 @@ export default function DashboardPage() {
   if (loading) {
     return (
       <PageShell title="Dashboard" description="Loading your agent cards…">
-        <div className={`${cardClass} p-6 text-sm text-[color:var(--color-fg-weak)]`}>
+        <div className={`${infoCardClass} text-sm text-ink-weak`}>
           Loading…
         </div>
       </PageShell>
@@ -72,7 +77,7 @@ export default function DashboardPage() {
   if (error || !me) {
     return (
       <PageShell title="Dashboard" description="">
-        <div className="rounded-[var(--radius-card)] border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] p-4 text-[color:var(--color-danger)]">
+        <div className="rounded-card border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] p-4 text-[color:var(--color-danger)]">
           {error ?? "Something went wrong."}
         </div>
       </PageShell>
@@ -81,8 +86,8 @@ export default function DashboardPage() {
 
   const isDomain = me.identity_type === "domain";
   const identityPillClass = isDomain
-    ? "bg-[color:var(--color-primary-soft)] text-[color:var(--color-primary-deep)]"
-    : "bg-[color:var(--color-accent-soft)] text-[color:var(--color-accent)]";
+    ? "bg-brand-200 text-brand-800"
+    : "bg-accent-teal text-accent-teal-ink";
 
   return (
     <PageShell
@@ -91,22 +96,22 @@ export default function DashboardPage() {
     >
       <div className="space-y-6">
         {/* Profile card */}
-        <div className={`${cardClass} flex items-center justify-between p-5`}>
+        <div className={`${infoCardClass} flex items-center justify-between`}>
           <div>
-            <p className="font-semibold text-[color:var(--color-fg-strong)]">{me.display_name ?? me.email}</p>
-            <p className="text-sm text-[color:var(--color-fg-muted)]">{me.email}</p>
+            <p className="font-semibold text-ink-strong">{me.display_name ?? me.email}</p>
+            <p className="text-sm text-ink-medium">{me.email}</p>
             <div className="mt-2 flex flex-wrap items-center gap-2">
-              <span className="rounded-full bg-[color:var(--color-surface-2)] px-2.5 py-0.5 font-mono text-xs text-[color:var(--color-fg-muted)]">
+              <span className="inline-flex items-center rounded-full bg-surface-tag px-2.5 py-0.5 font-mono text-xs text-ink">
                 @{me.handle}
               </span>
-              <span className={`rounded-full px-2.5 py-0.5 text-xs font-medium uppercase tracking-wide ${identityPillClass}`}>
+              <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${identityPillClass}`}>
                 {isDomain ? `Business · ${me.domain}` : "Personal"}
               </span>
             </div>
           </div>
           <button
             onClick={signOut}
-            className="inline-flex h-9 items-center rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-4 text-sm font-medium text-[color:var(--color-fg-default)] hover:bg-[color:var(--color-surface-2)]"
+            className="inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-sm font-medium text-ink hover:border-line-strong transition"
           >
             Sign out
           </button>
@@ -115,31 +120,31 @@ export default function DashboardPage() {
         {/* Agent cards */}
         <div>
           <div className="mb-3 flex items-center justify-between">
-            <h2 className="text-xs font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]">
+            <h2 className="text-xs font-bold uppercase tracking-wide text-ink-weak">
               Agent Cards
             </h2>
             <Link
               href="/dashboard/cards/new"
-              className="inline-flex h-9 items-center rounded-[var(--radius-control)] bg-[color:var(--color-primary)] px-4 text-sm font-medium text-white transition hover:bg-[color:var(--color-primary-hover)]"
+              className="inline-flex items-center justify-center h-9 rounded-control bg-brand-500 px-4 text-sm font-medium text-white hover:bg-brand-600 transition"
             >
               + New card
             </Link>
           </div>
 
           {cards.length === 0 ? (
-            <div className={`${cardClass} p-8 text-center`}>
-              <p className="text-sm text-[color:var(--color-fg-muted)]">
+            <div className={`${infoCardClass} text-center`}>
+              <p className="text-sm text-ink-medium">
                 You have no agent cards yet.
               </p>
               <Link
                 href="/dashboard/cards/new"
-                className="mt-4 inline-flex h-10 items-center rounded-[var(--radius-control)] bg-[color:var(--color-primary)] px-5 text-sm font-medium text-white transition hover:bg-[color:var(--color-primary-hover)]"
+                className="mt-4 inline-flex items-center justify-center h-9 rounded-control bg-brand-500 px-4 text-sm font-medium text-white hover:bg-brand-600 transition"
               >
                 Create your first card
               </Link>
             </div>
           ) : (
-            <div className="space-y-3">
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
               {cards.map((card) => {
                 const publicUrl = getPublicUrl(
                   me.identity_type,
@@ -150,54 +155,48 @@ export default function DashboardPage() {
 
                 const statusClass =
                   card.status === "active"
-                    ? "bg-[color:var(--color-accent-soft)] text-[color:var(--color-accent)]"
-                    : "bg-[color:var(--color-surface-2)] text-[color:var(--color-fg-weak)]";
+                    ? "bg-accent-teal text-accent-teal-ink"
+                    : "bg-surface-tag text-ink-weak";
 
                 return (
-                  <div
-                    key={card.id}
-                    className={`${cardClass} p-5 transition hover:border-[color:var(--color-border-strong)] hover:shadow-[var(--shadow-card-hover)]`}
-                  >
-                    <div className="flex items-start justify-between gap-4">
-                      <div className="min-w-0 flex-1">
-                        <div className="flex flex-wrap items-center gap-2">
-                          <p className="font-medium text-[color:var(--color-fg-strong)]">{card.display_name}</p>
-                          <span className={`rounded-full px-2.5 py-0.5 text-[10px] font-medium uppercase tracking-wide ${statusClass}`}>
-                            {card.status}
-                          </span>
-                          {!card.is_public && (
-                            <span className="rounded-full bg-[color:var(--color-warning-soft)] px-2.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-[color:var(--color-warning)]">
-                              Private
-                            </span>
-                          )}
-                        </div>
-                        <p className="mt-1 font-mono text-xs text-[color:var(--color-fg-weak)]">/{card.slug}</p>
-                        {card.description && (
-                          <p className="mt-1 text-sm text-[color:var(--color-fg-muted)] line-clamp-1">{card.description}</p>
-                        )}
-
-                        {/* Public URL */}
-                        <div className="mt-3 flex items-center gap-2">
-                          <code className="min-w-0 flex-1 truncate rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface-2)] px-3 py-1.5 font-mono text-xs text-[color:var(--color-fg-muted)]">
-                            {publicUrl}
-                          </code>
-                          <button
-                            onClick={() => copyUrl(publicUrl, card.id)}
-                            className="shrink-0 rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 py-1.5 text-xs text-[color:var(--color-fg-default)] hover:bg-[color:var(--color-surface-2)]"
-                          >
-                            {copiedId === card.id ? "Copied!" : "Copy"}
-                          </button>
-                        </div>
-                      </div>
-
+                  <article key={card.id} className={gridCardClass}>
+                    <div className="flex items-start justify-between gap-2">
+                      <h3 className="font-semibold text-ink-strong truncate">{card.display_name}</h3>
+                      <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${statusClass}`}>
+                        {card.status}
+                      </span>
+                    </div>
+                    <div className="flex flex-wrap items-center gap-2">
+                      <span className="font-mono text-xs text-ink-weak">/{card.slug}</span>
+                      {!card.is_public && (
+                        <span className="inline-flex items-center rounded-full bg-[#fdeccc] text-[#8a5a06] px-2.5 py-0.5 text-xs font-semibold">
+                          Private
+                        </span>
+                      )}
+                    </div>
+                    {card.description && (
+                      <p className="text-sm text-ink line-clamp-2 leading-relaxed">{card.description}</p>
+                    )}
+
+                    {/* Public URL */}
+                    <div className="mt-auto flex items-center gap-2">
+                      <code className="min-w-0 flex-1 truncate rounded-control border border-line bg-surface-strong px-3 py-1.5 font-mono text-xs text-ink-medium">
+                        {publicUrl}
+                      </code>
+                      <button
+                        onClick={() => copyUrl(publicUrl, card.id)}
+                        className="shrink-0 inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-xs font-medium text-ink hover:border-line-strong transition"
+                      >
+                        {copiedId === card.id ? "Copied!" : "Copy"}
+                      </button>
                       <Link
                         href={`/dashboard/cards/${card.id}`}
-                        className="shrink-0 rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 py-1.5 text-sm text-[color:var(--color-fg-default)] hover:bg-[color:var(--color-surface-2)]"
+                        className="shrink-0 inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-xs font-medium text-ink hover:border-line-strong transition"
                       >
                         Edit
                       </Link>
                     </div>
-                  </div>
+                  </article>
                 );
               })}
             </div>
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index a9200f4..00ef77b 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -1,144 +1,162 @@
 @import "tailwindcss";
 
 @theme inline {
-  --color-bg: var(--color-bg);
-  --color-bg-light: var(--color-bg-light);
+  /* Outshift surfaces */
   --color-surface: var(--color-surface);
-  --color-surface-2: var(--color-surface-2);
+  --color-surface-light: var(--color-surface-light);
+  --color-surface-strong: var(--color-surface-strong);
   --color-surface-tag: var(--color-surface-tag);
 
-  --color-fg: var(--color-fg);
-  --color-fg-strong: var(--color-fg-strong);
-  --color-fg-default: var(--color-fg-default);
-  --color-fg-muted: var(--color-fg-muted);
-  --color-fg-weak: var(--color-fg-weak);
-
-  --color-border: var(--color-border);
-  --color-border-strong: var(--color-border-strong);
-
-  --color-primary: var(--color-primary);
-  --color-primary-hover: var(--color-primary-hover);
-  --color-primary-active: var(--color-primary-active);
-  --color-primary-deep: var(--color-primary-deep);
-  --color-primary-soft: var(--color-primary-soft);
-  --color-primary-soft-strong: var(--color-primary-soft-strong);
-
-  --color-accent: var(--color-accent);
-  --color-accent-soft: var(--color-accent-soft);
-  --color-success: var(--color-success);
-  --color-success-soft: var(--color-success-soft);
-  --color-warning: var(--color-warning);
-  --color-warning-soft: var(--color-warning-soft);
-  --color-danger: var(--color-danger);
-  --color-danger-soft: var(--color-danger-soft);
+  /* Outshift ink (text) */
+  --color-ink: var(--color-ink);
+  --color-ink-strong: var(--color-ink-strong);
+  --color-ink-medium: var(--color-ink-medium);
+  --color-ink-weak: var(--color-ink-weak);
+
+  /* Outshift lines (borders) */
+  --color-line: var(--color-line);
+  --color-line-strong: var(--color-line-strong);
+
+  /* Outshift brand scale */
+  --color-brand-200: var(--color-brand-200);
+  --color-brand-300: var(--color-brand-300);
+  --color-brand-500: var(--color-brand-500);
+  --color-brand-600: var(--color-brand-600);
+  --color-brand-700: var(--color-brand-700);
+  --color-brand-800: var(--color-brand-800);
+
+  /* Accent teal */
+  --color-accent-teal: var(--color-accent-teal);
+  --color-accent-teal-ink: var(--color-accent-teal-ink);
+
+  /* Star gold */
   --color-star-gold: var(--color-star-gold);
 
-  --color-code-bg: var(--color-code-bg);
-  --color-code-fg: var(--color-code-fg);
-
+  /* Fonts */
   --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
   --font-display: var(--font-display);
+  --font-mono: var(--font-mono);
 
-  --radius-sm: var(--radius-sm);
-  --radius-md: var(--radius-md);
-  --radius-lg: var(--radius-lg);
-  --radius-xl: var(--radius-xl);
-  --radius-full: var(--radius-full);
-  --radius-control: var(--radius-control);
+  /* Radii — only two matter */
   --radius-card: var(--radius-card);
+  --radius-control: var(--radius-control);
+
+  /* Card shadows (Outshift inlines these in utilities; expose them here) */
+  --shadow-card: 0 4px 4px 0 rgba(200, 213, 245, 0.33);
+  --shadow-card-hover: 0 6px 16px 0 rgba(200, 213, 245, 0.55);
 
-  --shadow-sm: var(--shadow-sm);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-modal: var(--shadow-modal);
-  --shadow-card: var(--shadow-card);
-  --shadow-card-hover: var(--shadow-card-hover);
+  /* Weight + leading + tracking subset */
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --leading-tight: 1.25;
+  --leading-relaxed: 1.625;
+  --tracking-wide: 0.025em;
 }
 
 :root {
+  /* ── Outshift canonical tokens ─────────────────────────────────────────── */
+
   /* Surfaces */
-  --color-bg: #f5f8fd;
-  --color-bg-light: #fbfcfe;
-  --color-surface: #ffffff;
-  --color-surface-2: #eff3fc;
-  --color-surface-tag: #e3eafa;
-
-  /* Foreground */
-  --color-fg: #00142b;
-  --color-fg-strong: #00142b;
-  --color-fg-default: #3c4551;
-  --color-fg-muted: #59616b;
-  --color-fg-weak: #777d85;
-
-  /* Borders */
-  --color-border: #d5dff7;
-  --color-border-strong: #c8d5f5;
-
-  /* Brand / primary (Cisco-blue inspired) */
-  --color-primary: #187adc;
-  --color-primary-hover: #0051af;
-  --color-primary-active: #004ba8;
-  --color-primary-deep: #0d274d;
-  --color-primary-soft: #e8f1ff;
-  --color-primary-soft-strong: #d5dff7;
-
-  /* Semantic accents */
-  --color-accent: #0f6e85;
-  --color-accent-soft: #dff1f5;
-  --color-success: #0f6e85;
-  --color-success-soft: #dff1f5;
-  --color-warning: #8a5a06;
-  --color-warning-soft: #fdeccc;
-  --color-danger: #b42318;
-  --color-danger-soft: #fef3f2;
+  --color-surface:        #f5f8fd; /* page bg */
+  --color-surface-light:  #fbfcfe; /* cards, header bg, secondary buttons */
+  --color-surface-strong: #eff3fc; /* filter sidebar, subtle hover bg */
+  --color-surface-tag:    #e3eafa; /* tag/chip pill bg */
+
+  /* Ink (text) */
+  --color-ink:        #3c4551; /* body / default */
+  --color-ink-strong: #00142b; /* headings */
+  --color-ink-medium: #59616b; /* nav links default */
+  --color-ink-weak:   #777d85; /* placeholders, eyebrow labels */
+
+  /* Lines (borders) */
+  --color-line:        #d5dff7; /* default border */
+  --color-line-strong: #c8d5f5; /* hover border */
+
+  /* Brand scale */
+  --color-brand-200: #e8f1ff;
+  --color-brand-300: #d5dff7;
+  --color-brand-500: #187adc;
+  --color-brand-600: #0051af;
+  --color-brand-700: #004ba8;
+  --color-brand-800: #0d274d;
+
+  /* Accent teal */
+  --color-accent-teal:     #dff1f5;
+  --color-accent-teal-ink: #0f6e85;
+
+  /* Star gold */
   --color-star-gold: #fbbf24;
 
-  /* Code surface */
-  --color-code-bg: #0d274d;
-  --color-code-fg: #fbfcfe;
-
-  /* Typography */
-  --font-sans: var(--font-sans-inter, 'Inter'), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  /* Fonts */
+  --font-sans:    var(--font-sans-inter, 'Inter'), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   --font-display: var(--font-sans-inter, 'Inter'), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --font-weight-light:    300;
+  --font-weight-medium:   500;
+  --font-weight-semibold: 600;
+  --font-weight-bold:     700;
 
   /* Radii */
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
-  --radius-full: 9999px;
+  --radius-card:    8px;
   --radius-control: 4px;
-  --radius-card: 8px;
 
-  /* Shadows */
-  --shadow-sm: 0 1px 2px 0 rgba(13, 39, 77, 0.04);
-  --shadow-md: 0 4px 4px 0 rgba(200, 213, 245, 0.33);
-  --shadow-lg: 0 6px 16px 0 rgba(200, 213, 245, 0.55);
-  --shadow-modal: 0 25px 50px -12px rgba(0, 20, 43, 0.25);
-  --shadow-card: 0 4px 4px 0 rgba(200, 213, 245, 0.33);
-  --shadow-card-hover: 0 6px 16px 0 rgba(200, 213, 245, 0.55);
+  /* ── Aliases — keep my prior token names resolving to outshift values ── */
+
+  --color-bg: var(--color-surface);
+  --color-bg-light: var(--color-surface-light);
+  --color-surface-2: var(--color-surface-strong);
+
+  --color-fg: var(--color-ink-strong);
+  --color-fg-strong: var(--color-ink-strong);
+  --color-fg-default: var(--color-ink);
+  --color-fg-muted: var(--color-ink-medium);
+  --color-fg-weak: var(--color-ink-weak);
+
+  --color-border: var(--color-line);
+  --color-border-strong: var(--color-line-strong);
+
+  --color-primary: var(--color-brand-500);
+  --color-primary-hover: var(--color-brand-600);
+  --color-primary-active: var(--color-brand-700);
+  --color-primary-deep: var(--color-brand-800);
+  --color-primary-soft: var(--color-brand-200);
+  --color-primary-soft-strong: var(--color-brand-300);
+
+  --color-accent: var(--color-accent-teal-ink);
+  --color-accent-soft: var(--color-accent-teal);
+  --color-success: var(--color-accent-teal-ink);
+  --color-success-soft: var(--color-accent-teal);
+
+  /* Warning / danger — not in outshift's set; keep prior values so existing
+     code paths don't break visually. */
+  --color-warning: #8a5a06;
+  --color-warning-soft: #fdeccc;
+  --color-danger: #b42318;
+  --color-danger-soft: #fef3f2;
+
+  --color-code-bg: var(--color-brand-800);
+  --color-code-fg: var(--color-surface-light);
 
-  /* Legacy aliases — keep existing bg-[color:var(--page-bg)] utilities working */
-  --page-bg: var(--color-bg);
-  --panel: var(--color-surface);
-  --border: var(--color-border);
-  --text: var(--color-fg-strong);
-  --muted: var(--color-fg-muted);
-  --soft: var(--color-surface-2);
+  /* Legacy nanda aliases — already in place from prior restyle */
+  --page-bg: var(--color-surface);
+  --panel: var(--color-surface-light);
+  --border: var(--color-line);
+  --text: var(--color-ink-strong);
+  --muted: var(--color-ink-medium);
+  --soft: var(--color-surface-strong);
 }
 
 html {
   scroll-behavior: smooth;
-  background: var(--color-bg);
+  background: var(--color-surface);
 }
 
 body {
   margin: 0;
   min-height: 100vh;
-  background: var(--color-bg);
-  color: var(--color-fg-default);
+  background: var(--color-surface);
+  color: var(--color-ink);
   font-family: var(--font-sans);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
@@ -149,6 +167,6 @@ body {
 }
 
 ::selection {
-  background: var(--color-primary-soft);
-  color: var(--color-primary-deep);
+  background: var(--color-brand-200);
+  color: var(--color-brand-800);
 }
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 858a8fa..324e436 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -31,7 +31,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className={inter.variable}>
-      <body className="min-h-screen bg-[color:var(--color-bg)] text-[color:var(--color-fg-default)] antialiased">
+      <body className="bg-surface min-h-screen text-ink antialiased">
         <div id="top" className="min-h-screen flex flex-col">
           <Header />
           <main className="flex-1">{children}</main>
diff --git a/web/src/app/login/page.tsx b/web/src/app/login/page.tsx
index 06f5495..5062227 100644
--- a/web/src/app/login/page.tsx
+++ b/web/src/app/login/page.tsx
@@ -10,7 +10,7 @@ type Mode = "login" | "register";
 type IdentityType = "email" | "domain";
 
 const inputClass =
-  "w-full h-10 rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 text-sm text-[color:var(--color-fg-default)] outline-none transition focus:border-[color:var(--color-primary)] focus:ring-2 focus:ring-[color:var(--color-primary-soft)]";
+  "w-full h-10 rounded-control border-2 border-line bg-surface-light px-3 text-sm text-ink placeholder:text-ink-weak focus:outline-none focus:border-brand-500 transition-colors";
 
 function LoginPageInner() {
   const router = useRouter();
@@ -75,21 +75,21 @@ function LoginPageInner() {
     >
       <div className="mx-auto max-w-md space-y-5">
         {reason === "session_expired" && (
-          <p className="rounded-[var(--radius-control)] border border-[color:var(--color-warning-soft)] bg-[color:var(--color-warning-soft)] px-4 py-2.5 text-sm text-[color:var(--color-warning)]">
+          <p className="rounded-control border border-[#fdeccc] bg-[#fdeccc] px-4 py-2.5 text-sm text-[#8a5a06]">
             Your session expired. Please sign in again.
           </p>
         )}
 
-        <div className="rounded-[var(--radius-card)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] p-8 shadow-[var(--shadow-card)]">
+        <div className="bg-surface-light rounded-card border border-line p-8 shadow-card">
           {/* Mode toggle */}
-          <div className="mb-5 flex rounded-[var(--radius-control)] border border-[color:var(--color-border)] p-1 text-sm">
+          <div className="mb-5 flex rounded-control border border-line p-1 text-sm">
             <button
               type="button"
               onClick={() => { setMode("login"); setError(null); }}
-              className={`flex-1 rounded-[var(--radius-control)] py-1.5 font-medium transition ${
+              className={`flex-1 rounded-control py-1.5 font-medium transition ${
                 mode === "login"
-                  ? "bg-[color:var(--color-primary)] text-white"
-                  : "text-[color:var(--color-fg-muted)] hover:text-[color:var(--color-fg-default)]"
+                  ? "bg-brand-500 text-white"
+                  : "text-ink-medium hover:text-ink"
               }`}
             >
               Sign in
@@ -97,10 +97,10 @@ function LoginPageInner() {
             <button
               type="button"
               onClick={() => { setMode("register"); setError(null); }}
-              className={`flex-1 rounded-[var(--radius-control)] py-1.5 font-medium transition ${
+              className={`flex-1 rounded-control py-1.5 font-medium transition ${
                 mode === "register"
-                  ? "bg-[color:var(--color-primary)] text-white"
-                  : "text-[color:var(--color-fg-muted)] hover:text-[color:var(--color-fg-default)]"
+                  ? "bg-brand-500 text-white"
+                  : "text-ink-medium hover:text-ink"
               }`}
             >
               Create account
@@ -130,23 +130,23 @@ function LoginPageInner() {
                     className={`${inputClass} font-mono`}
                   />
                   {handle && (
-                    <p className="mt-1 font-mono text-xs text-[color:var(--color-fg-muted)]">
-                      Your cards will be at /personal/<span className="font-medium text-[color:var(--color-fg-default)]">{handle}</span>/slug.json
+                    <p className="mt-1 font-mono text-xs text-ink-medium">
+                      Your cards will be at /personal/<span className="font-medium text-ink">{handle}</span>/slug.json
                     </p>
                   )}
                 </div>
 
                 {/* Identity type */}
-                <div className="rounded-[var(--radius-control)] border border-[color:var(--color-border)] p-3">
-                  <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]">
+                <div className="rounded-control border border-line p-3">
+                  <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-weak">
                     Identity type
                   </p>
                   <div className="flex flex-col gap-2 sm:flex-row sm:gap-3">
                     <label
-                      className={`flex flex-1 cursor-pointer items-center gap-2 rounded-[var(--radius-control)] border px-3 py-2 transition ${
+                      className={`flex flex-1 cursor-pointer items-center gap-2 rounded-control border-2 px-3 py-2 transition ${
                         identityType === "email"
-                          ? "border-[color:var(--color-accent)] bg-[color:var(--color-accent-soft)]"
-                          : "border-[color:var(--color-border)] bg-[color:var(--color-surface)] hover:bg-[color:var(--color-surface-2)]"
+                          ? "border-accent-teal-ink bg-accent-teal"
+                          : "border-line bg-surface-light hover:border-line-strong"
                       }`}
                     >
                       <input
@@ -155,15 +155,15 @@ function LoginPageInner() {
                         value="email"
                         checked={identityType === "email"}
                         onChange={() => setIdentityType("email")}
-                        className="accent-[color:var(--color-accent)]"
+                        className="accent-accent-teal-ink"
                       />
-                      <span className="text-sm text-[color:var(--color-fg-default)]">Personal (email)</span>
+                      <span className="text-sm text-ink">Personal (email)</span>
                     </label>
                     <label
-                      className={`flex flex-1 cursor-pointer items-center gap-2 rounded-[var(--radius-control)] border px-3 py-2 transition ${
+                      className={`flex flex-1 cursor-pointer items-center gap-2 rounded-control border-2 px-3 py-2 transition ${
                         identityType === "domain"
-                          ? "border-[color:var(--color-primary)] bg-[color:var(--color-primary-soft)]"
-                          : "border-[color:var(--color-border)] bg-[color:var(--color-surface)] hover:bg-[color:var(--color-surface-2)]"
+                          ? "border-brand-500 bg-brand-200"
+                          : "border-line bg-surface-light hover:border-line-strong"
                       }`}
                     >
                       <input
@@ -172,9 +172,9 @@ function LoginPageInner() {
                         value="domain"
                         checked={identityType === "domain"}
                         onChange={() => setIdentityType("domain")}
-                        className="accent-[color:var(--color-primary)]"
+                        className="accent-brand-500"
                       />
-                      <span className="text-sm text-[color:var(--color-fg-default)]">Business (domain)</span>
+                      <span className="text-sm text-ink">Business (domain)</span>
                     </label>
                   </div>
 
@@ -189,14 +189,14 @@ function LoginPageInner() {
                         pattern="^[a-zA-Z0-9][a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
                         className={`${inputClass} font-mono`}
                       />
-                      <p className="mt-1.5 font-mono text-xs text-[color:var(--color-fg-muted)]">
+                      <p className="mt-1.5 font-mono text-xs text-ink-medium">
                         Your cards will be at /{domain || "yourdomain.com"}/slug.json
                       </p>
                     </div>
                   )}
 
                   {identityType === "email" && (
-                    <p className="mt-2 font-mono text-xs text-[color:var(--color-fg-muted)]">
+                    <p className="mt-2 font-mono text-xs text-ink-medium">
                       Your cards will be at /personal/{handle || "username"}/slug.json
                     </p>
                   )}
@@ -223,7 +223,7 @@ function LoginPageInner() {
             />
 
             {error && (
-              <p className="rounded-[var(--radius-control)] border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] px-4 py-2.5 text-sm text-[color:var(--color-danger)]">
+              <p className="rounded-control border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] px-4 py-2.5 text-sm text-[color:var(--color-danger)]">
                 {error}
               </p>
             )}
@@ -231,7 +231,7 @@ function LoginPageInner() {
             <button
               type="submit"
               disabled={loading}
-              className="inline-flex h-10 w-full items-center justify-center rounded-[var(--radius-control)] bg-[color:var(--color-primary)] px-4 text-sm font-medium text-white transition hover:bg-[color:var(--color-primary-hover)] disabled:opacity-60"
+              className="inline-flex w-full items-center justify-center h-9 rounded-control bg-brand-500 px-4 text-sm font-medium text-white hover:bg-brand-600 transition disabled:opacity-60"
             >
               {loading ? "…" : mode === "register" ? "Create account" : "Sign in"}
             </button>
@@ -246,7 +246,7 @@ export default function LoginPage() {
   return (
     <Suspense fallback={
       <div className="flex min-h-screen items-center justify-center">
-        <p className="text-sm text-[color:var(--color-fg-weak)]">Loading…</p>
+        <p className="text-sm text-ink-weak">Loading…</p>
       </div>
     }>
       <LoginPageInner />
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index d7bb562..ca393d0 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -23,30 +23,30 @@ export default function HomePage() {
   return (
     <>
       {/* Hero */}
-      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         <div className="max-w-3xl">
-          <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 py-1 text-xs font-medium uppercase tracking-wide text-[color:var(--color-fg-weak)]">
+          <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-line bg-surface-light px-3 py-1 text-xs font-medium uppercase tracking-wide text-ink-weak">
             Agent Card Hosting
           </div>
-          <h1 className="text-4xl font-semibold leading-tight tracking-[-0.01em] text-[color:var(--color-fg-strong)] sm:text-5xl">
+          <h1 className="font-display text-3xl sm:text-4xl font-semibold text-ink-strong leading-tight tracking-[-0.01em]">
             host your agents
             <br />
-            <span className="text-[color:var(--color-fg-weak)]">at predictable URLs</span>
+            <span className="text-ink-weak">at predictable URLs</span>
           </h1>
-          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-[color:var(--color-fg-muted)]">
+          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-ink-medium">
             host39 is a third-party A2A agent card host. Register your identity, create agent cards,
             and publish them at stable public URLs — no server required.
           </p>
           <div className="mt-8 flex flex-wrap gap-3">
             <Link
               href="/login"
-              className="inline-flex h-10 items-center rounded-[var(--radius-control)] bg-[color:var(--color-primary)] px-5 text-sm font-medium text-white shadow-[var(--shadow-sm)] transition hover:bg-[color:var(--color-primary-hover)]"
+              className="inline-flex items-center justify-center h-9 rounded-control bg-brand-500 px-4 text-sm font-medium text-white hover:bg-brand-600 transition"
             >
               Get started free
             </Link>
             <Link
               href="/dashboard"
-              className="inline-flex h-10 items-center rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-5 text-sm font-medium text-[color:var(--color-fg-default)] transition hover:bg-[color:var(--color-surface-2)] hover:border-[color:var(--color-border-strong)]"
+              className="inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-sm font-medium text-ink hover:border-line-strong transition"
             >
               Go to dashboard
             </Link>
@@ -55,11 +55,11 @@ export default function HomePage() {
       </section>
 
       {/* How it works */}
-      <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-        <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]">
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-weak">
           How it works
         </p>
-        <h2 className="mb-8 text-2xl font-semibold tracking-[-0.01em] text-[color:var(--color-fg-strong)] sm:text-3xl">
+        <h2 className="mb-8 font-display text-2xl font-bold text-ink-strong leading-tight">
           Three steps to publish your agent
         </h2>
 
@@ -81,45 +81,45 @@ export default function HomePage() {
               desc: "Your card is live at a stable public URL. Register it with the NANDA Index so resolvers can find your agent by identity.",
             },
           ].map((item) => (
-            <div
+            <article
               key={item.step}
-              className="rounded-[var(--radius-card)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] p-6 shadow-[var(--shadow-card)] transition hover:shadow-[var(--shadow-card-hover)] hover:border-[color:var(--color-border-strong)]"
+              className="bg-surface-light rounded-card border border-line/70 shadow-card p-4 hover:shadow-card-hover hover:border-line-strong transition flex flex-col h-full gap-3"
             >
-              <span className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-[color:var(--color-primary-soft)] text-xs font-semibold text-[color:var(--color-primary-deep)]">
+              <span className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-brand-200 text-xs font-semibold text-brand-800">
                 {item.step}
               </span>
-              <h3 className="mt-3 text-lg font-semibold text-[color:var(--color-fg-strong)]">{item.title}</h3>
-              <p className="mt-2 text-sm leading-relaxed text-[color:var(--color-fg-muted)]">{item.desc}</p>
-            </div>
+              <h3 className="font-semibold text-ink-strong">{item.title}</h3>
+              <p className="text-sm text-ink leading-relaxed">{item.desc}</p>
+            </article>
           ))}
         </div>
       </section>
 
       {/* URL patterns */}
-      <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-        <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]">
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-weak">
           URL patterns
         </p>
-        <h2 className="mb-8 text-2xl font-semibold tracking-[-0.01em] text-[color:var(--color-fg-strong)] sm:text-3xl">
+        <h2 className="mb-8 font-display text-2xl font-bold text-ink-strong leading-tight">
           Predictable, stable, public
         </h2>
 
         <div className="grid gap-6 sm:grid-cols-2">
-          <div className="rounded-[var(--radius-card)] border border-[color:var(--color-border-strong)] bg-[color:var(--color-primary-soft)] p-6 shadow-[var(--shadow-card)]">
-            <p className="text-xs font-semibold uppercase tracking-wide text-[color:var(--color-primary-deep)]">Business / Domain</p>
-            <code className="mt-3 block rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] p-4 font-mono text-sm text-[color:var(--color-primary-deep)]">
+          <div className="rounded-card border border-line-strong bg-brand-200 p-6 shadow-card">
+            <p className="text-xs font-bold uppercase tracking-wide text-brand-800">Business / Domain</p>
+            <code className="mt-3 block rounded-control border border-line bg-surface-light p-4 font-mono text-sm text-brand-800">
               /moonbakery.com/orders.json
             </code>
-            <p className="mt-3 text-sm leading-relaxed text-[color:var(--color-fg-muted)]">
+            <p className="mt-3 text-sm leading-relaxed text-ink-medium">
               Register with a domain identity to get clean, branded URLs for your business agents.
             </p>
           </div>
-          <div className="rounded-[var(--radius-card)] border border-[color:var(--color-border-strong)] bg-[color:var(--color-accent-soft)] p-6 shadow-[var(--shadow-card)]">
-            <p className="text-xs font-semibold uppercase tracking-wide text-[color:var(--color-accent)]">Personal / Email</p>
-            <code className="mt-3 block rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] p-4 font-mono text-sm text-[color:var(--color-accent)]">
+          <div className="rounded-card border border-line-strong bg-accent-teal p-6 shadow-card">
+            <p className="text-xs font-bold uppercase tracking-wide text-accent-teal-ink">Personal / Email</p>
+            <code className="mt-3 block rounded-control border border-line bg-surface-light p-4 font-mono text-sm text-accent-teal-ink">
               /personal/john@hotmail.com/card.json
             </code>
-            <p className="mt-3 text-sm leading-relaxed text-[color:var(--color-fg-muted)]">
+            <p className="mt-3 text-sm leading-relaxed text-ink-medium">
               Register with your email for personal agent cards — great for developers and individuals.
             </p>
           </div>
@@ -127,16 +127,16 @@ export default function HomePage() {
       </section>
 
       {/* Sample agent card */}
-      <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-        <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]">
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-weak">
           A2A Agent Card format
         </p>
-        <h2 className="mb-8 text-2xl font-semibold tracking-[-0.01em] text-[color:var(--color-fg-strong)] sm:text-3xl">
+        <h2 className="mb-8 font-display text-2xl font-bold text-ink-strong leading-tight">
           Standard JSON, served instantly
         </h2>
 
-        <div className="overflow-x-auto rounded-[var(--radius-card)] border border-[color:var(--color-border)] bg-[color:var(--color-code-bg)] p-6 shadow-[var(--shadow-card)]">
-          <pre className="font-mono text-sm leading-6 text-[color:var(--color-code-fg)]">
+        <div className="overflow-x-auto rounded-card border border-line bg-brand-800 p-6 shadow-card">
+          <pre className="font-mono text-sm leading-6 text-surface-light">
             {JSON.stringify(SAMPLE_CARD, null, 2)}
           </pre>
         </div>
diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
index 279bc98..b5528b5 100644
--- a/web/src/components/Footer.tsx
+++ b/web/src/components/Footer.tsx
@@ -1,7 +1,7 @@
 export function Footer() {
   return (
-    <footer className="border-t border-[color:var(--color-border)] bg-[color:var(--color-surface)]">
-      <div className="mx-auto flex max-w-7xl flex-col gap-2 px-4 py-6 text-xs text-[color:var(--color-fg-weak)] sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:px-8">
+    <footer className="border-t border-line bg-surface-light">
+      <div className="mx-auto flex max-w-7xl flex-col gap-2 px-4 py-6 text-xs text-ink-weak sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:px-8">
         <p>host39 — A2A Agent Card Hosting Service</p>
         <p>Predictable public URLs for AI agent discovery.</p>
       </div>
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 016cc69..37d7c3b 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -39,97 +39,102 @@ export function Header() {
   const initial = email ? email.charAt(0).toUpperCase() : "?";
 
   return (
-    <header className="sticky top-0 z-50 border-b border-[color:var(--color-border)] bg-[color:var(--color-surface)]/90 backdrop-blur-md">
-      <div className="mx-auto flex h-16 max-w-7xl items-center gap-3 px-4 sm:px-6 lg:px-8">
-        <Link href="/" className="flex min-w-0 items-center gap-3">
-          <span className="inline-flex h-8 w-10 shrink-0 items-center justify-center rounded-[var(--radius-card)] bg-[color:var(--color-primary-deep)] text-[11px] font-semibold tracking-wide text-white">
-            H39
-          </span>
-          <span className="mx-1 hidden h-6 border-l border-[color:var(--color-border)] sm:block" />
-          <span className="hidden min-w-0 flex-col sm:flex">
-            <span className="truncate text-base font-semibold text-[color:var(--color-fg-strong)] leading-tight">
-              host39
+    <header className="bg-surface-light border-b border-line sticky top-0 z-30">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex h-[60px] items-center justify-between gap-4">
+          {/* LEFT: brand */}
+          <Link
+            href="/"
+            className="flex items-center gap-3 min-w-0 rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2"
+          >
+            <span className="inline-flex h-8 w-8 items-center justify-center rounded-card bg-brand-800 text-white text-xs font-semibold tracking-wide">
+              H39
             </span>
-            <span className="truncate text-xs text-[color:var(--color-fg-weak)] leading-tight">
-              A2A agent card hosting
-            </span>
-          </span>
-        </Link>
+            <span className="hidden sm:block h-6 border-l border-line" />
+            <div className="hidden sm:flex flex-col leading-tight min-w-0">
+              <span className="font-semibold text-ink-strong truncate">host39</span>
+              <span className="text-xs text-ink-weak truncate">A2A agent card hosting</span>
+            </div>
+          </Link>
 
-        <nav className="ml-auto hidden items-center gap-6 lg:flex">
-          {navLinks.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              className="text-sm font-medium text-[color:var(--color-fg-default)] transition-colors hover:text-[color:var(--color-primary)]"
-            >
-              {item.label}
-            </Link>
-          ))}
-        </nav>
+          {/* RIGHT: nav + auth */}
+          <div className="flex items-center gap-6">
+            <nav className="hidden items-center gap-6 lg:flex">
+              {navLinks.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="text-sm font-medium text-ink-medium hover:text-brand-600"
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </nav>
 
-        <div className="hidden lg:block">
-          {email ? (
-            <div className="flex items-center gap-3">
-              <span className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-[color:var(--color-primary-soft)] text-xs font-semibold text-[color:var(--color-primary-deep)]">
-                {initial}
-              </span>
-              <Link
-                href="/dashboard"
-                className="max-w-[180px] truncate text-sm text-[color:var(--color-fg-default)] transition-colors hover:text-[color:var(--color-primary)]"
-              >
-                {email}
-              </Link>
-              <button
-                onClick={signOut}
-                className="text-xs text-[color:var(--color-fg-weak)] transition-colors hover:text-[color:var(--color-fg-default)]"
-              >
-                Sign out
-              </button>
+            <div className="hidden lg:block">
+              {email ? (
+                <div className="flex items-center gap-3">
+                  <span className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-brand-200 text-xs font-semibold text-brand-800">
+                    {initial}
+                  </span>
+                  <Link
+                    href="/dashboard"
+                    className="max-w-[180px] truncate text-sm text-ink hover:text-brand-600 transition-colors"
+                  >
+                    {email}
+                  </Link>
+                  <button
+                    onClick={signOut}
+                    className="text-xs text-ink-weak hover:text-ink transition-colors"
+                  >
+                    Sign out
+                  </button>
+                </div>
+              ) : (
+                <Link
+                  href="/login"
+                  className="inline-flex h-9 items-center rounded-control bg-brand-500 px-4 text-sm font-medium text-white hover:bg-brand-600 transition"
+                >
+                  Sign in
+                </Link>
+              )}
             </div>
-          ) : (
-            <Link
-              href="/login"
-              className="inline-flex h-9 items-center rounded-[var(--radius-control)] bg-[color:var(--color-primary)] px-4 text-sm font-medium text-white transition hover:bg-[color:var(--color-primary-hover)]"
-            >
-              Sign in
-            </Link>
-          )}
-        </div>
 
-        <details ref={detailsRef} className="relative ml-auto lg:hidden">
-          <summary className="cursor-pointer list-none rounded-[var(--radius-control)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] px-3 py-1.5 text-xs font-medium text-[color:var(--color-fg-default)]">
-            Menu
-          </summary>
-          <div className="absolute right-0 mt-2 w-56 rounded-[var(--radius-card)] border border-[color:var(--color-border)] bg-[color:var(--color-surface)] p-2 shadow-[var(--shadow-card)]">
-            {navLinks.map((item) => (
-              <Link
-                key={item.href}
-                href={item.href}
-                onClick={closeMobileMenu}
-                className="block rounded-[var(--radius-control)] px-3 py-2 text-sm text-[color:var(--color-fg-default)] transition-colors hover:bg-[color:var(--color-surface-2)] hover:text-[color:var(--color-primary)]"
-              >
-                {item.label}
-              </Link>
-            ))}
-            {email ? (
-              <button
-                onClick={() => { closeMobileMenu(); signOut(); }}
-                className="block w-full rounded-[var(--radius-control)] px-3 py-2 text-left text-sm text-[color:var(--color-fg-weak)] hover:bg-[color:var(--color-surface-2)]"
-              >
-                Sign out ({email})
-              </button>
-            ) : (
-              <Link
-                href="/login"
-                onClick={closeMobileMenu}
-                className="block rounded-[var(--radius-control)] px-3 py-2 text-sm text-[color:var(--color-fg-default)] hover:bg-[color:var(--color-surface-2)]"
-              >
-                Sign in
-              </Link>
-            )}
+            <details ref={detailsRef} className="relative lg:hidden">
+              <summary className="cursor-pointer list-none rounded-control border-2 border-line bg-surface-light px-3 py-1.5 text-xs font-medium text-ink hover:border-line-strong transition">
+                Menu
+              </summary>
+              <div className="absolute right-0 mt-2 w-56 rounded-card border border-line bg-surface-light p-2 shadow-card">
+                {navLinks.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={closeMobileMenu}
+                    className="block rounded-control px-3 py-2 text-sm text-ink hover:bg-surface-strong hover:text-brand-600 transition-colors"
+                  >
+                    {item.label}
+                  </Link>
+                ))}
+                {email ? (
+                  <button
+                    onClick={() => { closeMobileMenu(); signOut(); }}
+                    className="block w-full rounded-control px-3 py-2 text-left text-sm text-ink-weak hover:bg-surface-strong hover:text-ink"
+                  >
+                    Sign out ({email})
+                  </button>
+                ) : (
+                  <Link
+                    href="/login"
+                    onClick={closeMobileMenu}
+                    className="block rounded-control px-3 py-2 text-sm text-ink hover:bg-surface-strong hover:text-brand-600"
+                  >
+                    Sign in
+                  </Link>
+                )}
+              </div>
+            </details>
           </div>
-        </details>
+        </div>
       </div>
     </header>
   );
diff --git a/web/src/components/PageShell.tsx b/web/src/components/PageShell.tsx
index b6e1334..350e453 100644
--- a/web/src/components/PageShell.tsx
+++ b/web/src/components/PageShell.tsx
@@ -9,18 +9,18 @@ type Props = {
 
 export function PageShell({ title, description, eyebrow, children }: Props) {
   return (
-    <section className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
+    <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <div className="mb-8">
         {eyebrow && (
-          <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-[color:var(--color-fg-weak)]">
+          <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-weak">
             {eyebrow}
           </p>
         )}
-        <h1 className="text-3xl font-semibold text-[color:var(--color-fg-strong)] leading-tight tracking-[-0.01em]">
+        <h1 className="font-display text-2xl font-bold text-ink-strong leading-tight">
           {title}
         </h1>
         {description && (
-          <p className="mt-3 max-w-3xl text-sm leading-relaxed text-[color:var(--color-fg-muted)]">
+          <p className="mt-3 max-w-3xl text-sm text-ink-medium leading-relaxed">
             {description}
           </p>
         )}

From 5d7fece06dc0eaa44cced6d38f9eea00bcd91e7f Mon Sep 17 00:00:00 2001
From: Vedh Krishnan <admin@Vedhs-MacBook-Pro-2.local>
Date: Sat, 20 Jun 2026 19:11:52 -0500
Subject: [PATCH 3/4] feat(home): clone outshift Explore layout - filter
 sidebar + card grid + pagination

Replaces the home page with a pixel-faithful clone of
ai-catalog.outshift.io's Explore browse: "Explore" h2 heading,
lg:w-64 left filter sidebar (SEARCH + checkbox sections + tags)
on bg-surface-strong, grid gap-4 sm:grid-cols-1 md:grid-cols-2
xl:grid-cols-3 of <article> cards using outshift's exact class
string, and the pagination nav (rounded-full pills for page
numbers, border-2 secondary buttons for Previous/Next).

Cards populated with 12 seed cards so the page renders
end-to-end without a backend. SEARCH + checkbox filters work
client-side. Header gets a "12 + cards hosted" counter
on the right matching outshift's "X AI cards indexed" chip.

Prior marketing content moved to /about so it remains reachable.
---
 web/src/app/about/page.tsx               | 146 ++++++
 web/src/app/dashboard/cards/new/page.tsx |  20 +-
 web/src/app/globals.css                  |   8 +-
 web/src/app/layout.tsx                   |   4 +-
 web/src/app/page.tsx                     | 602 ++++++++++++++++++-----
 web/src/components/Footer.tsx            |   2 +-
 web/src/components/Header.tsx            |  14 +-
 7 files changed, 646 insertions(+), 150 deletions(-)
 create mode 100644 web/src/app/about/page.tsx

diff --git a/web/src/app/about/page.tsx b/web/src/app/about/page.tsx
new file mode 100644
index 0000000..d4f6a17
--- /dev/null
+++ b/web/src/app/about/page.tsx
@@ -0,0 +1,146 @@
+import Link from "next/link";
+
+const SAMPLE_CARD = {
+  name: "Moon Bakery Orders Agent",
+  description: "Place and track orders at Moon Bakery.",
+  url: "https://moonbakery-orders.aws.example.com",
+  version: "1.0",
+  capabilities: { streaming: false, pushNotifications: false },
+  authentication: { schemes: ["Bearer"] },
+  skills: [
+    { name: "placeOrder", description: "Place a new bakery order" },
+    { name: "trackOrder", description: "Track an existing order status" },
+  ],
+  provider: { organization: "Moon Bakery", url: "https://moonbakery.com" },
+  _meta: {
+    identifier: "urn:ai:domain:moonbakery.com:agent:orders",
+    publicUrl: "https://agentcards.host39.org/moonbakery.com/orders.json",
+    hostedBy: "host39.org",
+  },
+};
+
+export default function AboutPage() {
+  return (
+    <>
+      {/* Hero */}
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div className="max-w-3xl">
+          <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-line bg-surface-light px-3 py-1 text-xs font-medium uppercase tracking-wide text-ink-weak">
+            Agent Card Hosting
+          </div>
+          <h1 className="font-display text-3xl sm:text-4xl font-semibold text-ink-strong leading-tight tracking-[-0.01em]">
+            host your agents
+            <br />
+            <span className="text-ink-weak">at predictable URLs</span>
+          </h1>
+          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-ink-medium">
+            host39 is a third-party A2A agent card host. Register your identity, create agent cards,
+            and publish them at stable public URLs - no server required.
+          </p>
+          <div className="mt-8 flex flex-wrap gap-3">
+            <Link
+              href="/login"
+              className="inline-flex items-center justify-center h-9 rounded-control bg-brand-500 px-4 text-sm font-medium text-white hover:bg-brand-600 transition"
+            >
+              Get started free
+            </Link>
+            <Link
+              href="/dashboard"
+              className="inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-sm font-medium text-ink hover:border-line-strong transition"
+            >
+              Go to dashboard
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* How it works */}
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-weak">
+          How it works
+        </p>
+        <h2 className="mb-8 font-display text-2xl font-bold text-ink-strong leading-tight">
+          Three steps to publish your agent
+        </h2>
+
+        <div className="grid gap-6 sm:grid-cols-3">
+          {[
+            {
+              step: "01",
+              title: "Register",
+              desc: "Create an account with your email or a domain identity (for businesses). Domain users get URLs like /moonbakery.com/orders.json.",
+            },
+            {
+              step: "02",
+              title: "Create a card",
+              desc: "Fill in your agent name, runtime URL, capabilities, authentication, and skills using our guided form.",
+            },
+            {
+              step: "03",
+              title: "Share the URL",
+              desc: "Your card is live at a stable public URL. Register it with the NANDA Index so resolvers can find your agent by identity.",
+            },
+          ].map((item) => (
+            <article
+              key={item.step}
+              className="bg-surface-light rounded-card border border-line/70 shadow-card p-4 hover:shadow-card-hover hover:border-line-strong transition flex flex-col h-full gap-3"
+            >
+              <span className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-brand-200 text-xs font-semibold text-brand-800">
+                {item.step}
+              </span>
+              <h3 className="font-semibold text-ink-strong">{item.title}</h3>
+              <p className="text-sm text-ink leading-relaxed">{item.desc}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      {/* URL patterns */}
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-weak">
+          URL patterns
+        </p>
+        <h2 className="mb-8 font-display text-2xl font-bold text-ink-strong leading-tight">
+          Predictable, stable, public
+        </h2>
+
+        <div className="grid gap-6 sm:grid-cols-2">
+          <div className="rounded-card border border-line-strong bg-brand-200 p-6 shadow-card">
+            <p className="text-xs font-bold uppercase tracking-wide text-brand-800">Business / Domain</p>
+            <code className="mt-3 block rounded-control border border-line bg-surface-light p-4 font-mono text-sm text-brand-800">
+              /moonbakery.com/orders.json
+            </code>
+            <p className="mt-3 text-sm leading-relaxed text-ink-medium">
+              Register with a domain identity to get clean, branded URLs for your business agents.
+            </p>
+          </div>
+          <div className="rounded-card border border-line-strong bg-accent-teal p-6 shadow-card">
+            <p className="text-xs font-bold uppercase tracking-wide text-accent-teal-ink">Personal / Email</p>
+            <code className="mt-3 block rounded-control border border-line bg-surface-light p-4 font-mono text-sm text-accent-teal-ink">
+              /personal/john@hotmail.com/card.json
+            </code>
+            <p className="mt-3 text-sm leading-relaxed text-ink-medium">
+              Register with your email for personal agent cards - great for developers and individuals.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Sample agent card */}
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-weak">
+          A2A Agent Card format
+        </p>
+        <h2 className="mb-8 font-display text-2xl font-bold text-ink-strong leading-tight">
+          Standard JSON, served instantly
+        </h2>
+
+        <div className="overflow-x-auto rounded-card border border-line bg-brand-800 p-6 shadow-card">
+          <pre className="font-mono text-sm leading-6 text-surface-light">
+            {JSON.stringify(SAMPLE_CARD, null, 2)}
+          </pre>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/web/src/app/dashboard/cards/new/page.tsx b/web/src/app/dashboard/cards/new/page.tsx
index 2cb80e5..f2e0393 100644
--- a/web/src/app/dashboard/cards/new/page.tsx
+++ b/web/src/app/dashboard/cards/new/page.tsx
@@ -70,15 +70,15 @@ function ctx(me: Me | null) {
     isSmb,
     slugPlaceholder:    isSmb ? "orders"                          : "agent",
     slugHint:           isSmb
-      ? 'Short name for this specific agent — e.g. "orders", "support", "tracking".'
-      : 'A simple identifier for your card — e.g. "agent", "assistant".',
+      ? 'Short name for this specific agent - e.g. "orders", "support", "tracking".'
+      : 'A simple identifier for your card - e.g. "agent", "assistant".',
     runtimePlaceholder: isSmb ? "https://my-agent.aws.example.com" : "https://my-agent.railway.app",
     runtimeHint:        isSmb
       ? "The A2A endpoint where your business agent runs (AWS, Azure, GCP, etc.)."
       : "Where your personal agent is hosted (Railway, Vercel, Render, etc.). Optional.",
     providerHint:       isSmb
-      ? "Your company name and website — pre-filled from your registered domain."
-      : "Optional — leave blank if you are the provider.",
+      ? "Your company name and website - pre-filled from your registered domain."
+      : "Optional - leave blank if you are the provider.",
     authHint:           isSmb
       ? "How callers must authenticate to use this agent."
       : "Personal agents usually require user consent or no auth for public actions.",
@@ -329,7 +329,7 @@ export default function NewCardPage() {
     >
       <div className="max-w-lg space-y-5">
 
-        {/* Identity badge — always visible */}
+        {/* Identity badge - always visible */}
         {me && <IdentityBadge me={me} slug={form.slug} />}
 
         <div className={infoCardClass}>
@@ -458,7 +458,7 @@ export default function NewCardPage() {
                 </span>
                 <select value={form.authScheme} onChange={(e) => set("authScheme", e.target.value)}
                   className={inputClass}>
-                  <option value="none">None — public access</option>
+                  <option value="none">None - public access</option>
                   <option value="Bearer">Bearer token</option>
                   <option value="OAuth2">OAuth 2.0</option>
                   <option value="ApiKey">API key</option>
@@ -513,10 +513,10 @@ export default function NewCardPage() {
                 {[
                   { label: "Slug",               value: form.slug,                           mono: true  },
                   { label: "Display name",        value: form.display_name,                   mono: false },
-                  { label: "Description",         value: form.description || "—",             mono: false },
-                  { label: "Runtime URL",         value: form.runtime_url || "—",             mono: true  },
-                  { label: "Provider",            value: form.provider_name || "—",           mono: false },
-                  { label: "Provider URL",        value: form.provider_url || "—",            mono: true  },
+                  { label: "Description",         value: form.description || "-",             mono: false },
+                  { label: "Runtime URL",         value: form.runtime_url || "-",             mono: true  },
+                  { label: "Provider",            value: form.provider_name || "-",           mono: false },
+                  { label: "Provider URL",        value: form.provider_url || "-",            mono: true  },
                   { label: "Version",             value: form.version,                        mono: true  },
                   { label: "Streaming",           value: form.streaming ? "Yes" : "No",       mono: false },
                   { label: "Push notifications",  value: form.pushNotifications ? "Yes" : "No", mono: false },
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 00ef77b..0baddf2 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -37,7 +37,7 @@
   --font-display: var(--font-display);
   --font-mono: var(--font-mono);
 
-  /* Radii — only two matter */
+  /* Radii - only two matter */
   --radius-card: var(--radius-card);
   --radius-control: var(--radius-control);
 
@@ -101,7 +101,7 @@
   --radius-card:    8px;
   --radius-control: 4px;
 
-  /* ── Aliases — keep my prior token names resolving to outshift values ── */
+  /* ── Aliases - keep my prior token names resolving to outshift values ── */
 
   --color-bg: var(--color-surface);
   --color-bg-light: var(--color-surface-light);
@@ -128,7 +128,7 @@
   --color-success: var(--color-accent-teal-ink);
   --color-success-soft: var(--color-accent-teal);
 
-  /* Warning / danger — not in outshift's set; keep prior values so existing
+  /* Warning / danger - not in outshift's set; keep prior values so existing
      code paths don't break visually. */
   --color-warning: #8a5a06;
   --color-warning-soft: #fdeccc;
@@ -138,7 +138,7 @@
   --color-code-bg: var(--color-brand-800);
   --color-code-fg: var(--color-surface-light);
 
-  /* Legacy nanda aliases — already in place from prior restyle */
+  /* Legacy nanda aliases - already in place from prior restyle */
   --page-bg: var(--color-surface);
   --panel: var(--color-surface-light);
   --border: var(--color-line);
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 324e436..631e2ad 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -12,12 +12,12 @@ const inter = Inter({
 });
 
 export const metadata: Metadata = {
-  title: "host39 — A2A Agent Card Hosting",
+  title: "host39 - A2A Agent Card Hosting",
   description:
     "Host your A2A agent cards at predictable public URLs. No server required.",
   metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL ?? "https://host39.org"),
   openGraph: {
-    title: "host39 — A2A Agent Card Hosting",
+    title: "host39 - A2A Agent Card Hosting",
     description:
       "Host your A2A agent cards at predictable public URLs. No server required.",
     type: "website",
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index ca393d0..7138f53 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -1,146 +1,490 @@
-import Link from "next/link";
-
-const SAMPLE_CARD = {
-  name: "Moon Bakery Orders Agent",
-  description: "Place and track orders at Moon Bakery.",
-  url: "https://moonbakery-orders.aws.example.com",
-  version: "1.0",
-  capabilities: { streaming: false, pushNotifications: false },
-  authentication: { schemes: ["Bearer"] },
-  skills: [
-    { name: "placeOrder", description: "Place a new bakery order" },
-    { name: "trackOrder", description: "Track an existing order status" },
-  ],
-  provider: { organization: "Moon Bakery", url: "https://moonbakery.com" },
-  _meta: {
+"use client";
+
+import { useMemo, useState } from "react";
+
+type SeedCard = {
+  id: string;
+  name: string;
+  type: "Business" | "Personal";
+  version: string;
+  date: string;
+  identifier: string;
+  description: string;
+  tags: string[];
+  verified: boolean;
+  typeBadge: "BUSINESS" | "PERSONAL";
+};
+
+const SEED_CARDS: SeedCard[] = [
+  {
+    id: "moonbakery-orders",
+    name: "moonbakery.com/orders",
+    type: "Business",
+    version: "Business",
+    date: "6/20/2026",
     identifier: "urn:ai:domain:moonbakery.com:agent:orders",
-    publicUrl: "https://agentcards.host39.org/moonbakery.com/orders.json",
-    hostedBy: "host39.org",
+    description:
+      "Place and track orders at Moon Bakery. Runtime hosted at time.moonbakery39.com with bearer-token auth.",
+    tags: ["food", "orders"],
+    verified: true,
+    typeBadge: "BUSINESS",
   },
-};
+  {
+    id: "brewlab-orders",
+    name: "brewlab.coffee/orders",
+    type: "Business",
+    version: "Business",
+    date: "6/18/2026",
+    identifier: "urn:ai:domain:brewlab.coffee:agent:orders",
+    description:
+      "Order specialty roasts and schedule pickup from BrewLab Coffee's flagship roastery.",
+    tags: ["food", "coffee", "orders"],
+    verified: false,
+    typeBadge: "BUSINESS",
+  },
+  {
+    id: "fitzone-memberships",
+    name: "fitzone.fit/memberships",
+    type: "Business",
+    version: "Business",
+    date: "6/17/2026",
+    identifier: "urn:ai:domain:fitzone.fit:agent:memberships",
+    description:
+      "Manage FitZone gym memberships, class bookings, and personal-training schedules.",
+    tags: ["fitness", "memberships"],
+    verified: false,
+    typeBadge: "BUSINESS",
+  },
+  {
+    id: "sunrisetours-booking",
+    name: "sunrisetours.com/booking",
+    type: "Business",
+    version: "Business",
+    date: "6/15/2026",
+    identifier: "urn:ai:domain:sunrisetours.com:agent:booking",
+    description:
+      "Book guided tours and excursions worldwide through Sunrise Tours' verified booking agent.",
+    tags: ["travel", "booking"],
+    verified: true,
+    typeBadge: "BUSINESS",
+  },
+  {
+    id: "personal-priya",
+    name: "personal/priya/agent",
+    type: "Personal",
+    version: "Personal",
+    date: "6/14/2026",
+    identifier: "urn:ai:email:priya@gmail.com:agent:default",
+    description:
+      "Priya's personal scheduling and contact assistant - reachable for collaboration requests.",
+    tags: ["individual"],
+    verified: false,
+    typeBadge: "PERSONAL",
+  },
+  {
+    id: "personal-ankit-dev",
+    name: "personal/ankit-dev/agent",
+    type: "Personal",
+    version: "Personal",
+    date: "6/13/2026",
+    identifier: "urn:ai:email:ankit@nasiko.com:agent:dev",
+    description:
+      "Ankit's developer agent - exposes code-review and pair-programming skills for trusted peers.",
+    tags: ["dev", "individual"],
+    verified: false,
+    typeBadge: "PERSONAL",
+  },
+  {
+    id: "personal-sara",
+    name: "personal/sara/card",
+    type: "Personal",
+    version: "Personal",
+    date: "6/12/2026",
+    identifier: "urn:ai:email:sara@outlook.com:agent:card",
+    description:
+      "Sara's portfolio agent - surfaces design case studies and routes new-project inquiries.",
+    tags: ["design", "individual"],
+    verified: false,
+    typeBadge: "PERSONAL",
+  },
+  {
+    id: "travel26-contact",
+    name: "travel26.net/contact",
+    type: "Business",
+    version: "Business",
+    date: "6/11/2026",
+    identifier: "urn:ai:domain:travel26.net:agent:contact",
+    description:
+      "Front-desk concierge for Travel26 - routes contact requests to flights, hotels, and tours.",
+    tags: ["travel", "contact"],
+    verified: false,
+    typeBadge: "BUSINESS",
+  },
+  {
+    id: "medicore-intake",
+    name: "medicore.health/intake",
+    type: "Business",
+    version: "Business",
+    date: "6/10/2026",
+    identifier: "urn:ai:domain:medicore.health:agent:intake",
+    description:
+      "Patient-intake assistant for Medicore clinics - collects symptoms and books appointments.",
+    tags: ["health"],
+    verified: true,
+    typeBadge: "BUSINESS",
+  },
+  {
+    id: "nasiko-projects",
+    name: "nasiko.com/projects",
+    type: "Business",
+    version: "Business",
+    date: "6/9/2026",
+    identifier: "urn:ai:domain:nasiko.com:agent:projects",
+    description:
+      "Project-status assistant for Nasiko engineering - answers questions about active sprints.",
+    tags: ["dev", "projects"],
+    verified: false,
+    typeBadge: "BUSINESS",
+  },
+  {
+    id: "bayareacats-adoption",
+    name: "bayareacats.org/adoption",
+    type: "Business",
+    version: "Business",
+    date: "6/8/2026",
+    identifier: "urn:ai:domain:bayareacats.org:agent:adoption",
+    description:
+      "Browse adoptable cats in the Bay Area and start an adoption application with a volunteer.",
+    tags: ["nonprofit"],
+    verified: true,
+    typeBadge: "BUSINESS",
+  },
+  {
+    id: "pivotpoint-scheduling",
+    name: "pivotpoint.co/scheduling",
+    type: "Business",
+    version: "Business",
+    date: "6/7/2026",
+    identifier: "urn:ai:domain:pivotpoint.co:agent:scheduling",
+    description:
+      "Operations-scheduling agent for PivotPoint - coordinates shifts and resource bookings.",
+    tags: ["ops"],
+    verified: false,
+    typeBadge: "BUSINESS",
+  },
+];
+
+const IDENTITY_OPTIONS = ["Business", "Personal"] as const;
+const STATUS_OPTIONS = ["Active", "Inactive"] as const;
+const TAG_OPTIONS = [
+  "food",
+  "coffee",
+  "travel",
+  "fitness",
+  "dev",
+  "design",
+  "individual",
+];
+
+const PAGE_SIZE = 6;
 
 export default function HomePage() {
+  const [search, setSearch] = useState("");
+  const [identityFilter, setIdentityFilter] = useState<string[]>([]);
+  const [statusFilter, setStatusFilter] = useState<string[]>([]);
+  const [tagFilter, setTagFilter] = useState<string[]>([]);
+  const [page, setPage] = useState(1);
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return SEED_CARDS.filter((c) => {
+      if (q && !c.name.toLowerCase().includes(q) && !c.identifier.toLowerCase().includes(q)) {
+        return false;
+      }
+      if (identityFilter.length > 0 && !identityFilter.includes(c.type)) return false;
+      if (tagFilter.length > 0 && !c.tags.some((t) => tagFilter.includes(t))) return false;
+      // STATUS is decorative for seed data - all cards treated as "Active"; only filter if Inactive is the only selection
+      if (statusFilter.length > 0 && !statusFilter.includes("Active")) return false;
+      return true;
+    });
+  }, [search, identityFilter, statusFilter, tagFilter]);
+
+  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+  const currentPage = Math.min(page, totalPages);
+  const pageStart = (currentPage - 1) * PAGE_SIZE;
+  const pageCards = filtered.slice(pageStart, pageStart + PAGE_SIZE);
+
+  function toggle(list: string[], value: string, setter: (next: string[]) => void) {
+    if (list.includes(value)) {
+      setter(list.filter((v) => v !== value));
+    } else {
+      setter([...list, value]);
+    }
+    setPage(1);
+  }
+
   return (
-    <>
-      {/* Hero */}
-      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
-        <div className="max-w-3xl">
-          <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-line bg-surface-light px-3 py-1 text-xs font-medium uppercase tracking-wide text-ink-weak">
-            Agent Card Hosting
-          </div>
-          <h1 className="font-display text-3xl sm:text-4xl font-semibold text-ink-strong leading-tight tracking-[-0.01em]">
-            host your agents
-            <br />
-            <span className="text-ink-weak">at predictable URLs</span>
-          </h1>
-          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-ink-medium">
-            host39 is a third-party A2A agent card host. Register your identity, create agent cards,
-            and publish them at stable public URLs — no server required.
-          </p>
-          <div className="mt-8 flex flex-wrap gap-3">
-            <Link
-              href="/login"
-              className="inline-flex items-center justify-center h-9 rounded-control bg-brand-500 px-4 text-sm font-medium text-white hover:bg-brand-600 transition"
-            >
-              Get started free
-            </Link>
-            <Link
-              href="/dashboard"
-              className="inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-sm font-medium text-ink hover:border-line-strong transition"
-            >
-              Go to dashboard
-            </Link>
+    <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="mb-6">
+        <h2 className="font-display text-2xl font-bold text-ink-strong leading-tight">Explore</h2>
+        <p className="mt-1 text-sm text-ink-medium max-w-3xl">
+          Browse the secure directory of A2A agent cards hosted on host39.
+        </p>
+      </div>
+
+      <div className="flex flex-col lg:flex-row gap-6">
+        <FilterSidebar
+          search={search}
+          onSearch={(v) => {
+            setSearch(v);
+            setPage(1);
+          }}
+          identity={identityFilter}
+          onToggleIdentity={(v) => toggle(identityFilter, v, setIdentityFilter)}
+          status={statusFilter}
+          onToggleStatus={(v) => toggle(statusFilter, v, setStatusFilter)}
+          tags={tagFilter}
+          onToggleTag={(v) => toggle(tagFilter, v, setTagFilter)}
+        />
+
+        <div className="flex-1 min-w-0">
+          <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
+            {pageCards.map((card) => (
+              <AgentCard key={card.id} card={card} />
+            ))}
           </div>
+
+          {pageCards.length === 0 && (
+            <div className="rounded-card border border-line bg-surface-light p-8 text-center text-sm text-ink-medium">
+              No hosted cards match your filters.
+            </div>
+          )}
+
+          <Pagination
+            page={currentPage}
+            total={totalPages}
+            onPage={(p) => setPage(p)}
+          />
         </div>
-      </section>
+      </div>
+    </main>
+  );
+}
 
-      {/* How it works */}
-      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-weak">
-          How it works
-        </p>
-        <h2 className="mb-8 font-display text-2xl font-bold text-ink-strong leading-tight">
-          Three steps to publish your agent
-        </h2>
-
-        <div className="grid gap-6 sm:grid-cols-3">
-          {[
-            {
-              step: "01",
-              title: "Register",
-              desc: "Create an account with your email or a domain identity (for businesses). Domain users get URLs like /moonbakery.com/orders.json.",
-            },
-            {
-              step: "02",
-              title: "Create a card",
-              desc: "Fill in your agent name, runtime URL, capabilities, authentication, and skills using our guided form.",
-            },
-            {
-              step: "03",
-              title: "Share the URL",
-              desc: "Your card is live at a stable public URL. Register it with the NANDA Index so resolvers can find your agent by identity.",
-            },
-          ].map((item) => (
-            <article
-              key={item.step}
-              className="bg-surface-light rounded-card border border-line/70 shadow-card p-4 hover:shadow-card-hover hover:border-line-strong transition flex flex-col h-full gap-3"
-            >
-              <span className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-brand-200 text-xs font-semibold text-brand-800">
-                {item.step}
-              </span>
-              <h3 className="font-semibold text-ink-strong">{item.title}</h3>
-              <p className="text-sm text-ink leading-relaxed">{item.desc}</p>
-            </article>
-          ))}
+function FilterSidebar(props: {
+  search: string;
+  onSearch: (v: string) => void;
+  identity: string[];
+  onToggleIdentity: (v: string) => void;
+  status: string[];
+  onToggleStatus: (v: string) => void;
+  tags: string[];
+  onToggleTag: (v: string) => void;
+}) {
+  return (
+    <aside className="lg:w-64 flex-shrink-0">
+      <div className="bg-surface-strong rounded-card border border-line p-4 space-y-5 sticky top-24 max-h-[calc(100vh-7rem)] flex flex-col overflow-hidden">
+        <div className="flex-shrink-0">
+          <label
+            htmlFor="search"
+            className="block text-xs font-semibold uppercase tracking-wide text-ink-medium mb-1.5"
+          >
+            Search
+          </label>
+          <input
+            type="text"
+            id="search"
+            value={props.search}
+            onChange={(e) => props.onSearch(e.target.value)}
+            placeholder="Filter by domain or handle..."
+            className="w-full rounded-control border-2 border-line bg-surface-light px-3 py-2 text-sm text-ink placeholder:text-ink-weak focus:outline-none focus:border-brand-500"
+          />
         </div>
-      </section>
 
-      {/* URL patterns */}
-      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-weak">
-          URL patterns
-        </p>
-        <h2 className="mb-8 font-display text-2xl font-bold text-ink-strong leading-tight">
-          Predictable, stable, public
-        </h2>
-
-        <div className="grid gap-6 sm:grid-cols-2">
-          <div className="rounded-card border border-line-strong bg-brand-200 p-6 shadow-card">
-            <p className="text-xs font-bold uppercase tracking-wide text-brand-800">Business / Domain</p>
-            <code className="mt-3 block rounded-control border border-line bg-surface-light p-4 font-mono text-sm text-brand-800">
-              /moonbakery.com/orders.json
-            </code>
-            <p className="mt-3 text-sm leading-relaxed text-ink-medium">
-              Register with a domain identity to get clean, branded URLs for your business agents.
-            </p>
+        <div className="flex-shrink-0">
+          <span className="block text-xs font-semibold uppercase tracking-wide text-ink-medium mb-2">
+            Identity
+          </span>
+          <div className="space-y-1.5">
+            {IDENTITY_OPTIONS.map((opt) => (
+              <label
+                key={opt}
+                className="flex items-center gap-2 text-sm text-ink cursor-pointer"
+              >
+                <input
+                  type="checkbox"
+                  checked={props.identity.includes(opt)}
+                  onChange={() => props.onToggleIdentity(opt)}
+                  className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
+                />
+                <span>{opt}</span>
+              </label>
+            ))}
           </div>
-          <div className="rounded-card border border-line-strong bg-accent-teal p-6 shadow-card">
-            <p className="text-xs font-bold uppercase tracking-wide text-accent-teal-ink">Personal / Email</p>
-            <code className="mt-3 block rounded-control border border-line bg-surface-light p-4 font-mono text-sm text-accent-teal-ink">
-              /personal/john@hotmail.com/card.json
-            </code>
-            <p className="mt-3 text-sm leading-relaxed text-ink-medium">
-              Register with your email for personal agent cards — great for developers and individuals.
-            </p>
+        </div>
+
+        <div className="flex-shrink-0">
+          <span className="block text-xs font-semibold uppercase tracking-wide text-ink-medium mb-2">
+            Status
+          </span>
+          <div className="space-y-1.5">
+            {STATUS_OPTIONS.map((opt) => (
+              <label
+                key={opt}
+                className="flex items-center gap-2 text-sm text-ink cursor-pointer"
+              >
+                <input
+                  type="checkbox"
+                  checked={props.status.includes(opt)}
+                  onChange={() => props.onToggleStatus(opt)}
+                  className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
+                />
+                <span>{opt}</span>
+              </label>
+            ))}
           </div>
         </div>
-      </section>
 
-      {/* Sample agent card */}
-      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-weak">
-          A2A Agent Card format
-        </p>
-        <h2 className="mb-8 font-display text-2xl font-bold text-ink-strong leading-tight">
-          Standard JSON, served instantly
-        </h2>
-
-        <div className="overflow-x-auto rounded-card border border-line bg-brand-800 p-6 shadow-card">
-          <pre className="font-mono text-sm leading-6 text-surface-light">
-            {JSON.stringify(SAMPLE_CARD, null, 2)}
-          </pre>
+        <div className="flex-1 min-h-0 flex flex-col">
+          <span className="block text-xs font-semibold uppercase tracking-wide text-ink-medium mb-2">
+            Tags
+          </span>
+          <div className="flex-1 overflow-y-auto space-y-1.5 pr-1">
+            {TAG_OPTIONS.map((tag) => (
+              <label
+                key={tag}
+                className="flex items-center gap-2 text-sm text-ink cursor-pointer"
+              >
+                <input
+                  type="checkbox"
+                  checked={props.tags.includes(tag)}
+                  onChange={() => props.onToggleTag(tag)}
+                  className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
+                />
+                <span className="truncate">{tag}</span>
+              </label>
+            ))}
+          </div>
         </div>
-      </section>
-    </>
+      </div>
+    </aside>
+  );
+}
+
+function AgentCard({ card }: { card: SeedCard }) {
+  return (
+    <article
+      className="bg-surface-light rounded-card border border-line/70 shadow-card p-4 hover:shadow-card-hover hover:border-line-strong transition cursor-pointer flex flex-col h-full gap-3"
+      role="button"
+      tabIndex={0}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="flex items-center gap-1.5 min-w-0">
+            <h3 className="font-semibold text-ink-strong truncate">{card.name}</h3>
+            {card.verified && (
+              <span className="inline-flex flex-shrink-0" title="Verified">
+                <svg
+                  className="w-4 h-4 text-brand-500"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </span>
+            )}
+          </div>
+          <div className="mt-0.5 text-xs text-ink-weak">
+            Version {card.version} • {card.date}
+          </div>
+        </div>
+        {card.typeBadge && (
+          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-[#fdeccc] text-[#8a5a06] flex-shrink-0">
+            {card.typeBadge}
+          </span>
+        )}
+      </div>
+      <p className="text-sm text-ink line-clamp-2 leading-relaxed">{card.description}</p>
+      <div className="flex flex-wrap gap-1.5 mt-auto">
+        {card.tags.slice(0, 4).map((t) => (
+          <span
+            key={t}
+            className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-surface-tag text-ink"
+          >
+            {t}
+          </span>
+        ))}
+      </div>
+    </article>
+  );
+}
+
+function Pagination({
+  page,
+  total,
+  onPage,
+}: {
+  page: number;
+  total: number;
+  onPage: (p: number) => void;
+}) {
+  const pages: (number | "...")[] = [];
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) pages.push(i);
+  } else {
+    pages.push(1);
+    if (page > 3) pages.push("...");
+    const start = Math.max(2, page - 1);
+    const end = Math.min(total - 1, page + 1);
+    for (let i = start; i <= end; i++) pages.push(i);
+    if (page < total - 2) pages.push("...");
+    pages.push(total);
+  }
+
+  return (
+    <nav className="flex items-center justify-center gap-2 mt-6 pb-4">
+      <button
+        type="button"
+        onClick={() => onPage(Math.max(1, page - 1))}
+        disabled={page === 1}
+        className="px-3 py-1.5 text-sm font-medium rounded text-ink border-2 border-line bg-surface-light hover:border-line-strong disabled:opacity-40 disabled:cursor-not-allowed transition"
+      >
+        Previous
+      </button>
+      <div className="flex items-center gap-1">
+        {pages.map((p, i) =>
+          p === "..." ? (
+            <span key={`e-${i}`} className="px-2 py-1 text-sm text-ink-weak">
+              ...
+            </span>
+          ) : (
+            <button
+              key={p}
+              type="button"
+              onClick={() => onPage(p)}
+              className={`min-w-9 h-9 px-2 text-sm font-medium rounded-full transition ${
+                p === page
+                  ? "bg-brand-500 text-white"
+                  : "text-ink hover:bg-surface-strong"
+              }`}
+            >
+              {p}
+            </button>
+          )
+        )}
+      </div>
+      <button
+        type="button"
+        onClick={() => onPage(Math.min(total, page + 1))}
+        disabled={page === total}
+        className="px-3 py-1.5 text-sm font-medium rounded text-ink border-2 border-line bg-surface-light hover:border-line-strong disabled:opacity-40 disabled:cursor-not-allowed transition"
+      >
+        Next
+      </button>
+    </nav>
   );
 }
diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
index b5528b5..143f516 100644
--- a/web/src/components/Footer.tsx
+++ b/web/src/components/Footer.tsx
@@ -2,7 +2,7 @@ export function Footer() {
   return (
     <footer className="border-t border-line bg-surface-light">
       <div className="mx-auto flex max-w-7xl flex-col gap-2 px-4 py-6 text-xs text-ink-weak sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:px-8">
-        <p>host39 — A2A Agent Card Hosting Service</p>
+        <p>host39 - A2A Agent Card Hosting Service</p>
         <p>Predictable public URLs for AI agent discovery.</p>
       </div>
     </footer>
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 37d7c3b..74963f9 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -32,7 +32,8 @@ export function Header() {
   }
 
   const navLinks = [
-    { href: "/", label: "Home" },
+    { href: "/", label: "Explore" },
+    { href: "/about", label: "About" },
     { href: "/dashboard", label: "Dashboard" },
   ];
 
@@ -40,8 +41,8 @@ export function Header() {
 
   return (
     <header className="bg-surface-light border-b border-line sticky top-0 z-30">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex h-[60px] items-center justify-between gap-4">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
+        <div className="flex items-center justify-between gap-4">
           {/* LEFT: brand */}
           <Link
             href="/"
@@ -57,7 +58,7 @@ export function Header() {
             </div>
           </Link>
 
-          {/* RIGHT: nav + auth */}
+          {/* RIGHT: nav + counter + auth */}
           <div className="flex items-center gap-6">
             <nav className="hidden items-center gap-6 lg:flex">
               {navLinks.map((item) => (
@@ -71,6 +72,11 @@ export function Header() {
               ))}
             </nav>
 
+            <div className="hidden md:flex flex-col items-end leading-tight">
+              <span className="text-base font-bold text-ink-strong">12 + cards hosted</span>
+              <span className="text-xs text-ink-weak">Indexed</span>
+            </div>
+
             <div className="hidden lg:block">
               {email ? (
                 <div className="flex items-center gap-3">

From e4a72af89459f4a77631f72bdb29b93655cb8fc9 Mon Sep 17 00:00:00 2001
From: Vedh Krishnan <admin@Vedhs-MacBook-Pro-2.local>
Date: Sat, 20 Jun 2026 19:43:56 -0500
Subject: [PATCH 4/4] feat(home): wire Explore clone to real catalog data from
 the repo API

Drops the local SEED array. Home page now fetches via the new
listPublicCards helper in web/src/lib/api.ts against
NEXT_PUBLIC_HOST39_CARDS_URL (defaults to the production
https://agentcards.host39.org for dev). Maps each real catalog
entry to the outshift card shape; sidebar IDENTITY, STATUS and
TAGS sections derive their options from the live data. Loading
state shows 6 skeleton cards; empty and error states render a
single centered status card with no fake fallback content.
---
 .claude/launch.json           |  12 +
 web/src/app/page.tsx          | 457 ++++++++++++++++------------------
 web/src/components/Header.tsx |   2 +-
 web/src/lib/api.ts            |  37 ++-
 4 files changed, 268 insertions(+), 240 deletions(-)
 create mode 100644 .claude/launch.json

diff --git a/.claude/launch.json b/.claude/launch.json
new file mode 100644
index 0000000..9bac67e
--- /dev/null
+++ b/.claude/launch.json
@@ -0,0 +1,12 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "host39-web",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev", "--", "--port", "3107"],
+      "cwd": "web",
+      "port": 3107
+    }
+  ]
+}
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 7138f53..6189ee7 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { listPublicCards, type PublicCatalogEntry } from "@/lib/api";
 
-type SeedCard = {
+type Card = {
   id: string;
   name: string;
   type: "Business" | "Personal";
@@ -13,180 +14,46 @@ type SeedCard = {
   tags: string[];
   verified: boolean;
   typeBadge: "BUSINESS" | "PERSONAL";
+  status: "Active";
 };
 
-const SEED_CARDS: SeedCard[] = [
-  {
-    id: "moonbakery-orders",
-    name: "moonbakery.com/orders",
-    type: "Business",
-    version: "Business",
-    date: "6/20/2026",
-    identifier: "urn:ai:domain:moonbakery.com:agent:orders",
-    description:
-      "Place and track orders at Moon Bakery. Runtime hosted at time.moonbakery39.com with bearer-token auth.",
-    tags: ["food", "orders"],
-    verified: true,
-    typeBadge: "BUSINESS",
-  },
-  {
-    id: "brewlab-orders",
-    name: "brewlab.coffee/orders",
-    type: "Business",
-    version: "Business",
-    date: "6/18/2026",
-    identifier: "urn:ai:domain:brewlab.coffee:agent:orders",
-    description:
-      "Order specialty roasts and schedule pickup from BrewLab Coffee's flagship roastery.",
-    tags: ["food", "coffee", "orders"],
-    verified: false,
-    typeBadge: "BUSINESS",
-  },
-  {
-    id: "fitzone-memberships",
-    name: "fitzone.fit/memberships",
-    type: "Business",
-    version: "Business",
-    date: "6/17/2026",
-    identifier: "urn:ai:domain:fitzone.fit:agent:memberships",
-    description:
-      "Manage FitZone gym memberships, class bookings, and personal-training schedules.",
-    tags: ["fitness", "memberships"],
-    verified: false,
-    typeBadge: "BUSINESS",
-  },
-  {
-    id: "sunrisetours-booking",
-    name: "sunrisetours.com/booking",
-    type: "Business",
-    version: "Business",
-    date: "6/15/2026",
-    identifier: "urn:ai:domain:sunrisetours.com:agent:booking",
-    description:
-      "Book guided tours and excursions worldwide through Sunrise Tours' verified booking agent.",
-    tags: ["travel", "booking"],
-    verified: true,
-    typeBadge: "BUSINESS",
-  },
-  {
-    id: "personal-priya",
-    name: "personal/priya/agent",
-    type: "Personal",
-    version: "Personal",
-    date: "6/14/2026",
-    identifier: "urn:ai:email:priya@gmail.com:agent:default",
-    description:
-      "Priya's personal scheduling and contact assistant - reachable for collaboration requests.",
-    tags: ["individual"],
-    verified: false,
-    typeBadge: "PERSONAL",
-  },
-  {
-    id: "personal-ankit-dev",
-    name: "personal/ankit-dev/agent",
-    type: "Personal",
-    version: "Personal",
-    date: "6/13/2026",
-    identifier: "urn:ai:email:ankit@nasiko.com:agent:dev",
-    description:
-      "Ankit's developer agent - exposes code-review and pair-programming skills for trusted peers.",
-    tags: ["dev", "individual"],
-    verified: false,
-    typeBadge: "PERSONAL",
-  },
-  {
-    id: "personal-sara",
-    name: "personal/sara/card",
-    type: "Personal",
-    version: "Personal",
-    date: "6/12/2026",
-    identifier: "urn:ai:email:sara@outlook.com:agent:card",
-    description:
-      "Sara's portfolio agent - surfaces design case studies and routes new-project inquiries.",
-    tags: ["design", "individual"],
-    verified: false,
-    typeBadge: "PERSONAL",
-  },
-  {
-    id: "travel26-contact",
-    name: "travel26.net/contact",
-    type: "Business",
-    version: "Business",
-    date: "6/11/2026",
-    identifier: "urn:ai:domain:travel26.net:agent:contact",
-    description:
-      "Front-desk concierge for Travel26 - routes contact requests to flights, hotels, and tours.",
-    tags: ["travel", "contact"],
-    verified: false,
-    typeBadge: "BUSINESS",
-  },
-  {
-    id: "medicore-intake",
-    name: "medicore.health/intake",
-    type: "Business",
-    version: "Business",
-    date: "6/10/2026",
-    identifier: "urn:ai:domain:medicore.health:agent:intake",
-    description:
-      "Patient-intake assistant for Medicore clinics - collects symptoms and books appointments.",
-    tags: ["health"],
-    verified: true,
-    typeBadge: "BUSINESS",
-  },
-  {
-    id: "nasiko-projects",
-    name: "nasiko.com/projects",
-    type: "Business",
-    version: "Business",
-    date: "6/9/2026",
-    identifier: "urn:ai:domain:nasiko.com:agent:projects",
-    description:
-      "Project-status assistant for Nasiko engineering - answers questions about active sprints.",
-    tags: ["dev", "projects"],
-    verified: false,
-    typeBadge: "BUSINESS",
-  },
-  {
-    id: "bayareacats-adoption",
-    name: "bayareacats.org/adoption",
-    type: "Business",
-    version: "Business",
-    date: "6/8/2026",
-    identifier: "urn:ai:domain:bayareacats.org:agent:adoption",
-    description:
-      "Browse adoptable cats in the Bay Area and start an adoption application with a volunteer.",
-    tags: ["nonprofit"],
-    verified: true,
-    typeBadge: "BUSINESS",
-  },
-  {
-    id: "pivotpoint-scheduling",
-    name: "pivotpoint.co/scheduling",
-    type: "Business",
-    version: "Business",
-    date: "6/7/2026",
-    identifier: "urn:ai:domain:pivotpoint.co:agent:scheduling",
-    description:
-      "Operations-scheduling agent for PivotPoint - coordinates shifts and resource bookings.",
-    tags: ["ops"],
-    verified: false,
-    typeBadge: "BUSINESS",
-  },
-];
+const PAGE_SIZE = 6;
 
-const IDENTITY_OPTIONS = ["Business", "Personal"] as const;
-const STATUS_OPTIONS = ["Active", "Inactive"] as const;
-const TAG_OPTIONS = [
-  "food",
-  "coffee",
-  "travel",
-  "fitness",
-  "dev",
-  "design",
-  "individual",
-];
+function parseEntry(entry: PublicCatalogEntry): Card {
+  const isBusiness = entry.identifier.startsWith("urn:ai:domain:");
+  // Derive the {scope}/{slug} display name from the URN + url, matching
+  // the outshift "moonbakery.com/orders" / "personal/sara/card" pattern.
+  let displayName = entry.displayName;
+  if (isBusiness) {
+    const match = entry.identifier.match(/^urn:ai:domain:([^:]+):agent:(.+)$/);
+    if (match) displayName = `${match[1]}/${match[2]}`;
+  } else {
+    // personal: parse the public url path /personal/{handle}/{slug}.json
+    try {
+      const path = new URL(entry.url).pathname;
+      const m = path.match(/^\/personal\/([^/]+)\/([^/.]+)\.json$/);
+      if (m) displayName = `personal/${m[1]}/${m[2]}`;
+    } catch {
+      // leave displayName as the human-readable fallback
+    }
+  }
 
-const PAGE_SIZE = 6;
+  return {
+    id: entry.identifier,
+    name: displayName,
+    type: isBusiness ? "Business" : "Personal",
+    version: "1.0",
+    date: "Updated recently",
+    identifier: entry.identifier,
+    description: entry.description ?? "",
+    tags: Array.isArray(entry.tags) ? entry.tags : [],
+    // Every entry in the public catalog is server-filtered to active +
+    // public, so the verified check is safe for all of them.
+    verified: true,
+    typeBadge: isBusiness ? "BUSINESS" : "PERSONAL",
+    status: "Active",
+  };
+}
 
 export default function HomePage() {
   const [search, setSearch] = useState("");
@@ -195,26 +62,84 @@ export default function HomePage() {
   const [tagFilter, setTagFilter] = useState<string[]>([]);
   const [page, setPage] = useState(1);
 
+  const [cards, setCards] = useState<Card[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    listPublicCards()
+      .then((entries) => {
+        if (cancelled) return;
+        setCards(entries.map(parseEntry));
+      })
+      .catch((e: unknown) => {
+        if (cancelled) return;
+        setError(e instanceof Error ? e.message : String(e));
+      })
+      .finally(() => {
+        if (cancelled) return;
+        setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Sidebar option lists derived from the live data.
+  const identityOptions = useMemo(() => {
+    const set = new Set<string>();
+    for (const c of cards) set.add(c.type);
+    return Array.from(set).sort();
+  }, [cards]);
+
+  const statusOptions = useMemo(() => {
+    const set = new Set<string>();
+    for (const c of cards) set.add(c.status);
+    return Array.from(set).sort();
+  }, [cards]);
+
+  const tagOptions = useMemo(() => {
+    const set = new Set<string>();
+    for (const c of cards) for (const t of c.tags) set.add(t);
+    return Array.from(set).sort().slice(0, 30);
+  }, [cards]);
+
   const filtered = useMemo(() => {
     const q = search.trim().toLowerCase();
-    return SEED_CARDS.filter((c) => {
-      if (q && !c.name.toLowerCase().includes(q) && !c.identifier.toLowerCase().includes(q)) {
+    return cards.filter((c) => {
+      if (
+        q &&
+        !c.name.toLowerCase().includes(q) &&
+        !c.identifier.toLowerCase().includes(q)
+      ) {
         return false;
       }
-      if (identityFilter.length > 0 && !identityFilter.includes(c.type)) return false;
-      if (tagFilter.length > 0 && !c.tags.some((t) => tagFilter.includes(t))) return false;
-      // STATUS is decorative for seed data - all cards treated as "Active"; only filter if Inactive is the only selection
-      if (statusFilter.length > 0 && !statusFilter.includes("Active")) return false;
+      if (identityFilter.length > 0 && !identityFilter.includes(c.type))
+        return false;
+      if (statusFilter.length > 0 && !statusFilter.includes(c.status))
+        return false;
+      if (
+        tagFilter.length > 0 &&
+        !c.tags.some((t) => tagFilter.includes(t))
+      )
+        return false;
       return true;
     });
-  }, [search, identityFilter, statusFilter, tagFilter]);
+  }, [cards, search, identityFilter, statusFilter, tagFilter]);
 
   const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
   const currentPage = Math.min(page, totalPages);
   const pageStart = (currentPage - 1) * PAGE_SIZE;
   const pageCards = filtered.slice(pageStart, pageStart + PAGE_SIZE);
 
-  function toggle(list: string[], value: string, setter: (next: string[]) => void) {
+  function toggle(
+    list: string[],
+    value: string,
+    setter: (next: string[]) => void,
+  ) {
     if (list.includes(value)) {
       setter(list.filter((v) => v !== value));
     } else {
@@ -223,10 +148,24 @@ export default function HomePage() {
     setPage(1);
   }
 
+  const cardsHost = (() => {
+    const base =
+      process.env.NEXT_PUBLIC_HOST39_CARDS_URL ??
+      process.env.NEXT_PUBLIC_HOST39_API_URL ??
+      "";
+    try {
+      return new URL(base).hostname;
+    } catch {
+      return base || "the API";
+    }
+  })();
+
   return (
     <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <div className="mb-6">
-        <h2 className="font-display text-2xl font-bold text-ink-strong leading-tight">Explore</h2>
+        <h2 className="font-display text-2xl font-bold text-ink-strong leading-tight">
+          Explore
+        </h2>
         <p className="mt-1 text-sm text-ink-medium max-w-3xl">
           Browse the secure directory of A2A agent cards hosted on host39.
         </p>
@@ -239,32 +178,59 @@ export default function HomePage() {
             setSearch(v);
             setPage(1);
           }}
+          identityOptions={identityOptions}
           identity={identityFilter}
           onToggleIdentity={(v) => toggle(identityFilter, v, setIdentityFilter)}
+          statusOptions={statusOptions}
           status={statusFilter}
           onToggleStatus={(v) => toggle(statusFilter, v, setStatusFilter)}
+          tagOptions={tagOptions}
           tags={tagFilter}
           onToggleTag={(v) => toggle(tagFilter, v, setTagFilter)}
         />
 
         <div className="flex-1 min-w-0">
-          <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
-            {pageCards.map((card) => (
-              <AgentCard key={card.id} card={card} />
-            ))}
-          </div>
-
-          {pageCards.length === 0 && (
+          {loading ? (
+            <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="bg-surface-strong h-[200px] rounded-card animate-pulse"
+                />
+              ))}
+            </div>
+          ) : error ? (
             <div className="rounded-card border border-line bg-surface-light p-8 text-center text-sm text-ink-medium">
-              No hosted cards match your filters.
+              <p>
+                Could not reach {cardsHost}. Check that the API is running.
+              </p>
+              <p className="mt-2 font-mono text-xs text-ink-weak">{error}</p>
             </div>
-          )}
+          ) : cards.length === 0 ? (
+            <div className="rounded-card border border-line bg-surface-light p-8 text-center text-sm text-ink-medium">
+              No hosted cards registered yet.
+            </div>
+          ) : (
+            <>
+              <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
+                {pageCards.map((card) => (
+                  <AgentCardTile key={card.id} card={card} />
+                ))}
+              </div>
 
-          <Pagination
-            page={currentPage}
-            total={totalPages}
-            onPage={(p) => setPage(p)}
-          />
+              {pageCards.length === 0 && (
+                <div className="rounded-card border border-line bg-surface-light p-8 text-center text-sm text-ink-medium">
+                  No hosted cards match your filters.
+                </div>
+              )}
+
+              <Pagination
+                page={currentPage}
+                total={totalPages}
+                onPage={(p) => setPage(p)}
+              />
+            </>
+          )}
         </div>
       </div>
     </main>
@@ -274,10 +240,13 @@ export default function HomePage() {
 function FilterSidebar(props: {
   search: string;
   onSearch: (v: string) => void;
+  identityOptions: string[];
   identity: string[];
   onToggleIdentity: (v: string) => void;
+  statusOptions: string[];
   status: string[];
   onToggleStatus: (v: string) => void;
+  tagOptions: string[];
   tags: string[];
   onToggleTag: (v: string) => void;
 }) {
@@ -306,20 +275,24 @@ function FilterSidebar(props: {
             Identity
           </span>
           <div className="space-y-1.5">
-            {IDENTITY_OPTIONS.map((opt) => (
-              <label
-                key={opt}
-                className="flex items-center gap-2 text-sm text-ink cursor-pointer"
-              >
-                <input
-                  type="checkbox"
-                  checked={props.identity.includes(opt)}
-                  onChange={() => props.onToggleIdentity(opt)}
-                  className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
-                />
-                <span>{opt}</span>
-              </label>
-            ))}
+            {props.identityOptions.length === 0 ? (
+              <span className="text-xs text-ink-weak">No options</span>
+            ) : (
+              props.identityOptions.map((opt) => (
+                <label
+                  key={opt}
+                  className="flex items-center gap-2 text-sm text-ink cursor-pointer"
+                >
+                  <input
+                    type="checkbox"
+                    checked={props.identity.includes(opt)}
+                    onChange={() => props.onToggleIdentity(opt)}
+                    className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
+                  />
+                  <span>{opt}</span>
+                </label>
+              ))
+            )}
           </div>
         </div>
 
@@ -328,20 +301,24 @@ function FilterSidebar(props: {
             Status
           </span>
           <div className="space-y-1.5">
-            {STATUS_OPTIONS.map((opt) => (
-              <label
-                key={opt}
-                className="flex items-center gap-2 text-sm text-ink cursor-pointer"
-              >
-                <input
-                  type="checkbox"
-                  checked={props.status.includes(opt)}
-                  onChange={() => props.onToggleStatus(opt)}
-                  className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
-                />
-                <span>{opt}</span>
-              </label>
-            ))}
+            {props.statusOptions.length === 0 ? (
+              <span className="text-xs text-ink-weak">No options</span>
+            ) : (
+              props.statusOptions.map((opt) => (
+                <label
+                  key={opt}
+                  className="flex items-center gap-2 text-sm text-ink cursor-pointer"
+                >
+                  <input
+                    type="checkbox"
+                    checked={props.status.includes(opt)}
+                    onChange={() => props.onToggleStatus(opt)}
+                    className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
+                  />
+                  <span>{opt}</span>
+                </label>
+              ))
+            )}
           </div>
         </div>
 
@@ -350,20 +327,24 @@ function FilterSidebar(props: {
             Tags
           </span>
           <div className="flex-1 overflow-y-auto space-y-1.5 pr-1">
-            {TAG_OPTIONS.map((tag) => (
-              <label
-                key={tag}
-                className="flex items-center gap-2 text-sm text-ink cursor-pointer"
-              >
-                <input
-                  type="checkbox"
-                  checked={props.tags.includes(tag)}
-                  onChange={() => props.onToggleTag(tag)}
-                  className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
-                />
-                <span className="truncate">{tag}</span>
-              </label>
-            ))}
+            {props.tagOptions.length === 0 ? (
+              <span className="text-xs text-ink-weak">No tags yet</span>
+            ) : (
+              props.tagOptions.map((tag) => (
+                <label
+                  key={tag}
+                  className="flex items-center gap-2 text-sm text-ink cursor-pointer"
+                >
+                  <input
+                    type="checkbox"
+                    checked={props.tags.includes(tag)}
+                    onChange={() => props.onToggleTag(tag)}
+                    className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
+                  />
+                  <span className="truncate">{tag}</span>
+                </label>
+              ))
+            )}
           </div>
         </div>
       </div>
@@ -371,7 +352,7 @@ function FilterSidebar(props: {
   );
 }
 
-function AgentCard({ card }: { card: SeedCard }) {
+function AgentCardTile({ card }: { card: Card }) {
   return (
     <article
       className="bg-surface-light rounded-card border border-line/70 shadow-card p-4 hover:shadow-card-hover hover:border-line-strong transition cursor-pointer flex flex-col h-full gap-3"
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 74963f9..ba5843d 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -73,7 +73,7 @@ export function Header() {
             </nav>
 
             <div className="hidden md:flex flex-col items-end leading-tight">
-              <span className="text-base font-bold text-ink-strong">12 + cards hosted</span>
+              <span className="text-base font-bold text-ink-strong">9 + hosted cards indexed</span>
               <span className="text-xs text-ink-weak">Indexed</span>
             </div>
 
diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts
index ee99343..fa92ea2 100644
--- a/web/src/lib/api.ts
+++ b/web/src/lib/api.ts
@@ -28,7 +28,7 @@ async function parseApiResponse<T>(res: Response): Promise<T> {
     const errorCode = typeof obj["error"] === "string" ? obj["error"] : null;
     const detail = typeof obj["detail"] === "string" ? obj["detail"] : null;
     const message =
-      detail && errorCode ? `${errorCode} — ${detail}` :
+      detail && errorCode ? `${errorCode} - ${detail}` :
       detail ?? errorCode ??
       (typeof obj["message"] === "string" ? obj["message"] : `Request failed with status ${res.status}`);
     throw new ApiError(message, res.status, data);
@@ -117,6 +117,41 @@ export async function listCards(): Promise<AgentCard[]> {
   return request<AgentCard[]>("/cards");
 }
 
+// Public catalog (no auth). Fetches the aggregate ai-catalog from the
+// cards host. Do NOT use request() - that injects Authorization and
+// targets NEXT_PUBLIC_HOST39_API_URL; the public catalog lives on
+// NEXT_PUBLIC_HOST39_CARDS_URL.
+export interface PublicCatalogEntry {
+  identifier: string;
+  displayName: string;
+  mediaType: string;
+  url: string;
+  description: string | null;
+  tags: string[];
+}
+
+export interface PublicCatalogResponse {
+  specVersion: string;
+  entries: PublicCatalogEntry[];
+}
+
+export async function listPublicCards(): Promise<PublicCatalogEntry[]> {
+  const base =
+    process.env.NEXT_PUBLIC_HOST39_CARDS_URL ??
+    process.env.NEXT_PUBLIC_HOST39_API_URL ??
+    "";
+  const url = `${base}/.well-known/ai-catalog.json`;
+  const res = await fetch(url, { cache: "no-store" });
+  if (!res.ok) {
+    throw new ApiError(
+      `Catalog fetch failed with status ${res.status}`,
+      res.status,
+    );
+  }
+  const data = (await res.json()) as PublicCatalogResponse;
+  return Array.isArray(data?.entries) ? data.entries : [];
+}
+
 export async function getCard(id: string): Promise<AgentCard> {
   return request<AgentCard>(`/cards/${encodeURIComponent(id)}`);
 }