diff --git a/.gitignore b/.gitignore
index 5517136..d80625d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@
 
 # testing
 /coverage
+/.artifacts/
 /playwright-report/
 /test-results/
 /e2e/.auth/
diff --git a/AGENTS.md b/AGENTS.md
index 1ecbd00..6b2c4ff 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -35,9 +35,11 @@ Read [docs/architecture.md](./docs/architecture.md) before product or architectu
 
 ## UI Direction
 
-There is no active v3 design system in the repository. The previous design draft
-has been removed. Before substantial UI work, define or confirm the current
-visual direction instead of inheriting old visual rules.
+The active v3 design system is defined in [docs/design.md](./docs/design.md).
+It derives from SST and is the source of truth for Fulling's visual language,
+tokens, typography, spacing, components, states, and responsive behavior. Read
+it before substantial UI work. Existing UI that conflicts with it is migration
+work, not design precedent.
 
 Avoid generic AI copywriting cliches such as "Elevate", "Seamless", and
 "Unleash".
@@ -45,6 +47,7 @@ Avoid generic AI copywriting cliches such as "Elevate", "Seamless", and
 ## Key Files
 
 - [docs/architecture.md](./docs/architecture.md) — v3 system architecture and product model
+- [docs/design.md](./docs/design.md) — active v3 design system and SST-derived style reference
 - `lib/auth/` — Better Auth and application session boundary
 - `lib/kubeconfig/` — User credential persistence
 - `lib/k8s/` — Validation and user-specific Kubernetes service
diff --git a/app/(auth)/login/_components/github-login-button.tsx b/app/(auth)/login/_components/github-login-button.tsx
index 473f522..ff90bf5 100644
--- a/app/(auth)/login/_components/github-login-button.tsx
+++ b/app/(auth)/login/_components/github-login-button.tsx
@@ -25,9 +25,9 @@ export function GitHubLoginButton() {
   }
 
   return (
-    <div className="mt-8">
-      <Button type="button" size="lg" className="h-12 w-full bg-[#101418] text-white hover:bg-[#2a3037]" disabled={isPending} onClick={handleSignIn}>
-        {isPending ? <LoaderCircle className="size-5 animate-spin" /> : <Github className="size-5" />}
+    <div className="mt-8 border-t border-border pt-6">
+      <Button type="button" size="lg" className="w-full" disabled={isPending} onClick={handleSignIn}>
+        {isPending ? <LoaderCircle className="animate-spin" /> : <Github />}
         {isPending ? 'Connecting...' : 'Continue with GitHub'}
       </Button>
       {error ? <p role="alert" className="mt-3 text-sm text-destructive">{error}</p> : null}
diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
index c865040..86565c1 100644
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -1,6 +1,6 @@
-import Link from 'next/link'
 import { redirect } from 'next/navigation'
 
+import { FullingBrand } from '@/components/fulling-brand'
 import { getSession } from '@/lib/auth/session'
 
 import { GitHubLoginButton } from './_components/github-login-button'
@@ -15,19 +15,21 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
   const { error } = await searchParams
 
   return (
-    <main className="grid min-h-screen bg-[#f7f8f6] lg:grid-cols-[1fr_1.05fr]">
-      <section className="flex items-center px-6 py-12 sm:px-12 lg:px-20">
-        <div className="w-full max-w-md">
-          <Link
-            href="/"
-            className="font-[family-name:var(--font-heading)] text-2xl font-bold text-[#101418]"
-          >
-            Fulling
-          </Link>
-          <h1 className="mt-14 text-4xl font-semibold text-[#101418]">
+    <main className="flex min-h-screen flex-col bg-background text-foreground">
+      <header className="flex h-16 shrink-0 items-center border-b border-border px-4 sm:px-6">
+        <FullingBrand />
+      </header>
+      <section className="flex flex-1 items-center justify-center px-4 py-12 sm:px-6">
+        <div className="w-full max-w-sm">
+          <p className="font-mono text-[length:var(--text-micro)] font-medium uppercase leading-[var(--leading-micro)] tracking-[0.056em] text-muted-foreground">
+            Workspace access
+          </p>
+          <h1 className="mt-3 text-xl font-semibold leading-[var(--leading-heading)]">
             Sign in to your workspace
           </h1>
-          <p className="mt-4 text-base text-[#66717d]">Use your GitHub account to continue.</p>
+          <p className="mt-2 text-sm leading-6 text-muted-foreground">
+            Use your GitHub account to continue to Fulling.
+          </p>
           {error === 'oauth' ? (
             <p role="alert" className="mt-5 text-sm text-destructive">
               GitHub sign-in could not be completed. Please try again.
@@ -36,9 +38,9 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
           <GitHubLoginButton />
         </div>
       </section>
-      <div className="relative hidden overflow-hidden border-l border-[#e1e5e8] bg-white lg:block">
-        <div className="absolute inset-10 bg-[url('/images/landing-workspace-concept.png')] bg-contain bg-center bg-no-repeat" />
-      </div>
+      <footer className="h-12 shrink-0 border-t border-border px-4 text-xs leading-[48px] text-muted-foreground sm:px-6">
+        Dedicated AI workspaces
+      </footer>
     </main>
   )
 }
diff --git a/app/(dashboard)/_components/dashboard-header.tsx b/app/(dashboard)/_components/dashboard-header.tsx
index cfc9b48..7a1bbe6 100644
--- a/app/(dashboard)/_components/dashboard-header.tsx
+++ b/app/(dashboard)/_components/dashboard-header.tsx
@@ -5,6 +5,7 @@ import { LogOut, Settings2 } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 
+import { FullingBrand } from '@/components/fulling-brand'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
 import { signOut } from '@/lib/auth-client'
@@ -29,20 +30,20 @@ export function DashboardHeader({ userName, userEmail, userImage }: DashboardHea
   }
 
   return (
-    <header className="border-b border-[#dde2e5] bg-white">
-      <div className="mx-auto flex h-16 max-w-6xl items-center gap-4 px-5 sm:px-8">
-        <Link href="/workspace" className="font-[family-name:var(--font-heading)] text-xl font-bold">Fulling</Link>
+    <header className="border-b border-border bg-background">
+      <div className="mx-auto flex h-16 max-w-[var(--page-max-width)] items-center gap-4 px-4 sm:px-6">
+        <FullingBrand href="/workspace" />
         <nav className="ml-3 hidden items-center gap-1 sm:flex" aria-label="Dashboard">
           <Button asChild variant="ghost" size="sm"><Link href="/workspace">Workspace</Link></Button>
           <Button asChild variant="ghost" size="sm"><Link href="/settings/kubeconfig"><Settings2 />Kubeconfig</Link></Button>
         </nav>
         <div className="ml-auto flex min-w-0 items-center gap-3">
           <Avatar className="size-8"><AvatarImage src={userImage ?? undefined} alt="" /><AvatarFallback>{userName.slice(0, 1).toUpperCase()}</AvatarFallback></Avatar>
-          <div className="hidden min-w-0 md:block"><p className="truncate text-sm font-medium text-[#171a1f]">{userName}</p><p className="truncate text-xs leading-4">{userEmail}</p></div>
+          <div className="hidden min-w-0 md:block"><p className="truncate text-sm font-medium text-foreground">{userName}</p><p className="truncate text-xs leading-4 text-muted-foreground">{userEmail}</p></div>
           <Button type="button" variant="ghost" size="icon" disabled={isSigningOut} onClick={handleSignOut} aria-label="Sign out" title="Sign out"><LogOut /></Button>
         </div>
       </div>
-      <nav className="flex h-11 items-center gap-1 border-t border-[#edf0f2] px-4 sm:hidden" aria-label="Dashboard mobile">
+      <nav className="flex h-11 items-center gap-1 border-t border-border px-4 sm:hidden" aria-label="Dashboard mobile">
         <Button asChild variant="ghost" size="sm"><Link href="/workspace">Workspace</Link></Button>
         <Button asChild variant="ghost" size="sm"><Link href="/settings/kubeconfig"><Settings2 />Kubeconfig</Link></Button>
       </nav>
diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
index 5ab3c22..76ec8e6 100644
--- a/app/(dashboard)/layout.tsx
+++ b/app/(dashboard)/layout.tsx
@@ -6,7 +6,7 @@ export default async function DashboardLayout({ children }: Readonly<{ children:
   const { user } = await requireSession()
 
   return (
-    <div className="min-h-screen bg-[#f7f8f6] text-[#171a1f]">
+    <div className="min-h-screen bg-background text-foreground">
       <DashboardHeader userName={user.name} userEmail={user.email} userImage={user.image ?? null} />
       {children}
     </div>
diff --git a/app/(dashboard)/settings/kubeconfig/_components/kubeconfig-form.tsx b/app/(dashboard)/settings/kubeconfig/_components/kubeconfig-form.tsx
index 8b31d39..3eee91a 100644
--- a/app/(dashboard)/settings/kubeconfig/_components/kubeconfig-form.tsx
+++ b/app/(dashboard)/settings/kubeconfig/_components/kubeconfig-form.tsx
@@ -111,11 +111,11 @@ export function KubeconfigForm() {
   }
 
   return (
-    <main className="mx-auto w-full max-w-4xl px-5 py-10 sm:px-8 sm:py-14">
-      <header className="border-b border-[#dce1e4] pb-8">
-        <p className="text-sm font-semibold text-[#287355]">Settings</p>
-        <h1 className="mt-2 text-3xl font-semibold text-[#171a1f]">Kubeconfig</h1>
-        <p className="mt-3 max-w-2xl text-sm leading-6 text-[#5e6974]">
+    <main className="mx-auto w-full max-w-[var(--page-max-width)] px-4 py-10 sm:px-6 sm:py-12">
+      <header className="border-b border-border pb-8">
+        <p className="font-mono text-[length:var(--text-micro)] font-medium uppercase leading-[var(--leading-micro)] tracking-[0.056em] text-muted-foreground">Settings</p>
+        <h1 className="mt-2 text-xl font-semibold leading-[var(--leading-heading)]">Kubeconfig</h1>
+        <p className="mt-3 max-w-2xl text-sm leading-6 text-muted-foreground">
           Fulling validates this credential against the selected Kubernetes cluster before storing
           it as plaintext. Saved content is never displayed again.
         </p>
@@ -127,7 +127,7 @@ export function KubeconfigForm() {
             <h2 id="status-heading" className="text-lg font-semibold">
               Saved credential
             </h2>
-            <p className="mt-1 text-sm text-[#5e6974]">
+            <p className="mt-1 text-sm text-muted-foreground">
               {isLoading
                 ? 'Loading status...'
                 : status?.configured
@@ -136,7 +136,7 @@ export function KubeconfigForm() {
             </p>
           </div>
           {status?.configured ? (
-            <div className="flex items-center gap-2 text-sm font-medium text-[#287355]">
+            <div className="flex items-center gap-2 text-sm font-medium text-[var(--color-status-success)]">
               <CheckCircle2 className="size-5" aria-hidden="true" />
               Configured
             </div>
@@ -144,12 +144,12 @@ export function KubeconfigForm() {
         </div>
       </section>
 
-      <section className="border-t border-[#dce1e4] py-8" aria-labelledby="editor-heading">
+      <section className="border-t border-border py-8" aria-labelledby="editor-heading">
         <div className="max-w-3xl">
           <h2 id="editor-heading" className="text-lg font-semibold">
             {status?.configured ? 'Replace kubeconfig' : 'Configure kubeconfig'}
           </h2>
-          <p className="mt-2 text-sm leading-6 text-[#5e6974]">
+          <p className="mt-2 text-sm leading-6 text-muted-foreground">
             Paste the complete replacement. Existing content is intentionally not prefilled.
           </p>
           <Label htmlFor="kubeconfig" className="mt-6">
@@ -169,7 +169,7 @@ export function KubeconfigForm() {
           <div className="mt-5 flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-between">
             <div className="min-h-5 text-sm" aria-live="polite">
               {error ? <p role="alert" className="text-destructive">{error}</p> : null}
-              {notice ? <p className="text-[#287355]">{notice}</p> : null}
+              {notice ? <p className="text-[var(--color-status-success)]">{notice}</p> : null}
             </div>
             <Button
               type="button"
@@ -184,11 +184,11 @@ export function KubeconfigForm() {
       </section>
 
       {status?.configured ? (
-        <section className="border-t border-[#dce1e4] py-8" aria-labelledby="delete-heading">
+        <section className="border-t border-border py-8" aria-labelledby="delete-heading">
           <div className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
             <div>
               <h2 id="delete-heading" className="text-lg font-semibold">Delete kubeconfig</h2>
-              <p className="mt-1 text-sm text-[#5e6974]">
+              <p className="mt-1 text-sm text-muted-foreground">
                 Your account and session remain active after deletion.
               </p>
             </div>
@@ -209,7 +209,7 @@ export function KubeconfigForm() {
                 <AlertDialogFooter>
                   <AlertDialogCancel>Cancel</AlertDialogCancel>
                   <AlertDialogAction
-                    variant="destructive"
+                    variant="destructiveSolid"
                     onClick={() => void handleDelete()}
                   >
                     Delete kubeconfig
diff --git a/app/(dashboard)/workspace/_components/workspace-overview.tsx b/app/(dashboard)/workspace/_components/workspace-overview.tsx
index 2bc0de7..8a16ea0 100644
--- a/app/(dashboard)/workspace/_components/workspace-overview.tsx
+++ b/app/(dashboard)/workspace/_components/workspace-overview.tsx
@@ -7,7 +7,11 @@ import Link from 'next/link'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
 
-import { formatUpdatedAt, type KubeconfigStatus,parseKubeconfigStatus } from '../../_components/kubeconfig-status'
+import {
+  formatUpdatedAt,
+  type KubeconfigStatus,
+  parseKubeconfigStatus,
+} from '../../_components/kubeconfig-status'
 
 type WorkspaceOverviewProps = { user: { name: string; email: string; image: string | null } }
 
@@ -29,24 +33,48 @@ export function WorkspaceOverview({ user }: WorkspaceOverviewProps) {
   useEffect(() => { void loadStatus() }, [loadStatus])
 
   return (
-    <main className="mx-auto w-full max-w-6xl px-5 py-10 sm:px-8 sm:py-14">
-      <div className="flex flex-col gap-3 border-b border-[#dce1e4] pb-8 sm:flex-row sm:items-end sm:justify-between">
-        <div><p className="text-sm font-semibold text-[#287355]">Workspace</p><h1 className="mt-2 text-3xl font-semibold text-[#171a1f]">Welcome, {user.name}</h1></div>
-        <Button asChild><Link href="/settings/kubeconfig">Open settings <ArrowRight /></Link></Button>
+    <main className="mx-auto w-full max-w-[var(--page-max-width)] px-4 py-10 sm:px-6 sm:py-12">
+      <div className="flex flex-col gap-4 border-b border-border pb-8 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <p className="font-mono text-[length:var(--text-micro)] font-medium uppercase leading-[var(--leading-micro)] tracking-[0.056em] text-muted-foreground">
+            Workspace
+          </p>
+          <h1 className="mt-2 text-xl font-semibold leading-[var(--leading-heading)]">
+            Welcome, {user.name}
+          </h1>
+        </div>
+        <Button asChild>
+          <Link href="/settings/kubeconfig">Open settings <ArrowRight /></Link>
+        </Button>
       </div>
-      <div className="grid gap-10 py-10 md:grid-cols-[minmax(0,1fr)_minmax(18rem,0.7fr)]">
+      <div className="grid gap-10 py-8 md:grid-cols-[minmax(0,1fr)_minmax(18rem,0.7fr)]">
         <section aria-labelledby="account-heading">
-          <h2 id="account-heading" className="text-lg font-semibold">Account</h2>
+          <h2 id="account-heading" className="text-lg font-semibold leading-[var(--leading-heading-sm)]">Account</h2>
           <div className="mt-5 flex items-center gap-4">
             <Avatar className="size-12"><AvatarImage src={user.image ?? undefined} alt="" /><AvatarFallback>{user.name.slice(0, 1).toUpperCase()}</AvatarFallback></Avatar>
-            <div className="min-w-0"><p className="truncate font-medium text-[#171a1f]">{user.name}</p><p className="truncate text-sm">{user.email}</p></div>
+            <div className="min-w-0"><p className="truncate font-medium text-foreground">{user.name}</p><p className="truncate text-sm text-muted-foreground">{user.email}</p></div>
           </div>
         </section>
-        <section aria-labelledby="connection-heading" className="border-t border-[#dce1e4] pt-8 md:border-l md:border-t-0 md:pl-10 md:pt-0">
-          <h2 id="connection-heading" className="text-lg font-semibold">Kubernetes connection</h2>
-          {!status && !error ? <p className="mt-5 text-sm">Loading status...</p> : null}
+        <section aria-labelledby="connection-heading" className="border-t border-border pt-8 md:border-l md:border-t-0 md:pl-10 md:pt-0">
+          <h2 id="connection-heading" className="text-lg font-semibold leading-[var(--leading-heading-sm)]">Kubernetes connection</h2>
+          {!status && !error ? <p className="mt-5 text-sm text-muted-foreground">Loading status...</p> : null}
           {error ? <div className="mt-5"><p role="alert" className="text-sm text-destructive">{error}</p><Button className="mt-3" variant="outline" size="sm" onClick={() => void loadStatus()}><RefreshCw />Retry</Button></div> : null}
-          {status ? <div className="mt-5 space-y-4"><div className="flex items-center gap-2">{status.configured ? <CheckCircle2 className="size-5 text-[#287355]" /> : <CircleDashed className="size-5 text-[#6a737d]" />}<span className="font-medium">{status.configured ? 'Configured' : 'Not configured'}</span></div><div><p className="text-xs font-semibold uppercase">Last updated</p><p className="mt-1 text-sm text-[#171a1f]">{formatUpdatedAt(status.updatedAt)}</p></div></div> : null}
+          {status ? (
+            <div className="mt-5 space-y-4">
+              <div className="flex items-center gap-2">
+                {status.configured ? (
+                  <CheckCircle2 className="size-5 text-[var(--color-status-success)]" />
+                ) : (
+                  <CircleDashed className="size-5 text-muted-foreground" />
+                )}
+                <span className="font-medium">{status.configured ? 'Configured' : 'Not configured'}</span>
+              </div>
+              <div>
+                <p className="text-xs font-medium uppercase tracking-[0.056em] text-muted-foreground">Last updated</p>
+                <p className="mt-1 font-mono text-xs text-foreground">{formatUpdatedAt(status.updatedAt)}</p>
+              </div>
+            </div>
+          ) : null}
         </section>
       </div>
     </main>
diff --git a/app/(landing)/_components/landing-client.tsx b/app/(landing)/_components/landing-client.tsx
index 7d5fed3..7b6db40 100644
--- a/app/(landing)/_components/landing-client.tsx
+++ b/app/(landing)/_components/landing-client.tsx
@@ -1,37 +1,130 @@
-import { ArrowRight } from 'lucide-react'
+import { FaLinkedinIn } from 'react-icons/fa6'
+import { SiDiscord, SiGithub, SiX, SiYoutube } from 'react-icons/si'
 import Image from 'next/image'
 import Link from 'next/link'
 
+import styles from './landing.module.css'
+
 type LandingClientProps = {
   ctaHref: '/login' | '/workspace'
+  githubStars: string
 }
 
-export function LandingClient({ ctaHref }: LandingClientProps) {
-  const actionLabel = ctaHref === '/workspace' ? 'Open workspace' : 'Sign in'
-
+export function LandingClient({ ctaHref, githubStars }: LandingClientProps) {
   return (
-    <div className="min-h-screen overflow-hidden bg-[#fbfbfa] text-[#090b10]">
-      <header className="flex h-16 items-center border-b border-[#e3e7eb] bg-white/80 px-5 backdrop-blur sm:px-8 lg:px-12">
-        <Link href="/" className="font-[family-name:var(--font-heading)] text-2xl font-bold">Fulling</Link>
-        <Link href={ctaHref} className="ml-auto inline-flex h-9 items-center gap-2 rounded-md bg-[#090b10] px-4 text-sm font-semibold text-white hover:bg-[#252a32]">
-          {actionLabel} <ArrowRight className="size-4" aria-hidden="true" />
-        </Link>
+    <div className={styles.page}>
+      <header className={styles.header}>
+        <div className={styles.headerInner}>
+          <Link href="/" className={styles.brand} aria-label="Fulling home">
+            <span className={styles.brandMark} aria-hidden="true">
+              <Image src="/icon-transparent.svg" alt="" width={40} height={40} priority />
+            </span>
+            <span>Fulling</span>
+          </Link>
+
+          <nav className={styles.headerNav} aria-label="Primary navigation">
+            <button type="button" disabled className={styles.blogLink} aria-label="Blog, coming soon">
+              Blog
+            </button>
+            <a
+              className={styles.starLink}
+              href="https://github.com/FullAgent/fulling"
+              aria-label={`Fulling on GitHub, ${githubStars} stars`}
+            >
+              <SiGithub aria-hidden="true" />
+              <span>{githubStars}</span>
+            </a>
+            <Link href={ctaHref} className={styles.dashboardLink}>
+              Dashboard
+            </Link>
+          </nav>
+        </div>
       </header>
-      <main className="relative grid min-h-[calc(100vh-4rem)] grid-rows-[auto_1fr] lg:grid-cols-[minmax(26rem,0.78fr)_minmax(38rem,1.22fr)] lg:grid-rows-1">
-        <section className="relative z-10 flex flex-col justify-center px-6 py-14 sm:px-10 lg:px-14 lg:py-20">
-          <p className="mb-5 text-sm font-semibold uppercase text-[#287355]">Dedicated AI workspaces</p>
-          <h1 className="max-w-xl font-[family-name:var(--font-heading)] text-5xl font-bold leading-[1.05] sm:text-6xl lg:text-7xl">Fulling</h1>
-          <p className="mt-5 max-w-lg text-lg leading-8 text-[#52606d] sm:text-xl">Connect the Kubernetes credentials that will power your workspace runtime.</p>
-          <div className="mt-8">
-            <Link href={ctaHref} className="inline-flex h-12 items-center gap-2 rounded-md bg-[#090b10] px-5 font-semibold text-white hover:bg-[#252a32]">
-              {actionLabel} <ArrowRight className="size-5" aria-hidden="true" />
+
+      <main id="product" className={styles.main}>
+        <section className={styles.hero}>
+          <figure className={styles.codeFigure}>
+            <div className={styles.codeCard}>
+              <figcaption className={styles.codeCaption}>
+                <span className={styles.windowDots} aria-hidden="true">
+                  <i />
+                  <i />
+                  <i />
+                </span>
+                <span>workspace.ts</span>
+              </figcaption>
+              <pre className={styles.codePanel}>
+                <code>
+                  <span className={styles.syntaxPlum}>const</span>{' '}
+                  workspace <span className={styles.syntaxRust}>=</span>{' '}
+                  <span className={styles.syntaxCobalt}>fulling</span>.<span className={styles.syntaxTeal}>workspace</span>(
+                  <span className={styles.syntaxRust}>&quot;Research&quot;</span>, {'{'}
+                  {'\n  '}mission: <span className={styles.syntaxRust}>&quot;Turn questions into finished work&quot;</span>,
+                  {'\n  '}knowledge: [
+                  <span className={styles.syntaxRust}>&quot;brief.md&quot;</span>, <span className={styles.syntaxRust}>&quot;sources/&quot;</span>],
+                  {'\n  '}skills: [
+                  <span className={styles.syntaxRust}>&quot;research&quot;</span>, <span className={styles.syntaxRust}>&quot;write&quot;</span>],
+                  {'\n  '}memory: <span className={styles.syntaxCobalt}>true</span>,
+                  {'\n  '}scripts: [<span className={styles.syntaxRust}>&quot;collect.ts&quot;</span>, <span className={styles.syntaxRust}>&quot;draft.ts&quot;</span>],
+                  {'\n  '}artifacts: [<span className={styles.syntaxRust}>&quot;report.md&quot;</span>, <span className={styles.syntaxRust}>&quot;sources.json&quot;</span>],
+                  {'\n  '}access: [<span className={styles.syntaxRust}>&quot;read&quot;</span>, <span className={styles.syntaxRust}>&quot;run&quot;</span>, <span className={styles.syntaxRust}>&quot;share&quot;</span>],
+                  {'\n  '}runtime: {'{'}
+                  {'\n    '}status: <span className={styles.syntaxRust}>&quot;ready&quot;</span>,
+                  {'\n    '}sharing: <span className={styles.syntaxRust}>&quot;enabled&quot;</span>
+                  {'\n  '}{'}'}
+                  {'\n'}{'}'})
+                </code>
+              </pre>
+            </div>
+          </figure>
+
+          <div className={styles.heroCopy}>
+            <div className={styles.announcement}>
+              <span className={styles.newBadge}>NEW</span>
+              <span>Fulling v3</span>
+              <span aria-hidden="true">›</span>
+            </div>
+
+            <h1>For whatever you need done.</h1>
+            <p className={styles.intro}>
+              Build and share dedicated AI workspaces with skills, files, memory, scripts, and runtime.
+            </p>
+
+            <Link href={ctaHref} className={styles.previewLink}>
+              Join the v3 preview →
             </Link>
+
+            <div id="workspace-model" className={styles.capabilities}>
+              <p>BUILT FOR AI WORKSPACES</p>
+              <div>
+                <span>MISSION</span>
+                <span>KNOWLEDGE</span>
+                <span>SKILLS</span>
+                <span>MEMORY</span>
+                <span>SCRIPTS</span>
+              </div>
+            </div>
           </div>
         </section>
-        <div className="relative min-h-[22rem] overflow-hidden lg:min-h-0">
-          <Image src="/images/landing-workspace-concept.png" alt="Fulling workspace components arranged as a connected system" fill priority sizes="(max-width: 1024px) 100vw, 60vw" className="object-contain object-center p-4 sm:p-8 lg:object-right lg:p-10" />
-        </div>
       </main>
+
+      <footer className={styles.footer}>
+        <p>© 2026 Fulling</p>
+        <div className={styles.footerRight}>
+          <nav className={styles.footerNav} aria-label="Footer navigation">
+            <a href="https://github.com/FullAgent/fulling/tree/main/docs">Docs</a>
+            <a href="https://github.com/FullAgent/fulling">GitHub</a>
+            <a href="mailto:hello@fulling.ai">Contact</a>
+          </nav>
+          <div className={styles.socialLinks} aria-label="Social links">
+            <a href="https://youtube.com" aria-label="YouTube"><SiYoutube /></a>
+            <a href="https://discord.com" aria-label="Discord"><SiDiscord /></a>
+            <a href="https://github.com/FullAgent/fulling" aria-label="GitHub"><SiGithub /></a>
+            <a href="https://linkedin.com" aria-label="LinkedIn"><FaLinkedinIn /></a>
+            <a href="https://x.com" aria-label="X"><SiX /></a>
+          </div>
+        </div>
+      </footer>
     </div>
   )
 }
diff --git a/app/(landing)/_components/landing.module.css b/app/(landing)/_components/landing.module.css
new file mode 100644
index 0000000..4e5efd7
--- /dev/null
+++ b/app/(landing)/_components/landing.module.css
@@ -0,0 +1,461 @@
+.page {
+  min-height: 100vh;
+  overflow: hidden;
+  background: var(--surface-paper);
+  color: var(--color-fulling-ink);
+  font-family: var(--font-rubik-variable);
+}
+
+.header {
+  position: fixed;
+  inset: 0 0 auto;
+  z-index: 20;
+  height: var(--landing-header-height);
+  padding: 12px 12px 12px 16px;
+  border-bottom: 1px solid var(--color-lavender-mist);
+  background: var(--surface-header);
+  backdrop-filter: blur(8px);
+}
+
+.headerInner {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  width: 100%;
+  height: 39px;
+  gap: 24px;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  width: max-content;
+  gap: 8px;
+  color: var(--color-fulling-ink);
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: -0.5px;
+}
+
+.brandMark {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  overflow: hidden;
+}
+
+.brandMark img {
+  position: absolute;
+  top: -8px;
+  left: -8px;
+  width: 40px;
+  height: 40px;
+  max-width: none;
+  filter: brightness(0);
+}
+
+.headerNav {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 24px;
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.blogLink {
+  color: var(--color-secondary-ink);
+  cursor: not-allowed;
+}
+
+.starLink {
+  display: inline-flex;
+  height: 36px;
+  align-items: center;
+  gap: 6px;
+  padding: 0 4px;
+  border-radius: var(--radius-buttons);
+  color: var(--color-secondary-ink);
+  transition: color 120ms ease;
+}
+
+.starLink svg {
+  width: 18px;
+  height: 18px;
+}
+
+.dashboardLink {
+  display: inline-flex;
+  height: 36px;
+  align-items: center;
+  padding: 0 12px;
+  border: 1px solid var(--color-lavender-mist);
+  border-radius: var(--radius-buttons);
+  color: var(--color-secondary-ink);
+  font-size: 13px;
+  font-weight: 400;
+  transition: color 120ms ease, border-color 120ms ease;
+}
+
+.starLink:hover,
+.dashboardLink:hover {
+  color: var(--color-fulling-ink);
+}
+
+.dashboardLink:hover {
+  border-color: var(--color-border-hover);
+}
+
+.main {
+  padding-top: 64px;
+}
+
+.hero {
+  display: grid;
+  width: 100%;
+  padding: 48px 16px 0;
+}
+
+.codeFigure {
+  position: relative;
+  z-index: 0;
+  width: var(--landing-code-width);
+  height: 499px;
+  justify-self: center;
+}
+
+.codeFigure::before {
+  position: absolute;
+  z-index: -2;
+  inset: -40px;
+  background-image: radial-gradient(var(--color-lavender-mist) 1px, transparent 1px);
+  background-size: 16px 16px;
+  content: '';
+  mask-image: radial-gradient(50% 50%, var(--color-obsidian) 90%, transparent 100%);
+}
+
+.codeCard {
+  height: 100%;
+  overflow: hidden;
+  border: 1px solid var(--color-lavender-mist);
+  border-radius: var(--radius-code-blocks);
+  background-image:
+    linear-gradient(var(--surface-code-top) 0%, var(--surface-code-top) 40%, var(--surface-code-bottom) 70%, var(--surface-code-bottom) 100%),
+    linear-gradient(var(--surface-code-depth-top) 0%, var(--surface-code-depth-top) 35%, var(--surface-code-depth-bottom) 65%, var(--surface-code-depth-bottom) 100%);
+  box-shadow: var(--shadow-code-block);
+}
+
+.codeCaption {
+  position: relative;
+  display: flex;
+  height: 31px;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid var(--color-lavender-mist);
+  background: var(--surface-paper);
+  color: var(--color-code-caption);
+  font-size: 14px;
+  line-height: 23px;
+  letter-spacing: 0.22px;
+}
+
+.windowDots {
+  position: absolute;
+  left: 16px;
+  display: flex;
+  gap: 4px;
+}
+
+.windowDots i {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--color-code-dot);
+}
+
+.codePanel {
+  height: calc(100% - 31px);
+  overflow: auto;
+  padding: 8px 16px 16px;
+  color: var(--color-slate);
+  font-family: var(--font-ibm-plex-mono);
+  font-size: 14.4px;
+  line-height: 23.76px;
+  white-space: pre-wrap;
+}
+
+.syntaxPlum { color: var(--color-code-plum); }
+.syntaxCobalt { color: var(--color-code-cobalt); }
+.syntaxTeal { color: var(--color-code-teal); }
+.syntaxRust { color: var(--color-code-rust); }
+
+.heroCopy {
+  width: min(100%, var(--landing-copy-width));
+  justify-self: center;
+}
+
+.announcement {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--color-secondary-ink);
+  font-size: 14px;
+  line-height: 25.2px;
+}
+
+.newBadge {
+  display: inline-flex;
+  height: 18px;
+  align-items: center;
+  padding: 0 5px;
+  border: 1px solid var(--color-announcement-blue);
+  border-radius: var(--radius-tags);
+  color: var(--color-announcement-blue);
+  font-size: 9px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.5px;
+}
+
+.heroCopy h1 {
+  margin-top: 14px;
+  color: var(--color-fulling-ink);
+  font-family: var(--font-ibm-plex-mono);
+  font-size: 48px;
+  font-weight: 600;
+  line-height: 52.8px;
+  letter-spacing: -1px;
+}
+
+.intro {
+  margin-top: 10px;
+  color: var(--color-secondary-ink);
+  font-size: 20px;
+  line-height: 30px;
+}
+
+.previewLink {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 34px;
+  color: var(--color-fulling-ink);
+  font-family: var(--font-ibm-plex-mono);
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 32px;
+  transition: color 120ms ease;
+}
+
+.previewLink:hover {
+  color: var(--color-code-plum);
+}
+
+.capabilities {
+  margin-top: 144px;
+  color: var(--color-quiet-ink);
+}
+
+.capabilities > p {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.4px;
+}
+
+.capabilities > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 24px;
+  margin-top: 10px;
+  font-family: var(--font-ibm-plex-mono);
+  font-size: 10px;
+  line-height: 16px;
+}
+
+.footer {
+  display: flex;
+  height: var(--landing-footer-height);
+  align-items: center;
+  padding: 0 16px;
+  color: var(--color-quiet-ink);
+  font-size: 14px;
+  line-height: 25.2px;
+}
+
+.footerRight {
+  display: flex;
+  align-items: center;
+  gap: 40px;
+  margin-left: auto;
+}
+
+.footerNav,
+.socialLinks {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.footer a {
+  transition: color 120ms ease;
+}
+
+.footer a:hover {
+  color: var(--color-fulling-ink);
+}
+
+.socialLinks a {
+  display: inline-flex;
+}
+
+.socialLinks svg {
+  width: 14px;
+  height: 14px;
+}
+
+.brand:focus-visible,
+.starLink:focus-visible,
+.dashboardLink:focus-visible,
+.previewLink:focus-visible,
+.footer a:focus-visible {
+  border-radius: var(--radius-md);
+  outline: 2px solid var(--color-fulling-ink);
+  outline-offset: 3px;
+}
+
+@media (max-width: 639px) {
+  .header {
+    height: var(--landing-header-height-compact);
+    padding: 12px 16px;
+  }
+
+  .headerInner {
+    height: 31px;
+  }
+
+  .brand {
+    font-size: 20px;
+  }
+
+  .headerNav {
+    gap: 24px;
+  }
+
+  .starLink,
+  .dashboardLink {
+    display: none;
+  }
+
+  .main {
+    padding-top: var(--landing-header-height-compact);
+  }
+
+  .hero {
+    padding: 24px 16px 0;
+  }
+
+  .heroCopy {
+    grid-row: 1;
+  }
+
+  .heroCopy h1 {
+    margin-top: 12px;
+  }
+
+  .codeFigure {
+    grid-row: 2;
+    width: 100%;
+    height: 600px;
+    margin-top: 64px;
+  }
+
+  .capabilities {
+    margin-top: 104px;
+  }
+
+  .capabilities > div {
+    gap: 8px 18px;
+  }
+
+  .footer {
+    height: 144px;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+    padding: 24px 16px;
+  }
+
+  .footerRight {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 20px;
+    margin-left: 0;
+  }
+
+  .footerNav {
+    gap: 28px;
+  }
+
+  .socialLinks {
+    gap: 20px;
+  }
+}
+
+@media (min-width: 640px) and (max-width: 1023px) {
+  .header {
+    height: var(--landing-header-height-compact);
+    padding: 12px 16px;
+  }
+
+  .headerInner {
+    height: 31px;
+  }
+
+  .starLink,
+  .dashboardLink {
+    display: none;
+  }
+
+  .main {
+    padding-top: var(--landing-header-height-compact);
+  }
+
+  .hero {
+    padding-top: 48px;
+    padding-bottom: 82px;
+  }
+
+  .heroCopy {
+    margin-top: 48px;
+  }
+
+  .capabilities {
+    margin-top: 72px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .main {
+    display: flex;
+    min-height: calc(100vh - 48px);
+    align-items: center;
+  }
+
+  .hero {
+    grid-template-columns: var(--landing-code-width) var(--landing-copy-width);
+    align-items: start;
+    justify-content: center;
+    gap: var(--landing-column-gap);
+    padding: 0;
+    transform: translateY(-20px);
+  }
+
+}
+
+@media (min-width: 1024px) and (max-height: 820px) {
+  .main {
+    min-height: 772px;
+  }
+}
diff --git a/app/(landing)/_lib/get-github-star-count.test.ts b/app/(landing)/_lib/get-github-star-count.test.ts
new file mode 100644
index 0000000..cddb807
--- /dev/null
+++ b/app/(landing)/_lib/get-github-star-count.test.ts
@@ -0,0 +1,42 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { formatGitHubStarCount, getGitHubStarCount } from './get-github-star-count'
+
+describe('getGitHubStarCount', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('reads the repository star count with a one-hour cache policy', async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify({ stargazers_count: 2418 }), { status: 200 }),
+    )
+    vi.stubGlobal('fetch', fetchMock)
+
+    await expect(getGitHubStarCount()).resolves.toBe(2418)
+    expect(fetchMock).toHaveBeenCalledWith(
+      'https://api.github.com/repos/FullAgent/fulling',
+      expect.objectContaining({
+        next: {
+          revalidate: 3600,
+        },
+      }),
+    )
+  })
+
+  it('falls back to the last known compact value when GitHub is unavailable', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('GitHub unavailable')))
+
+    await expect(getGitHubStarCount()).resolves.toBe(2400)
+  })
+})
+
+describe('formatGitHubStarCount', () => {
+  it.each([
+    [999, '999'],
+    [2400, '2.4K'],
+    [25_000, '25K'],
+  ])('formats %i as %s', (starCount, expected) => {
+    expect(formatGitHubStarCount(starCount)).toBe(expected)
+  })
+})
diff --git a/app/(landing)/_lib/get-github-star-count.ts b/app/(landing)/_lib/get-github-star-count.ts
new file mode 100644
index 0000000..d530ef0
--- /dev/null
+++ b/app/(landing)/_lib/get-github-star-count.ts
@@ -0,0 +1,41 @@
+import { z } from 'zod'
+
+const FALLBACK_STAR_COUNT = 2400
+const GITHUB_REPOSITORY_API = 'https://api.github.com/repos/FullAgent/fulling'
+const ONE_HOUR_IN_SECONDS = 60 * 60
+
+const githubRepositorySchema = z.object({
+  stargazers_count: z.number().int().nonnegative(),
+})
+
+export async function getGitHubStarCount(): Promise<number> {
+  try {
+    const response = await fetch(GITHUB_REPOSITORY_API, {
+      headers: {
+        Accept: 'application/vnd.github+json',
+        'User-Agent': 'fulling-landing-page',
+        'X-GitHub-Api-Version': '2022-11-28',
+      },
+      next: {
+        revalidate: ONE_HOUR_IN_SECONDS,
+      },
+    })
+
+    if (!response.ok) {
+      return FALLBACK_STAR_COUNT
+    }
+
+    const repository = githubRepositorySchema.safeParse(await response.json())
+
+    return repository.success ? repository.data.stargazers_count : FALLBACK_STAR_COUNT
+  } catch {
+    return FALLBACK_STAR_COUNT
+  }
+}
+
+export function formatGitHubStarCount(starCount: number): string {
+  return new Intl.NumberFormat('en-US', {
+    notation: 'compact',
+    maximumFractionDigits: 1,
+  }).format(starCount)
+}
diff --git a/app/(landing)/page.tsx b/app/(landing)/page.tsx
index 0f76497..680efd5 100644
--- a/app/(landing)/page.tsx
+++ b/app/(landing)/page.tsx
@@ -1,9 +1,18 @@
 import { getSession } from '@/lib/auth/session'
 
 import { LandingClient } from './_components/landing-client'
+import { formatGitHubStarCount, getGitHubStarCount } from './_lib/get-github-star-count'
 
 export default async function LandingPage() {
-  const session = await getSession()
+  const [session, githubStarCount] = await Promise.all([
+    getSession(),
+    getGitHubStarCount(),
+  ])
 
-  return <LandingClient ctaHref={session ? '/workspace' : '/login'} />
+  return (
+    <LandingClient
+      ctaHref={session ? '/workspace' : '/login'}
+      githubStars={formatGitHubStarCount(githubStarCount)}
+    />
+  )
 }
diff --git a/app/error.tsx b/app/error.tsx
index 36cdf39..0f646c3 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -18,15 +18,16 @@ export default function ErrorPage({
   }, [error])
 
   return (
-    <main className="flex min-h-screen items-center justify-center bg-[#f7f8f6] px-5 py-12 text-[#171a1f]">
-      <div className="w-full max-w-xl">
-        <CircleAlert className="size-10 text-destructive" aria-hidden="true" />
-        <h1 className="mt-6 text-4xl font-semibold">Something went wrong</h1>
-        <p className="mt-3 text-[#5e6974]">
+    <main className="flex min-h-screen items-center justify-center bg-background px-4 py-12 text-foreground sm:px-6">
+      <div className="w-full max-w-lg border-y border-border py-8">
+        <CircleAlert className="size-8 text-destructive" aria-hidden="true" />
+        <p className="mt-5 font-mono text-[length:var(--text-micro)] font-medium uppercase tracking-[0.056em] text-muted-foreground">Application error</p>
+        <h1 className="mt-2 text-xl font-semibold leading-[var(--leading-heading)]">Something went wrong</h1>
+        <p className="mt-2 text-sm leading-6 text-muted-foreground">
           The request could not be completed. Try again or return to Fulling.
         </p>
         {error.digest ? (
-          <p className="mt-6 font-mono text-xs text-[#5e6974]">Reference: {error.digest}</p>
+          <p className="mt-6 font-mono text-xs text-muted-foreground">Reference: {error.digest}</p>
         ) : null}
         <div className="mt-8 flex flex-col gap-3 sm:flex-row">
           <Button type="button" onClick={reset}>
diff --git a/app/globals.css b/app/globals.css
index bf61c61..4445c9b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,26 +2,140 @@
 @import "tw-animate-css";
 
 :root {
-  --background: #f7f8f6;
-  --foreground: #171a1f;
-  --card: #ffffff;
-  --card-foreground: #171a1f;
-  --popover: #ffffff;
-  --popover-foreground: #171a1f;
-  --primary: #171a1f;
-  --primary-foreground: #ffffff;
-  --secondary: #eef1ef;
-  --secondary-foreground: #30373e;
-  --muted: #f0f2f1;
-  --muted-foreground: #5e6974;
-  --accent: #edf3ef;
-  --accent-foreground: #245f49;
-  --destructive: #c43d3d;
-  --destructive-foreground: #ffffff;
-  --border: #dce1e4;
-  --input: #d4dade;
-  --ring: #287355;
-  --radius: 0.375rem;
+  /* Fulling design tokens — the single executable source of truth. */
+  --color-fulling-ink: #303055;
+  --color-code-plum: #8844ae;
+  --color-code-cobalt: #3b61b0;
+  --color-code-teal: #096e72;
+  --color-code-rust: #984e4d;
+  --color-slate: #403f53;
+  --color-fog: #767682;
+  --color-mist: #a8a8b0;
+  --color-obsidian: #111111;
+  --color-lavender-mist: #e8e8f2;
+  --color-paper: #ffffff;
+  --color-secondary-ink: rgba(26, 26, 46, 0.6);
+  --color-quiet-ink: rgba(26, 26, 46, 0.38);
+  --color-announcement-blue: #5196b3;
+  --color-status-success: #35654d;
+  --color-status-warning: #755c16;
+  --color-status-error: #a13d3b;
+  --color-status-info: #405f88;
+
+  --font-rubik-variable: "Rubik Variable", ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-ibm-plex-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
+    Consolas, monospace;
+
+  --text-micro: 9px;
+  --leading-micro: 1.78;
+  --text-caption: 12px;
+  --leading-caption: 1.5;
+  --text-metadata: 13px;
+  --leading-metadata: 1.2;
+  --text-body: 14px;
+  --leading-body: 1.8;
+  --text-body-lg: 16px;
+  --leading-body-lg: 1.8;
+  --text-heading-sm: 18px;
+  --leading-heading-sm: 1.5;
+  --text-heading: 20px;
+  --leading-heading: 1.5;
+  --text-display: 48px;
+  --leading-display: 1.1;
+  --tracking-display: -1.01px;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+
+  /* Tailwind type aliases derive every used utility from the Fulling scale. */
+  --text-xs: var(--text-caption);
+  --text-xs--line-height: var(--leading-caption);
+  --text-sm: var(--text-body);
+  --text-sm--line-height: var(--leading-body);
+  --text-base: var(--text-body-lg);
+  --text-base--line-height: var(--leading-body-lg);
+  --text-lg: var(--text-heading-sm);
+  --text-lg--line-height: var(--leading-heading-sm);
+  --text-xl: var(--text-heading);
+  --text-xl--line-height: var(--leading-heading);
+
+  --spacing-unit: 4px;
+  --spacing: var(--spacing-unit);
+  --spacing-4: 4px;
+  --spacing-8: 8px;
+  --spacing-12: 12px;
+  --spacing-16: 16px;
+  --spacing-24: 24px;
+  --spacing-32: 32px;
+  --spacing-40: 40px;
+  --spacing-48: 48px;
+  --spacing-64: 64px;
+  --spacing-72: 72px;
+
+  --page-max-width: 1200px;
+  --landing-hero-width: 857px;
+  --landing-code-width: 408px;
+  --landing-copy-width: 400px;
+  --landing-column-gap: 49px;
+  --landing-header-height: 64px;
+  --landing-header-height-compact: 56px;
+  --landing-footer-height: 48px;
+  --header-utility-height: 36px;
+  --section-gap: 64px;
+  --card-padding: 16px;
+  --element-gap-min: 10px;
+  --element-gap-max: 16px;
+
+  --radius-sm: 1px;
+  --radius-md: 4px;
+  --radius-lg: 8px;
+  --radius-tags: var(--radius-md);
+  --radius-inputs: var(--radius-md);
+  --radius-buttons: var(--radius-md);
+  --radius-cards: var(--radius-lg);
+  --radius-code-blocks: var(--radius-lg);
+
+  --surface-paper: var(--color-paper);
+  --surface-lavender-mist: var(--color-lavender-mist);
+  --surface-header: rgba(255, 255, 255, 0.8);
+  --surface-code-top: #fcfcfd;
+  --surface-code-bottom: #f8f8fb;
+  --surface-code-depth-top: #efeff6;
+  --surface-code-depth-bottom: #e5e5f0;
+  --surface-destructive-subtle: rgba(161, 61, 59, 0.08);
+  --surface-dialog-overlay: rgba(26, 26, 46, 0.58);
+  --color-code-caption: rgba(26, 26, 46, 0.42);
+  --color-code-dot: #d2d2df;
+  --color-border-hover: #cfcfdd;
+  --shadow-code-block:
+    rgba(199, 199, 199, 0.04) 0 1px 1.5px,
+    rgba(199, 199, 199, 0.08) 0.1px 12px 18px,
+    rgba(199, 199, 199, 0.08) 0.3px 26px 39px,
+    rgba(199, 199, 199, 0.1) 0.6px 55px 82.5px,
+    rgba(255, 255, 255, 0.9) 0 0 2px 1px inset;
+  --shadow-dialog: 0 16px 48px rgba(26, 26, 46, 0.14);
+
+  /* Semantic aliases consumed by shared UI primitives and Tailwind. */
+  --background: var(--color-paper);
+  --foreground: var(--color-fulling-ink);
+  --card: var(--color-paper);
+  --card-foreground: var(--color-fulling-ink);
+  --popover: var(--color-paper);
+  --popover-foreground: var(--color-fulling-ink);
+  --primary: var(--color-fulling-ink);
+  --primary-foreground: var(--color-paper);
+  --secondary: var(--color-lavender-mist);
+  --secondary-foreground: var(--color-fulling-ink);
+  --muted: var(--color-lavender-mist);
+  --muted-foreground: var(--color-fog);
+  --accent: var(--color-lavender-mist);
+  --accent-foreground: var(--color-fulling-ink);
+  --destructive: var(--color-status-error);
+  --destructive-foreground: var(--color-paper);
+  --border: var(--color-lavender-mist);
+  --input: var(--color-lavender-mist);
+  --ring: var(--color-fulling-ink);
 }
 
 @theme inline {
@@ -44,7 +158,9 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
-  --font-sans: var(--font-body);
+  --color-destructive-subtle: var(--surface-destructive-subtle);
+  --font-sans: var(--font-rubik-variable);
+  --font-mono: var(--font-ibm-plex-mono);
 }
 
 * {
@@ -60,16 +176,31 @@ body {
   min-height: 100vh;
   background: var(--background);
   color: var(--foreground);
-  font-family: var(--font-body), sans-serif;
+  font-family: var(--font-rubik-variable);
+  font-size: var(--text-body);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--leading-body);
 }
 
 button,
 a,
 input,
-textarea {
+textarea,
+select {
   -webkit-tap-highlight-color: transparent;
 }
 
+:where(a, button, input, textarea, select, [tabindex]):focus-visible {
+  border-radius: var(--radius-md);
+  outline: 2px solid var(--color-fulling-ink);
+  outline-offset: 3px;
+}
+
+::selection {
+  background: var(--color-lavender-mist);
+  color: var(--color-fulling-ink);
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
diff --git a/app/layout.tsx b/app/layout.tsx
index f641f22..a76633d 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,18 +1,18 @@
 import type { Metadata } from 'next';
-import { Noto_Sans, Space_Grotesk } from 'next/font/google';
+import { IBM_Plex_Mono, Rubik } from 'next/font/google';
 
 import './globals.css';
 
-const spaceGrotesk = Space_Grotesk({
+const rubik = Rubik({
   subsets: ['latin'],
-  variable: '--font-heading',
-  weight: ['500', '600', '700'],
+  variable: '--font-rubik-variable',
+  weight: ['400', '500', '600'],
 });
 
-const notoSans = Noto_Sans({
+const ibmPlexMono = IBM_Plex_Mono({
   subsets: ['latin'],
-  variable: '--font-body',
-  weight: ['400', '500'],
+  variable: '--font-ibm-plex-mono',
+  weight: ['400', '500', '600'],
 });
 
 export const metadata: Metadata = {
@@ -27,7 +27,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${spaceGrotesk.variable} ${notoSans.variable} bg-background antialiased`}>
+      <body
+        className={`${rubik.variable} ${ibmPlexMono.variable} antialiased`}
+      >
         {children}
       </body>
     </html>
diff --git a/app/not-found.tsx b/app/not-found.tsx
index b603e52..40732d5 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -5,12 +5,12 @@ import { Button } from '@/components/ui/button'
 
 export default function NotFound() {
   return (
-    <main className="flex min-h-screen items-center justify-center bg-[#f7f8f6] px-5 py-12 text-[#171a1f]">
-      <div className="w-full max-w-xl">
-        <CircleHelp className="size-10 text-[#5e6974]" aria-hidden="true" />
-        <p className="mt-6 text-sm font-semibold text-[#287355]">404</p>
-        <h1 className="mt-2 text-4xl font-semibold">Page not found</h1>
-        <p className="mt-3 text-[#5e6974]">
+    <main className="flex min-h-screen items-center justify-center bg-background px-4 py-12 text-foreground sm:px-6">
+      <div className="w-full max-w-lg border-y border-border py-8">
+        <CircleHelp className="size-8 text-muted-foreground" aria-hidden="true" />
+        <p className="mt-5 font-mono text-[length:var(--text-micro)] font-medium uppercase tracking-[0.056em] text-muted-foreground">404</p>
+        <h1 className="mt-2 text-xl font-semibold leading-[var(--leading-heading)]">Page not found</h1>
+        <p className="mt-2 text-sm leading-6 text-muted-foreground">
           The page does not exist or has moved.
         </p>
         <div className="mt-8 flex flex-col gap-3 sm:flex-row">
diff --git a/components/fulling-brand.tsx b/components/fulling-brand.tsx
new file mode 100644
index 0000000..e5d62c4
--- /dev/null
+++ b/components/fulling-brand.tsx
@@ -0,0 +1,34 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+import { cn } from '@/lib/utils'
+
+type FullingBrandProps = {
+  className?: string
+  href?: string
+}
+
+export function FullingBrand({ className, href = '/' }: FullingBrandProps) {
+  return (
+    <Link
+      href={href}
+      className={cn(
+        'inline-flex w-max items-center gap-2 text-xl font-semibold leading-none text-foreground',
+        className,
+      )}
+      aria-label="Fulling home"
+    >
+      <span className="relative size-6 overflow-hidden" aria-hidden="true">
+        <Image
+          src="/icon-transparent.svg"
+          alt=""
+          width={40}
+          height={40}
+          className="absolute -left-2 -top-2 size-10 max-w-none brightness-0"
+          priority
+        />
+      </span>
+      <span>Fulling</span>
+    </Link>
+  )
+}
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
index 0ebd23b..5417e9f 100644
--- a/components/ui/alert-dialog.tsx
+++ b/components/ui/alert-dialog.tsx
@@ -36,7 +36,7 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/70 backdrop-blur-[2px]",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[var(--surface-dialog-overlay)]",
         className
       )}
       onClick={(e) => {
@@ -63,7 +63,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-2xl duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-[var(--radius-cards)] border p-6 shadow-[var(--shadow-dialog)] duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg",
           className
         )}
         {...props}
@@ -141,7 +141,7 @@ function AlertDialogMedia({
     <div
       data-slot="alert-dialog-media"
       className={cn(
-        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-[var(--radius-md)] sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
         className
       )}
       {...props}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index b5ea4ab..d511fa9 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,28 +5,31 @@ import { Slot } from "radix-ui"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-buttons)] text-sm font-medium transition-colors disabled:pointer-events-none disabled:text-[var(--color-mist)] disabled:opacity-60 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "border border-destructive bg-background text-destructive hover:bg-destructive-subtle",
+        destructiveSolid:
+          "border border-destructive bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "border border-border bg-secondary text-secondary-foreground hover:border-[var(--color-border-hover)]",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "text-[var(--color-fog)] hover:bg-accent hover:text-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        default: "h-9 px-4 has-[>svg]:px-3",
+        xs: "h-6 gap-1 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 px-5 has-[>svg]:px-4",
         icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-8",
         "icon-lg": "size-10",
       },
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
index 7f21b5e..5fa20a4 100644
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex field-sizing-content min-h-16 w-full rounded-[var(--radius-inputs)] border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors aria-invalid:border-destructive disabled:cursor-not-allowed disabled:bg-muted disabled:text-[var(--color-mist)]",
         className
       )}
       {...props}
diff --git a/docs/design.md b/docs/design.md
new file mode 100644
index 0000000..05aa65e
--- /dev/null
+++ b/docs/design.md
@@ -0,0 +1,615 @@
+# Fulling — Style Reference
+
+> A dedicated AI workspace presented like a polished developer tool. The workspace configuration is the artwork; everything else is a clean white frame.
+
+**Version:** 1.2
+
+**Theme:** light
+
+**Status:** active — global foundation migrated and live SST parity audited 2026-07-14
+
+**Applies to:** public pages, authentication, creator workflows, recipient workflows, and shared product primitives
+
+## Source and fidelity
+
+Fulling's visual system is intentionally derived from [SST](https://sst.dev/) and the [SST Style Guide on Refero](https://styles.refero.design/style/19f92be1-65ac-4432-a82b-0aa1e685d97d). The live SST site is the authoritative upstream reference for rendered dimensions and responsive behavior; Refero supplies the broader style taxonomy. SST defines the visual language, layout density, typography, spacing, color, borders, radii, controls, navigation, and interaction patterns.
+
+The implementation should reproduce SST's system as closely as possible. Adaptation is limited to Fulling's brand, copy, product model, accessibility requirements, and workspace workflows. Do not invent an additional visual language for Fulling.
+
+When sources disagree, use this order:
+
+1. `docs/architecture.md` for Fulling's product model and workflows.
+2. This document for Fulling-specific adaptations and codified implementation values.
+3. The live SST site for rendered visual details, exact dimensions, and responsive behavior.
+4. The Refero SST Style Guide for upstream patterns not exposed by the live landing page.
+
+Any intentional visual deviation from SST must be documented here before it becomes a reusable pattern. Existing code that conflicts with this document is migration work, not precedent.
+
+`app/globals.css` is Fulling's only executable token source. Pages, CSS modules, and shared components must consume its custom properties or Tailwind semantic aliases; they must not redeclare palette, typography, shape, surface, elevation, or status values locally. This document is the human-readable specification and must be updated in the same change whenever the global source changes.
+
+## Design language
+
+Fulling reads like a developer's terminal wrapped in a polished workspace product. A monospaced configuration, file, log, or runtime surface should carry the visual identity instead of decorative illustration. Typography is strictly two-family: IBM Plex Mono carries code, technical labels, and identifiers, while Rubik Variable handles prose, navigation, and UI chrome.
+
+The palette is austere and off-black. A signature dark indigo-violet (`#303055`) drives headings, body, and links on a pure white canvas, with a barely tinted lavender-gray (`#e8e8f2`) as the only soft surface accent. Code syntax uses four muted but distinct hues that do not bleed into the surrounding UI. Components are minimal and flat: small radii, hairline borders, text-first actions, and no decorative shadows.
+
+The product should feel restrained, technical, dense, and scannable. It must not resemble a generic AI marketing site, chatbot builder, Kubernetes dashboard, or card-heavy SaaS template.
+
+## Tokens — Colors
+
+The values below intentionally match the SST reference. Fulling changes only the brand-specific token name from SST Ink to Fulling Ink.
+
+| Name | Value | Token | Role |
+|------|-------|-------|------|
+| Fulling Ink | `#303055` | `--color-fulling-ink` | Headings, body text, links, and primary text. The dark indigo-violet replaces conventional near-black. |
+| Code Plum | `#8844ae` | `--color-code-plum` | Code syntax for strings, property names, and keywords. Reserved for code and inline code. |
+| Code Cobalt | `#3b61b0` | `--color-code-cobalt` | Code syntax for method names, object keys, and function calls. |
+| Code Teal | `#096e72` | `--color-code-teal` | Code syntax for types, decorators, and selected technical tokens. |
+| Code Rust | `#984e4d` | `--color-code-rust` | Code syntax for templates, literals, and low-frequency technical emphasis. |
+| Slate | `#403f53` | `--color-slate` | Secondary technical text and code that should not compete with headings. |
+| Fog | `#767682` | `--color-fog` | Helper text, icon fills, secondary actions, and navigation metadata. |
+| Mist | `#a8a8b0` | `--color-mist` | Disabled text, quiet metadata, subtle icon outlines, and the lightest text role. |
+| Obsidian | `#111111` | `--color-obsidian` | Occasional maximum-contrast text or borders where absolute contrast is required. |
+| Lavender Mist | `#e8e8f2` | `--color-lavender-mist` | Hairline borders, code backgrounds, tag fills, inputs, and soft surfaces. |
+| Paper | `#ffffff` | `--color-paper` | Page canvas and primary surfaces. It is not a filled CTA color. |
+| Secondary Ink | `rgba(26, 26, 46, 0.60)` | `--color-secondary-ink` | Canonical landing-page supporting copy, navigation metadata, and utility text. |
+| Quiet Ink | `rgba(26, 26, 46, 0.38)` | `--color-quiet-ink` | Canonical landing-page footer and low-priority metadata. |
+| Announcement Blue | `#5196b3` | `--color-announcement-blue` | SST-matched `NEW` badge border and text only. |
+
+### Color rules
+
+- Use Fulling Ink as the single primary heading and link color.
+- Use Secondary Ink for public-page supporting copy. Use Slate or Fog for product and technical secondary copy.
+- Use Mist for disabled and deliberately quiet information, while maintaining accessible contrast for required content.
+- Use Lavender Mist as the only general surface tint above white.
+- Reserve Code Plum, Cobalt, Teal, and Rust for code blocks, terminal output, diffs, and inline `code` spans.
+- Do not create a separate marketing accent color or filled CTA color.
+- Do not use legacy green tokens in migrated Fulling surfaces.
+- Destructive and status colors are functional exceptions and must be quiet, accessible, and confined to status semantics.
+
+### Functional status colors
+
+SST's public style reference does not define a complete application status palette. Fulling may use the following semantic roles only where status cannot be communicated clearly through text and iconography alone:
+
+| Role | Value | Token | Usage |
+|------|-------|-------|-------|
+| Success | `#35654d` | `--color-status-success` | Completed, healthy, connected, or ready states. |
+| Warning | `#755c16` | `--color-status-warning` | Degraded, pending attention, or expiring states. |
+| Error | `#a13d3b` | `--color-status-error` | Failed, invalid, disconnected, or destructive states. |
+| Info | `#405f88` | `--color-status-info` | Neutral progress or informational state. |
+
+These values are the adopted light-theme status colors and are reserved for semantic feedback. Do not reuse code syntax colors as shortcuts for product status.
+
+## Tokens — Typography
+
+### IBM Plex Mono
+
+The code and technical voice. Use it for code blocks, terminal output, logs, inline code, file names, paths, runtime identifiers, API identifiers, command lines, technical labels, and machine-readable values.
+
+- **Token:** `--font-ibm-plex-mono`
+- **Substitute:** JetBrains Mono, Fira Code, Space Mono
+- **Weights:** 400, 600
+- **Sizes:** 14, 16, 18, 48
+- **Line height:** 1.00–1.80
+- **Letter spacing:** `-0.021em`
+- **Role:** Technical content only. Weight 600 highlights prompts, file names, and key tokens.
+
+### Rubik Variable
+
+The product and prose voice. Use it for navigation, product headings, body copy, labels, buttons, footer text, dialogs, forms, and UI metadata. The public landing display headline is the documented IBM Plex Mono exception.
+
+- **Token:** `--font-rubik-variable`
+- **Substitute:** Inter, IBM Plex Sans, Geist
+- **Weights:** 400, 500, 600
+- **Sizes:** 9, 12, 13, 14, 16, 18, 20
+- **Line height:** 1.00–1.80
+- **Letter spacing:** `0.016em–0.056em` for uppercase labels
+- **Role:** Weight 400 is default body, 500 is navigation and action emphasis, and 600 is headings.
+
+### Type scale
+
+| Role | Size | Weight | Line height | Letter spacing | Token |
+|------|------|--------|-------------|----------------|-------|
+| micro | 9px | 500 | 1.78 | `0.056em` uppercase | `--text-micro` |
+| caption | 12px | 400 | 1.5 | — | `--text-caption` |
+| metadata | 13px | 400 | 1.2 | — | `--text-metadata` |
+| body | 14px | 400 | 1.8 | — | `--text-body` |
+| body-lg | 16px | 400 | 1.8 | — | `--text-body-lg` |
+| heading-sm | 18px | 600 | 1.5 | — | `--text-heading-sm` |
+| heading | 20px | 400–600 | 1.5 | — | `--text-heading` |
+| display | 48px | 600 | 1.1 | `-1.01px` | `--text-display` |
+
+### Typography rules
+
+- Use Rubik Variable at 14px weight 400 and 1.8 line height for standard prose.
+- Use IBM Plex Mono for every code surface and technical identifier.
+- Do not mix the two families within one content role.
+- Do not use monospaced type merely to make an interface look technical.
+- Uppercase eyebrows and compact labels may use positive tracking; normal prose must not.
+- Marketing display copy may use the monospaced display treatment only when directly reproducing an approved SST-derived composition. Product UI headings remain Rubik.
+
+## Tokens — Spacing & Shapes
+
+**Base unit:** 4px
+
+**Density:** comfortable and compact
+
+### Spacing scale
+
+| Name | Value | Token |
+|------|-------|-------|
+| 4 | 4px | `--spacing-4` |
+| 8 | 8px | `--spacing-8` |
+| 12 | 12px | `--spacing-12` |
+| 16 | 16px | `--spacing-16` |
+| 24 | 24px | `--spacing-24` |
+| 32 | 32px | `--spacing-32` |
+| 40 | 40px | `--spacing-40` |
+| 48 | 48px | `--spacing-48` |
+| 64 | 64px | `--spacing-64` |
+| 72 | 72px | `--spacing-72` |
+
+Use only values on the 4px grid unless a source-matching optical adjustment is documented. Prefer 10–16px gaps inside compact controls only when matching the SST source precisely.
+
+### Border radius
+
+| Element | Value | Token |
+|---------|-------|-------|
+| hairline details | 1px | `--radius-sm` |
+| tags | 4px | `--radius-tags` |
+| inputs | 4px | `--radius-inputs` |
+| buttons | 4px | `--radius-buttons` |
+| cards | 8px | `--radius-cards` |
+| code blocks | 8px | `--radius-code-blocks` |
+
+Pill shapes are allowed only for compact utility controls whose SST reference is pill-shaped. Structural cards, panels, dialogs, and workspace surfaces must not use large radii.
+
+### Layout
+
+- **Product page max-width:** 1200px
+- **Landing hero width:** 857px (`408px + 49px + 400px`)
+- **Section gap:** 64px
+- **Card padding:** 16px
+- **Element gap:** 10–16px
+- **Control height:** 36px for SST-matched header utilities; otherwise compact and source-matched within 32–40px
+- **Border:** 1px hairline in Lavender Mist
+- **Desktop:** dense, scannable panes with clear alignment
+- **Mobile:** preserve hierarchy and behavior; stack panes instead of inventing a separate visual system
+
+## Components
+
+### Code Block
+
+**Role:** Hero centerpiece, configuration preview, and content illustration
+
+Use an 8px radius, SST's subtle `#fcfcfd` to `#f8f8fb` vertical surface treatment, and a 1px Lavender Mist border. Content uses IBM Plex Mono at 14.4px with a 23.76px line height and 16px horizontal padding. Prompts and commands use Fulling Ink, strings use Code Plum, object keys and functions use Code Cobalt, types use Code Teal, and literals may use Code Rust. The landing hero uses a source-matched low-contrast multi-stop shadow and the 16px SST dot mask behind the code surface; this is the only approved decorative texture.
+
+### Ghost Nav Button
+
+**Role:** Primary navigation
+
+Transparent background and no default border. Use Rubik Variable 14px weight 500 in Fulling Ink. Inactive items use Fog. Hover and active states may use a 4px radius with a subtle Lavender Mist treatment.
+
+### Text Link / Inline Action
+
+**Role:** In-content navigation and primary calls to action
+
+Use Rubik Variable 14–16px weight 500 in Fulling Ink with no default underline. Hover may underline or shift to a nearby neutral. Follow the label with the source-appropriate `>` chevron or `→`. Do not use a filled primary background.
+
+### New Badge
+
+**Role:** Feature announcement
+
+Use a transparent fill, 1px Announcement Blue border, 4px radius, 18px total height, and 5px horizontal padding. The label uses Rubik Variable 9px weight 500, uppercase, `0.5px` tracking, and Announcement Blue.
+
+### Search Bar
+
+**Role:** Global search trigger
+
+Use a 36px-high transparent trigger with a 1px Lavender Mist border and 4px radius. Placeholder text uses Rubik Variable 13–14px weight 400 in Secondary Ink. A keyboard shortcut hint uses IBM Plex Mono 12px in Mist. When paired with an adjacent utility, use joined 4px outer corners and square shared corners as SST does.
+
+### Utility Button
+
+**Role:** Header and shell utilities such as Dashboard, Share, Preview, or Console
+
+Use a 36px-high transparent background with a 1px Lavender Mist border and 4px radius. Text uses Rubik Variable 13px weight 400 in Secondary Ink. Match SST's compact proportions and avoid a filled background.
+
+### Brand Logo Mark
+
+**Role:** Top-left identity anchor
+
+Use the official Fulling mark followed by the Fulling wordmark in Rubik Variable, weight 600, Fulling Ink. Keep the lockup compact, unboxed, and flush-left in the header. Do not redraw or decorate the logo in CSS.
+
+### Social Proof Strip
+
+**Role:** Quiet trust signal on public pages
+
+Use a horizontal row of grayscale logos or concise product capabilities at 60–80% opacity in Fog. Keep 24–32px gaps and no borders. The eyebrow uses Rubik Variable 9–12px uppercase with tracked lettering in Mist.
+
+### Hero Text Block
+
+**Role:** Primary public value proposition
+
+Use a right-column composition at desktop. The canonical SST treatment is IBM Plex Mono 48px weight 600, `52.8px` line height, and `-1px` letter spacing in Fulling Ink. Supporting text uses Rubik Variable 20px weight 400 with a 30px line height in Secondary Ink. The text column is exactly 400px at tablet and desktop. Use no containing card, decorative background, or border.
+
+### Terminal Command Line
+
+**Role:** Technical inline action or example
+
+Use IBM Plex Mono 14px. The prompt is Mist and the command is Fulling Ink at weight 600. Use this only for real commands. Fulling is a web application, so public calls to action must not be presented as fictional CLI commands.
+
+### Footer Link Group
+
+**Role:** Secondary public navigation
+
+Place copyright at the left in Rubik Variable 12–13px weight 400 and Mist. Place text links and monochrome social icons at the right in Fog with 16–24px gaps and no separators. Stack cleanly on narrow screens.
+
+## Product components
+
+These components extend the SST language to Fulling's workspace product model. They must use the same tokens, density, shapes, and interaction behavior rather than introducing a parallel application style.
+
+### Application Shell
+
+**Role:** Persistent creator and recipient navigation
+
+Use a white canvas, hairline dividers, compact navigation, and flat panes. The Fulling brand anchors the top-left. Workspace identity and primary navigation must remain scannable. Avoid oversized sidebars, floating navigation cards, gradients, and decorative backgrounds.
+
+### Workspace Row
+
+**Role:** Workspace lists, search results, and recents
+
+Prefer aligned rows over marketing cards. Show name, concise metadata, status, owner or recipient context, and the primary action. Use 16px padding, 1px Lavender Mist dividers, Rubik for labels, and IBM Plex Mono only for identifiers or timestamps that benefit from fixed-width alignment.
+
+### Workspace Configuration Panel
+
+**Role:** Mission, knowledge, memory, skills, scripts, and runtime configuration
+
+Use a flat white surface with a small Rubik heading, concise helper copy, and compact controls. Group related settings with spacing and hairline separators, not nested cards. Technical values, file paths, and runtime identifiers use IBM Plex Mono.
+
+### Workspace Navigation
+
+**Role:** Movement between Mission, Knowledge, Memory, Skills, Scripts, Runtime, Test, and Share
+
+Use compact text-first navigation. Active state is expressed with Fulling Ink, weight, and a restrained border or Lavender Mist surface. Inactive items use Fog. Preserve the same order and labels across desktop and mobile.
+
+### Runtime Status
+
+**Role:** Runtime readiness and lifecycle feedback
+
+Pair a concise text label with an icon and optional semantic status color. Do not rely on color alone. Runtime IDs, image references, ports, and timestamps use IBM Plex Mono. Actions remain ghost or outlined unless destructive.
+
+### File, Knowledge, Skill, and Script Row
+
+**Role:** Dense capability management
+
+Use aligned rows with a leading type icon, primary label, concise metadata, status, and trailing actions. Prefer hairline separators over individual cards. Names and paths may use IBM Plex Mono when they are technical identifiers; explanatory text remains Rubik.
+
+### Editor and Terminal Surface
+
+**Role:** Mission editing, scripts, logs, files, and test console output
+
+Use IBM Plex Mono inside the technical surface, 1px Lavender Mist borders, 4–8px radius, white or Lavender Mist background, and restrained syntax color. Provide visible focus, selection, empty, loading, and error states. Do not add fake terminal chrome where it does not clarify function.
+
+### Form Control
+
+**Role:** Text fields, textareas, selects, checkboxes, and switches
+
+Use a 4px radius, 1px Lavender Mist border, white background, Rubik 14px labels, and compact height. Focus must be visible without using code syntax colors as decoration. Helper and validation text sits directly below the field. Disabled controls use Mist but remain legible.
+
+### Dialog
+
+**Role:** Focused creation, confirmation, sharing, and destructive actions
+
+Use a white surface, 8px radius, hairline border, minimal elevation, and 16–24px internal spacing. Headings and copy use Rubik. Technical names may use IBM Plex Mono. Primary actions remain restrained; destructive confirmation is the only place where a functional error treatment may dominate.
+
+### Empty State
+
+**Role:** First use and zero-data guidance
+
+Use concise copy and one clear text or ghost action. An approved product icon may be used, but no decorative illustration is required. Explain what the missing object enables rather than filling the surface with marketing language.
+
+### Artifact Row
+
+**Role:** Generated files, reports, tables, images, logs, and approval records
+
+Use an aligned row with type, title, creator or run context, timestamp, and open or download action. Keep preview imagery subordinate to the information structure. Use IBM Plex Mono for file names and machine identifiers.
+
+## Interaction states
+
+Every reusable control and workflow must define the following where applicable:
+
+### Hover
+
+Use small changes in text color, underline, border, or Lavender Mist surface. Avoid movement, scale, glow, and dramatic elevation.
+
+### Focus
+
+Provide a clearly visible keyboard focus indicator with sufficient contrast and at least a 2px effective outline. Focus order must follow reading order. Do not remove outlines without a replacement.
+
+### Active and selected
+
+Use Fulling Ink, weight, a restrained border, or Lavender Mist surface. Do not introduce a new selection color.
+
+### Disabled
+
+Use Mist and reduced emphasis while retaining the label and reason where useful. Disabled controls are non-interactive and must not masquerade as loading controls.
+
+### Loading
+
+Preserve layout to avoid shifts. Use compact progress text, a restrained spinner, or skeletons built from Lavender Mist. Do not replace an entire workspace with decorative animation.
+
+### Empty
+
+State what is absent, why it matters, and the single next action. Match surrounding density.
+
+### Error
+
+Place the error near its cause. Use direct language, an icon where helpful, and a recovery action. Never rely on color alone.
+
+### Destructive
+
+Require explicit labels and confirmation proportional to the consequence. Name the affected workspace or object. Do not use vague labels such as “Continue.”
+
+## Do's and Don'ts
+
+### Do
+
+- Reproduce SST's typography, palette, spacing, density, borders, radii, and interaction restraint.
+- Use IBM Plex Mono for code, terminal output, file names, paths, runtime IDs, and technical identifiers.
+- Use Rubik Variable for product UI, prose, headings, buttons, labels, and navigation.
+- Use Fulling Ink as the single heading and link color.
+- Use Lavender Mist as the only general surface tint above white.
+- Use 4px radii for buttons, tags, and inputs, and 8px for cards and code blocks.
+- Keep navigation and calls to action text-first or ghost-style.
+- Prefer aligned rows, panes, and separators over collections of cards.
+- Keep desktop and mobile behavior consistent.
+- Meet WCAG AA contrast and provide complete keyboard interaction.
+
+### Don't
+
+- Do not create a filled primary CTA color.
+- Do not apply code syntax colors to ordinary UI, icons, badges, focus rings, or marketing decoration.
+- Do not add drop shadows to cards, buttons, navigation, or routine product panels.
+- Do not mix Rubik and IBM Plex Mono within the same content role.
+- Do not use black or generic neutral gray when Fulling Ink, Slate, Fog, or Mist is appropriate.
+- Do not introduce gradients, textures, glass effects, glow, or decorative backgrounds outside the exact SST-derived code-surface treatment and dot mask documented here.
+- Do not use large radii on structural elements.
+- Do not use generic marketing cards, oversized metrics, or decorative AI imagery.
+- Do not let existing legacy UI define new patterns.
+- Do not invent dark mode until it has a separate approved reference and complete token set.
+
+## Surfaces
+
+| Level | Name | Value | Purpose |
+|-------|------|-------|---------|
+| 0 | Paper | `#ffffff` | Page canvas and primary card or pane surfaces. |
+| 1 | Lavender Mist | `#e8e8f2` | Code backgrounds, subtle tags, inputs, selected rows, and soft separation. |
+
+Use borders and spacing before adding another surface level. Additional elevations or tinted surfaces require a documented product need and an approved SST-aligned reference.
+
+## Elevation
+
+- **Code block:** use the source-matched `--shadow-code-block` token from `app/globals.css`
+- **Dialog:** use `--shadow-dialog` only to separate the modal plane from its backdrop
+- **Cards, buttons, navigation, rows, and routine panels:** no shadow
+
+## Imagery
+
+Fulling is essentially imageless. Public pages use syntax-highlighted workspace configuration as the hero visual instead of photography, illustration, 3D rendering, abstract graphics, or fake product screenshots. The SST-derived 16px dot mask behind the hero code surface is a layout texture, not brand imagery. Product surfaces use real files, artifacts, logs, output previews, and approved icons only when they communicate function.
+
+The official Fulling mark, monochrome proof logos, and small social icons are the only default brand graphics. The visual identity is the workspace itself.
+
+Do not use lifestyle photography, robots, brains, sparkles, glowing orbs, gradients, abstract AI waves, or decorative Kubernetes imagery.
+
+## Layout
+
+### Public pages
+
+Use the measured SST landing composition:
+
+- At `1024px` and wider, use a centered `408px / 400px` two-column grid with a `49px` gap. The code surface is `408 × 499px`; the display headline and supporting copy occupy the 400px right column. Align both the top and bottom edges of the two content columns. When an announcement precedes the headline, the code surface aligns with the announcement rather than the headline; adjust the proof-strip spacing so its final row aligns with the code surface bottom.
+- Between `640px` and `1023px`, use a 56px fixed header, 48px top offset, a centered `408 × 499px` code surface first, then the 400px copy column after a 48px gap.
+- Below `640px`, use 16px page gutters and 24px top offset. Put the copy first and the code surface second. At a 390px viewport the code surface is `358 × 600px`.
+- Use a fixed translucent white header: 64px high on desktop and 56px below 1024px, with a 1px Lavender Mist bottom border. Desktop padding is `12px 12px 12px 16px`; narrower padding is `12px 16px`.
+- Hide desktop-only star and Dashboard/Console utilities below 1024px, matching SST. Preserve the compact text navigation that still fits.
+- Use a 48px footer on desktop and tablet. Below 640px, use a 144px stacked footer with 24px vertical and 16px horizontal padding.
+
+The landing page reads as a single document, not a collection of marketing sections. Fulling copy and information architecture may differ from SST, but rendered typography, controls, borders, radii, gutters, breakpoints, and density must follow these measurements.
+
+### Product pages
+
+Use a stable application shell with compact navigation and aligned content panes. Prioritize information hierarchy, scanning, and direct manipulation. Workspace pages may use split panes where configuration and output need simultaneous visibility. Avoid a dashboard made of unrelated floating cards.
+
+At narrow widths, collapse navigation intentionally, stack panes in task order, preserve labels, and keep primary actions reachable. Do not hide required workflow steps solely to simplify the mobile layout.
+
+## Accessibility
+
+- Meet WCAG AA contrast for text, controls, focus, and status communication.
+- Support keyboard navigation for all interactive elements.
+- Use semantic HTML before adding ARIA.
+- Provide visible focus and logical focus order.
+- Do not communicate status or validation through color alone.
+- Respect reduced motion.
+- Keep touch targets usable even when visual controls are compact.
+- Preserve zoom and text resizing without clipping or horizontal document overflow.
+
+## Agent Prompt Guide
+
+When generating or implementing Fulling UI, begin with:
+
+> Reproduce the SST design language for Fulling as faithfully as possible. Use a pure white canvas, dark indigo-violet Fulling Ink, Rubik Variable for product UI and prose, IBM Plex Mono for technical content and the public display headline, a 4px spacing grid, 4–8px radii, hairline Lavender Mist borders, flat surfaces, and text-first actions. Use the documented SST code-surface treatment only where specified. Do not invent decorative AI visuals, filled CTA colors, large radii, gradients, or card-heavy layouts. Preserve Fulling's workspace product model from `docs/architecture.md`.
+
+### Quick color reference
+
+- Text and heading: `#303055`
+- Secondary body text: `#403f53`
+- Muted and helper text: `#767682`
+- Disabled and quiet metadata: `#a8a8b0`
+- Surface tint and border: `#e8e8f2`
+- Canvas: `#ffffff`
+- Code syntax only: `#8844ae`, `#3b61b0`, `#096e72`, `#984e4d`
+- Primary action: no distinct CTA color
+
+### Example component prompts
+
+1. **Code Block:** Create an 8px-radius code block with the documented SST soft surface, 1px Lavender Mist border, and 16px horizontal padding. Use IBM Plex Mono 14.4px/23.76px. Render strings in Code Plum, object keys in Code Cobalt, types in Code Teal, literals in Code Rust, and ordinary code in Fulling Ink.
+2. **Hero Text Block:** Create a 400px right-column hero with a 48px IBM Plex Mono heading at weight 600, 52.8px line height, and `-1px` tracking in Fulling Ink. Use Rubik 20px/30px in Secondary Ink for supporting copy. Add no background or containing card.
+3. **New Badge:** Create an 18px-high transparent badge with a 1px Announcement Blue border, 4px radius, and 5px horizontal padding. Use Rubik 9px weight 500, uppercase, `0.5px` tracked, in Announcement Blue.
+4. **Search Bar:** Create a 36px-high transparent search trigger with a 1px Lavender Mist border and 4px radius. Use Rubik 13–14px in Secondary Ink and an IBM Plex Mono 12px shortcut hint in Mist.
+5. **Workspace Row:** Create a flat 16px-padded row with a Lavender Mist divider. Use Rubik for the workspace name and metadata, IBM Plex Mono only for technical identifiers, a concise text status, and a trailing ghost action.
+6. **Configuration Panel:** Create a white workspace configuration pane with a Rubik heading, compact helper copy, 4px-radius controls, hairline separators, and no shadow. Use IBM Plex Mono only for paths, code, and runtime values.
+
+## Similar brands
+
+- **SST:** Authoritative visual and interaction reference.
+- **Vercel:** Comparable developer-first restraint, white canvas, and monospaced technical surfaces.
+- **Railway:** Comparable two-font system and terminal-oriented product language.
+- **Astro:** Comparable documentation-led marketing and code-as-visual identity.
+- **Linear:** Comparable density and small-radius discipline, though Fulling should remain flatter.
+
+These brands are context only. SST remains the source to match.
+
+## Token inventory
+
+The following snippets show the selected canonical values for documentation and prompt context. They are not a second implementation source and must not be copied into page or component styles. Production code imports `app/globals.css` through the root layout and consumes those global tokens directly. Tailwind's active spacing, type, weight, radius, color, and font utilities are aliased back to the same root tokens there.
+
+### CSS Custom Properties
+
+```css
+:root {
+  /* Colors */
+  --color-fulling-ink: #303055;
+  --color-code-plum: #8844ae;
+  --color-code-cobalt: #3b61b0;
+  --color-code-teal: #096e72;
+  --color-code-rust: #984e4d;
+  --color-slate: #403f53;
+  --color-fog: #767682;
+  --color-mist: #a8a8b0;
+  --color-obsidian: #111111;
+  --color-lavender-mist: #e8e8f2;
+  --color-paper: #ffffff;
+  --color-secondary-ink: rgba(26, 26, 46, 0.6);
+  --color-quiet-ink: rgba(26, 26, 46, 0.38);
+  --color-announcement-blue: #5196b3;
+  --color-status-success: #35654d;
+  --color-status-warning: #755c16;
+  --color-status-error: #a13d3b;
+  --color-status-info: #405f88;
+
+  /* Typography — Font Families */
+  --font-ibm-plex-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --font-rubik-variable: "Rubik Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+  /* Typography — Scale */
+  --text-micro: 9px;
+  --leading-micro: 1.78;
+  --text-caption: 12px;
+  --leading-caption: 1.5;
+  --text-metadata: 13px;
+  --leading-metadata: 1.2;
+  --text-body: 14px;
+  --leading-body: 1.8;
+  --text-body-lg: 16px;
+  --leading-body-lg: 1.8;
+  --text-heading-sm: 18px;
+  --leading-heading-sm: 1.5;
+  --text-heading: 20px;
+  --leading-heading: 1.5;
+  --text-display: 48px;
+  --leading-display: 1.1;
+  --tracking-display: -1.01px;
+
+  /* Typography — Weights */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+
+  /* Spacing */
+  --spacing-unit: 4px;
+  --spacing-4: 4px;
+  --spacing-8: 8px;
+  --spacing-12: 12px;
+  --spacing-16: 16px;
+  --spacing-24: 24px;
+  --spacing-32: 32px;
+  --spacing-40: 40px;
+  --spacing-48: 48px;
+  --spacing-64: 64px;
+  --spacing-72: 72px;
+
+  /* Layout */
+  --page-max-width: 1200px;
+  --landing-hero-width: 857px;
+  --landing-code-width: 408px;
+  --landing-copy-width: 400px;
+  --landing-column-gap: 49px;
+  --landing-header-height: 64px;
+  --landing-header-height-compact: 56px;
+  --landing-footer-height: 48px;
+  --header-utility-height: 36px;
+  --section-gap: 64px;
+  --card-padding: 16px;
+  --element-gap-min: 10px;
+  --element-gap-max: 16px;
+
+  /* Border Radius */
+  --radius-sm: 1px;
+  --radius-md: 4px;
+  --radius-lg: 8px;
+  --radius-tags: 4px;
+  --radius-cards: 8px;
+  --radius-inputs: 4px;
+  --radius-buttons: 4px;
+  --radius-code-blocks: 8px;
+
+  /* Surfaces */
+  --surface-paper: var(--color-paper);
+  --surface-lavender-mist: var(--color-lavender-mist);
+
+  /* Elevation */
+  --shadow-code-block:
+    rgba(199, 199, 199, 0.04) 0 1px 1.5px,
+    rgba(199, 199, 199, 0.08) 0.1px 12px 18px,
+    rgba(199, 199, 199, 0.08) 0.3px 26px 39px,
+    rgba(199, 199, 199, 0.1) 0.6px 55px 82.5px,
+    rgba(255, 255, 255, 0.9) 0 0 2px 1px inset;
+}
+```
+
+### Tailwind v4
+
+```css
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --font-sans: var(--font-rubik-variable);
+  --font-mono: var(--font-ibm-plex-mono);
+}
+```
+
+## Implementation requirements
+
+- Use `app/globals.css` as the one versioned executable token source for every Fulling surface.
+- Map shared components to semantic tokens; do not duplicate literal hex values across pages.
+- Load only Rubik Variable and IBM Plex Mono at the root; do not retain legacy font aliases.
+- Treat a hard-coded design color outside `app/globals.css` as a regression.
+- Remove legacy tokens and components after their migration is complete.
+- Review representative desktop and mobile screens against the SST source.
+- Add visual regression coverage for the application shell, workspace list, builder, runtime state, dialog, empty state, and public landing page.
+- Treat loading, empty, error, focus, disabled, and destructive states as required component states.
+- Keep remaining migration work explicit in linked issues.
+
+## Migration rule
+
+This document describes the target system. A page is migrated only when its typography, colors, spacing, borders, radii, controls, states, and responsive behavior use this shared foundation. Partial visual resemblance is not completion.
+
+There is no compatibility layer for the retired design system. When an old component conflicts with the global foundation, migrate or replace it rather than adding fallback tokens, aliases, or page-specific exceptions.
diff --git a/e2e/minimal-flow.spec.ts b/e2e/minimal-flow.spec.ts
index aebead7..e0a8c4c 100644
--- a/e2e/minimal-flow.spec.ts
+++ b/e2e/minimal-flow.spec.ts
@@ -9,7 +9,7 @@ test.describe('public and protected navigation', () => {
 
   test('landing opens the GitHub-only login page', async ({ page }) => {
     await page.goto('/')
-    await page.getByRole('link', { name: 'Sign in' }).first().click()
+    await page.getByRole('link', { name: 'Join the v3 preview →' }).click()
 
     await expect(page).toHaveURL(/\/login$/)
     await expect(page.getByRole('button', { name: 'Continue with GitHub' })).toBeVisible()
diff --git a/fulling-landing-reference.png b/fulling-landing-reference.png
new file mode 100644
index 0000000..a8e636f
Binary files /dev/null and b/fulling-landing-reference.png differ
diff --git a/package.json b/package.json
index cfcbdd8..9330e8e 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "radix-ui": "^1.4.3",
     "react": "19.2.1",
     "react-dom": "19.2.1",
+    "react-icons": "^5.7.0",
     "tailwind-merge": "^3.3.1",
     "zod": "^4.1.12"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 32b4427..1bfbb40 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@ importers:
       react-dom:
         specifier: 19.2.1
         version: 19.2.1(react@19.2.1)
+      react-icons:
+        specifier: ^5.7.0
+        version: 5.7.0(react@19.2.1)
       tailwind-merge:
         specifier: ^3.3.1
         version: 3.4.0
@@ -3319,6 +3322,11 @@ packages:
     peerDependencies:
       react: ^19.2.1
 
+  react-icons@5.7.0:
+    resolution: {integrity: sha512-LBLy340Rzqy6+/yVhZKT3B/QpP1BZaesGqasf09HPOBzRarcDIFH0WwXlXQfE7q7ipxK4MSiC5DIBWURCny6fw==}
+    peerDependencies:
+      react: '*'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -7233,6 +7241,10 @@ snapshots:
       react: 19.2.1
       scheduler: 0.27.0
 
+  react-icons@5.7.0(react@19.2.1):
+    dependencies:
+      react: 19.2.1
+
   react-is@16.13.1: {}
 
   react-remove-scroll-bar@2.3.8(@types/react@19.2.7)(react@19.2.1):