diff --git a/biome.json b/biome.json
index 74eadfcb..4f8e6c85 100644
--- a/biome.json
+++ b/biome.json
@@ -42,6 +42,26 @@
           }
         }
       }
+    },
+    {
+      "includes": ["packages/ui/src/lacowiki/**"],
+      "linter": {
+        "rules": {
+          "a11y": {
+            "noSvgWithoutTitle": "off",
+            "useKeyWithClickEvents": "off",
+            "useSemanticElements": "off",
+            "noStaticElementInteractions": "off",
+            "useValidAnchor": "off"
+          },
+          "correctness": {
+            "useJsxKeyInIterable": "off"
+          },
+          "suspicious": {
+            "noArrayIndexKey": "off"
+          }
+        }
+      }
     }
   ],
   "javascript": {
diff --git a/host/client_app/pages/Landing.tsx b/host/client_app/pages/Landing.tsx
index bbbfcd6f..c9091d8d 100644
--- a/host/client_app/pages/Landing.tsx
+++ b/host/client_app/pages/Landing.tsx
@@ -1,213 +1,156 @@
-import { usePage } from '@inertiajs/react';
+import { Link, usePage } from '@inertiajs/react';
 import { keys, useT } from '@simple-module-py/i18n';
-import { Badge } from '@simple-module-py/ui/components/ui/badge';
-import { Button } from '@simple-module-py/ui/components/ui/button';
-import { Card, CardContent } from '@simple-module-py/ui/components/ui/card';
-import { Separator } from '@simple-module-py/ui/components/ui/separator';
-import { PublicLayout } from '@simple-module-py/ui/layouts/PublicLayout';
 
 interface Props {
   isAuthenticated: boolean;
 }
 
+const STATS = ['14k+ datasets', '·', '2.4M validated points', '·', 'open source'];
+const FEATURE_GRID: [string, string][] = [
+  ['Datasets', 'Upload COG/PMTiles'],
+  ['Sampling', '7 strategies'],
+  ['Validation', 'Map-side classify'],
+  ['Reports', 'Confusion matrix'],
+];
+
+const SAMPLE_DOTS: [number, number][] = [
+  [30, 40],
+  [60, 55],
+  [75, 30],
+  [45, 70],
+  [20, 55],
+];
+
+const MAP_BG = `radial-gradient(ellipse at 30% 40%, oklch(0.92 0.03 155) 0%, transparent 35%),
+  radial-gradient(ellipse at 70% 60%, oklch(0.88 0.04 200) 0%, transparent 40%),
+  repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,0.025) 14px 15px),
+  repeating-linear-gradient(-45deg, transparent 0 14px, rgba(0,0,0,0.025) 14px 15px),
+  oklch(0.93 0.005 250)`;
+
 function Landing() {
   const { isAuthenticated } = usePage<{ props: Props }>().props as unknown as Props;
   const { t } = useT();
 
-  const features = [
-    {
-      icon: (
-        <svg
-          aria-hidden="true"
-          className="w-6 h-6"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
-          />
-        </svg>
-      ),
-      title: t(keys.host.landing.features.module_system_title),
-      description: t(keys.host.landing.features.module_system_description),
-    },
-    {
-      icon: (
-        <svg
-          aria-hidden="true"
-          className="w-6 h-6"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"
-          />
-        </svg>
-      ),
-      title: t(keys.host.landing.features.auth_title),
-      description: t(keys.host.landing.features.auth_description),
-    },
-    {
-      icon: (
-        <svg
-          aria-hidden="true"
-          className="w-6 h-6"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"
-          />
-        </svg>
-      ),
-      title: t(keys.host.landing.features.schema_title),
-      description: t(keys.host.landing.features.schema_description),
-    },
-    {
-      icon: (
-        <svg
-          aria-hidden="true"
-          className="w-6 h-6"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
-          />
-        </svg>
-      ),
-      title: t(keys.host.landing.features.inertia_title),
-      description: t(keys.host.landing.features.inertia_description),
-    },
-    {
-      icon: (
-        <svg
-          aria-hidden="true"
-          className="w-6 h-6"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
-          />
-        </svg>
-      ),
-      title: t(keys.host.landing.features.diagnostics_title),
-      description: t(keys.host.landing.features.diagnostics_description),
-    },
-    {
-      icon: (
-        <svg
-          aria-hidden="true"
-          className="w-6 h-6"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z"
-          />
-        </svg>
-      ),
-      title: t(keys.host.landing.features.devtools_title),
-      description: t(keys.host.landing.features.devtools_description),
-    },
-  ];
+  const ctaHref = isAuthenticated ? '/dashboard/' : '/auth/login';
+  const ctaLabel = isAuthenticated
+    ? t(keys.host.landing.cta_dashboard)
+    : t(keys.host.landing.cta_get_started);
 
   return (
-    <>
-      {/* Hero */}
-      <section className="max-w-5xl mx-auto px-4 pt-12 pb-12 text-center sm:px-8 sm:pt-24 sm:pb-20">
-        <Badge
-          variant="outline"
-          className="border-primary-400/20 bg-primary-400/10 text-primary-300 mb-6 sm:mb-8 gap-2"
-        >
-          <span className="w-2 h-2 rounded-full bg-primary-400" />
-          {t(keys.host.landing.badge)}
-        </Badge>
-
-        <h1 className="text-3xl font-extrabold tracking-tight leading-tight font-[var(--font-display)] sm:text-5xl lg:text-6xl">
-          {t(keys.host.landing.hero_title_line1)}
-          <br />
-          <span className="bg-gradient-to-r from-primary-300 via-primary-400 to-primary-200 bg-clip-text text-transparent">
-            {t(keys.host.landing.hero_title_line2)}
-          </span>
-        </h1>
-
-        <p className="mt-4 text-base text-dark-text-muted max-w-2xl mx-auto leading-relaxed sm:mt-6 sm:text-lg">
-          {t(keys.host.landing.hero_subtitle)}
-        </p>
-
-        <div className="mt-8 flex flex-col items-center gap-3 sm:flex-row sm:justify-center sm:gap-4 sm:mt-10">
-          <Button asChild size="lg" className="w-full sm:w-auto">
-            <a href="/users/login">
-              {isAuthenticated
-                ? t(keys.host.landing.cta_dashboard)
-                : t(keys.host.landing.cta_get_started)}
+    <div className="min-h-screen bg-background text-foreground">
+      {/* Top nav */}
+      <header className="border-b border-border/60">
+        <div className="mx-auto flex max-w-6xl items-center gap-8 px-6 py-3.5">
+          <Link href="/" className="flex items-center gap-2.5">
+            <div className="h-5 w-5 rounded bg-primary" />
+            <span className="text-[13px] font-semibold tracking-tight">SimpleModule</span>
+          </Link>
+          <nav className="hidden gap-5 text-xs text-muted-foreground sm:flex">
+            <span>Product</span>
+            <span>Datasets</span>
+            <span>Methodology</span>
+            <span>Docs</span>
+          </nav>
+          <div className="ml-auto flex items-center gap-2">
+            <a
+              href="/auth/login"
+              className="rounded border border-border bg-card px-3 py-1.5 text-xs font-medium hover:border-primary-400"
+            >
+              Sign in
             </a>
-          </Button>
-          <Button
-            asChild
-            variant="outline"
-            size="lg"
-            className="w-full sm:w-auto bg-transparent border-dark-border text-white hover:text-white hover:border-dark-border-hover hover:bg-white/10"
-          >
-            <a href="https://github.com">{t(keys.host.landing.cta_docs)}</a>
-          </Button>
+            <a
+              href={ctaHref}
+              className="rounded border border-foreground bg-foreground px-3 py-1.5 text-xs font-medium text-background"
+            >
+              Request access
+            </a>
+          </div>
         </div>
-      </section>
+      </header>
 
-      <Separator className="max-w-6xl mx-auto bg-white/[0.06]" />
+      {/* Hero */}
+      <section className="mx-auto max-w-6xl px-6 py-16">
+        <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-[1.1fr_1fr]">
+          <div className="flex flex-col gap-4">
+            <span className="inline-flex w-fit items-center gap-1.5 rounded-full border border-primary-300 bg-primary-50 px-2.5 py-0.5 font-mono text-[11px] text-primary-800">
+              {t(keys.host.landing.badge)}
+            </span>
+            <h1 className="font-[var(--font-display)] text-4xl font-semibold leading-tight tracking-tight sm:text-5xl">
+              {t(keys.host.landing.hero_title_line1)}
+              <br />
+              {t(keys.host.landing.hero_title_line2)}
+            </h1>
+            <p className="max-w-md text-sm text-muted-foreground sm:text-[15px]">
+              {t(keys.host.landing.hero_subtitle)}
+            </p>
+            <div className="flex flex-wrap items-center gap-2">
+              <a
+                href={ctaHref}
+                className="inline-flex items-center gap-1.5 rounded border border-foreground bg-foreground px-3.5 py-2 text-xs font-medium text-background"
+              >
+                {ctaLabel}
+              </a>
+              <a
+                href="https://github.com"
+                className="inline-flex items-center gap-1.5 rounded border border-border bg-card px-3.5 py-2 text-xs font-medium"
+              >
+                {t(keys.host.landing.cta_docs)}
+              </a>
+            </div>
+            <div className="mt-2 flex flex-wrap items-center gap-3 font-mono text-[11px] text-muted-foreground">
+              {STATS.map((s) => (
+                <span key={s}>{s}</span>
+              ))}
+            </div>
+          </div>
 
-      {/* Features */}
-      <section className="max-w-6xl mx-auto px-4 py-16 sm:px-8 sm:py-24">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
-          {features.map((feature) => (
-            <Card
-              key={feature.title}
-              className="group border-white/[0.06] bg-white/[0.03] backdrop-blur-sm hover:border-primary-400/20 hover:bg-white/[0.06] transition-colors duration-200"
+          {/* Map preview + accuracy callout */}
+          <div className="relative">
+            <div
+              className="relative h-72 overflow-hidden rounded-lg border bg-secondary"
+              style={{ backgroundImage: MAP_BG }}
             >
-              <CardContent className="pt-6">
-                <div className="w-10 h-10 rounded-lg bg-primary-400/10 flex items-center justify-center text-primary-400 mb-4 transition-colors duration-200 group-hover:bg-primary-400/15">
-                  {feature.icon}
-                </div>
-                <h3 className="text-lg font-semibold text-white mb-2 font-[var(--font-display)]">
-                  {feature.title}
-                </h3>
-                <p className="text-sm text-dark-text-muted leading-relaxed">
-                  {feature.description}
-                </p>
-              </CardContent>
-            </Card>
+              {SAMPLE_DOTS.map(([x, y]) => (
+                <span
+                  key={`${x}-${y}`}
+                  className="absolute h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-[1.5px] border-foreground"
+                  style={{
+                    left: `${x}%`,
+                    top: `${y}%`,
+                    background: x === 75 ? 'oklch(0.62 0.12 200)' : 'white',
+                  }}
+                />
+              ))}
+            </div>
+            <div className="absolute -bottom-4 -right-4 w-52 rounded-md border bg-card p-3 text-[11px] shadow-card">
+              <div className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+                Overall accuracy
+              </div>
+              <div className="mt-1 text-2xl font-semibold tabular-nums">87.3%</div>
+              <div className="text-muted-foreground">±2.1% at 95% CI</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Feature row */}
+      <section className="mx-auto max-w-6xl px-6 pb-16">
+        <div className="grid grid-cols-2 gap-4 border-t border-border/60 pt-6 sm:grid-cols-4">
+          {FEATURE_GRID.map(([title, sub]) => (
+            <div key={title}>
+              <div className="text-xs font-semibold">{title}</div>
+              <div className="text-[11px] text-muted-foreground">{sub}</div>
+            </div>
           ))}
         </div>
       </section>
-    </>
+
+      <footer className="border-t border-border/60 py-6 text-center text-xs text-muted-foreground">
+        SimpleModule — built with FastAPI, Inertia.js, React, Tailwind
+      </footer>
+    </div>
   );
 }
 
-Landing.layout = (page: React.ReactNode) => <PublicLayout>{page}</PublicLayout>;
+Landing.layout = (page: React.ReactNode) => page;
 export default Landing;
diff --git a/host/templates/index.html b/host/templates/index.html
index ea8da7ea..41acee4b 100644
--- a/host/templates/index.html
+++ b/host/templates/index.html
@@ -6,7 +6,7 @@
     <title>SimpleModule</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
     {% inertia_head %}
     {% if request.app.state.sm.inertia_config.environment == "development" %}
     <script type="module">
diff --git a/modules/dashboard/dashboard/pages/Home.tsx b/modules/dashboard/dashboard/pages/Home.tsx
index 8bde7fba..1fe86f62 100644
--- a/modules/dashboard/dashboard/pages/Home.tsx
+++ b/modules/dashboard/dashboard/pages/Home.tsx
@@ -1,17 +1,12 @@
 import { usePage } from '@inertiajs/react';
 import { keys, useT } from '@simple-module-py/i18n';
 import { PageShell } from '@simple-module-py/ui/components/PageShell';
-import { Card, CardContent, CardHeader, CardTitle } from '@simple-module-py/ui/components/ui/card';
-import { Table, TableBody, TableCell, TableRow } from '@simple-module-py/ui/components/ui/table';
 import { AuthenticatedLayout } from '@simple-module-py/ui/layouts/AuthenticatedLayout';
-import { Activity, Box, Heart, Server, Users } from 'lucide-react';
 
-type Accent = 'emerald' | 'violet' | 'amber';
-
-const HEALTH_STATUS_COLOR: Record<string, string> = {
-  healthy: 'bg-emerald-500',
-  degraded: 'bg-amber-500',
-  unhealthy: 'bg-red-500',
+const HEALTH_STATUS_TONE: Record<string, string> = {
+  healthy: 'border-emerald-300 bg-emerald-50 text-emerald-700',
+  degraded: 'border-amber-300 bg-amber-50 text-amber-700',
+  unhealthy: 'border-red-300 bg-red-50 text-red-700',
 };
 
 interface SystemModule {
@@ -37,6 +32,40 @@ interface Props {
   system_info: SystemInfo;
 }
 
+function StatCard({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="rounded-md border bg-card p-3">
+      <div className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+        {label}
+      </div>
+      <div className="mt-1 text-2xl font-semibold tabular-nums">{value}</div>
+    </div>
+  );
+}
+
+function ModuleChip({ name }: { name: string }) {
+  return (
+    <span className="inline-flex items-center gap-1.5 rounded-full border bg-secondary px-2 py-0.5 font-mono text-[11px] text-muted-foreground">
+      <span className="h-1.5 w-1.5 rounded-full bg-primary-500" />
+      {name}
+    </span>
+  );
+}
+
+function HealthRow({ check }: { check: HealthCheck }) {
+  const tone = HEALTH_STATUS_TONE[check.status] ?? HEALTH_STATUS_TONE.unhealthy;
+  return (
+    <div className="flex items-center gap-3 border-b border-border/60 px-4 py-2.5 text-sm last:border-b-0">
+      <span className="flex-1 font-medium">{check.name}</span>
+      <span
+        className={`inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 font-mono text-[11px] ${tone}`}
+      >
+        {check.status}
+      </span>
+    </div>
+  );
+}
+
 function Home() {
   const props = usePage<{ props: Props }>().props as unknown as Props;
   const { t } = useT();
@@ -46,127 +75,39 @@ function Home() {
       title={t(keys.dashboard.home.title)}
       description={t(keys.dashboard.home.description)}
     >
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-5 mb-8">
-        <StatCard
-          title={t(keys.dashboard.home.stats.total_users)}
-          value={String(props.total_users)}
-          icon={<Users className="size-4" />}
-          accent="emerald"
-        />
-        <StatCard
-          title={t(keys.dashboard.home.stats.active_users)}
-          value={String(props.active_users_7d)}
-          icon={<Activity className="size-4" />}
-          accent="amber"
-        />
-        <StatCard
-          title={t(keys.dashboard.home.stats.modules)}
-          value={String(props.module_count)}
-          icon={<Box className="size-4" />}
-          accent="violet"
-        />
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+        <StatCard label={t(keys.dashboard.home.stats.total_users)} value={props.total_users} />
+        <StatCard label={t(keys.dashboard.home.stats.active_users)} value={props.active_users_7d} />
+        <StatCard label={t(keys.dashboard.home.stats.modules)} value={props.module_count} />
       </div>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2 font-[var(--font-display)]">
-            <Server className="size-4" />
-            {t(keys.dashboard.home.system_info_title)}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-6">
+      <div className="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-[1.2fr_1fr]">
+        <div className="rounded-md border bg-card">
+          <div className="flex items-center justify-between border-b border-border/60 px-4 py-3">
+            <span className="text-sm font-semibold">
+              {t(keys.dashboard.home.system_info_title)}
+            </span>
+            <span className="font-mono text-[11px] text-muted-foreground">
+              python {props.system_info.python_version}
+            </span>
+          </div>
           <div>
-            <h4 className="text-sm font-medium text-muted-foreground mb-2">
-              {t(keys.dashboard.home.system_info.modules)}
-            </h4>
-            <div className="flex flex-wrap gap-2">
-              {props.system_info.modules.map((mod) => (
-                <span
-                  key={mod.name}
-                  className="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium"
-                >
-                  <span className="size-1.5 rounded-full bg-emerald-500" />
-                  {mod.name}
-                </span>
-              ))}
-            </div>
+            {props.system_info.health_checks.map((check) => (
+              <HealthRow key={check.name} check={check} />
+            ))}
           </div>
+        </div>
 
-          <Table>
-            <TableBody>
-              <TableRow>
-                <TableCell className="font-medium text-muted-foreground">
-                  {t(keys.dashboard.home.system_info.python_version)}
-                </TableCell>
-                <TableCell>{props.system_info.python_version}</TableCell>
-              </TableRow>
-              {props.system_info.health_checks.map((check) => (
-                <TableRow key={check.name}>
-                  <TableCell className="font-medium text-muted-foreground flex items-center gap-2">
-                    <Heart className="size-3" />
-                    {check.name}
-                  </TableCell>
-                  <TableCell>
-                    <span className="inline-flex items-center gap-1.5">
-                      <span
-                        className={`size-2 rounded-full ${HEALTH_STATUS_COLOR[check.status] ?? 'bg-red-500'}`}
-                      />
-                      {check.status}
-                    </span>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </CardContent>
-      </Card>
-    </PageShell>
-  );
-}
-
-function StatCard({
-  title,
-  value,
-  icon,
-  accent,
-}: {
-  title: string;
-  value: string;
-  icon: React.ReactNode;
-  accent: Accent;
-}) {
-  const styles: Record<Accent, { card: string; icon: string; value: string }> = {
-    emerald: {
-      card: 'border-emerald-border bg-gradient-to-br from-emerald-bg to-card',
-      icon: 'text-emerald-icon-fg bg-emerald-icon-bg',
-      value: 'text-emerald-value',
-    },
-    violet: {
-      card: 'border-violet-border bg-gradient-to-br from-violet-bg to-card',
-      icon: 'text-violet-icon-fg bg-violet-icon-bg',
-      value: 'text-violet-value',
-    },
-    amber: {
-      card: 'border-amber-200 bg-gradient-to-br from-amber-50 to-card',
-      icon: 'text-amber-600 bg-amber-100',
-      value: 'text-amber-900',
-    },
-  };
-
-  const s = styles[accent];
-
-  return (
-    <Card className={s.card}>
-      <CardContent className="pt-5">
-        <div className="flex items-center justify-between mb-3">
-          <span className="text-sm font-medium text-muted-foreground">{title}</span>
-          <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${s.icon}`}>
-            {icon}
+        <div className="rounded-md border bg-card p-4">
+          <div className="text-sm font-semibold">{t(keys.dashboard.home.system_info.modules)}</div>
+          <div className="mt-3 flex flex-wrap gap-1.5">
+            {props.system_info.modules.map((mod) => (
+              <ModuleChip key={mod.name} name={mod.name} />
+            ))}
           </div>
         </div>
-        <p className={`text-3xl font-bold font-[var(--font-display)] ${s.value}`}>{value}</p>
-      </CardContent>
-    </Card>
+      </div>
+    </PageShell>
   );
 }
 
diff --git a/modules/users/users/pages/AcceptInvite.tsx b/modules/users/users/pages/AcceptInvite.tsx
index 93f2b4eb..9d8da264 100644
--- a/modules/users/users/pages/AcceptInvite.tsx
+++ b/modules/users/users/pages/AcceptInvite.tsx
@@ -1,12 +1,5 @@
 import { router, usePage } from '@inertiajs/react';
 import { Button } from '@simple-module-py/ui/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@simple-module-py/ui/components/ui/card';
 import { Input } from '@simple-module-py/ui/components/ui/input';
 import { Label } from '@simple-module-py/ui/components/ui/label';
 import { AuthCardShell } from '@simple-module-py/ui/layouts/AuthCardShell';
@@ -61,44 +54,44 @@ function AcceptInvite() {
 
   return (
     <AuthCardShell>
-      <Card className="w-full max-w-sm">
-        <CardHeader className="space-y-1">
-          <CardTitle className="text-2xl">Accept invitation</CardTitle>
-          <CardDescription>Set a password to activate your account</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="password">Password</Label>
-              <Input
-                id="password"
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-                autoComplete="new-password"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="confirm">Confirm password</Label>
-              <Input
-                id="confirm"
-                type="password"
-                value={confirm}
-                onChange={(e) => setConfirm(e.target.value)}
-                required
-                autoComplete="new-password"
-              />
-            </div>
+      <h1 className="text-2xl font-semibold tracking-tight">Accept invitation</h1>
+      <p className="mb-6 mt-1 text-sm text-muted-foreground">
+        Set a password to activate your account.
+      </p>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="password" className="text-xs font-medium">
+            Password
+          </Label>
+          <Input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            autoComplete="new-password"
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="confirm" className="text-xs font-medium">
+            Confirm password
+          </Label>
+          <Input
+            id="confirm"
+            type="password"
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+            required
+            autoComplete="new-password"
+          />
+        </div>
 
-            {error && <p className="text-sm text-destructive">{error}</p>}
+        {error && <p className="text-xs text-destructive">{error}</p>}
 
-            <Button type="submit" className="w-full" disabled={loading || !token}>
-              {loading ? 'Activating…' : 'Activate account'}
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
+        <Button type="submit" className="w-full" disabled={loading || !token}>
+          {loading ? 'Activating…' : 'Activate account'}
+        </Button>
+      </form>
     </AuthCardShell>
   );
 }
diff --git a/modules/users/users/pages/ForgotPassword.tsx b/modules/users/users/pages/ForgotPassword.tsx
index 1da1bb15..887196d7 100644
--- a/modules/users/users/pages/ForgotPassword.tsx
+++ b/modules/users/users/pages/ForgotPassword.tsx
@@ -1,11 +1,4 @@
 import { Button } from '@simple-module-py/ui/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@simple-module-py/ui/components/ui/card';
 import { Input } from '@simple-module-py/ui/components/ui/input';
 import { Label } from '@simple-module-py/ui/components/ui/label';
 import { AuthCardShell } from '@simple-module-py/ui/layouts/AuthCardShell';
@@ -24,8 +17,6 @@ function ForgotPassword() {
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ email }),
     }).finally(() => {
-      // Always show the same message regardless of whether the email exists
-      // (anti-enumeration: fastapi-users returns 202 regardless)
       setLoading(false);
       setSubmitted(true);
     });
@@ -34,55 +25,50 @@ function ForgotPassword() {
   if (submitted) {
     return (
       <AuthCardShell>
-        <Card className="w-full max-w-sm">
-          <CardHeader>
-            <CardTitle>Check your email</CardTitle>
-            <CardDescription>
-              If an account with that email exists, we've sent a password reset link.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <a href="/users/login" className="text-sm text-primary hover:underline">
-              Back to sign in
-            </a>
-          </CardContent>
-        </Card>
+        <h1 className="text-2xl font-semibold tracking-tight">Check your email</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          If an account with that email exists, we've sent a password reset link.
+        </p>
+        <a
+          href="/users/login"
+          className="mt-6 inline-flex items-center justify-center rounded border border-border bg-card px-3 py-2 text-xs font-medium hover:border-primary-400"
+        >
+          Back to sign in
+        </a>
       </AuthCardShell>
     );
   }
 
   return (
     <AuthCardShell>
-      <Card className="w-full max-w-sm">
-        <CardHeader className="space-y-1">
-          <CardTitle className="text-2xl">Forgot password</CardTitle>
-          <CardDescription>Enter your email to receive a reset link</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="email">Email</Label>
-              <Input
-                id="email"
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                placeholder="you@example.com"
-                required
-                autoComplete="email"
-              />
-            </div>
-            <Button type="submit" className="w-full" disabled={loading}>
-              {loading ? 'Sending…' : 'Send reset link'}
-            </Button>
-          </form>
-          <p className="mt-4 text-center text-sm text-muted-foreground">
-            <a href="/users/login" className="text-primary hover:underline">
-              Back to sign in
-            </a>
-          </p>
-        </CardContent>
-      </Card>
+      <h1 className="text-2xl font-semibold tracking-tight">Forgot password</h1>
+      <p className="mb-6 mt-1 text-sm text-muted-foreground">
+        Enter your email to receive a reset link.
+      </p>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="email" className="text-xs font-medium">
+            Email
+          </Label>
+          <Input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="you@institution.org"
+            required
+            autoComplete="email"
+          />
+        </div>
+        <Button type="submit" className="w-full" disabled={loading}>
+          {loading ? 'Sending…' : 'Send reset link'}
+        </Button>
+      </form>
+      <p className="mt-4 text-xs text-muted-foreground">
+        <a href="/users/login" className="text-primary-700 hover:underline">
+          Back to sign in
+        </a>
+      </p>
     </AuthCardShell>
   );
 }
diff --git a/modules/users/users/pages/Login.tsx b/modules/users/users/pages/Login.tsx
index 0733be38..883653e8 100644
--- a/modules/users/users/pages/Login.tsx
+++ b/modules/users/users/pages/Login.tsx
@@ -1,12 +1,5 @@
 import { router, usePage } from '@inertiajs/react';
 import { Button } from '@simple-module-py/ui/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@simple-module-py/ui/components/ui/card';
 import { Input } from '@simple-module-py/ui/components/ui/input';
 import { Label } from '@simple-module-py/ui/components/ui/label';
 import { AuthCardShell } from '@simple-module-py/ui/layouts/AuthCardShell';
@@ -86,96 +79,108 @@ function Login() {
 
   return (
     <AuthCardShell>
-      <Card className="w-full max-w-sm">
-        <CardHeader className="space-y-1">
-          <CardTitle className="text-2xl">Sign in</CardTitle>
-          <CardDescription>Enter your email and password to continue</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="email">Email</Label>
-              <Input
-                id="email"
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                placeholder="you@example.com"
-                required
-                autoComplete="email"
-              />
-            </div>
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <Label htmlFor="password">Password</Label>
-                <a href="/users/forgot-password" className="text-sm text-primary hover:underline">
-                  Forgot password?
-                </a>
-              </div>
-              <Input
-                id="password"
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-                autoComplete="current-password"
-              />
-            </div>
-
-            {error && <p className="text-sm text-destructive">{error}</p>}
-
-            {needsVerification && (
-              <div className="rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800">
-                <p>Please verify your email before signing in.</p>
-                <button
-                  type="button"
-                  onClick={handleResendVerification}
-                  className="mt-1 underline hover:no-underline"
-                >
-                  Resend verification email
-                </button>
-              </div>
-            )}
-
-            <Button type="submit" className="w-full" disabled={loading}>
-              {loading ? 'Signing in…' : 'Sign in'}
-            </Button>
-          </form>
-
-          {allow_signup && (
-            <p className="mt-4 text-center text-sm text-muted-foreground">
-              Don't have an account?{' '}
-              <a href="/users/register" className="text-primary hover:underline">
-                Create account
-              </a>
-            </p>
-          )}
-
-          {dev_accounts && dev_accounts.length > 0 && (
-            <div className="mt-6 border-t pt-4">
-              <p className="mb-2 text-center text-xs text-muted-foreground">Dev quick-login</p>
-              <div className="flex flex-wrap justify-center gap-2">
-                {dev_accounts.map((acct) => (
-                  <Button
-                    key={acct.email}
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    disabled={loading}
-                    onClick={() => {
-                      setEmail(acct.email);
-                      setPassword(acct.password);
-                      submitLogin(acct.email, acct.password);
-                    }}
-                  >
-                    {acct.label}
-                  </Button>
-                ))}
-              </div>
-            </div>
-          )}
-        </CardContent>
-      </Card>
+      <h1 className="text-2xl font-semibold tracking-tight">Welcome back</h1>
+      <p className="mb-6 mt-1 text-sm text-muted-foreground">
+        Sign in to continue your validation work.
+      </p>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="email" className="text-xs font-medium">
+            Email
+          </Label>
+          <Input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="you@institution.org"
+            required
+            autoComplete="email"
+          />
+        </div>
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="password" className="text-xs font-medium">
+              Password
+            </Label>
+            <a
+              href="/users/forgot-password"
+              className="text-[11px] text-primary-700 hover:underline"
+            >
+              Forgot?
+            </a>
+          </div>
+          <Input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            autoComplete="current-password"
+          />
+        </div>
+
+        {error && <p className="text-xs text-destructive">{error}</p>}
+
+        {needsVerification && (
+          <div className="rounded border border-amber-300 bg-amber-50 p-3 text-xs text-amber-800">
+            <p>Please verify your email before signing in.</p>
+            <button
+              type="button"
+              onClick={handleResendVerification}
+              className="mt-1 underline hover:no-underline"
+            >
+              Resend verification email
+            </button>
+          </div>
+        )}
+
+        <Button type="submit" className="w-full" disabled={loading}>
+          {loading ? 'Signing in…' : 'Sign in'}
+        </Button>
+      </form>
+
+      <div className="my-5 flex items-center gap-3 font-mono text-[11px] text-muted-foreground">
+        <span className="h-px flex-1 bg-border" />
+        OR
+        <span className="h-px flex-1 bg-border" />
+      </div>
+
+      {allow_signup && (
+        <a
+          href="/users/register"
+          className="inline-flex w-full items-center justify-center rounded border border-border bg-card px-3 py-2 text-xs font-medium hover:border-primary-400"
+        >
+          Create an account
+        </a>
+      )}
+
+      {dev_accounts && dev_accounts.length > 0 && (
+        <div className="mt-6 border-t border-border/60 pt-4">
+          <p className="mb-2 font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+            Dev quick-login
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {dev_accounts.map((acct) => (
+              <Button
+                key={acct.email}
+                type="button"
+                variant="outline"
+                size="sm"
+                disabled={loading}
+                onClick={() => {
+                  setEmail(acct.email);
+                  setPassword(acct.password);
+                  submitLogin(acct.email, acct.password);
+                }}
+              >
+                {acct.label}
+              </Button>
+            ))}
+          </div>
+        </div>
+      )}
     </AuthCardShell>
   );
 }
diff --git a/modules/users/users/pages/Profile.tsx b/modules/users/users/pages/Profile.tsx
index 35261cb7..403fd403 100644
--- a/modules/users/users/pages/Profile.tsx
+++ b/modules/users/users/pages/Profile.tsx
@@ -1,8 +1,6 @@
 import { usePage } from '@inertiajs/react';
 import { PageShell } from '@simple-module-py/ui/components/PageShell';
-import { Badge } from '@simple-module-py/ui/components/ui/badge';
 import { Button } from '@simple-module-py/ui/components/ui/button';
-import { Card, CardContent } from '@simple-module-py/ui/components/ui/card';
 import { Input } from '@simple-module-py/ui/components/ui/input';
 import { Label } from '@simple-module-py/ui/components/ui/label';
 import { AuthenticatedLayout } from '@simple-module-py/ui/layouts/AuthenticatedLayout';
@@ -23,6 +21,15 @@ interface SharedProps {
   };
 }
 
+const SECTIONS = [
+  'Profile',
+  'Workspaces',
+  'API tokens',
+  'Notifications',
+  'Sessions',
+  'Danger zone',
+];
+
 function Profile() {
   const { auth } = usePage<{ props: SharedProps }>().props as unknown as SharedProps;
   const user = auth?.user;
@@ -55,55 +62,102 @@ function Profile() {
   }
 
   return (
-    <PageShell title="My Profile" description="Manage your account details">
-      <Card className="max-w-xl">
-        <CardContent className="pt-6">
+    <PageShell title="Settings" description="Manage your account details">
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-[200px_1fr]">
+        <nav className="flex flex-col gap-1">
+          {SECTIONS.map((s, i) => (
+            <div
+              key={s}
+              className={
+                i === 0
+                  ? 'rounded border bg-secondary px-3 py-1.5 text-xs font-semibold'
+                  : 'px-3 py-1.5 text-xs font-medium text-muted-foreground'
+              }
+            >
+              {s}
+            </div>
+          ))}
+        </nav>
+
+        <div className="max-w-xl space-y-6">
+          <div>
+            <h2 className="text-lg font-semibold">Profile</h2>
+            <p className="text-xs text-muted-foreground">
+              Visible to your collaborators across the workspace.
+            </p>
+          </div>
+
           <form onSubmit={handleSubmit} className="space-y-5">
-            <div className="space-y-2">
-              <Label htmlFor="email">Email</Label>
-              <Input id="email" type="email" value={user.email} readOnly className="bg-muted" />
-              <div className="flex items-center gap-2">
-                {user.is_verified ? (
-                  <Badge variant="secondary">Verified</Badge>
-                ) : (
-                  <Badge variant="destructive">Unverified</Badge>
-                )}
+            <div className="flex items-center gap-4">
+              <div className="h-16 w-16 rounded-full border bg-secondary" />
+              <div className="space-y-1.5">
+                <Button type="button" variant="outline" size="sm">
+                  Upload photo
+                </Button>
+                <p className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
+                  PNG/JPG · 1MB max
+                </p>
               </div>
             </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="full_name">Full name</Label>
-              <Input
-                id="full_name"
-                type="text"
-                value={fullName}
-                onChange={(e) => setFullName(e.target.value)}
-                placeholder="Your name"
-                maxLength={200}
-              />
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <div className="space-y-1.5">
+                <Label htmlFor="email" className="text-xs font-medium">
+                  Email
+                </Label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={user.email}
+                  readOnly
+                  className="bg-muted font-mono text-sm"
+                />
+                <p className="font-mono text-[10px] text-muted-foreground">
+                  {user.is_verified ? '✓ verified' : '× unverified'}
+                </p>
+              </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="full_name" className="text-xs font-medium">
+                  Full name
+                </Label>
+                <Input
+                  id="full_name"
+                  type="text"
+                  value={fullName}
+                  onChange={(e) => setFullName(e.target.value)}
+                  placeholder="Your name"
+                  maxLength={200}
+                />
+              </div>
             </div>
 
             {user.roles.length > 0 && (
-              <div className="space-y-2">
-                <Label>Roles</Label>
-                <div className="flex flex-wrap gap-2">
+              <div className="space-y-1.5">
+                <Label className="text-xs font-medium">Roles</Label>
+                <div className="flex flex-wrap gap-1.5">
                   {user.roles.map((role) => (
-                    <Badge key={role} variant="outline">
+                    <span
+                      key={role}
+                      className="inline-flex items-center rounded-full border bg-secondary px-2 py-0.5 font-mono text-[11px] text-muted-foreground"
+                    >
                       {role}
-                    </Badge>
+                    </span>
                   ))}
                 </div>
               </div>
             )}
 
-            <div className="pt-2">
+            <div className="flex gap-2 pt-2">
+              <Button type="button" variant="outline" disabled={saving}>
+                Cancel
+              </Button>
               <Button type="submit" disabled={saving}>
                 {saving ? 'Saving…' : 'Save changes'}
               </Button>
             </div>
           </form>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     </PageShell>
   );
 }
diff --git a/modules/users/users/pages/Register.tsx b/modules/users/users/pages/Register.tsx
index e02cdee3..ceeb59c2 100644
--- a/modules/users/users/pages/Register.tsx
+++ b/modules/users/users/pages/Register.tsx
@@ -1,11 +1,4 @@
 import { Button } from '@simple-module-py/ui/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@simple-module-py/ui/components/ui/card';
 import { Input } from '@simple-module-py/ui/components/ui/input';
 import { Label } from '@simple-module-py/ui/components/ui/label';
 import { AuthCardShell } from '@simple-module-py/ui/layouts/AuthCardShell';
@@ -57,94 +50,96 @@ function Register() {
   if (success) {
     return (
       <AuthCardShell>
-        <Card className="w-full max-w-sm">
-          <CardHeader>
-            <CardTitle>Check your email</CardTitle>
-            <CardDescription>
-              We've sent a verification link to <strong>{email}</strong>. Please verify your account
-              before signing in.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <a href="/users/login" className="text-sm text-primary hover:underline">
-              Back to sign in
-            </a>
-          </CardContent>
-        </Card>
+        <h1 className="text-2xl font-semibold tracking-tight">Check your email</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          We've sent a verification link to <strong>{email}</strong>. Please verify your account
+          before signing in.
+        </p>
+        <a
+          href="/users/login"
+          className="mt-6 inline-flex items-center justify-center rounded border border-border bg-card px-3 py-2 text-xs font-medium hover:border-primary-400"
+        >
+          Back to sign in
+        </a>
       </AuthCardShell>
     );
   }
 
   return (
     <AuthCardShell>
-      <Card className="w-full max-w-sm">
-        <CardHeader className="space-y-1">
-          <CardTitle className="text-2xl">Create account</CardTitle>
-          <CardDescription>Fill in your details to get started</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="email">Email</Label>
-              <Input
-                id="email"
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                placeholder="you@example.com"
-                required
-                autoComplete="email"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="full_name">Full name</Label>
-              <Input
-                id="full_name"
-                type="text"
-                value={fullName}
-                onChange={(e) => setFullName(e.target.value)}
-                placeholder="Your name"
-                autoComplete="name"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="password">Password</Label>
-              <Input
-                id="password"
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-                autoComplete="new-password"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="confirm">Confirm password</Label>
-              <Input
-                id="confirm"
-                type="password"
-                value={confirm}
-                onChange={(e) => setConfirm(e.target.value)}
-                required
-                autoComplete="new-password"
-              />
-            </div>
+      <h1 className="text-2xl font-semibold tracking-tight">Create account</h1>
+      <p className="mb-6 mt-1 text-sm text-muted-foreground">
+        Fill in your details to get started.
+      </p>
 
-            {error && <p className="text-sm text-destructive">{error}</p>}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="email" className="text-xs font-medium">
+            Email
+          </Label>
+          <Input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="you@institution.org"
+            required
+            autoComplete="email"
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="full_name" className="text-xs font-medium">
+            Full name
+          </Label>
+          <Input
+            id="full_name"
+            type="text"
+            value={fullName}
+            onChange={(e) => setFullName(e.target.value)}
+            placeholder="Your name"
+            autoComplete="name"
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="password" className="text-xs font-medium">
+            Password
+          </Label>
+          <Input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            autoComplete="new-password"
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="confirm" className="text-xs font-medium">
+            Confirm password
+          </Label>
+          <Input
+            id="confirm"
+            type="password"
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+            required
+            autoComplete="new-password"
+          />
+        </div>
 
-            <Button type="submit" className="w-full" disabled={loading}>
-              {loading ? 'Creating account…' : 'Create account'}
-            </Button>
-          </form>
+        {error && <p className="text-xs text-destructive">{error}</p>}
 
-          <p className="mt-4 text-center text-sm text-muted-foreground">
-            Already have an account?{' '}
-            <a href="/users/login" className="text-primary hover:underline">
-              Sign in
-            </a>
-          </p>
-        </CardContent>
-      </Card>
+        <Button type="submit" className="w-full" disabled={loading}>
+          {loading ? 'Creating account…' : 'Create account'}
+        </Button>
+      </form>
+
+      <p className="mt-4 text-xs text-muted-foreground">
+        Already have an account?{' '}
+        <a href="/users/login" className="text-primary-700 hover:underline">
+          Sign in
+        </a>
+      </p>
     </AuthCardShell>
   );
 }
diff --git a/modules/users/users/pages/ResetPassword.tsx b/modules/users/users/pages/ResetPassword.tsx
index 8660c280..58c38b1c 100644
--- a/modules/users/users/pages/ResetPassword.tsx
+++ b/modules/users/users/pages/ResetPassword.tsx
@@ -1,12 +1,5 @@
 import { router, usePage } from '@inertiajs/react';
 import { Button } from '@simple-module-py/ui/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@simple-module-py/ui/components/ui/card';
 import { Input } from '@simple-module-py/ui/components/ui/input';
 import { Label } from '@simple-module-py/ui/components/ui/label';
 import { AuthCardShell } from '@simple-module-py/ui/layouts/AuthCardShell';
@@ -19,7 +12,6 @@ interface Props {
 function ResetPassword() {
   const { token: initialToken } = usePage<{ props: Props }>().props as unknown as Props;
 
-  // Prefer the token from the URL query string (deeplink); fall back to Inertia prop.
   const urlToken =
     typeof window !== 'undefined'
       ? (new URLSearchParams(window.location.search).get('token') ?? '')
@@ -62,49 +54,49 @@ function ResetPassword() {
 
   return (
     <AuthCardShell>
-      <Card className="w-full max-w-sm">
-        <CardHeader className="space-y-1">
-          <CardTitle className="text-2xl">Reset password</CardTitle>
-          <CardDescription>Choose a new password for your account</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="password">New password</Label>
-              <Input
-                id="password"
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-                autoComplete="new-password"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="confirm">Confirm password</Label>
-              <Input
-                id="confirm"
-                type="password"
-                value={confirm}
-                onChange={(e) => setConfirm(e.target.value)}
-                required
-                autoComplete="new-password"
-              />
-            </div>
+      <h1 className="text-2xl font-semibold tracking-tight">Reset password</h1>
+      <p className="mb-6 mt-1 text-sm text-muted-foreground">
+        Choose a new password for your account.
+      </p>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="password" className="text-xs font-medium">
+            New password
+          </Label>
+          <Input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            autoComplete="new-password"
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="confirm" className="text-xs font-medium">
+            Confirm password
+          </Label>
+          <Input
+            id="confirm"
+            type="password"
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+            required
+            autoComplete="new-password"
+          />
+        </div>
 
-            {error && <p className="text-sm text-destructive">{error}</p>}
+        {error && <p className="text-xs text-destructive">{error}</p>}
 
-            <Button type="submit" className="w-full" disabled={loading || !token}>
-              {loading ? 'Resetting…' : 'Reset password'}
-            </Button>
-          </form>
-          {!token && (
-            <p className="mt-2 text-sm text-destructive">
-              No reset token found. Please use the link from your email.
-            </p>
-          )}
-        </CardContent>
-      </Card>
+        <Button type="submit" className="w-full" disabled={loading || !token}>
+          {loading ? 'Resetting…' : 'Reset password'}
+        </Button>
+      </form>
+      {!token && (
+        <p className="mt-2 text-xs text-destructive">
+          No reset token found. Please use the link from your email.
+        </p>
+      )}
     </AuthCardShell>
   );
 }
diff --git a/modules/users/users/pages/VerifyEmail.tsx b/modules/users/users/pages/VerifyEmail.tsx
index 62c35f00..d8b5c212 100644
--- a/modules/users/users/pages/VerifyEmail.tsx
+++ b/modules/users/users/pages/VerifyEmail.tsx
@@ -1,12 +1,5 @@
 import { usePage } from '@inertiajs/react';
 import { Button } from '@simple-module-py/ui/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@simple-module-py/ui/components/ui/card';
 import { AuthCardShell } from '@simple-module-py/ui/layouts/AuthCardShell';
 import { useEffect, useState } from 'react';
 
@@ -96,13 +89,9 @@ function VerifyEmail() {
 
   return (
     <AuthCardShell>
-      <Card className="w-full max-w-sm">
-        <CardHeader>
-          <CardTitle>{content.title}</CardTitle>
-          <CardDescription>{content.description}</CardDescription>
-        </CardHeader>
-        {content.body && <CardContent>{content.body}</CardContent>}
-      </Card>
+      <h1 className="text-2xl font-semibold tracking-tight">{content.title}</h1>
+      <p className="mb-6 mt-1 text-sm text-muted-foreground">{content.description}</p>
+      {content.body && <div>{content.body}</div>}
     </AuthCardShell>
   );
 }
diff --git a/package-lock.json b/package-lock.json
index 523c474c..96fd7e9b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -188,6 +188,20 @@
         "react-dom": "^19.0.0"
       }
     },
+    "modules/lacowiki": {
+      "name": "@simple-module-py/lacowiki",
+      "version": "0.0.8",
+      "extraneous": true,
+      "devDependencies": {
+        "@simple-module-py/tsconfig": "*"
+      },
+      "peerDependencies": {
+        "@inertiajs/react": "^2.0.0",
+        "@simple-module-py/ui": "*",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "modules/permissions": {
       "name": "@simple-module-py/permissions",
       "version": "0.1.0",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 34756133..3a353304 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -50,7 +50,16 @@
       "types": "./src/types.ts",
       "default": "./src/types.ts"
     },
-    "./styles/*": "./src/styles/*"
+    "./styles/*": "./src/styles/*",
+    "./lacowiki/*": {
+      "types": "./src/lacowiki/*.tsx",
+      "default": "./src/lacowiki/*.tsx"
+    },
+    "./lacowiki/wf/*": {
+      "types": "./src/lacowiki/wf/*.tsx",
+      "default": "./src/lacowiki/wf/*.tsx"
+    },
+    "./lacowiki/styles.css": "./src/lacowiki/styles.css"
   },
   "files": [
     "src",
diff --git a/packages/ui/src/lacowiki/chrome.tsx b/packages/ui/src/lacowiki/chrome.tsx
new file mode 100644
index 00000000..a3e0048f
--- /dev/null
+++ b/packages/ui/src/lacowiki/chrome.tsx
@@ -0,0 +1,159 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Fragment } from 'react';
+
+export const ProductSidebar = ({ active = 'Datasets' }: { active?: string }) => {
+  const items = [
+    { name: 'Dashboard', mod: '' },
+    { name: 'Datasets', mod: 'datasets' },
+    { name: 'Legends', mod: 'legends' },
+    { name: 'Sampling', mod: 'sampling' },
+    { name: 'Validation', mod: 'validation' },
+    { name: 'Reports', mod: 'reports' },
+    { name: 'Notifications', mod: 'notif' },
+  ];
+  return (
+    <div
+      style={{
+        width: 200,
+        padding: '16px 12px',
+        borderRight: '1px solid var(--lw-line-soft)',
+        background: 'var(--lw-bg-alt)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          padding: '0 8px 12px',
+          borderBottom: '1px solid var(--lw-line-soft)',
+          marginBottom: 8,
+        }}
+      >
+        <div
+          style={{
+            width: 18,
+            height: 18,
+            background: 'var(--lw-ink-1)',
+            borderRadius: 4,
+            display: 'grid',
+            placeItems: 'center',
+            color: 'white',
+            fontSize: 10,
+            fontWeight: 700,
+            fontFamily: 'var(--lw-font-mono)',
+          }}
+        >
+          L
+        </div>
+        <span style={{ fontSize: 12, fontWeight: 600 }}>LacoWiki</span>
+      </div>
+      {items.map((it) => (
+        <div
+          key={it.name}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            padding: '6px 8px',
+            borderRadius: 4,
+            fontSize: 12,
+            background: it.name === active ? 'var(--lw-surface)' : 'transparent',
+            color: it.name === active ? 'var(--lw-ink-1)' : 'var(--lw-ink-3)',
+            fontWeight: it.name === active ? 600 : 500,
+            border: it.name === active ? '1px solid var(--lw-line)' : '1px solid transparent',
+          }}
+        >
+          {it.mod && <span className={`mod-dot mod-${it.mod}`} />}
+          {!it.mod && (
+            <span style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--lw-ink-5)' }} />
+          )}
+          {it.name}
+        </div>
+      ))}
+      <div
+        style={{
+          marginTop: 'auto',
+          paddingTop: 12,
+          borderTop: '1px solid var(--lw-line-soft)',
+          fontFamily: 'var(--lw-font-mono)',
+          fontSize: 10,
+          color: 'var(--lw-ink-4)',
+        }}
+      >
+        v2.0 · python · alpha
+      </div>
+    </div>
+  );
+};
+
+export const ProductTopbar = ({
+  title,
+  crumbs = [],
+  actions,
+}: {
+  title: string;
+  crumbs?: string[];
+  actions?: ReactNode;
+}) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: 16,
+      padding: '10px 16px',
+      borderBottom: '1px solid var(--lw-line-soft)',
+      background: 'var(--lw-surface)',
+    }}
+  >
+    <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }}>
+      {crumbs.map((c, i) => (
+        <Fragment key={i}>
+          <span style={{ color: 'var(--lw-ink-4)' }}>{c}</span>
+          {i < crumbs.length - 1 && <span style={{ color: 'var(--lw-ink-5)' }}>/</span>}
+        </Fragment>
+      ))}
+      {crumbs.length > 0 && <span style={{ color: 'var(--lw-ink-5)' }}>/</span>}
+      <span style={{ fontWeight: 600 }}>{title}</span>
+    </div>
+    <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
+      {actions}
+      <div
+        style={{
+          width: 24,
+          height: 24,
+          borderRadius: '50%',
+          background: 'var(--lw-bg-sunk)',
+          border: '1px solid var(--lw-line)',
+        }}
+      />
+    </div>
+  </div>
+);
+
+export const Chrome = ({
+  active,
+  title,
+  crumbs,
+  actions,
+  children,
+  contentStyle,
+}: {
+  active?: string;
+  title: string;
+  crumbs?: string[];
+  actions?: ReactNode;
+  children?: ReactNode;
+  contentStyle?: CSSProperties;
+}) => (
+  <div style={{ display: 'flex', height: '100%' }}>
+    <ProductSidebar active={active} />
+    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+      <ProductTopbar title={title} crumbs={crumbs} actions={actions} />
+      <div style={{ flex: 1, padding: 16, overflow: 'hidden', ...contentStyle }}>{children}</div>
+    </div>
+  </div>
+);
diff --git a/packages/ui/src/lacowiki/design-system-blocks.tsx b/packages/ui/src/lacowiki/design-system-blocks.tsx
new file mode 100644
index 00000000..dcf1e8df
--- /dev/null
+++ b/packages/ui/src/lacowiki/design-system-blocks.tsx
@@ -0,0 +1,187 @@
+import type { ReactNode } from 'react';
+
+import { Pill } from './primitives';
+
+export { SpatialLegend, SpatialMap } from './spatial-preview';
+
+export const Swatch = ({
+  name,
+  token,
+  value,
+  css,
+}: {
+  name: string;
+  token: string;
+  value: string;
+  css: string;
+}) => (
+  <div className="swatch">
+    <div className="chip" style={{ background: css }} />
+    <div className="meta">
+      <b>{name}</b>
+      {token}
+      <br />
+      {value}
+    </div>
+  </div>
+);
+
+export const NEUTRALS: [string, string, string][] = [
+  ['bg', '--bg', '#fafbfc'],
+  ['bg-alt', '--bg-alt', '#f3f5f7'],
+  ['surface', '--surface', '#ffffff'],
+  ['line', '--line', '#dfe3e8'],
+  ['ink-3', '--ink-3', '#6b7480'],
+  ['ink-1', '--ink-1', '#0e1116'],
+];
+
+export const ACCENTS: [string, string, string][] = [
+  ['accent', '--accent', 'oklch(.62 .12 200)'],
+  ['accent-soft', '--accent-soft', 'oklch(.94 .04 200)'],
+  ['accent-ink', '--accent-ink', 'oklch(.34 .08 200)'],
+  ['ok', '--ok', 'oklch(.62 .12 155)'],
+  ['warn', '--warn', 'oklch(.72 .13 75)'],
+  ['err', '--err', 'oklch(.58 .16 25)'],
+];
+
+export const MODULES: [string, string][] = [
+  ['Datasets', 'datasets'],
+  ['Legends', 'legends'],
+  ['Sampling', 'sampling'],
+  ['Validation', 'validation'],
+  ['Reports', 'reports'],
+  ['Notifications', 'notif'],
+];
+
+export const TYPE_SPECS: [string, ReactNode][] = [
+  [
+    'Display · 44/1.05 · -0.02em',
+    <span style={{ fontSize: 44, lineHeight: 1.05, letterSpacing: '-0.02em', fontWeight: 600 }}>
+      Map. Sample. Validate.
+    </span>,
+  ],
+  [
+    'H1 · 28/1.15 · -0.01em',
+    <span style={{ fontSize: 28, lineHeight: 1.15, letterSpacing: '-0.01em', fontWeight: 600 }}>
+      Land cover datasets
+    </span>,
+  ],
+  ['H2 · 20/1.25', <span style={{ fontSize: 20, fontWeight: 600 }}>Sampling design</span>],
+  [
+    'Body · 14/1.5',
+    <span style={{ fontSize: 14 }}>
+      Stratified random sampling allocates points proportionally across legend classes.
+    </span>,
+  ],
+  [
+    'Small · 12/1.4 · ink-3',
+    <span style={{ fontSize: 12, color: 'var(--lw-ink-3)' }}>
+      Last updated 2 hours ago by m.lesiv@iiasa.ac.at
+    </span>,
+  ],
+  [
+    'Mono · 12 · uppercase',
+    <span style={{ fontFamily: 'var(--lw-font-mono)', fontSize: 12, letterSpacing: '0.06em' }}>
+      EPSG:4326 · 14,328 PIXELS · COG
+    </span>,
+  ],
+  [
+    'Hand · annotation',
+    <span
+      style={{ fontFamily: 'var(--lw-font-hand)', fontSize: 22, color: 'var(--lw-accent-ink)' }}
+    >
+      ← classify here
+    </span>,
+  ],
+];
+
+export const SPACING: [string, number][] = [
+  ['s-1', 4],
+  ['s-2', 8],
+  ['s-3', 12],
+  ['s-4', 16],
+  ['s-5', 24],
+  ['s-6', 32],
+  ['s-7', 48],
+  ['s-8', 64],
+];
+
+export const SampleCard = () => (
+  <div
+    style={{
+      background: 'var(--lw-surface)',
+      border: '1px solid var(--lw-line)',
+      borderRadius: 6,
+      padding: 16,
+    }}
+  >
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+      <span className="mod-dot mod-datasets" />
+      <span style={{ fontSize: 11, fontFamily: 'var(--lw-font-mono)', color: 'var(--lw-ink-4)' }}>
+        DATASET · COG
+      </span>
+      <Pill tone="ok">ready</Pill>
+    </div>
+    <div style={{ fontSize: 16, fontWeight: 600 }}>Africa LC 2020 v3</div>
+    <div style={{ fontSize: 13, color: 'var(--lw-ink-3)', marginTop: 4 }}>
+      Sentinel-2 derived classification, 10m resolution
+    </div>
+    <div
+      style={{
+        display: 'flex',
+        gap: 16,
+        marginTop: 12,
+        fontSize: 11,
+        fontFamily: 'var(--lw-font-mono)',
+        color: 'var(--lw-ink-4)',
+      }}
+    >
+      <span>4.2 GB</span>
+      <span>EPSG:4326</span>
+      <span>shared · 3</span>
+    </div>
+  </div>
+);
+
+export const SampleTable = () => (
+  <div
+    style={{
+      background: 'var(--lw-surface)',
+      border: '1px solid var(--lw-line)',
+      borderRadius: 6,
+      overflow: 'hidden',
+    }}
+  >
+    {(
+      [
+        ['Africa LC 2020', 'ready', '4.2 GB'],
+        ['Tropical Forest 2024', 'processing', '1.8 GB'],
+        ['Urban Extents EU', 'ready', '850 MB'],
+      ] as [string, 'ready' | 'processing', string][]
+    ).map((r, i) => (
+      <div
+        key={r[0]}
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr 80px 80px',
+          padding: '10px 14px',
+          fontSize: 12,
+          borderBottom: i < 2 ? '1px solid var(--lw-line-soft)' : 0,
+          alignItems: 'center',
+        }}
+      >
+        <span style={{ fontWeight: 500 }}>{r[0]}</span>
+        <Pill tone={r[1] === 'ready' ? 'ok' : 'warn'}>{r[1]}</Pill>
+        <span
+          style={{
+            fontFamily: 'var(--lw-font-mono)',
+            color: 'var(--lw-ink-4)',
+            textAlign: 'right',
+          }}
+        >
+          {r[2]}
+        </span>
+      </div>
+    ))}
+  </div>
+);
diff --git a/packages/ui/src/lacowiki/design-system.tsx b/packages/ui/src/lacowiki/design-system.tsx
new file mode 100644
index 00000000..f61e2edb
--- /dev/null
+++ b/packages/ui/src/lacowiki/design-system.tsx
@@ -0,0 +1,227 @@
+import {
+  ACCENTS,
+  MODULES,
+  NEUTRALS,
+  SampleCard,
+  SampleTable,
+  SPACING,
+  SpatialLegend,
+  SpatialMap,
+  Swatch,
+  TYPE_SPECS,
+} from './design-system-blocks';
+import { Btn, Pill, Placeholder, Stack } from './primitives';
+
+export const DesignSystem = () => (
+  <div className="ds-grid">
+    <div>
+      <div className="eyebrow">01 — System</div>
+      <h1 className="h-display">Design system</h1>
+      <p className="lede">
+        A neutral, technical palette built around precise typography and one accent. Tokens are
+        intentional and few — the aim is restraint, so map data and validation imagery can carry the
+        visual weight.
+      </p>
+    </div>
+
+    <div className="ds-row">
+      <div className="label">
+        <div className="label-title">Neutrals</div>
+        Cool grays, near-zero saturation. Used for surfaces, ink, and lines.
+      </div>
+      <div className="swatch-row">
+        {NEUTRALS.map(([n, t, v]) => (
+          <Swatch key={n} name={n} token={t} value={v} css={v} />
+        ))}
+      </div>
+    </div>
+
+    <div className="ds-row">
+      <div className="label">
+        <div className="label-title">Accent</div>A single teal-cyan family for selected state,
+        links, and primary CTAs. Same chroma across the family.
+      </div>
+      <div className="swatch-row">
+        {ACCENTS.map(([n, t, v]) => (
+          <Swatch key={n} name={n} token={t} value={v} css={v} />
+        ))}
+      </div>
+    </div>
+
+    <div className="ds-row">
+      <div className="label">
+        <div className="label-title">Module keys</div>
+        Tiny color dots for sidebar items and badges, drawn from a neutral hue family at fixed
+        chroma.
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
+        {MODULES.map(([n, c]) => (
+          <div
+            key={n}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 10,
+              padding: '10px 12px',
+              border: '1px solid var(--lw-line)',
+              borderRadius: 6,
+              background: 'var(--lw-surface)',
+            }}
+          >
+            <span
+              className={`mod-dot mod-${c}`}
+              style={{ width: 12, height: 12, borderRadius: 3 }}
+            />
+            <span style={{ fontSize: 13, fontWeight: 500 }}>{n}</span>
+            <span
+              style={{
+                fontFamily: 'var(--lw-font-mono)',
+                fontSize: 10,
+                color: 'var(--lw-ink-4)',
+                marginLeft: 'auto',
+              }}
+            >
+              mod-{c}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <div className="ds-row">
+      <div className="label">
+        <div className="label-title">Type</div>
+        Inter for UI. JetBrains Mono for tabular data, IDs, code, technical labels. Caveat for
+        hand-drawn margin annotations only.
+      </div>
+      <div className="type-stack">
+        {TYPE_SPECS.map(([meta, sample], i) => (
+          <div className="type-spec" key={i}>
+            <div className="meta">{meta}</div>
+            <div>{sample}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <div className="ds-row">
+      <div className="label">
+        <div className="label-title">Spacing & radius</div>
+        4px base. Components round to <code>--r-2</code> (4px) by default; cards to{' '}
+        <code>--r-3</code> (6px). Avoid heavy radii.
+      </div>
+      <div className="token-grid">
+        {SPACING.map(([n, v]) => (
+          <div key={n} className="token">
+            <div
+              className="demo"
+              style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }}
+            >
+              <div
+                style={{ height: 24, width: v, background: 'var(--lw-accent)', borderRadius: 2 }}
+              />
+            </div>
+            <div className="name">
+              <b>--{n}</b> · {v}px
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <div className="ds-row">
+      <div className="label">
+        <div className="label-title">Buttons & badges</div>
+        One primary (ink-1), accent for spatial actions, ghost for secondary. Mono badges for
+        status.
+      </div>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' }}>
+        <Btn kind="primary">Run sampling</Btn>
+        <Btn kind="accent">Open on map</Btn>
+        <Btn>Cancel</Btn>
+        <Btn icon="↓">Export CSV</Btn>
+        <span style={{ width: 1, height: 24, background: 'var(--lw-line)' }} />
+        <Pill>draft</Pill>
+        <Pill tone="ok">ready</Pill>
+        <Pill tone="warn">processing</Pill>
+        <Pill tone="accent">shared · 3</Pill>
+      </div>
+    </div>
+
+    <div className="ds-row">
+      <div className="label">
+        <div className="label-title">Cards, tables, lists</div>
+        Cards on <code>--surface</code>, 1px <code>--line</code>, no shadow. Tables zebra-free; row
+        hover only.
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+        <SampleCard />
+        <SampleTable />
+      </div>
+    </div>
+
+    <div className="ds-row">
+      <div className="label">
+        <div className="label-title">Spatial UI</div>
+        The map components are the heart of the product. Restrained chrome — controls float on the
+        map; legend collapses; sample markers are 6–10px discs.
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 12 }}>
+        <SpatialMap />
+        <SpatialLegend />
+      </div>
+    </div>
+
+    <div className="ds-row">
+      <div className="label">
+        <div className="label-title">Forms & inputs</div>
+        Native-feeling text inputs, dotted borders for drop zones. Labels live above; helper text
+        below in <code>--ink-3</code>.
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+        <Stack gap={12}>
+          <div>
+            <div style={{ fontSize: 12, fontWeight: 500, marginBottom: 4 }}>Dataset name</div>
+            <div
+              style={{
+                height: 32,
+                border: '1px solid var(--lw-line)',
+                borderRadius: 4,
+                padding: '0 10px',
+                display: 'flex',
+                alignItems: 'center',
+                fontSize: 13,
+                background: 'var(--lw-surface)',
+              }}
+            >
+              Africa LC 2020 v3
+            </div>
+            <div style={{ fontSize: 11, color: 'var(--lw-ink-3)', marginTop: 4 }}>
+              Used as the title across the workspace.
+            </div>
+          </div>
+          <div>
+            <div style={{ fontSize: 12, fontWeight: 500, marginBottom: 4 }}>Coordinate system</div>
+            <div
+              style={{
+                height: 32,
+                border: '1px solid var(--lw-line)',
+                borderRadius: 4,
+                padding: '0 10px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                fontSize: 13,
+                background: 'var(--lw-surface)',
+              }}
+            >
+              <span style={{ fontFamily: 'var(--lw-font-mono)' }}>EPSG:4326</span>
+              <span style={{ color: 'var(--lw-ink-4)' }}>▾</span>
+            </div>
+          </div>
+        </Stack>
+        <Placeholder label="Drop GeoTIFF or Shapefile here · or click to browse" h={140} />
+      </div>
+    </div>
+  </div>
+);
diff --git a/packages/ui/src/lacowiki/overview.tsx b/packages/ui/src/lacowiki/overview.tsx
new file mode 100644
index 00000000..8a1e70aa
--- /dev/null
+++ b/packages/ui/src/lacowiki/overview.tsx
@@ -0,0 +1,96 @@
+import { Row, Stack } from './primitives';
+
+const MODS: [string, string, string][] = [
+  ['datasets', 'Datasets', '8 tables · COG/PMTiles · sharing'],
+  ['legends', 'Legends', '4 tables · 10 templates · CRUD'],
+  ['sampling', 'Sampling', '4 tables · 7 strategies · jobs'],
+  ['validation', 'Validation', '6 tables · classify page'],
+  ['reports', 'Reports', '4 tables · matrix · sharing'],
+  ['notif', 'Notifications', '3 tables · 6 events · in-app feed'],
+];
+
+export const Overview = ({ setTab }: { setTab: (t: string) => void }) => (
+  <div>
+    <div className="eyebrow">LacoWiki · Python rewrite</div>
+    <h1 className="h-display">
+      Wireframes & design system
+      <br />
+      for the v2 migration.
+    </h1>
+    <p className="lede">
+      A starting point for the new LacoWiki: an opinionated design system in the modern
+      scientific/technical mold, plus mid-fidelity wireframes covering all eight modules from the
+      rewrite spec — datasets, legends, sampling, validation, reports, and account.
+    </p>
+
+    <div className="overview-grid">
+      <a className="idx-card" onClick={() => setTab('system')}>
+        <span className="num">→ 01 · system</span>
+        <h3>Design system</h3>
+        <p>
+          Color, type, spacing, components, and the spatial UI primitives that carry most of the
+          product weight.
+        </p>
+      </a>
+      <a className="idx-card" onClick={() => setTab('wireframes')}>
+        <span className="num">→ 02 · screens</span>
+        <h3>Wireframes</h3>
+        <p>
+          15 frames across landing, dashboard, datasets, legends, sampling, validation, reports,
+          settings.
+        </p>
+      </a>
+      <a className="idx-card" onClick={() => setTab('wireframes')}>
+        <span className="num">→ 03 · core</span>
+        <h3>Validation, focused</h3>
+        <p>
+          One sample at a time — buffer, crosshair guides, single classify panel beside the map.
+        </p>
+      </a>
+    </div>
+
+    <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
+      <div>
+        <div className="eyebrow">Design direction</div>
+        <h3 className="h-section">Restrained chrome, data-forward</h3>
+        <p style={{ fontSize: 14, color: 'var(--lw-ink-2)' }}>
+          Cool neutrals, one teal-cyan accent, Inter for UI and JetBrains Mono for data. Map and
+          validation imagery carry the visual weight; the chrome stays out of the way. Inspired by
+          the working language of Linear, Mapbox, Earth Engine — not a re-skin of any one of them.
+        </p>
+        <ul style={{ fontSize: 13, color: 'var(--lw-ink-3)', paddingLeft: 18, lineHeight: 1.7 }}>
+          <li>1px lines, no shadows on chrome</li>
+          <li>Status uses small mono pills, never icon-only</li>
+          <li>Map controls float on the map; never wrap it</li>
+          <li>Tabular numerals everywhere they appear in tables</li>
+        </ul>
+      </div>
+      <div>
+        <div className="eyebrow">Migration scope</div>
+        <h3 className="h-section">Eight modules, one shell</h3>
+        <Stack gap={8}>
+          {MODS.map((r) => (
+            <Row
+              key={r[0]}
+              gap={12}
+              style={{ padding: '8px 0', borderBottom: '1px solid var(--lw-line-soft)' }}
+            >
+              <span className={`mod-dot mod-${r[0]}`} style={{ width: 10, height: 10 }} />
+              <b style={{ fontSize: 13, width: 110 }}>{r[1]}</b>
+              <span
+                style={{
+                  fontFamily: 'var(--lw-font-mono)',
+                  fontSize: 11,
+                  color: 'var(--lw-ink-4)',
+                  flex: 1,
+                }}
+              >
+                {r[2]}
+              </span>
+            </Row>
+          ))}
+        </Stack>
+      </div>
+    </div>
+  </div>
+);
diff --git a/packages/ui/src/lacowiki/primitives.tsx b/packages/ui/src/lacowiki/primitives.tsx
new file mode 100644
index 00000000..5fedf28a
--- /dev/null
+++ b/packages/ui/src/lacowiki/primitives.tsx
@@ -0,0 +1,141 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+type LineWidth = 'short' | 'med' | 'long' | 'title' | 'head';
+type PillTone = 'default' | 'accent' | 'ok' | 'warn';
+type BtnKind = 'default' | 'primary' | 'accent';
+
+export const Frame = ({
+  name,
+  dim,
+  children,
+  padded = false,
+  style,
+}: {
+  name: string;
+  dim: string;
+  children?: ReactNode;
+  padded?: boolean;
+  style?: CSSProperties;
+}) => (
+  <div className="frame" style={style}>
+    <div className="frame-cap">
+      <span className="name">{name}</span>
+      <span className="dim">{dim}</span>
+    </div>
+    <div className={padded ? 'frame-body padded' : 'frame-body'}>{children}</div>
+  </div>
+);
+
+export const Line = ({
+  w = 'long',
+  dark = false,
+  style,
+}: {
+  w?: LineWidth;
+  dark?: boolean;
+  style?: CSSProperties;
+}) => <div className={`wf-line ${w} ${dark ? 'dark' : ''}`} style={style} />;
+
+export const Stack = ({
+  gap = 8,
+  children,
+  style,
+}: {
+  gap?: number;
+  children?: ReactNode;
+  style?: CSSProperties;
+}) => <div style={{ display: 'flex', flexDirection: 'column', gap, ...style }}>{children}</div>;
+
+export const Row = ({
+  gap = 8,
+  align = 'center',
+  justify = 'flex-start',
+  children,
+  style,
+}: {
+  gap?: number;
+  align?: CSSProperties['alignItems'];
+  justify?: CSSProperties['justifyContent'];
+  children?: ReactNode;
+  style?: CSSProperties;
+}) => (
+  <div style={{ display: 'flex', alignItems: align, justifyContent: justify, gap, ...style }}>
+    {children}
+  </div>
+);
+
+export const Pill = ({ children, tone = 'default' }: { children?: ReactNode; tone?: PillTone }) => (
+  <span className={`wf-pill ${tone === 'default' ? '' : tone}`}>{children}</span>
+);
+
+export const Btn = ({
+  children,
+  kind = 'default',
+  icon,
+}: {
+  children?: ReactNode;
+  kind?: BtnKind;
+  icon?: string;
+}) => (
+  <span className={`wf-btn ${kind === 'default' ? '' : kind}`}>
+    {icon ? <span style={{ fontSize: 10 }}>{icon}</span> : null}
+    {children}
+  </span>
+);
+
+export const Placeholder = ({
+  label,
+  h = 100,
+  style,
+}: {
+  label: string;
+  h?: number;
+  style?: CSSProperties;
+}) => (
+  <div className="placeholder" style={{ height: h, ...style }}>
+    {label}
+  </div>
+);
+
+export const MapPh = ({
+  h = 280,
+  style,
+  children,
+}: {
+  h?: number;
+  style?: CSSProperties;
+  children?: ReactNode;
+}) => (
+  <div className="map-ph" style={{ height: h, ...style }}>
+    {children}
+  </div>
+);
+
+export const SectionHead = ({
+  id,
+  label,
+  children,
+}: {
+  id: string;
+  label: string;
+  children?: ReactNode;
+}) => (
+  <div className="wf-section-head">
+    <div>
+      <div
+        style={{
+          fontFamily: 'var(--lw-font-mono)',
+          fontSize: 10,
+          color: 'var(--lw-ink-4)',
+          letterSpacing: '0.1em',
+          textTransform: 'uppercase',
+          marginBottom: 6,
+        }}
+      >
+        {label}
+      </div>
+      <h2 id={id}>{children}</h2>
+    </div>
+    <div className="id">#{id}</div>
+  </div>
+);
diff --git a/packages/ui/src/lacowiki/spatial-preview.tsx b/packages/ui/src/lacowiki/spatial-preview.tsx
new file mode 100644
index 00000000..bc2c6a68
--- /dev/null
+++ b/packages/ui/src/lacowiki/spatial-preview.tsx
@@ -0,0 +1,175 @@
+import { MapPh, Row } from './primitives';
+
+const LEGEND_CLASSES: [string, string][] = [
+  ['Forest land', '#3a7d44'],
+  ['Cropland', '#d6a456'],
+  ['Grassland', '#bcc972'],
+  ['Wetlands', '#5b8aa8'],
+  ['Settlements', '#9a3b3b'],
+  ['Other', '#7c7c7c'],
+];
+
+const SAMPLE_POINTS: [number, number][] = [
+  [35, 45],
+  [55, 60],
+  [70, 35],
+  [25, 65],
+  [80, 70],
+];
+
+export const SpatialMap = () => (
+  <div
+    style={{
+      position: 'relative',
+      borderRadius: 6,
+      overflow: 'hidden',
+      border: '1px solid var(--lw-line)',
+    }}
+  >
+    <MapPh h={260} />
+    <div
+      style={{
+        position: 'absolute',
+        top: 10,
+        left: 10,
+        background: 'var(--lw-surface)',
+        border: '1px solid var(--lw-line)',
+        borderRadius: 6,
+        padding: 8,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 6,
+        fontSize: 11,
+        minWidth: 140,
+      }}
+    >
+      <Row>
+        <span style={{ width: 10, height: 10, background: 'var(--lw-accent)', borderRadius: 2 }} />
+        Land cover
+      </Row>
+      <Row>
+        <span style={{ width: 10, height: 10, background: 'var(--lw-ink-5)', borderRadius: 2 }} />
+        Sentinel-2 RGB
+      </Row>
+      <Row>
+        <span
+          style={{
+            width: 10,
+            height: 10,
+            background: 'var(--lw-bg-sunk)',
+            borderRadius: 2,
+            border: '1px dashed var(--lw-ink-5)',
+          }}
+        />
+        Bing aerial
+      </Row>
+    </div>
+    <div
+      style={{
+        position: 'absolute',
+        top: 10,
+        right: 10,
+        background: 'var(--lw-surface)',
+        border: '1px solid var(--lw-line)',
+        borderRadius: 6,
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <div
+        style={{
+          width: 28,
+          height: 28,
+          display: 'grid',
+          placeItems: 'center',
+          borderBottom: '1px solid var(--lw-line-soft)',
+          fontWeight: 600,
+        }}
+      >
+        +
+      </div>
+      <div
+        style={{ width: 28, height: 28, display: 'grid', placeItems: 'center', fontWeight: 600 }}
+      >
+        −
+      </div>
+    </div>
+    {SAMPLE_POINTS.map(([x, y], i) => (
+      <div
+        key={i}
+        style={{
+          position: 'absolute',
+          left: `${x}%`,
+          top: `${y}%`,
+          width: 10,
+          height: 10,
+          borderRadius: '50%',
+          background: i === 1 ? 'var(--lw-accent)' : i === 4 ? 'var(--lw-ok)' : 'var(--lw-surface)',
+          border: i === 1 ? '2px solid var(--lw-surface)' : '1.5px solid var(--lw-ink-1)',
+          boxShadow: i === 1 ? '0 0 0 4px oklch(.62 .12 200 / .25)' : 'none',
+          transform: 'translate(-50%, -50%)',
+        }}
+      />
+    ))}
+    <div
+      style={{
+        position: 'absolute',
+        bottom: 10,
+        left: 10,
+        background: 'rgba(255,255,255,0.85)',
+        padding: '4px 8px',
+        fontFamily: 'var(--lw-font-mono)',
+        fontSize: 10,
+        borderRadius: 3,
+        border: '1px solid var(--lw-line)',
+      }}
+    >
+      500 m ━━━━
+    </div>
+  </div>
+);
+
+export const SpatialLegend = () => (
+  <div
+    style={{
+      border: '1px solid var(--lw-line)',
+      borderRadius: 6,
+      background: 'var(--lw-surface)',
+      overflow: 'hidden',
+    }}
+  >
+    <div
+      style={{
+        padding: '8px 12px',
+        borderBottom: '1px solid var(--lw-line-soft)',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      }}
+    >
+      <span style={{ fontSize: 12, fontWeight: 600 }}>IPCC LULUCF (6)</span>
+      <span style={{ fontFamily: 'var(--lw-font-mono)', fontSize: 10, color: 'var(--lw-ink-4)' }}>
+        v1.2
+      </span>
+    </div>
+    {LEGEND_CLASSES.map(([n, c], i) => (
+      <div
+        key={n}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10,
+          padding: '8px 12px',
+          fontSize: 12,
+          borderBottom: i < 5 ? '1px solid var(--lw-line-soft)' : 0,
+        }}
+      >
+        <span style={{ width: 14, height: 14, background: c, borderRadius: 2 }} />
+        <span style={{ flex: 1 }}>{n}</span>
+        <span style={{ fontFamily: 'var(--lw-font-mono)', fontSize: 10, color: 'var(--lw-ink-4)' }}>
+          {i + 1}
+        </span>
+      </div>
+    ))}
+  </div>
+);
diff --git a/packages/ui/src/lacowiki/styles.css b/packages/ui/src/lacowiki/styles.css
new file mode 100644
index 00000000..b53baa58
--- /dev/null
+++ b/packages/ui/src/lacowiki/styles.css
@@ -0,0 +1,624 @@
+/* ============================================================
+   LacoWiki migration wireframes + design system
+   Modern scientific/technical aesthetic
+   Ported from the design handoff bundle. All rules are scoped
+   under .lw-app so they don't leak into the rest of the host UI.
+   ============================================================ */
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Caveat:wght@500;600&display=swap");
+
+.lw-app {
+  /* Type */
+  --lw-font-ui: "Inter", -apple-system, system-ui, sans-serif;
+  --lw-font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --lw-font-hand: "Caveat", "Kalam", cursive;
+
+  /* Neutrals — cool gray, low saturation */
+  --lw-bg: #fafbfc;
+  --lw-bg-alt: #f3f5f7;
+  --lw-bg-sunk: #eceff2;
+  --lw-surface: #ffffff;
+  --lw-ink-1: #0e1116;
+  --lw-ink-2: #3a424c;
+  --lw-ink-3: #6b7480;
+  --lw-ink-4: #9aa3ad;
+  --lw-ink-5: #c8cdd3;
+  --lw-line: #dfe3e8;
+  --lw-line-soft: #ecedf0;
+
+  /* Accent — precise teal-cyan */
+  --lw-accent: oklch(0.62 0.12 200);
+  --lw-accent-soft: oklch(0.94 0.04 200);
+  --lw-accent-ink: oklch(0.34 0.08 200);
+
+  /* Status */
+  --lw-ok: oklch(0.62 0.12 155);
+  --lw-warn: oklch(0.72 0.13 75);
+  --lw-err: oklch(0.58 0.16 25);
+
+  /* Spacing scale */
+  --lw-s-1: 4px;
+  --lw-s-2: 8px;
+  --lw-s-3: 12px;
+  --lw-s-4: 16px;
+  --lw-s-5: 24px;
+  --lw-s-6: 32px;
+  --lw-s-7: 48px;
+  --lw-s-8: 64px;
+
+  /* Radii */
+  --lw-r-1: 2px;
+  --lw-r-2: 4px;
+  --lw-r-3: 6px;
+  --lw-r-4: 10px;
+
+  /* Density */
+  --lw-row-h: 36px;
+  --lw-pad-card: 16px;
+
+  /* Wireframe placeholder */
+  --lw-ph-stroke: #cdd2d7;
+  --lw-ph-fill: #f5f6f8;
+
+  background: var(--lw-bg);
+  color: var(--lw-ink-1);
+  font-family: var(--lw-font-ui);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+}
+
+.lw-app[data-density="compact"] {
+  --lw-row-h: 28px;
+  --lw-pad-card: 12px;
+}
+.lw-app[data-density="comfy"] {
+  --lw-row-h: 44px;
+  --lw-pad-card: 20px;
+}
+
+.lw-app *,
+.lw-app *::before,
+.lw-app *::after {
+  box-sizing: border-box;
+}
+
+/* ===== App shell ===== */
+.lw-app .topbar {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  gap: var(--lw-s-5);
+  padding: var(--lw-s-3) var(--lw-s-5);
+  background: rgba(250, 251, 252, 0.92);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--lw-line);
+}
+.lw-app .topbar-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--lw-s-3);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.lw-app .brand-mark {
+  width: 22px;
+  height: 22px;
+  display: grid;
+  place-items: center;
+}
+.lw-app .tabs {
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  background: var(--lw-bg-sunk);
+  border-radius: var(--lw-r-3);
+}
+.lw-app .tab {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--lw-ink-3);
+  padding: 6px 12px;
+  border-radius: var(--lw-r-2);
+  cursor: pointer;
+}
+.lw-app .tab[data-active="true"] {
+  background: var(--lw-surface);
+  color: var(--lw-ink-1);
+  box-shadow: 0 1px 2px rgba(14, 17, 22, 0.06);
+}
+.lw-app .topbar-meta {
+  margin-left: auto;
+  font-family: var(--lw-font-mono);
+  font-size: 11px;
+  color: var(--lw-ink-4);
+  letter-spacing: 0.02em;
+}
+
+.lw-app main {
+  padding: var(--lw-s-7) var(--lw-s-7) var(--lw-s-8);
+  max-width: 1600px;
+  margin: 0 auto;
+}
+
+/* ===== Section / hero typography ===== */
+.lw-app .eyebrow {
+  font-family: var(--lw-font-mono);
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--lw-ink-4);
+  margin-bottom: var(--lw-s-3);
+}
+.lw-app .h-display {
+  font-size: 44px;
+  line-height: 1.05;
+  letter-spacing: -0.02em;
+  font-weight: 600;
+  margin: 0 0 var(--lw-s-3);
+  text-wrap: balance;
+}
+.lw-app .h-section {
+  font-size: 22px;
+  letter-spacing: -0.01em;
+  font-weight: 600;
+  margin: 0 0 var(--lw-s-2);
+}
+.lw-app .h-sub {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 0 var(--lw-s-2);
+}
+.lw-app .lede {
+  font-size: 16px;
+  color: var(--lw-ink-2);
+  max-width: 62ch;
+  margin: 0 0 var(--lw-s-6);
+  text-wrap: pretty;
+}
+
+/* ===== Index / overview ===== */
+.lw-app .overview-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--lw-s-5);
+  margin-top: var(--lw-s-6);
+}
+.lw-app .idx-card {
+  border: 1px solid var(--lw-line);
+  background: var(--lw-surface);
+  padding: var(--lw-s-5);
+  border-radius: var(--lw-r-3);
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: var(--lw-s-3);
+  transition:
+    border-color 0.15s,
+    transform 0.15s;
+  cursor: pointer;
+}
+.lw-app .idx-card:hover {
+  border-color: var(--lw-accent);
+  transform: translateY(-1px);
+}
+.lw-app .idx-card .num {
+  font-family: var(--lw-font-mono);
+  font-size: 11px;
+  color: var(--lw-accent-ink);
+}
+.lw-app .idx-card h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+.lw-app .idx-card p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--lw-ink-3);
+}
+
+/* ===== Design System tab ===== */
+.lw-app .ds-grid {
+  display: grid;
+  gap: var(--lw-s-6);
+}
+.lw-app .ds-row {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  gap: var(--lw-s-6);
+  padding: var(--lw-s-5) 0;
+  border-top: 1px solid var(--lw-line-soft);
+}
+.lw-app .ds-row:first-child {
+  border-top: 0;
+}
+.lw-app .ds-row .label {
+  color: var(--lw-ink-3);
+  font-size: 13px;
+}
+.lw-app .ds-row .label .label-title {
+  color: var(--lw-ink-1);
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+
+.lw-app .swatch-row {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: var(--lw-s-3);
+}
+.lw-app .swatch {
+  border: 1px solid var(--lw-line);
+  border-radius: var(--lw-r-3);
+  overflow: hidden;
+  background: var(--lw-surface);
+}
+.lw-app .swatch .chip {
+  height: 64px;
+}
+.lw-app .swatch .meta {
+  padding: 8px 10px;
+  font-family: var(--lw-font-mono);
+  font-size: 11px;
+  color: var(--lw-ink-3);
+}
+.lw-app .swatch .meta b {
+  display: block;
+  color: var(--lw-ink-1);
+  font-weight: 600;
+}
+
+.lw-app .type-stack > * + * {
+  margin-top: var(--lw-s-4);
+}
+.lw-app .type-spec {
+  display: flex;
+  align-items: baseline;
+  gap: var(--lw-s-5);
+  padding-bottom: var(--lw-s-3);
+  border-bottom: 1px dashed var(--lw-line);
+}
+.lw-app .type-spec .meta {
+  font-family: var(--lw-font-mono);
+  font-size: 11px;
+  color: var(--lw-ink-4);
+  min-width: 140px;
+}
+
+.lw-app .token-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--lw-s-3);
+}
+.lw-app .token {
+  border: 1px solid var(--lw-line);
+  border-radius: var(--lw-r-3);
+  padding: var(--lw-s-3);
+  background: var(--lw-surface);
+  display: flex;
+  flex-direction: column;
+  gap: var(--lw-s-2);
+}
+.lw-app .token .demo {
+  height: 48px;
+  background: var(--lw-bg-sunk);
+  border-radius: var(--lw-r-2);
+  position: relative;
+  overflow: hidden;
+}
+.lw-app .token .name {
+  font-family: var(--lw-font-mono);
+  font-size: 11px;
+  color: var(--lw-ink-3);
+}
+.lw-app .token .name b {
+  color: var(--lw-ink-1);
+}
+
+/* ===== Wireframe canvas ===== */
+.lw-app .wf-toc {
+  position: sticky;
+  top: 56px;
+  background: var(--lw-bg);
+  padding: var(--lw-s-3) 0;
+  border-bottom: 1px solid var(--lw-line);
+  z-index: 5;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--lw-s-2);
+  margin-bottom: var(--lw-s-6);
+}
+.lw-app .wf-toc a {
+  font-family: var(--lw-font-mono);
+  font-size: 11px;
+  text-decoration: none;
+  color: var(--lw-ink-3);
+  padding: 4px 8px;
+  border: 1px solid var(--lw-line);
+  border-radius: var(--lw-r-2);
+  background: var(--lw-surface);
+}
+.lw-app .wf-toc a:hover {
+  color: var(--lw-accent-ink);
+  border-color: var(--lw-accent);
+}
+
+.lw-app .wf-section {
+  margin: var(--lw-s-8) 0;
+  scroll-margin-top: 110px;
+}
+.lw-app .wf-section-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--lw-s-5);
+  margin-bottom: var(--lw-s-5);
+  padding-bottom: var(--lw-s-3);
+  border-bottom: 1px solid var(--lw-line);
+}
+.lw-app .wf-section-head h2 {
+  margin: 0;
+  font-size: 24px;
+  letter-spacing: -0.01em;
+}
+.lw-app .wf-section-head .id {
+  font-family: var(--lw-font-mono);
+  font-size: 11px;
+  color: var(--lw-ink-4);
+}
+
+.lw-app .wf-grid-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--lw-s-5);
+}
+.lw-app .wf-grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--lw-s-5);
+}
+.lw-app .wf-grid-4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--lw-s-4);
+}
+
+/* Frame = a wireframe artboard */
+.lw-app .frame {
+  background: var(--lw-surface);
+  border: 1px solid var(--lw-line);
+  border-radius: var(--lw-r-3);
+  overflow: hidden;
+  position: relative;
+}
+.lw-app .frame-cap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--lw-line-soft);
+  background: var(--lw-bg-alt);
+}
+.lw-app .frame-cap .name {
+  font-size: 12px;
+  font-weight: 600;
+}
+.lw-app .frame-cap .dim {
+  font-family: var(--lw-font-mono);
+  font-size: 10px;
+  color: var(--lw-ink-4);
+}
+.lw-app .frame-body {
+  padding: 0;
+  position: relative;
+}
+.lw-app .frame-body.padded {
+  padding: var(--lw-s-4);
+}
+
+/* Generic wireframe building blocks */
+.lw-app .wf-line {
+  height: 8px;
+  background: var(--lw-bg-sunk);
+  border-radius: 4px;
+}
+.lw-app .wf-line.dark {
+  background: var(--lw-ink-5);
+}
+.lw-app .wf-line.short {
+  width: 40%;
+}
+.lw-app .wf-line.med {
+  width: 65%;
+}
+.lw-app .wf-line.long {
+  width: 90%;
+}
+.lw-app .wf-line.title {
+  height: 14px;
+  width: 50%;
+  background: var(--lw-ink-3);
+}
+.lw-app .wf-line.head {
+  height: 10px;
+  width: 30%;
+  background: var(--lw-ink-2);
+}
+
+.lw-app .wf-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.lw-app .wf-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.lw-app .wf-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  font-size: 11px;
+  font-family: var(--lw-font-mono);
+  background: var(--lw-bg-alt);
+  border: 1px solid var(--lw-line);
+  border-radius: 999px;
+  color: var(--lw-ink-2);
+}
+.lw-app .wf-pill.accent {
+  background: var(--lw-accent-soft);
+  border-color: var(--lw-accent);
+  color: var(--lw-accent-ink);
+}
+.lw-app .wf-pill.ok {
+  background: oklch(0.95 0.04 155);
+  border-color: oklch(0.78 0.08 155);
+  color: oklch(0.32 0.08 155);
+}
+.lw-app .wf-pill.warn {
+  background: oklch(0.96 0.05 75);
+  border-color: oklch(0.82 0.1 75);
+  color: oklch(0.42 0.12 75);
+}
+
+.lw-app .wf-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid var(--lw-line);
+  border-radius: var(--lw-r-2);
+  background: var(--lw-surface);
+  color: var(--lw-ink-1);
+  cursor: default;
+}
+.lw-app .wf-btn.primary {
+  background: var(--lw-ink-1);
+  color: white;
+  border-color: var(--lw-ink-1);
+}
+.lw-app .wf-btn.accent {
+  background: var(--lw-accent);
+  color: white;
+  border-color: var(--lw-accent);
+}
+
+.lw-app .placeholder {
+  background: repeating-linear-gradient(
+    -45deg,
+    var(--lw-ph-fill) 0,
+    var(--lw-ph-fill) 10px,
+    transparent 10px,
+    transparent 12px
+  );
+  border: 1px dashed var(--lw-ph-stroke);
+  border-radius: var(--lw-r-2);
+  display: grid;
+  place-items: center;
+  font-family: var(--lw-font-mono);
+  font-size: 11px;
+  color: var(--lw-ink-4);
+  text-align: center;
+  padding: 12px;
+}
+
+/* Map placeholder = subtle terrain texture */
+.lw-app .map-ph {
+  background:
+    radial-gradient(ellipse at 30% 40%, oklch(0.92 0.03 155) 0%, transparent 35%),
+    radial-gradient(ellipse at 70% 60%, oklch(0.88 0.04 200) 0%, transparent 40%),
+    repeating-linear-gradient(45deg, transparent 0 14px, rgba(0, 0, 0, 0.025) 14px 15px),
+    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(0, 0, 0, 0.025) 14px 15px),
+    var(--lw-bg-sunk);
+  position: relative;
+  overflow: hidden;
+}
+.lw-app .map-ph::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(
+      circle at 25% 35%,
+      transparent 0 2px,
+      rgba(0, 0, 0, 0.12) 2px 3px,
+      transparent 3px
+    ),
+    radial-gradient(
+      circle at 60% 50%,
+      transparent 0 2px,
+      rgba(0, 0, 0, 0.12) 2px 3px,
+      transparent 3px
+    ),
+    radial-gradient(
+      circle at 78% 30%,
+      transparent 0 2px,
+      rgba(0, 0, 0, 0.12) 2px 3px,
+      transparent 3px
+    ),
+    radial-gradient(
+      circle at 40% 70%,
+      transparent 0 2px,
+      rgba(0, 0, 0, 0.12) 2px 3px,
+      transparent 3px
+    ),
+    radial-gradient(
+      circle at 85% 80%,
+      transparent 0 2px,
+      rgba(0, 0, 0, 0.12) 2px 3px,
+      transparent 3px
+    );
+}
+
+.lw-app .anno {
+  font-family: var(--lw-font-hand);
+  font-size: 16px;
+  color: var(--lw-accent-ink);
+  line-height: 1.1;
+}
+.lw-app .anno-arrow {
+  stroke: var(--lw-accent-ink);
+  stroke-width: 1.4;
+  fill: none;
+}
+
+/* Module color dots */
+.lw-app .mod-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  display: inline-block;
+}
+.lw-app .mod-datasets {
+  background: oklch(0.62 0.12 200);
+}
+.lw-app .mod-legends {
+  background: oklch(0.62 0.13 75);
+}
+.lw-app .mod-sampling {
+  background: oklch(0.55 0.14 285);
+}
+.lw-app .mod-validation {
+  background: oklch(0.58 0.14 155);
+}
+.lw-app .mod-reports {
+  background: oklch(0.58 0.14 25);
+}
+.lw-app .mod-notif {
+  background: oklch(0.55 0.04 250);
+}
diff --git a/packages/ui/src/lacowiki/wf/account.tsx b/packages/ui/src/lacowiki/wf/account.tsx
new file mode 100644
index 00000000..2dd74d22
--- /dev/null
+++ b/packages/ui/src/lacowiki/wf/account.tsx
@@ -0,0 +1,87 @@
+import { Chrome } from '../chrome';
+import { Btn, Frame, Row, Stack } from '../primitives';
+
+const SECTIONS = ['Profile', 'Workspaces', 'API tokens', 'Notifications', 'Billing', 'Danger zone'];
+
+const FIELDS: [string, string][] = [
+  ['Display name', 'Myroslava Lesiv'],
+  ['Email', 'm.lesiv@iiasa.ac.at'],
+  ['ORCID', '0000-0001-9856-1804'],
+  ['Affiliation', 'IIASA · Novel Data Ecosystems'],
+];
+
+export const WfAccount = () => (
+  <Frame name="15 · Account & settings" dim="1280×800">
+    <div style={{ height: 540 }}>
+      <Chrome active="Dashboard" title="Settings" crumbs={['Account']}>
+        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 24, height: '100%' }}>
+          <Stack gap={2}>
+            {SECTIONS.map((s, i) => (
+              <div
+                key={s}
+                style={{
+                  padding: '8px 12px',
+                  borderRadius: 4,
+                  background: i === 0 ? 'var(--lw-bg-alt)' : 'transparent',
+                  fontSize: 13,
+                  fontWeight: i === 0 ? 600 : 500,
+                  color: i === 0 ? 'var(--lw-ink-1)' : 'var(--lw-ink-3)',
+                }}
+              >
+                {s}
+              </div>
+            ))}
+          </Stack>
+          <Stack gap={20}>
+            <div>
+              <b style={{ fontSize: 18 }}>Profile</b>
+              <div style={{ fontSize: 12, color: 'var(--lw-ink-3)', marginTop: 2 }}>
+                Visible to your collaborators across LacoWiki.
+              </div>
+            </div>
+            <Row gap={16}>
+              <div
+                style={{
+                  width: 64,
+                  height: 64,
+                  borderRadius: '50%',
+                  background: 'var(--lw-bg-sunk)',
+                  border: '1px solid var(--lw-line)',
+                }}
+              />
+              <Stack gap={6}>
+                <Btn>Upload photo</Btn>
+                <span style={{ fontSize: 11, color: 'var(--lw-ink-4)' }}>PNG/JPG · 1MB max</span>
+              </Stack>
+            </Row>
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+              {FIELDS.map(([l, v]) => (
+                <Stack key={l} gap={4}>
+                  <span style={{ fontSize: 12, fontWeight: 500 }}>{l}</span>
+                  <div
+                    style={{
+                      height: 32,
+                      border: '1px solid var(--lw-line)',
+                      borderRadius: 4,
+                      padding: '0 10px',
+                      fontSize: 13,
+                      display: 'flex',
+                      alignItems: 'center',
+                      background: 'var(--lw-surface)',
+                    }}
+                  >
+                    {v}
+                  </div>
+                </Stack>
+              ))}
+            </div>
+            <Row gap={8}>
+              <Btn>Cancel</Btn>
+              <Btn kind="primary">Save changes</Btn>
+            </Row>
+          </Stack>
+        </div>
+      </Chrome>
+    </div>
+  </Frame>
+);
diff --git a/packages/ui/src/lacowiki/wf/dashboard.tsx b/packages/ui/src/lacowiki/wf/dashboard.tsx
new file mode 100644
index 00000000..877f7834
--- /dev/null
+++ b/packages/ui/src/lacowiki/wf/dashboard.tsx
@@ -0,0 +1,153 @@
+import { Chrome } from '../chrome';
+import { Btn, Frame, Pill, Row, Stack } from '../primitives';
+
+const STATS: [string, string][] = [
+  ['Active projects', '4'],
+  ['Datasets', '12'],
+  ['Pending validation', '218'],
+  ['Reports this month', '3'],
+];
+
+const PROJECTS = [
+  'Africa LC 2020 — accuracy assessment',
+  'Tropical forest change 2024',
+  'EU urban extents validation',
+  'Sahel crop mask v2',
+];
+const PROJECT_MODS = ['validation', 'sampling', 'datasets', 'reports'];
+const PROJECT_TONES: ('warn' | 'ok' | 'default')[] = ['warn', 'ok', 'default', 'default'];
+const PROJECT_LABELS = ['218 to validate', 'sampling done', 'ready', 'draft'];
+const PROJECT_AGES = ['2h', '1d', '3d', '1w'];
+
+const ACTIVITY = [
+  'm.lesiv shared Africa LC 2020 with you',
+  'Sampling generated 500 points',
+  'ConvertDatasetJob completed',
+  'New comment on EU urban v2',
+];
+const ACTIVITY_AGES = ['12m', '1h', '3h', 'yesterday'];
+
+export const WfDashboard = () => (
+  <Frame name="03 · Dashboard" dim="1280×800">
+    <div style={{ height: 560 }}>
+      <Chrome
+        active="Dashboard"
+        title="Dashboard"
+        crumbs={['Workspace']}
+        actions={
+          <>
+            <Btn>Invite</Btn>
+            <Btn kind="primary">+ New project</Btn>
+          </>
+        }
+      >
+        <Stack gap={16}>
+          <Row gap={12}>
+            {STATS.map(([l, v]) => (
+              <div
+                key={l}
+                style={{
+                  flex: 1,
+                  border: '1px solid var(--lw-line)',
+                  borderRadius: 6,
+                  padding: 12,
+                  background: 'var(--lw-surface)',
+                }}
+              >
+                <div
+                  style={{
+                    fontFamily: 'var(--lw-font-mono)',
+                    fontSize: 10,
+                    color: 'var(--lw-ink-4)',
+                    letterSpacing: '0.06em',
+                    textTransform: 'uppercase',
+                  }}
+                >
+                  {l}
+                </div>
+                <div style={{ fontSize: 24, fontWeight: 600, marginTop: 4 }}>{v}</div>
+              </div>
+            ))}
+          </Row>
+          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 16 }}>
+            <div
+              style={{
+                border: '1px solid var(--lw-line)',
+                borderRadius: 6,
+                background: 'var(--lw-surface)',
+              }}
+            >
+              <Row
+                justify="space-between"
+                style={{ padding: '10px 14px', borderBottom: '1px solid var(--lw-line-soft)' }}
+              >
+                <b style={{ fontSize: 13 }}>Recent projects</b>
+                <span style={{ fontSize: 11, color: 'var(--lw-ink-3)' }}>View all →</span>
+              </Row>
+              {PROJECTS.map((n, i) => (
+                <Row
+                  key={n}
+                  gap={12}
+                  style={{
+                    padding: '10px 14px',
+                    borderBottom: i < 3 ? '1px solid var(--lw-line-soft)' : 0,
+                  }}
+                >
+                  <span className={`mod-dot mod-${PROJECT_MODS[i]}`} />
+                  <span style={{ fontSize: 13, fontWeight: 500, flex: 1 }}>{n}</span>
+                  <Pill tone={PROJECT_TONES[i]}>{PROJECT_LABELS[i]}</Pill>
+                  <span
+                    style={{
+                      fontFamily: 'var(--lw-font-mono)',
+                      fontSize: 10,
+                      color: 'var(--lw-ink-4)',
+                    }}
+                  >
+                    {PROJECT_AGES[i]} ago
+                  </span>
+                </Row>
+              ))}
+            </div>
+            <div
+              style={{
+                border: '1px solid var(--lw-line)',
+                borderRadius: 6,
+                background: 'var(--lw-surface)',
+                padding: 14,
+              }}
+            >
+              <b style={{ fontSize: 13 }}>Activity</b>
+              <Stack gap={10} style={{ marginTop: 12 }}>
+                {ACTIVITY.map((t, i) => (
+                  <Row key={t} gap={10}>
+                    <div
+                      style={{
+                        width: 6,
+                        height: 6,
+                        borderRadius: '50%',
+                        background: 'var(--lw-accent)',
+                        marginTop: 6,
+                      }}
+                    />
+                    <div>
+                      <div style={{ fontSize: 12 }}>{t}</div>
+                      <div
+                        style={{
+                          fontFamily: 'var(--lw-font-mono)',
+                          fontSize: 10,
+                          color: 'var(--lw-ink-4)',
+                        }}
+                      >
+                        {ACTIVITY_AGES[i]}
+                      </div>
+                    </div>
+                  </Row>
+                ))}
+              </Stack>
+            </div>
+          </div>
+        </Stack>
+      </Chrome>
+    </div>
+  </Frame>
+);
diff --git a/packages/ui/src/lacowiki/wf/dataset-detail.tsx b/packages/ui/src/lacowiki/wf/dataset-detail.tsx
new file mode 100644
index 00000000..dc052947
--- /dev/null
+++ b/packages/ui/src/lacowiki/wf/dataset-detail.tsx
@@ -0,0 +1,147 @@
+import { Chrome } from '../chrome';
+import { Btn, Frame, MapPh, Pill, Row, Stack } from '../primitives';
+
+const META: [string, string][] = [
+  ['CRS', 'EPSG:4326'],
+  ['Resolution', '10 m'],
+  ['Extent', 'Africa'],
+  ['Format', 'COG'],
+];
+
+const SHARES: [string, string][] = [
+  ['m.lesiv@iiasa', 'owner'],
+  ['d.fritz@iiasa', 'editor'],
+  ['public link', 'viewer'],
+];
+
+const DETAIL_TABS = ['Overview', 'Sampling (3)', 'Validations (2)', 'Reports (1)', 'Activity'];
+
+const cardCss = {
+  border: '1px solid var(--lw-line)',
+  borderRadius: 6,
+  background: 'var(--lw-surface)',
+  padding: 12,
+} as const;
+
+const TabBar = () => (
+  <Row gap={8}>
+    {DETAIL_TABS.map((t, i) => (
+      <span
+        key={t}
+        style={{
+          fontSize: 12,
+          fontWeight: i === 0 ? 600 : 500,
+          color: i === 0 ? 'var(--lw-ink-1)' : 'var(--lw-ink-3)',
+          borderBottom: i === 0 ? '2px solid var(--lw-ink-1)' : '2px solid transparent',
+          padding: '0 0 6px',
+        }}
+      >
+        {t}
+      </span>
+    ))}
+  </Row>
+);
+
+const MetaGrid = () => (
+  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12 }}>
+    {META.map(([l, v]) => (
+      <div
+        key={l}
+        style={{
+          padding: 10,
+          border: '1px solid var(--lw-line)',
+          borderRadius: 6,
+          background: 'var(--lw-surface)',
+        }}
+      >
+        <div
+          style={{
+            fontFamily: 'var(--lw-font-mono)',
+            fontSize: 10,
+            color: 'var(--lw-ink-4)',
+            textTransform: 'uppercase',
+            letterSpacing: '0.06em',
+          }}
+        >
+          {l}
+        </div>
+        <div style={{ fontSize: 13, fontWeight: 600, marginTop: 2 }}>{v}</div>
+      </div>
+    ))}
+  </div>
+);
+
+const SharingCard = () => (
+  <div style={cardCss}>
+    <b style={{ fontSize: 13 }}>Sharing</b>
+    <Stack gap={8} style={{ marginTop: 10 }}>
+      {SHARES.map(([who, role]) => (
+        <Row key={who} gap={8}>
+          <div
+            style={{
+              width: 22,
+              height: 22,
+              borderRadius: '50%',
+              background: 'var(--lw-bg-sunk)',
+              border: '1px solid var(--lw-line)',
+            }}
+          />
+          <span style={{ fontSize: 12, flex: 1 }}>{who}</span>
+          <Pill>{role}</Pill>
+        </Row>
+      ))}
+      <Btn>+ Invite people</Btn>
+    </Stack>
+  </div>
+);
+
+const ConversionLog = () => (
+  <div style={cardCss}>
+    <b style={{ fontSize: 13 }}>Conversion log</b>
+    <Stack
+      gap={6}
+      style={{
+        marginTop: 8,
+        fontFamily: 'var(--lw-font-mono)',
+        fontSize: 10,
+        color: 'var(--lw-ink-3)',
+      }}
+    >
+      <div>✓ uploaded · 4.2 GB</div>
+      <div>✓ tippecanoe → PMTiles</div>
+      <div>✓ rio-cogeo → COG</div>
+      <div style={{ color: 'var(--lw-accent-ink)' }}>✓ ready · 2h ago</div>
+    </Stack>
+  </div>
+);
+
+export const WfDatasetDetail = () => (
+  <Frame name="06 · Dataset — detail + share" dim="1280×800">
+    <div style={{ height: 560 }}>
+      <Chrome
+        active="Datasets"
+        title="Africa LC 2020 v3"
+        crumbs={['Datasets']}
+        actions={
+          <>
+            <Btn>Share</Btn>
+            <Btn>Download</Btn>
+            <Btn kind="accent">Open on map</Btn>
+          </>
+        }
+      >
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 16, height: '100%' }}>
+          <Stack gap={12}>
+            <TabBar />
+            <MapPh h={280} style={{ borderRadius: 6, border: '1px solid var(--lw-line)' }} />
+            <MetaGrid />
+          </Stack>
+          <Stack gap={12}>
+            <SharingCard />
+            <ConversionLog />
+          </Stack>
+        </div>
+      </Chrome>
+    </div>
+  </Frame>
+);
diff --git a/packages/ui/src/lacowiki/wf/datasets.tsx b/packages/ui/src/lacowiki/wf/datasets.tsx
new file mode 100644
index 00000000..03078465
--- /dev/null
+++ b/packages/ui/src/lacowiki/wf/datasets.tsx
@@ -0,0 +1,191 @@
+import { Chrome } from '../chrome';
+import { Btn, Frame, Pill, Placeholder, Row, Stack } from '../primitives';
+
+export { WfDatasetDetail } from './dataset-detail';
+
+const COLS_GRID = '2fr 90px 100px 90px 90px 80px 60px';
+
+type Status = 'ready' | 'processing' | 'failed';
+
+const ROWS: [string, string, Status, string, string, string][] = [
+  ['Africa LC 2020 v3', 'COG', 'ready', '4.2 GB', '3', '2h'],
+  ['Tropical Forest 2024', 'PMTiles', 'processing', '1.8 GB', '—', '12h'],
+  ['Urban Extents EU', 'COG', 'ready', '850 MB', '8', '2d'],
+  ['Sahel Cropmask v2', 'COG', 'failed', '—', '—', '3d'],
+  ['WorldPop 2020 mask', 'PMTiles', 'ready', '2.1 GB', '12', '1w'],
+];
+
+export const WfDatasetsList = () => (
+  <Frame name="04 · Datasets — list" dim="1280×800">
+    <div style={{ height: 540 }}>
+      <Chrome
+        active="Datasets"
+        title="Datasets"
+        crumbs={['Workspace']}
+        actions={
+          <>
+            <Btn>Filter</Btn>
+            <Btn kind="primary">+ Upload</Btn>
+          </>
+        }
+      >
+        <Stack gap={12}>
+          <Row gap={8}>
+            <div
+              style={{
+                flex: 1,
+                height: 32,
+                border: '1px solid var(--lw-line)',
+                borderRadius: 4,
+                padding: '0 10px',
+                fontSize: 12,
+                background: 'var(--lw-surface)',
+                display: 'flex',
+                alignItems: 'center',
+                color: 'var(--lw-ink-4)',
+              }}
+            >
+              Search 12 datasets…
+            </div>
+            <Btn>Type ▾</Btn>
+            <Btn>Owner ▾</Btn>
+            <Btn>Status ▾</Btn>
+          </Row>
+          <div
+            style={{
+              border: '1px solid var(--lw-line)',
+              borderRadius: 6,
+              background: 'var(--lw-surface)',
+              overflow: 'hidden',
+            }}
+          >
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: COLS_GRID,
+                padding: '8px 14px',
+                borderBottom: '1px solid var(--lw-line)',
+                background: 'var(--lw-bg-alt)',
+                fontFamily: 'var(--lw-font-mono)',
+                fontSize: 10,
+                letterSpacing: '0.06em',
+                color: 'var(--lw-ink-4)',
+                textTransform: 'uppercase',
+              }}
+            >
+              <span>Name</span>
+              <span>Type</span>
+              <span>Status</span>
+              <span>Size</span>
+              <span>Shared</span>
+              <span>Updated</span>
+              <span></span>
+            </div>
+            {ROWS.map((r, i) => (
+              <div
+                key={r[0]}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: COLS_GRID,
+                  padding: '10px 14px',
+                  fontSize: 12,
+                  alignItems: 'center',
+                  borderBottom: i < ROWS.length - 1 ? '1px solid var(--lw-line-soft)' : 0,
+                }}
+              >
+                <Row gap={10}>
+                  <span className="mod-dot mod-datasets" />
+                  <b>{r[0]}</b>
+                </Row>
+                <span
+                  style={{
+                    fontFamily: 'var(--lw-font-mono)',
+                    fontSize: 10,
+                    color: 'var(--lw-ink-4)',
+                  }}
+                >
+                  {r[1]}
+                </span>
+                <Pill tone={r[2] === 'ready' ? 'ok' : 'warn'}>{r[2]}</Pill>
+                <span
+                  style={{
+                    fontFamily: 'var(--lw-font-mono)',
+                    fontSize: 11,
+                    color: 'var(--lw-ink-3)',
+                  }}
+                >
+                  {r[3]}
+                </span>
+                <span
+                  style={{
+                    fontFamily: 'var(--lw-font-mono)',
+                    fontSize: 11,
+                    color: 'var(--lw-ink-3)',
+                  }}
+                >
+                  {r[4]}
+                </span>
+                <span
+                  style={{
+                    fontFamily: 'var(--lw-font-mono)',
+                    fontSize: 11,
+                    color: 'var(--lw-ink-4)',
+                  }}
+                >
+                  {r[5]}
+                </span>
+                <span style={{ color: 'var(--lw-ink-4)', textAlign: 'right' }}>⋯</span>
+              </div>
+            ))}
+          </div>
+        </Stack>
+      </Chrome>
+    </div>
+  </Frame>
+);
+
+export const WfDatasetUpload = () => (
+  <Frame name="05 · Datasets — upload" dim="800×600">
+    <div style={{ height: 480, padding: 32, display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <Row justify="space-between">
+        <b style={{ fontSize: 18 }}>Upload dataset</b>
+        <span style={{ color: 'var(--lw-ink-4)' }}>✕</span>
+      </Row>
+      <Row gap={4} style={{ fontFamily: 'var(--lw-font-mono)', fontSize: 11 }}>
+        <span style={{ color: 'var(--lw-accent-ink)' }}>1 · file</span>
+        <span style={{ color: 'var(--lw-ink-4)' }}>→</span>
+        <span style={{ color: 'var(--lw-ink-4)' }}>2 · metadata</span>
+        <span style={{ color: 'var(--lw-ink-4)' }}>→</span>
+        <span style={{ color: 'var(--lw-ink-4)' }}>3 · convert</span>
+      </Row>
+      <Placeholder label="Drop GeoTIFF / Shapefile / GeoPackage here · max 8 GB" h={180} />
+      <Stack gap={6}>
+        <Row gap={8}>
+          <span className="wf-pill ok">africa_lc_2020.tif</span>
+          <span
+            style={{ fontFamily: 'var(--lw-font-mono)', fontSize: 11, color: 'var(--lw-ink-4)' }}
+          >
+            4.2 GB · uploading 64%
+          </span>
+        </Row>
+        <div
+          style={{
+            height: 6,
+            background: 'var(--lw-bg-sunk)',
+            borderRadius: 3,
+            overflow: 'hidden',
+          }}
+        >
+          <div style={{ width: '64%', height: '100%', background: 'var(--lw-accent)' }} />
+        </div>
+        <span style={{ fontFamily: 'var(--lw-font-mono)', fontSize: 10, color: 'var(--lw-ink-4)' }}>
+          auto-detected EPSG:4326 · COG · 14328×11200
+        </span>
+      </Stack>
+      <Row gap={8} justify="flex-end" style={{ marginTop: 'auto' }}>
+        <Btn>Cancel</Btn>
+        <Btn kind="primary">Continue →</Btn>
+      </Row>
+    </div>
+  </Frame>
+);
diff --git a/packages/ui/src/lacowiki/wf/legends.tsx b/packages/ui/src/lacowiki/wf/legends.tsx
new file mode 100644
index 00000000..c264e78f
--- /dev/null
+++ b/packages/ui/src/lacowiki/wf/legends.tsx
@@ -0,0 +1,245 @@
+import { Chrome } from '../chrome';
+import { Btn, Frame, Pill, Placeholder, Row, Stack } from '../primitives';
+
+const LEGEND_CARDS: [string, string, 'template' | 'custom' | 'draft', string][] = [
+  ['IPCC LULUCF', '6 classes', 'template', '#3a7d44|#d6a456|#bcc972|#5b8aa8|#9a3b3b|#7c7c7c'],
+  ['CORINE L1', '5 classes', 'template', '#9a3b3b|#d6a456|#3a7d44|#5b8aa8|#bcc972'],
+  [
+    'FAO LCCS',
+    '8 classes',
+    'template',
+    '#3a7d44|#7ba368|#bcc972|#d6a456|#a8895a|#5b8aa8|#9a3b3b|#7c7c7c',
+  ],
+  ['Sahel cropmask', '3 classes', 'custom', '#d6a456|#bcc972|#7c7c7c'],
+  ['EU urban extents', '4 classes', 'custom', '#9a3b3b|#c47171|#bcc972|#7c7c7c'],
+  [
+    'Forest types v2',
+    '7 classes',
+    'draft',
+    '#2d6034|#3a7d44|#5e9c6a|#7ba368|#a3c08e|#7c7c7c|#bcc972',
+  ],
+];
+
+export const WfLegendsList = () => (
+  <Frame name="07 · Legends — list" dim="1280×720">
+    <div style={{ height: 500 }}>
+      <Chrome
+        active="Legends"
+        title="Legends"
+        crumbs={['Workspace']}
+        actions={
+          <>
+            <Btn>Import</Btn>
+            <Btn kind="primary">+ New legend</Btn>
+          </>
+        }
+      >
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
+          {LEGEND_CARDS.map(([name, count, kind, swatches]) => (
+            <div
+              key={name}
+              style={{
+                border: '1px solid var(--lw-line)',
+                borderRadius: 6,
+                background: 'var(--lw-surface)',
+                padding: 14,
+              }}
+            >
+              <Row justify="space-between">
+                <Row gap={6}>
+                  <span className="mod-dot mod-legends" />
+                  <b style={{ fontSize: 13 }}>{name}</b>
+                </Row>
+                <Pill tone={kind === 'template' ? 'accent' : 'default'}>{kind}</Pill>
+              </Row>
+              <div
+                style={{
+                  fontFamily: 'var(--lw-font-mono)',
+                  fontSize: 10,
+                  color: 'var(--lw-ink-4)',
+                  margin: '6px 0 10px',
+                }}
+              >
+                {count}
+              </div>
+              <Row gap={2}>
+                {swatches.split('|').map((c, j) => (
+                  <div key={j} style={{ flex: 1, height: 16, background: c, borderRadius: 2 }} />
+                ))}
+              </Row>
+            </div>
+          ))}
+        </div>
+      </Chrome>
+    </div>
+  </Frame>
+);
+
+const CLASSES: [string, string, string, string][] = [
+  ['1', 'Forest land', '#3a7d44', 'FRST'],
+  ['2', 'Cropland', '#d6a456', 'CROP'],
+  ['3', 'Grassland', '#bcc972', 'GRSS'],
+  ['4', 'Wetlands', '#5b8aa8', 'WTLD'],
+  ['5', 'Settlements', '#9a3b3b', 'STTL'],
+  ['6', 'Other', '#7c7c7c', 'OTHR'],
+];
+
+const COLOR_OPTIONS = ['#bcc972', '#9aaa55', '#d4dc9a', '#7d8b46', '#e8eed0', '#6b7a35'];
+
+export const WfLegendBuilder = () => (
+  <Frame name="08 · Legend builder" dim="1280×720">
+    <div style={{ height: 500 }}>
+      <Chrome
+        active="Legends"
+        title="IPCC LULUCF — edit"
+        crumbs={['Legends']}
+        actions={
+          <>
+            <Btn>Discard</Btn>
+            <Btn kind="primary">Save legend</Btn>
+          </>
+        }
+      >
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 16, height: '100%' }}>
+          <div
+            style={{
+              border: '1px solid var(--lw-line)',
+              borderRadius: 6,
+              background: 'var(--lw-surface)',
+              overflow: 'hidden',
+            }}
+          >
+            <Row
+              justify="space-between"
+              style={{ padding: '10px 14px', borderBottom: '1px solid var(--lw-line-soft)' }}
+            >
+              <b style={{ fontSize: 13 }}>Classes (6)</b>
+              <Btn>+ Add class</Btn>
+            </Row>
+            {CLASSES.map((r, i) => (
+              <Row
+                key={r[0]}
+                gap={12}
+                style={{
+                  padding: '10px 14px',
+                  borderBottom: i < 5 ? '1px solid var(--lw-line-soft)' : 0,
+                  fontSize: 12,
+                  background: i === 2 ? 'var(--lw-accent-soft)' : 'transparent',
+                }}
+              >
+                <span
+                  style={{
+                    width: 16,
+                    color: 'var(--lw-ink-4)',
+                    fontFamily: 'var(--lw-font-mono)',
+                    fontSize: 10,
+                  }}
+                >
+                  {r[0]}
+                </span>
+                <span
+                  style={{
+                    width: 18,
+                    height: 18,
+                    background: r[2],
+                    borderRadius: 3,
+                    border: '1px solid rgba(0,0,0,0.1)',
+                  }}
+                />
+                <span style={{ flex: 1, fontWeight: 500 }}>{r[1]}</span>
+                <span
+                  style={{
+                    fontFamily: 'var(--lw-font-mono)',
+                    fontSize: 10,
+                    color: 'var(--lw-ink-4)',
+                  }}
+                >
+                  {r[3]}
+                </span>
+                <span style={{ color: 'var(--lw-ink-4)' }}>⋮</span>
+              </Row>
+            ))}
+          </div>
+          <Stack gap={12}>
+            <div
+              style={{
+                border: '1px solid var(--lw-line)',
+                borderRadius: 6,
+                background: 'var(--lw-surface)',
+                padding: 12,
+              }}
+            >
+              <b style={{ fontSize: 13 }}>Class details</b>
+              <Stack gap={8} style={{ marginTop: 10 }}>
+                <Stack gap={4}>
+                  <span style={{ fontSize: 11, fontWeight: 500 }}>Label</span>
+                  <div
+                    style={{
+                      height: 28,
+                      border: '1px solid var(--lw-line)',
+                      borderRadius: 4,
+                      padding: '0 8px',
+                      fontSize: 12,
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}
+                  >
+                    Grassland
+                  </div>
+                </Stack>
+                <Stack gap={4}>
+                  <span style={{ fontSize: 11, fontWeight: 500 }}>Code</span>
+                  <div
+                    style={{
+                      height: 28,
+                      border: '1px solid var(--lw-line)',
+                      borderRadius: 4,
+                      padding: '0 8px',
+                      fontFamily: 'var(--lw-font-mono)',
+                      fontSize: 11,
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}
+                  >
+                    GRSS
+                  </div>
+                </Stack>
+                <Stack gap={4}>
+                  <span style={{ fontSize: 11, fontWeight: 500 }}>Color</span>
+                  <Row gap={4}>
+                    {COLOR_OPTIONS.map((c) => (
+                      <div
+                        key={c}
+                        style={{
+                          width: 24,
+                          height: 24,
+                          background: c,
+                          borderRadius: 3,
+                          border:
+                            c === '#bcc972'
+                              ? '2px solid var(--lw-ink-1)'
+                              : '1px solid var(--lw-line)',
+                        }}
+                      />
+                    ))}
+                  </Row>
+                </Stack>
+              </Stack>
+            </div>
+            <div
+              style={{
+                border: '1px solid var(--lw-line)',
+                borderRadius: 6,
+                background: 'var(--lw-surface)',
+                padding: 12,
+              }}
+            >
+              <b style={{ fontSize: 13 }}>Description</b>
+              <Placeholder label="Definition · field guide notes" h={70} style={{ marginTop: 8 }} />
+            </div>
+          </Stack>
+        </div>
+      </Chrome>
+    </div>
+  </Frame>
+);
diff --git a/packages/ui/src/lacowiki/wf/marketing.tsx b/packages/ui/src/lacowiki/wf/marketing.tsx
new file mode 100644
index 00000000..729e7768
--- /dev/null
+++ b/packages/ui/src/lacowiki/wf/marketing.tsx
@@ -0,0 +1,232 @@
+import { Btn, Frame, MapPh, Pill, Row, Stack } from '../primitives';
+
+export const WfLanding = () => (
+  <Frame name="01 · Landing (public)" dim="1280×800">
+    <div
+      style={{ background: 'var(--lw-bg)', height: 520, display: 'flex', flexDirection: 'column' }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          padding: '14px 32px',
+          borderBottom: '1px solid var(--lw-line-soft)',
+        }}
+      >
+        <Row gap={10}>
+          <div style={{ width: 18, height: 18, background: 'var(--lw-ink-1)', borderRadius: 4 }} />
+          <b style={{ fontSize: 13 }}>LacoWiki</b>
+        </Row>
+        <Row gap={20} style={{ marginLeft: 32, fontSize: 12, color: 'var(--lw-ink-3)' }}>
+          <span>Product</span>
+          <span>Datasets</span>
+          <span>Methodology</span>
+          <span>Docs</span>
+        </Row>
+        <Row gap={8} style={{ marginLeft: 'auto' }}>
+          <Btn>Sign in</Btn>
+          <Btn kind="primary">Request access</Btn>
+        </Row>
+      </div>
+      <div
+        style={{
+          flex: 1,
+          padding: '48px 32px',
+          display: 'grid',
+          gridTemplateColumns: '1.1fr 1fr',
+          gap: 40,
+          alignItems: 'center',
+        }}
+      >
+        <Stack gap={16}>
+          <Pill>Open platform · IIASA</Pill>
+          <div
+            style={{ fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.02em', fontWeight: 600 }}
+          >
+            Validate land cover
+            <br />
+            maps with confidence.
+          </div>
+          <div style={{ fontSize: 14, color: 'var(--lw-ink-3)', maxWidth: 440 }}>
+            Upload classifications, design sampling, validate against high-resolution imagery, and
+            publish accuracy reports — all in one workspace.
+          </div>
+          <Row gap={8}>
+            <Btn kind="primary">Get started</Btn>
+            <Btn>Watch demo · 2 min</Btn>
+          </Row>
+          <Row
+            gap={20}
+            style={{
+              marginTop: 8,
+              fontFamily: 'var(--lw-font-mono)',
+              fontSize: 11,
+              color: 'var(--lw-ink-4)',
+            }}
+          >
+            <span>14k+ datasets</span>
+            <span>·</span>
+            <span>2.4M validated points</span>
+            <span>·</span>
+            <span>open source</span>
+          </Row>
+        </Stack>
+        <div style={{ position: 'relative' }}>
+          <MapPh h={300} style={{ borderRadius: 8, border: '1px solid var(--lw-line)' }}>
+            {(
+              [
+                [30, 40],
+                [60, 55],
+                [75, 30],
+                [45, 70],
+                [20, 55],
+              ] as [number, number][]
+            ).map(([x, y], i) => (
+              <div
+                key={i}
+                style={{
+                  position: 'absolute',
+                  left: `${x}%`,
+                  top: `${y}%`,
+                  width: 10,
+                  height: 10,
+                  borderRadius: '50%',
+                  background: i === 2 ? 'var(--lw-accent)' : 'var(--lw-surface)',
+                  border: '1.5px solid var(--lw-ink-1)',
+                  transform: 'translate(-50%,-50%)',
+                }}
+              />
+            ))}
+          </MapPh>
+          <div
+            style={{
+              position: 'absolute',
+              bottom: -16,
+              right: -16,
+              background: 'var(--lw-surface)',
+              border: '1px solid var(--lw-line)',
+              borderRadius: 6,
+              padding: 12,
+              width: 200,
+              fontSize: 11,
+            }}
+          >
+            <div
+              style={{
+                fontFamily: 'var(--lw-font-mono)',
+                fontSize: 10,
+                color: 'var(--lw-ink-4)',
+                marginBottom: 6,
+              }}
+            >
+              OVERALL ACCURACY
+            </div>
+            <div style={{ fontSize: 24, fontWeight: 600 }}>87.3%</div>
+            <div style={{ color: 'var(--lw-ink-3)', marginTop: 2 }}>±2.1% at 95% CI</div>
+          </div>
+        </div>
+      </div>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(4,1fr)',
+          gap: 16,
+          padding: '0 32px 32px',
+        }}
+      >
+        {(
+          [
+            ['Datasets', 'Upload COG/PMTiles'],
+            ['Sampling', '7 strategies'],
+            ['Validation', 'Map-side classify'],
+            ['Reports', 'Confusion matrix'],
+          ] as [string, string][]
+        ).map(([t, s]) => (
+          <div key={t} style={{ padding: 12, borderTop: '1px solid var(--lw-line)' }}>
+            <div style={{ fontSize: 12, fontWeight: 600 }}>{t}</div>
+            <div style={{ fontSize: 11, color: 'var(--lw-ink-3)' }}>{s}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </Frame>
+);
+
+const inputCss = {
+  height: 36,
+  border: '1px solid var(--lw-line)',
+  borderRadius: 4,
+  padding: '0 10px',
+  fontSize: 13,
+  display: 'flex',
+  alignItems: 'center',
+  color: 'var(--lw-ink-3)',
+} as const;
+
+export const WfLogin = () => (
+  <Frame name="02 · Sign in" dim="1280×800">
+    <div style={{ height: 520, display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
+      <div
+        style={{
+          padding: 48,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          maxWidth: 360,
+          margin: '0 auto',
+        }}
+      >
+        <Row gap={10} style={{ marginBottom: 40 }}>
+          <div style={{ width: 22, height: 22, background: 'var(--lw-ink-1)', borderRadius: 4 }} />
+          <b>LacoWiki</b>
+        </Row>
+        <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.01em' }}>Welcome back</div>
+        <div style={{ fontSize: 13, color: 'var(--lw-ink-3)', marginBottom: 24 }}>
+          Sign in to continue your validation work.
+        </div>
+        <Stack gap={12}>
+          <Stack gap={4}>
+            <span style={{ fontSize: 12, fontWeight: 500 }}>Email</span>
+            <div style={inputCss}>you@institution.org</div>
+          </Stack>
+          <Stack gap={4}>
+            <Row justify="space-between">
+              <span style={{ fontSize: 12, fontWeight: 500 }}>Password</span>
+              <span style={{ fontSize: 11, color: 'var(--lw-accent-ink)' }}>Forgot?</span>
+            </Row>
+            <div style={inputCss}>••••••••</div>
+          </Stack>
+          <Btn kind="primary">Sign in</Btn>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 12,
+              color: 'var(--lw-ink-4)',
+              fontSize: 11,
+            }}
+          >
+            <span style={{ flex: 1, height: 1, background: 'var(--lw-line)' }} />
+            OR
+            <span style={{ flex: 1, height: 1, background: 'var(--lw-line)' }} />
+          </div>
+          <Btn>Continue with ORCID</Btn>
+          <Btn>Continue with institutional SSO</Btn>
+        </Stack>
+      </div>
+      <div
+        style={{
+          background: 'var(--lw-bg-alt)',
+          borderLeft: '1px solid var(--lw-line-soft)',
+          display: 'grid',
+          placeItems: 'center',
+        }}
+      >
+        <MapPh
+          h={360}
+          style={{ width: '80%', borderRadius: 8, border: '1px solid var(--lw-line)' }}
+        />
+      </div>
+    </div>
+  </Frame>
+);
diff --git a/packages/ui/src/lacowiki/wf/report-matrix.tsx b/packages/ui/src/lacowiki/wf/report-matrix.tsx
new file mode 100644
index 00000000..c85148cb
--- /dev/null
+++ b/packages/ui/src/lacowiki/wf/report-matrix.tsx
@@ -0,0 +1,235 @@
+import { Fragment } from 'react';
+
+import { Chrome } from '../chrome';
+import { Btn, Frame, Row, Stack } from '../primitives';
+
+const CLASSES = ['Forest', 'Crop', 'Grass', 'Wet', 'Settl', 'Other'];
+const MATRIX: number[][] = [
+  [82, 3, 1, 0, 0, 2],
+  [4, 76, 5, 1, 0, 3],
+  [2, 6, 71, 2, 0, 4],
+  [1, 1, 2, 42, 0, 1],
+  [0, 1, 0, 0, 33, 2],
+  [3, 2, 4, 1, 1, 15],
+];
+const UA = [93, 82, 75, 89, 89, 58];
+const PA = [89, 84, 84, 91, 97, 57];
+const MAX = 82;
+
+const monoLabel: React.CSSProperties = {
+  fontFamily: 'var(--lw-font-mono)',
+  fontSize: 10,
+  color: 'var(--lw-ink-4)',
+  textAlign: 'right',
+  padding: '4px 8px',
+};
+
+const MatrixGrid = () => (
+  <div
+    style={{
+      border: '1px solid var(--lw-line)',
+      borderRadius: 6,
+      background: 'var(--lw-surface)',
+      padding: 16,
+      overflow: 'auto',
+    }}
+  >
+    <Row justify="space-between" style={{ marginBottom: 14 }}>
+      <b style={{ fontSize: 13 }}>Confusion matrix · classes</b>
+      <span style={{ fontFamily: 'var(--lw-font-mono)', fontSize: 10, color: 'var(--lw-ink-4)' }}>
+        rows = reference · cols = predicted
+      </span>
+    </Row>
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: `100px repeat(6, 1fr) 80px`,
+        gap: 2,
+        fontSize: 11,
+      }}
+    >
+      <span></span>
+      {CLASSES.map((c) => (
+        <span
+          key={c}
+          style={{
+            fontFamily: 'var(--lw-font-mono)',
+            fontSize: 10,
+            color: 'var(--lw-ink-4)',
+            textAlign: 'center',
+            padding: '4px 0',
+          }}
+        >
+          {c}
+        </span>
+      ))}
+      <span style={monoLabel}>UA</span>
+      {MATRIX.map((row, i) => (
+        <Fragment key={i}>
+          <span
+            style={{
+              fontFamily: 'var(--lw-font-mono)',
+              fontSize: 10,
+              color: 'var(--lw-ink-4)',
+              padding: '8px 4px',
+              textAlign: 'right',
+            }}
+          >
+            {CLASSES[i]}
+          </span>
+          {row.map((v, j) => {
+            const intensity = v / MAX;
+            return (
+              <div
+                key={j}
+                style={{
+                  background:
+                    i === j
+                      ? `oklch(0.62 0.12 200 / ${0.15 + intensity * 0.7})`
+                      : `oklch(0.62 0.04 200 / ${intensity * 0.5})`,
+                  padding: '10px 0',
+                  textAlign: 'center',
+                  fontFamily: 'var(--lw-font-mono)',
+                  fontWeight: i === j ? 600 : 400,
+                  fontSize: 11,
+                  borderRadius: 2,
+                  color: intensity > 0.6 ? 'white' : 'var(--lw-ink-1)',
+                }}
+              >
+                {v}
+              </div>
+            );
+          })}
+          <span
+            style={{
+              fontFamily: 'var(--lw-font-mono)',
+              fontSize: 11,
+              padding: 8,
+              textAlign: 'right',
+            }}
+          >
+            {UA[i]}%
+          </span>
+        </Fragment>
+      ))}
+      <span style={monoLabel}>PA</span>
+      {PA.map((v, i) => (
+        <span
+          key={i}
+          style={{
+            fontFamily: 'var(--lw-font-mono)',
+            fontSize: 11,
+            padding: '4px 0',
+            textAlign: 'center',
+            color: 'var(--lw-ink-3)',
+          }}
+        >
+          {v}%
+        </span>
+      ))}
+      <span></span>
+    </div>
+  </div>
+);
+
+const MatrixSidebar = () => (
+  <Stack gap={12}>
+    <div
+      style={{
+        border: '1px solid var(--lw-line)',
+        borderRadius: 6,
+        background: 'var(--lw-surface)',
+        padding: 14,
+      }}
+    >
+      <span
+        style={{
+          fontFamily: 'var(--lw-font-mono)',
+          fontSize: 10,
+          color: 'var(--lw-ink-4)',
+          textTransform: 'uppercase',
+        }}
+      >
+        Overall accuracy
+      </span>
+      <div style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 4 }}>
+        87.3%
+      </div>
+      <div style={{ fontFamily: 'var(--lw-font-mono)', fontSize: 11, color: 'var(--lw-ink-3)' }}>
+        ±2.1% · 95% CI
+      </div>
+    </div>
+    <div
+      style={{
+        border: '1px solid var(--lw-line)',
+        borderRadius: 6,
+        background: 'var(--lw-surface)',
+        padding: 14,
+      }}
+    >
+      <Row justify="space-between">
+        <span style={{ fontSize: 12 }}>Cohen's κ</span>
+        <b style={{ fontFamily: 'var(--lw-font-mono)' }}>0.81</b>
+      </Row>
+      <Row justify="space-between" style={{ marginTop: 6 }}>
+        <span style={{ fontSize: 12 }}>Quantity disagreement</span>
+        <b style={{ fontFamily: 'var(--lw-font-mono)' }}>4.1%</b>
+      </Row>
+      <Row justify="space-between" style={{ marginTop: 6 }}>
+        <span style={{ fontSize: 12 }}>Allocation disagreement</span>
+        <b style={{ fontFamily: 'var(--lw-font-mono)' }}>8.6%</b>
+      </Row>
+    </div>
+    <div
+      style={{
+        border: '1px solid var(--lw-line)',
+        borderRadius: 6,
+        background: 'var(--lw-surface)',
+        padding: 14,
+        fontFamily: 'var(--lw-font-mono)',
+        fontSize: 10,
+        color: 'var(--lw-ink-3)',
+      }}
+    >
+      <div
+        style={{
+          color: 'var(--lw-ink-1)',
+          fontFamily: 'var(--lw-font-ui)',
+          fontWeight: 600,
+          fontSize: 12,
+          marginBottom: 8,
+        }}
+      >
+        Methodology
+      </div>
+      <div>n = 500 stratified random</div>
+      <div>seed = 4831</div>
+      <div>est. = Olofsson 2014</div>
+      <div>computed = 2h ago</div>
+    </div>
+  </Stack>
+);
+
+export const WfReportMatrix = () => (
+  <Frame name="14 · Report — confusion matrix" dim="1280×800">
+    <div style={{ height: 560 }}>
+      <Chrome
+        active="Reports"
+        title="Africa LC 2020 — accuracy"
+        crumbs={['Reports']}
+        actions={
+          <>
+            <Btn>Export CSV</Btn>
+            <Btn>Export PDF</Btn>
+            <Btn kind="primary">Share</Btn>
+          </>
+        }
+      >
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 16, height: '100%' }}>
+          <MatrixGrid />
+          <MatrixSidebar />
+        </div>
+      </Chrome>
+    </div>
+  </Frame>
+);
diff --git a/packages/ui/src/lacowiki/wf/reports.tsx b/packages/ui/src/lacowiki/wf/reports.tsx
new file mode 100644
index 00000000..e1a2f186
--- /dev/null
+++ b/packages/ui/src/lacowiki/wf/reports.tsx
@@ -0,0 +1,82 @@
+import { Chrome } from '../chrome';
+import { Btn, Frame, Pill, Row, Stack } from '../primitives';
+
+export { WfReportMatrix } from './report-matrix';
+
+const REPORT_CARDS: [string, string, string, string][] = [
+  ['Africa LC 2020 — accuracy', '87.3%', '±2.1', '2h'],
+  ['Tropical forest 2024', '91.2%', '±1.4', '1d'],
+  ['EU urban v2', '78.5%', '±3.0', '3d'],
+  ['Sahel cropmask v1', '82.1%', '±2.8', '1w'],
+];
+
+const monoUpper: React.CSSProperties = {
+  fontFamily: 'var(--lw-font-mono)',
+  fontSize: 10,
+  color: 'var(--lw-ink-4)',
+  textTransform: 'uppercase',
+};
+
+export const WfReportsList = () => (
+  <Frame name="13 · Reports — list" dim="1280×720">
+    <div style={{ height: 500 }}>
+      <Chrome
+        active="Reports"
+        title="Reports"
+        crumbs={['Workspace']}
+        actions={<Btn kind="primary">+ New report</Btn>}
+      >
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 12 }}>
+          {REPORT_CARDS.map((r) => (
+            <div
+              key={r[0]}
+              style={{
+                border: '1px solid var(--lw-line)',
+                borderRadius: 6,
+                background: 'var(--lw-surface)',
+                padding: 16,
+              }}
+            >
+              <Row gap={8} style={{ marginBottom: 8 }}>
+                <span className="mod-dot mod-reports" />
+                <span style={monoUpper}>Accuracy report</span>
+                <Pill tone="ok">computed</Pill>
+              </Row>
+              <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 12 }}>{r[0]}</div>
+              <Row gap={20}>
+                <Stack gap={2}>
+                  <span style={monoUpper}>OA</span>
+                  <span style={{ fontSize: 22, fontWeight: 600 }}>{r[1]}</span>
+                  <span
+                    style={{
+                      fontFamily: 'var(--lw-font-mono)',
+                      fontSize: 10,
+                      color: 'var(--lw-ink-3)',
+                    }}
+                  >
+                    {r[2]}% CI
+                  </span>
+                </Stack>
+                <Stack gap={2}>
+                  <span style={monoUpper}>κ</span>
+                  <span style={{ fontSize: 22, fontWeight: 600 }}>0.81</span>
+                </Stack>
+                <Stack gap={2} style={{ marginLeft: 'auto' }}>
+                  <span
+                    style={{
+                      fontFamily: 'var(--lw-font-mono)',
+                      fontSize: 10,
+                      color: 'var(--lw-ink-4)',
+                    }}
+                  >
+                    {r[3]} ago
+                  </span>
+                </Stack>
+              </Row>
+            </div>
+          ))}
+        </div>
+      </Chrome>
+    </div>
+  </Frame>
+);
diff --git a/packages/ui/src/lacowiki/wf/sampling-generator.tsx b/packages/ui/src/lacowiki/wf/sampling-generator.tsx
new file mode 100644
index 00000000..d9e10ce2
--- /dev/null
+++ b/packages/ui/src/lacowiki/wf/sampling-generator.tsx
@@ -0,0 +1,245 @@
+import { Chrome } from '../chrome';
+import { Btn, Frame, MapPh, Row, Stack } from '../primitives';
+
+const STRATEGIES = [
+  'Simple random',
+  'Stratified random',
+  'Systematic grid',
+  'Cluster',
+  'Two-stage',
+  'Equal allocation',
+  'Proportional allocation',
+];
+
+const ALLOCATIONS: [string, string, number, number][] = [
+  ['Forest land', '#3a7d44', 180, 36],
+  ['Cropland', '#d6a456', 120, 24],
+  ['Grassland', '#bcc972', 90, 18],
+  ['Wetlands', '#5b8aa8', 50, 10],
+  ['Settlements', '#9a3b3b', 40, 8],
+  ['Other', '#7c7c7c', 20, 4],
+];
+
+const DOT_COLORS = ['#3a7d44', '#d6a456', '#bcc972', '#5b8aa8', '#9a3b3b', '#7c7c7c'];
+
+const FieldRow = ({
+  label,
+  value,
+  mono,
+  caret,
+}: {
+  label: string;
+  value: string;
+  mono?: boolean;
+  caret?: boolean;
+}) => (
+  <Stack gap={4}>
+    <span style={{ fontSize: 11, fontWeight: 500 }}>{label}</span>
+    <div
+      style={{
+        height: 30,
+        border: '1px solid var(--lw-line)',
+        borderRadius: 4,
+        padding: '0 10px',
+        fontFamily: mono ? 'var(--lw-font-mono)' : undefined,
+        fontSize: 12,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      {value}
+      {caret ? <span style={{ color: 'var(--lw-ink-4)' }}>▾</span> : null}
+    </div>
+  </Stack>
+);
+
+const StrategyList = () => (
+  <div
+    style={{
+      border: '1px solid var(--lw-line)',
+      borderRadius: 6,
+      background: 'var(--lw-surface)',
+      padding: 14,
+    }}
+  >
+    <b style={{ fontSize: 13 }}>1 · Strategy</b>
+    <Stack gap={6} style={{ marginTop: 10 }}>
+      {STRATEGIES.map((s, i) => (
+        <Row
+          key={s}
+          gap={8}
+          style={{
+            padding: '6px 8px',
+            borderRadius: 4,
+            background: i === 1 ? 'var(--lw-accent-soft)' : 'transparent',
+            fontSize: 12,
+            fontWeight: i === 1 ? 600 : 500,
+          }}
+        >
+          <span
+            style={{
+              width: 12,
+              height: 12,
+              borderRadius: '50%',
+              border: `1.5px solid ${i === 1 ? 'var(--lw-accent)' : 'var(--lw-ink-5)'}`,
+              background: i === 1 ? 'var(--lw-accent)' : 'transparent',
+            }}
+          />
+          {s}
+        </Row>
+      ))}
+    </Stack>
+  </div>
+);
+
+const ParametersBox = () => (
+  <div
+    style={{
+      border: '1px solid var(--lw-line)',
+      borderRadius: 6,
+      background: 'var(--lw-surface)',
+      padding: 14,
+    }}
+  >
+    <b style={{ fontSize: 13 }}>2 · Parameters</b>
+    <Stack gap={10} style={{ marginTop: 10 }}>
+      <FieldRow label="Total points (n)" value="500" mono />
+      <FieldRow label="Dataset" value="Africa LC 2020 v3" caret />
+      <FieldRow label="Legend" value="IPCC LULUCF (6)" caret />
+      <FieldRow label="Random seed" value="4831" mono />
+    </Stack>
+  </div>
+);
+
+const AllocationBox = () => (
+  <div
+    style={{
+      border: '1px solid var(--lw-line)',
+      borderRadius: 6,
+      background: 'var(--lw-surface)',
+      padding: 14,
+    }}
+  >
+    <Row justify="space-between">
+      <b style={{ fontSize: 13 }}>3 · Allocation per class</b>
+      <span style={{ fontFamily: 'var(--lw-font-mono)', fontSize: 10, color: 'var(--lw-ink-4)' }}>
+        Σ = 500
+      </span>
+    </Row>
+    <Stack gap={6} style={{ marginTop: 10 }}>
+      {ALLOCATIONS.map(([n, c, count, pct]) => (
+        <Row key={n} gap={10} style={{ fontSize: 12 }}>
+          <span style={{ width: 12, height: 12, background: c, borderRadius: 2 }} />
+          <span style={{ width: 100 }}>{n}</span>
+          <div
+            style={{
+              flex: 1,
+              height: 8,
+              background: 'var(--lw-bg-sunk)',
+              borderRadius: 4,
+              overflow: 'hidden',
+            }}
+          >
+            <div style={{ width: `${pct}%`, height: '100%', background: c, opacity: 0.7 }} />
+          </div>
+          <span
+            style={{
+              fontFamily: 'var(--lw-font-mono)',
+              fontSize: 11,
+              width: 40,
+              textAlign: 'right',
+            }}
+          >
+            {count}
+          </span>
+          <span
+            style={{
+              fontFamily: 'var(--lw-font-mono)',
+              fontSize: 10,
+              color: 'var(--lw-ink-4)',
+              width: 30,
+            }}
+          >
+            {pct}%
+          </span>
+        </Row>
+      ))}
+    </Stack>
+  </div>
+);
+
+const PreviewMap = () => (
+  <div
+    style={{
+      flex: 1,
+      border: '1px solid var(--lw-line)',
+      borderRadius: 6,
+      overflow: 'hidden',
+      position: 'relative',
+    }}
+  >
+    <MapPh h={220}>
+      {Array.from({ length: 60 }).map((_, i) => (
+        <div
+          key={i}
+          style={{
+            position: 'absolute',
+            left: `${(i * 37) % 100}%`,
+            top: `${(i * 53) % 100}%`,
+            width: 6,
+            height: 6,
+            borderRadius: '50%',
+            background: DOT_COLORS[i % 6],
+            border: '1px solid white',
+            transform: 'translate(-50%,-50%)',
+          }}
+        />
+      ))}
+    </MapPh>
+    <div
+      style={{
+        position: 'absolute',
+        top: 10,
+        left: 10,
+        background: 'var(--lw-surface)',
+        border: '1px solid var(--lw-line)',
+        borderRadius: 4,
+        padding: '4px 8px',
+        fontFamily: 'var(--lw-font-mono)',
+        fontSize: 10,
+      }}
+    >
+      preview · 60 / 500
+    </div>
+  </div>
+);
+
+export const WfSamplingGenerator = () => (
+  <Frame name="10 · Sampling generator" dim="1280×800">
+    <div style={{ height: 560 }}>
+      <Chrome
+        active="Sampling"
+        title="New sampling design"
+        crumbs={['Sampling']}
+        actions={
+          <>
+            <Btn>Save draft</Btn>
+            <Btn kind="primary">Generate</Btn>
+          </>
+        }
+      >
+        <div style={{ display: 'grid', gridTemplateColumns: '340px 1fr', gap: 16, height: '100%' }}>
+          <Stack gap={12}>
+            <StrategyList />
+            <ParametersBox />
+          </Stack>
+          <Stack gap={12}>
+            <AllocationBox />
+            <PreviewMap />
+          </Stack>
+        </div>
+      </Chrome>
+    </div>
+  </Frame>
+);
diff --git a/packages/ui/src/lacowiki/wf/sampling-strategies.tsx b/packages/ui/src/lacowiki/wf/sampling-strategies.tsx
new file mode 100644
index 00000000..d5def8ee
--- /dev/null
+++ b/packages/ui/src/lacowiki/wf/sampling-strategies.tsx
@@ -0,0 +1,148 @@
+import { Frame, Row, Stack } from '../primitives';
+
+type Field = { l: string; v: string; mono?: boolean };
+type Strategy = { label: string; note: string; fields: Field[] };
+
+const StrategyParams: Record<string, Strategy> = {
+  simple: {
+    label: 'Simple random',
+    note: 'Points uniformly at random across the study area.',
+    fields: [
+      { l: 'Total points (n)', v: '100', mono: true },
+      { l: 'Study area', v: 'Africa LC 2020 v3 extent' },
+      { l: 'Min spacing', v: '0 m (none)', mono: true },
+      { l: 'Random seed', v: '4831', mono: true },
+    ],
+  },
+  stratified: {
+    label: 'Stratified random',
+    note: 'Points allocated per legend class. See allocation panel →',
+    fields: [
+      { l: 'Total points (n)', v: '500', mono: true },
+      { l: 'Stratification', v: 'IPCC LULUCF (6)' },
+      { l: 'Allocation method', v: 'proportional ▾' },
+      { l: 'Min per stratum', v: '20', mono: true },
+      { l: 'Random seed', v: '4831', mono: true },
+    ],
+  },
+  systematic: {
+    label: 'Systematic grid',
+    note: 'Regular lattice. Origin offset randomised by seed.',
+    fields: [
+      { l: 'Grid spacing', v: '1.0 km', mono: true },
+      { l: 'Grid type', v: 'square ▾' },
+      { l: 'Random origin', v: '✓ enabled' },
+      { l: 'Approx. n', v: '≈ 1240', mono: true },
+      { l: 'Random seed', v: '4831', mono: true },
+    ],
+  },
+  cluster: {
+    label: 'Cluster',
+    note: 'Primary clusters drawn first, then sites within each.',
+    fields: [
+      { l: 'Clusters (PSU)', v: '20', mono: true },
+      { l: 'Cluster shape', v: '10 km square ▾' },
+      { l: 'Sites per cluster', v: '10', mono: true },
+      { l: 'Total points (n)', v: '200', mono: true },
+      { l: 'Random seed', v: '4831', mono: true },
+    ],
+  },
+  twostage: {
+    label: 'Two-stage',
+    note: 'Strata → clusters → sites. Useful for fieldwork logistics.',
+    fields: [
+      { l: 'Stage 1 — strata', v: 'IPCC LULUCF (6)' },
+      { l: 'Stage 1 — clusters/stratum', v: '5', mono: true },
+      { l: 'Stage 2 — sites/cluster', v: '10', mono: true },
+      { l: 'Total points (n)', v: '300', mono: true },
+      { l: 'Random seed', v: '4831', mono: true },
+    ],
+  },
+  equal: {
+    label: 'Equal allocation',
+    note: 'Same n per legend class regardless of area.',
+    fields: [
+      { l: 'Stratification', v: 'IPCC LULUCF (6)' },
+      { l: 'Points per class', v: '50', mono: true },
+      { l: 'Total points (n)', v: '300', mono: true },
+      { l: 'Random seed', v: '4831', mono: true },
+    ],
+  },
+  proportional: {
+    label: 'Proportional allocation',
+    note: 'n per class scaled to mapped area share.',
+    fields: [
+      { l: 'Stratification', v: 'IPCC LULUCF (6)' },
+      { l: 'Total points (n)', v: '500', mono: true },
+      { l: 'Min per class', v: '20', mono: true },
+      { l: 'Random seed', v: '4831', mono: true },
+    ],
+  },
+};
+
+const StrategyCard = ({ k }: { k: string }) => {
+  const s = StrategyParams[k];
+  return (
+    <div
+      style={{
+        border: '1px solid var(--lw-line)',
+        borderRadius: 6,
+        background: 'var(--lw-surface)',
+        padding: 14,
+      }}
+    >
+      <Row justify="space-between">
+        <b style={{ fontSize: 13 }}>{s.label}</b>
+        <span className="wf-pill accent" style={{ fontSize: 10 }}>
+          {k}
+        </span>
+      </Row>
+      <div style={{ fontSize: 11, color: 'var(--lw-ink-3)', marginTop: 4 }}>{s.note}</div>
+      <Stack gap={8} style={{ marginTop: 12 }}>
+        {s.fields.map((f, i) => (
+          <Stack key={i} gap={4}>
+            <span style={{ fontSize: 11, fontWeight: 500 }}>{f.l}</span>
+            <div
+              style={{
+                height: 28,
+                border: '1px solid var(--lw-line)',
+                borderRadius: 4,
+                padding: '0 10px',
+                fontSize: 12,
+                fontFamily: f.mono ? 'var(--lw-font-mono)' : 'var(--lw-font-ui)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                background: 'var(--lw-surface)',
+              }}
+            >
+              {f.v}
+            </div>
+          </Stack>
+        ))}
+      </Stack>
+    </div>
+  );
+};
+
+export const WfSamplingStrategies = () => (
+  <Frame name="10b · Strategy parameter cards (one per type)" dim="1280×800">
+    <div style={{ padding: 16, background: 'var(--lw-bg-alt)' }}>
+      <div
+        style={{
+          fontFamily: 'var(--lw-font-mono)',
+          fontSize: 11,
+          color: 'var(--lw-ink-3)',
+          marginBottom: 12,
+        }}
+      >
+        Each strategy swaps the right-hand panel of the generator. Below: all 7 cards side-by-side.
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
+        {Object.keys(StrategyParams).map((k) => (
+          <StrategyCard key={k} k={k} />
+        ))}
+      </div>
+    </div>
+  </Frame>
+);
diff --git a/packages/ui/src/lacowiki/wf/sampling.tsx b/packages/ui/src/lacowiki/wf/sampling.tsx
new file mode 100644
index 00000000..02dd9158
--- /dev/null
+++ b/packages/ui/src/lacowiki/wf/sampling.tsx
@@ -0,0 +1,202 @@
+import { Chrome } from '../chrome';
+import { Btn, Frame, MapPh, Pill, Row, Stack } from '../primitives';
+
+const LIST_GRID = '2fr 130px 90px 90px 100px 80px 60px';
+
+type SampleStatus = 'ready' | 'generating' | 'draft';
+
+const SAMPLING_ROWS: [string, string, string, SampleStatus, string, string][] = [
+  ['Africa LC stratified 500', 'stratified random', '500', 'ready', 'Africa LC 2020', '2h'],
+  ['Tropical systematic 1km', 'systematic grid', '1240', 'ready', 'Tropical Forest 2024', '1d'],
+  ['EU urban cluster 200', 'cluster', '200', 'generating', 'Urban Extents EU', '12m'],
+  ['Sahel simple random 100', 'simple random', '100', 'draft', 'Sahel Cropmask v2', '3d'],
+];
+
+export const WfSamplingList = () => (
+  <Frame name="09 · Sampling — list" dim="1280×720">
+    <div style={{ height: 500 }}>
+      <Chrome
+        active="Sampling"
+        title="Sampling designs"
+        crumbs={['Workspace']}
+        actions={<Btn kind="primary">+ New design</Btn>}
+      >
+        <div
+          style={{
+            border: '1px solid var(--lw-line)',
+            borderRadius: 6,
+            background: 'var(--lw-surface)',
+            overflow: 'hidden',
+          }}
+        >
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: LIST_GRID,
+              padding: '8px 14px',
+              borderBottom: '1px solid var(--lw-line)',
+              background: 'var(--lw-bg-alt)',
+              fontFamily: 'var(--lw-font-mono)',
+              fontSize: 10,
+              letterSpacing: '0.06em',
+              color: 'var(--lw-ink-4)',
+              textTransform: 'uppercase',
+            }}
+          >
+            <span>Design</span>
+            <span>Strategy</span>
+            <span>n</span>
+            <span>Status</span>
+            <span>Dataset</span>
+            <span>Updated</span>
+            <span></span>
+          </div>
+          {SAMPLING_ROWS.map((r, i) => (
+            <div
+              key={r[0]}
+              style={{
+                display: 'grid',
+                gridTemplateColumns: LIST_GRID,
+                padding: '10px 14px',
+                fontSize: 12,
+                alignItems: 'center',
+                borderBottom: i < SAMPLING_ROWS.length - 1 ? '1px solid var(--lw-line-soft)' : 0,
+              }}
+            >
+              <Row gap={10}>
+                <span className="mod-dot mod-sampling" />
+                <b>{r[0]}</b>
+              </Row>
+              <span
+                style={{
+                  fontFamily: 'var(--lw-font-mono)',
+                  fontSize: 10,
+                  color: 'var(--lw-ink-3)',
+                }}
+              >
+                {r[1]}
+              </span>
+              <span style={{ fontFamily: 'var(--lw-font-mono)', fontSize: 11 }}>{r[2]}</span>
+              <Pill tone={r[3] === 'ready' ? 'ok' : r[3] === 'generating' ? 'warn' : 'default'}>
+                {r[3]}
+              </Pill>
+              <span style={{ fontSize: 11, color: 'var(--lw-ink-3)' }}>{r[4]}</span>
+              <span
+                style={{
+                  fontFamily: 'var(--lw-font-mono)',
+                  fontSize: 10,
+                  color: 'var(--lw-ink-4)',
+                }}
+              >
+                {r[5]}
+              </span>
+              <span style={{ color: 'var(--lw-ink-4)', textAlign: 'right' }}>⋯</span>
+            </div>
+          ))}
+        </div>
+      </Chrome>
+    </div>
+  </Frame>
+);
+
+const DOT_COLORS = ['#3a7d44', '#d6a456', '#bcc972', '#5b8aa8', '#9a3b3b', '#7c7c7c'];
+
+const SUMMARY: [string, string][] = [
+  ['strategy', 'stratified random'],
+  ['n', '500'],
+  ['seed', '4831'],
+  ['legend', 'IPCC LULUCF'],
+  ['dataset', 'Africa LC 2020 v3'],
+  ['created', 'by m.lesiv · 2h'],
+];
+const PER_CLASS: [string, string, string][] = [
+  ['Forest', '180', '42%'],
+  ['Cropland', '120', '18%'],
+  ['Grassland', '90', '60%'],
+  ['Wetlands', '50', '0%'],
+  ['Settlements', '40', '12%'],
+  ['Other', '20', '0%'],
+];
+
+export const WfSamplingDetail = () => (
+  <Frame name="11 · Sampling — detail" dim="1280×720">
+    <div style={{ height: 500 }}>
+      <Chrome
+        active="Sampling"
+        title="Africa LC stratified 500"
+        crumbs={['Sampling']}
+        actions={
+          <>
+            <Btn>Export CSV</Btn>
+            <Btn kind="accent">Start validation</Btn>
+          </>
+        }
+      >
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 16, height: '100%' }}>
+          <MapPh h={400} style={{ borderRadius: 6, border: '1px solid var(--lw-line)' }}>
+            {Array.from({ length: 80 }).map((_, i) => (
+              <div
+                key={i}
+                style={{
+                  position: 'absolute',
+                  left: `${(i * 41) % 100}%`,
+                  top: `${(i * 67) % 100}%`,
+                  width: 7,
+                  height: 7,
+                  borderRadius: '50%',
+                  background: DOT_COLORS[i % 6],
+                  border: '1px solid white',
+                  transform: 'translate(-50%,-50%)',
+                }}
+              />
+            ))}
+          </MapPh>
+          <Stack gap={12}>
+            <div
+              style={{
+                border: '1px solid var(--lw-line)',
+                borderRadius: 6,
+                background: 'var(--lw-surface)',
+                padding: 12,
+              }}
+            >
+              <b style={{ fontSize: 13 }}>Summary</b>
+              <Stack
+                gap={6}
+                style={{ marginTop: 10, fontFamily: 'var(--lw-font-mono)', fontSize: 11 }}
+              >
+                {SUMMARY.map(([k, v]) => (
+                  <Row key={k} justify="space-between">
+                    <span style={{ color: 'var(--lw-ink-4)' }}>{k}</span>
+                    <span>{v}</span>
+                  </Row>
+                ))}
+              </Stack>
+            </div>
+            <div
+              style={{
+                border: '1px solid var(--lw-line)',
+                borderRadius: 6,
+                background: 'var(--lw-surface)',
+                padding: 12,
+              }}
+            >
+              <b style={{ fontSize: 13 }}>Per-class progress</b>
+              <Stack gap={6} style={{ marginTop: 10, fontSize: 11 }}>
+                {PER_CLASS.map((r) => (
+                  <Row key={r[0]} gap={8}>
+                    <span style={{ flex: 1 }}>{r[0]}</span>
+                    <span style={{ fontFamily: 'var(--lw-font-mono)', color: 'var(--lw-ink-4)' }}>
+                      {r[2]}
+                    </span>
+                    <span style={{ fontFamily: 'var(--lw-font-mono)' }}>{r[1]}</span>
+                  </Row>
+                ))}
+              </Stack>
+            </div>
+          </Stack>
+        </div>
+      </Chrome>
+    </div>
+  </Frame>
+);
diff --git a/packages/ui/src/lacowiki/wf/validation-create-cards.tsx b/packages/ui/src/lacowiki/wf/validation-create-cards.tsx
new file mode 100644
index 00000000..41c03250
--- /dev/null
+++ b/packages/ui/src/lacowiki/wf/validation-create-cards.tsx
@@ -0,0 +1,286 @@
+import { MapPh, Pill, Row, Stack } from '../primitives';
+
+const IMAGERY: [string, boolean][] = [
+  ['Sentinel-2', true],
+  ['Bing aerial', true],
+  ['PlanetScope', false],
+  ['Sentinel-1', false],
+  ['Google Earth', true],
+];
+
+const MODES: [string, string, boolean?][] = [
+  ['single', 'Single rater', true],
+  ['consensus', 'Consensus (k≥2)'],
+  ['expert', 'Expert review'],
+];
+
+const CONFIDENCES: [string, string, boolean?][] = [
+  ['off', 'Off'],
+  ['3', '3-step', true],
+  ['5', '5-step'],
+];
+
+const REVIEWERS: [string, string, number][] = [
+  ['m.lesiv@iiasa', 'owner', 125],
+  ['d.fritz@iiasa', 'reviewer', 125],
+  ['a.subash@iiasa', 'reviewer', 125],
+  ['+ invite reviewer', '', 125],
+];
+
+const SUMMARY: [string, string][] = [
+  ['samples', '500'],
+  ['reviewers', '3'],
+  ['per reviewer', '≈ 167'],
+  ['mode', 'single rater'],
+  ['buffer', '30 m'],
+  ['est. time', '≈ 6 h'],
+];
+
+const cardCss = {
+  border: '1px solid var(--lw-line)',
+  borderRadius: 6,
+  background: 'var(--lw-surface)',
+  padding: 14,
+} as const;
+
+const fieldCss = {
+  height: 32,
+  border: '1px solid var(--lw-line)',
+  borderRadius: 4,
+  padding: '0 10px',
+  fontSize: 12,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+} as const;
+
+const compactFieldCss = {
+  height: 28,
+  border: '1px solid var(--lw-line)',
+  borderRadius: 4,
+  padding: '0 10px',
+  fontSize: 12,
+  display: 'flex',
+  alignItems: 'center',
+} as const;
+
+export const SourceCard = () => (
+  <div style={cardCss}>
+    <b style={{ fontSize: 13 }}>1 · Source</b>
+    <Stack gap={10} style={{ marginTop: 10 }}>
+      <Stack gap={4}>
+        <span style={{ fontSize: 11, fontWeight: 500 }}>Sampling design</span>
+        <div style={fieldCss}>
+          Africa LC stratified 500
+          <span style={{ color: 'var(--lw-ink-4)' }}>▾</span>
+        </div>
+      </Stack>
+      <Stack gap={4}>
+        <span style={{ fontSize: 11, fontWeight: 500 }}>Legend (classification options)</span>
+        <div style={fieldCss}>
+          IPCC LULUCF (6)
+          <span style={{ color: 'var(--lw-ink-4)' }}>▾</span>
+        </div>
+      </Stack>
+      <Stack gap={4}>
+        <span style={{ fontSize: 11, fontWeight: 500 }}>Reference imagery layers</span>
+        <Row gap={6} style={{ flexWrap: 'wrap' }}>
+          {IMAGERY.map(([n, on]) => (
+            <span
+              key={n}
+              style={{
+                padding: '5px 10px',
+                border: on ? '1.5px solid var(--lw-accent)' : '1px solid var(--lw-line)',
+                background: on ? 'var(--lw-accent-soft)' : 'var(--lw-surface)',
+                borderRadius: 4,
+                fontSize: 11,
+                fontWeight: on ? 600 : 500,
+                color: on ? 'var(--lw-accent-ink)' : 'var(--lw-ink-3)',
+              }}
+            >
+              {on ? '✓ ' : ''}
+              {n}
+            </span>
+          ))}
+        </Row>
+      </Stack>
+    </Stack>
+  </div>
+);
+
+export const WorkflowCard = () => (
+  <div style={cardCss}>
+    <b style={{ fontSize: 13 }}>2 · Workflow</b>
+    <Stack gap={10} style={{ marginTop: 10 }}>
+      <Stack gap={4}>
+        <span style={{ fontSize: 11, fontWeight: 500 }}>Mode</span>
+        <Row gap={6}>
+          {MODES.map(([k, l, on]) => (
+            <span
+              key={k}
+              style={{
+                flex: 1,
+                padding: '8px 10px',
+                border: on ? '1.5px solid var(--lw-accent)' : '1px solid var(--lw-line)',
+                background: on ? 'var(--lw-accent-soft)' : 'var(--lw-surface)',
+                borderRadius: 4,
+                fontSize: 12,
+                fontWeight: on ? 600 : 500,
+                textAlign: 'center',
+                color: on ? 'var(--lw-accent-ink)' : 'var(--lw-ink-2)',
+              }}
+            >
+              {l}
+            </span>
+          ))}
+        </Row>
+      </Stack>
+      <Row gap={12}>
+        <Stack gap={4} style={{ flex: 1 }}>
+          <span style={{ fontSize: 11, fontWeight: 500 }}>Buffer radius</span>
+          <div style={{ ...compactFieldCss, fontFamily: 'var(--lw-font-mono)' }}>30 m</div>
+        </Stack>
+        <Stack gap={4} style={{ flex: 1 }}>
+          <span style={{ fontSize: 11, fontWeight: 500 }}>Sample order</span>
+          <div style={{ ...compactFieldCss, justifyContent: 'space-between' }}>random ▾</div>
+        </Stack>
+        <Stack gap={4} style={{ flex: 1 }}>
+          <span style={{ fontSize: 11, fontWeight: 500 }}>Allow skip</span>
+          <div style={compactFieldCss}>✓ with reason</div>
+        </Stack>
+      </Row>
+      <Stack gap={4}>
+        <span style={{ fontSize: 11, fontWeight: 500 }}>Confidence capture</span>
+        <Row gap={6}>
+          {CONFIDENCES.map(([k, l, on]) => (
+            <span
+              key={k}
+              style={{
+                padding: '5px 12px',
+                border: on ? '1.5px solid var(--lw-accent)' : '1px solid var(--lw-line)',
+                background: on ? 'var(--lw-accent-soft)' : 'var(--lw-surface)',
+                borderRadius: 4,
+                fontSize: 11,
+                fontWeight: on ? 600 : 500,
+                color: on ? 'var(--lw-accent-ink)' : 'var(--lw-ink-3)',
+              }}
+            >
+              {l}
+            </span>
+          ))}
+        </Row>
+      </Stack>
+    </Stack>
+  </div>
+);
+
+export const ReviewersCard = () => (
+  <div style={cardCss}>
+    <b style={{ fontSize: 13 }}>3 · Reviewers</b>
+    <Stack gap={8} style={{ marginTop: 10 }}>
+      {REVIEWERS.map(([who, role, n], i) => (
+        <Row
+          key={who}
+          gap={8}
+          style={{ padding: '6px 0', borderBottom: i < 3 ? '1px solid var(--lw-line-soft)' : 0 }}
+        >
+          <div
+            style={{
+              width: 22,
+              height: 22,
+              borderRadius: '50%',
+              background: i < 3 ? 'var(--lw-bg-sunk)' : 'transparent',
+              border: '1px solid var(--lw-line)',
+            }}
+          />
+          <span
+            style={{
+              fontSize: 12,
+              flex: 1,
+              color: i === 3 ? 'var(--lw-accent-ink)' : 'var(--lw-ink-1)',
+            }}
+          >
+            {who}
+          </span>
+          {role && <Pill>{role}</Pill>}
+          {role && (
+            <span
+              style={{ fontFamily: 'var(--lw-font-mono)', fontSize: 10, color: 'var(--lw-ink-4)' }}
+            >
+              {n} samples
+            </span>
+          )}
+        </Row>
+      ))}
+    </Stack>
+  </div>
+);
+
+export const SummarySidebar = () => (
+  <Stack gap={12}>
+    <div style={cardCss}>
+      <span
+        style={{
+          fontFamily: 'var(--lw-font-mono)',
+          fontSize: 10,
+          color: 'var(--lw-ink-4)',
+          textTransform: 'uppercase',
+          letterSpacing: '0.06em',
+        }}
+      >
+        Summary
+      </span>
+      <Stack gap={6} style={{ marginTop: 8, fontFamily: 'var(--lw-font-mono)', fontSize: 11 }}>
+        {SUMMARY.map(([k, v]) => (
+          <Row key={k} justify="space-between">
+            <span style={{ color: 'var(--lw-ink-4)' }}>{k}</span>
+            <b>{v}</b>
+          </Row>
+        ))}
+      </Stack>
+    </div>
+    <div
+      style={{
+        flex: 1,
+        border: '1px solid var(--lw-line)',
+        borderRadius: 6,
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+    >
+      <MapPh h={200}>
+        {Array.from({ length: 50 }).map((_, i) => (
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              left: `${10 + ((i * 31) % 80)}%`,
+              top: `${10 + ((i * 47) % 80)}%`,
+              width: 5,
+              height: 5,
+              borderRadius: '50%',
+              background: 'var(--lw-accent)',
+              border: '1px solid white',
+              transform: 'translate(-50%,-50%)',
+            }}
+          />
+        ))}
+      </MapPh>
+      <div
+        style={{
+          position: 'absolute',
+          top: 8,
+          left: 8,
+          background: 'var(--lw-surface)',
+          border: '1px solid var(--lw-line)',
+          borderRadius: 4,
+          padding: '3px 8px',
+          fontFamily: 'var(--lw-font-mono)',
+          fontSize: 10,
+        }}
+      >
+        500 samples
+      </div>
+    </div>
+  </Stack>
+);
diff --git a/packages/ui/src/lacowiki/wf/validation-create.tsx b/packages/ui/src/lacowiki/wf/validation-create.tsx
new file mode 100644
index 00000000..341b2b1d
--- /dev/null
+++ b/packages/ui/src/lacowiki/wf/validation-create.tsx
@@ -0,0 +1,30 @@
+import { Chrome } from '../chrome';
+import { Btn, Frame, Stack } from '../primitives';
+import { ReviewersCard, SourceCard, SummarySidebar, WorkflowCard } from './validation-create-cards';
+
+export const WfValidationCreate = () => (
+  <Frame name="11b · Create validation campaign" dim="1280×800">
+    <div style={{ height: 560 }}>
+      <Chrome
+        active="Validation"
+        title="New validation campaign"
+        crumbs={['Validation']}
+        actions={
+          <>
+            <Btn>Cancel</Btn>
+            <Btn kind="primary">Create campaign</Btn>
+          </>
+        }
+      >
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 16, height: '100%' }}>
+          <Stack gap={12}>
+            <SourceCard />
+            <WorkflowCard />
+            <ReviewersCard />
+          </Stack>
+          <SummarySidebar />
+        </div>
+      </Chrome>
+    </div>
+  </Frame>
+);
diff --git a/packages/ui/src/lacowiki/wf/validation-shared.tsx b/packages/ui/src/lacowiki/wf/validation-shared.tsx
new file mode 100644
index 00000000..b352e3e3
--- /dev/null
+++ b/packages/ui/src/lacowiki/wf/validation-shared.tsx
@@ -0,0 +1,228 @@
+import type { ReactNode } from 'react';
+
+import { Btn, Frame, Placeholder, Row, Stack } from '../primitives';
+
+export const ValidationCommon = ({ children, label }: { children: ReactNode; label: string }) => (
+  <Frame name={label} dim="1280×800">
+    <div style={{ height: 540, display: 'flex', flexDirection: 'column' }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          padding: '8px 14px',
+          borderBottom: '1px solid var(--lw-line-soft)',
+          background: 'var(--lw-surface)',
+        }}
+      >
+        <Row gap={8} style={{ fontSize: 12 }}>
+          <span style={{ color: 'var(--lw-ink-4)' }}>Validation /</span>
+          <span style={{ color: 'var(--lw-ink-4)' }}>Africa LC stratified 500 /</span>
+          <b>Sample 47 / 500</b>
+        </Row>
+        <Row gap={6} style={{ marginLeft: 'auto' }}>
+          <span
+            style={{ fontFamily: 'var(--lw-font-mono)', fontSize: 11, color: 'var(--lw-ink-4)' }}
+          >
+            ← prev · next →
+          </span>
+          <span style={{ width: 1, height: 18, background: 'var(--lw-line)' }} />
+          <Btn>Save & next</Btn>
+          <Btn kind="primary">Submit</Btn>
+        </Row>
+      </div>
+      {children}
+    </div>
+  </Frame>
+);
+
+const CLASSIFY_OPTIONS: [string, string, string, boolean?][] = [
+  ['1', 'Forest land', '#3a7d44', true],
+  ['2', 'Cropland', '#d6a456'],
+  ['3', 'Grassland', '#bcc972'],
+  ['4', 'Wetlands', '#5b8aa8'],
+  ['5', 'Settlements', '#9a3b3b'],
+  ['6', 'Other', '#7c7c7c'],
+];
+
+export const ClassifyPanel = ({ compact = false }: { compact?: boolean }) => (
+  <Stack gap={compact ? 6 : 8} style={{ padding: compact ? 10 : 12 }}>
+    <div
+      style={{
+        fontFamily: 'var(--lw-font-mono)',
+        fontSize: 10,
+        color: 'var(--lw-ink-4)',
+        textTransform: 'uppercase',
+        letterSpacing: '0.06em',
+      }}
+    >
+      Classify · sample #47
+    </div>
+    <div style={{ fontSize: compact ? 11 : 12, color: 'var(--lw-ink-3)' }}>
+      Pick the dominant land cover within the buffer.
+    </div>
+    {CLASSIFY_OPTIONS.map(([num, label, color, selected]) => (
+      <Row
+        key={num}
+        gap={8}
+        style={{
+          padding: '8px 10px',
+          border: selected ? '1.5px solid var(--lw-accent)' : '1px solid var(--lw-line)',
+          borderRadius: 4,
+          background: selected ? 'var(--lw-accent-soft)' : 'var(--lw-surface)',
+          cursor: 'default',
+        }}
+      >
+        <span
+          style={{
+            fontFamily: 'var(--lw-font-mono)',
+            fontSize: 10,
+            color: 'var(--lw-ink-4)',
+            width: 12,
+          }}
+        >
+          {num}
+        </span>
+        <span style={{ width: 14, height: 14, background: color, borderRadius: 2 }} />
+        <span style={{ fontSize: 12, fontWeight: selected ? 600 : 500, flex: 1 }}>{label}</span>
+        {selected && (
+          <span
+            style={{
+              fontFamily: 'var(--lw-font-mono)',
+              fontSize: 10,
+              color: 'var(--lw-accent-ink)',
+            }}
+          >
+            ✓
+          </span>
+        )}
+      </Row>
+    ))}
+    <Stack gap={4} style={{ marginTop: 4 }}>
+      <span style={{ fontSize: 11, fontWeight: 500 }}>Confidence</span>
+      <Row gap={4}>
+        {(['low', 'med', 'high'] as const).map((c, i) => (
+          <span
+            key={c}
+            style={{
+              flex: 1,
+              padding: '4px 0',
+              textAlign: 'center',
+              fontSize: 11,
+              border: '1px solid var(--lw-line)',
+              borderRadius: 3,
+              background: i === 2 ? 'var(--lw-ink-1)' : 'var(--lw-surface)',
+              color: i === 2 ? 'white' : 'var(--lw-ink-3)',
+            }}
+          >
+            {c}
+          </span>
+        ))}
+      </Row>
+    </Stack>
+    {!compact && <Placeholder label="Notes (optional)" h={50} />}
+  </Stack>
+);
+
+export const ActiveSample = ({ kind = 'point' }: { kind?: 'point' | 'polygon' }) => (
+  <>
+    <div
+      style={{
+        position: 'absolute',
+        left: '50%',
+        top: 0,
+        bottom: 0,
+        width: 1,
+        background: 'rgba(14,17,22,0.18)',
+        borderLeft: '1px dashed rgba(14,17,22,0.25)',
+      }}
+    />
+    <div
+      style={{
+        position: 'absolute',
+        top: '50%',
+        left: 0,
+        right: 0,
+        height: 1,
+        background: 'rgba(14,17,22,0.18)',
+        borderTop: '1px dashed rgba(14,17,22,0.25)',
+      }}
+    />
+    {kind === 'point' ? (
+      <>
+        <div
+          style={{
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            width: 140,
+            height: 140,
+            transform: 'translate(-50%,-50%)',
+            border: '1.5px dashed var(--lw-accent)',
+            borderRadius: '50%',
+            background: 'oklch(0.62 0.12 200 / 0.06)',
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            width: 60,
+            height: 60,
+            transform: 'translate(-50%,-50%)',
+            border: '1.5px solid var(--lw-accent)',
+            borderRadius: '50%',
+            background: 'oklch(0.62 0.12 200 / 0.10)',
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            width: 14,
+            height: 14,
+            borderRadius: '50%',
+            background: 'var(--lw-accent)',
+            border: '3px solid var(--lw-surface)',
+            boxShadow: '0 0 0 1.5px var(--lw-accent), 0 2px 6px rgba(0,0,0,0.3)',
+            transform: 'translate(-50%,-50%)',
+          }}
+        />
+      </>
+    ) : (
+      <svg
+        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
+        viewBox="0 0 100 100"
+        preserveAspectRatio="none"
+      >
+        <polygon
+          points="42,38 60,36 64,52 56,62 44,60 38,48"
+          fill="oklch(0.62 0.12 200 / 0.18)"
+          stroke="var(--lw-accent)"
+          strokeWidth="0.6"
+          strokeDasharray="1.2 0.8"
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+    )}
+    <div
+      style={{
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+        transform: 'translate(14px, 14px)',
+        fontFamily: 'var(--lw-font-mono)',
+        fontSize: 10,
+        color: 'var(--lw-accent-ink)',
+        background: 'rgba(255,255,255,0.92)',
+        padding: '2px 6px',
+        borderRadius: 3,
+        border: '1px solid var(--lw-accent)',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      14.32°N, 38.21°E · 30m
+    </div>
+  </>
+);
diff --git a/packages/ui/src/lacowiki/wf/validation.tsx b/packages/ui/src/lacowiki/wf/validation.tsx
new file mode 100644
index 00000000..e44fe1ed
--- /dev/null
+++ b/packages/ui/src/lacowiki/wf/validation.tsx
@@ -0,0 +1,55 @@
+import { MapPh } from '../primitives';
+import { ActiveSample, ClassifyPanel, ValidationCommon } from './validation-shared';
+
+const BASEMAP_TABS = ['Sentinel-2', 'Bing', 'PlanetScope', 'Sentinel-1'];
+
+export const WfValidationB = () => (
+  <ValidationCommon label="12 · Validation — classify">
+    <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 320px' }}>
+      <div style={{ position: 'relative' }}>
+        <MapPh h={490}>
+          <ActiveSample kind="polygon" />
+        </MapPh>
+        <div style={{ position: 'absolute', bottom: 12, left: 12, display: 'flex', gap: 6 }}>
+          {BASEMAP_TABS.map((b, i) => (
+            <span
+              key={b}
+              style={{
+                padding: '4px 10px',
+                background: i === 0 ? 'var(--lw-ink-1)' : 'var(--lw-surface)',
+                color: i === 0 ? 'white' : 'var(--lw-ink-2)',
+                border: '1px solid var(--lw-line)',
+                borderRadius: 3,
+                fontSize: 11,
+              }}
+            >
+              {b}
+            </span>
+          ))}
+        </div>
+      </div>
+      <div
+        style={{
+          borderLeft: '1px solid var(--lw-line-soft)',
+          background: 'var(--lw-bg-alt)',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <ClassifyPanel />
+        <div
+          style={{
+            marginTop: 'auto',
+            padding: 12,
+            borderTop: '1px solid var(--lw-line-soft)',
+            fontFamily: 'var(--lw-font-mono)',
+            fontSize: 10,
+            color: 'var(--lw-ink-4)',
+          }}
+        >
+          47 / 500 · 9.4%
+        </div>
+      </div>
+    </div>
+  </ValidationCommon>
+);
diff --git a/packages/ui/src/lacowiki/wireframes.tsx b/packages/ui/src/lacowiki/wireframes.tsx
new file mode 100644
index 00000000..8f4759dd
--- /dev/null
+++ b/packages/ui/src/lacowiki/wireframes.tsx
@@ -0,0 +1,80 @@
+import type { ReactNode } from 'react';
+
+import { SectionHead } from './primitives';
+import { WfAccount } from './wf/account';
+import { WfDashboard } from './wf/dashboard';
+import { WfDatasetDetail, WfDatasetsList, WfDatasetUpload } from './wf/datasets';
+import { WfLegendBuilder, WfLegendsList } from './wf/legends';
+import { WfLanding, WfLogin } from './wf/marketing';
+import { WfReportMatrix, WfReportsList } from './wf/reports';
+import { WfSamplingDetail, WfSamplingList } from './wf/sampling';
+import { WfSamplingGenerator } from './wf/sampling-generator';
+import { WfSamplingStrategies } from './wf/sampling-strategies';
+import { WfValidationB } from './wf/validation';
+import { WfValidationCreate } from './wf/validation-create';
+
+type Section = { id: string; label: string; items: ReactNode[] };
+
+const SECTIONS: Section[] = [
+  { id: 'marketing', label: 'Marketing & auth', items: [<WfLanding />, <WfLogin />] },
+  { id: 'dashboard', label: 'Dashboard', items: [<WfDashboard />] },
+  {
+    id: 'datasets',
+    label: 'Datasets',
+    items: [<WfDatasetsList />, <WfDatasetUpload />, <WfDatasetDetail />],
+  },
+  { id: 'legends', label: 'Legends', items: [<WfLegendsList />, <WfLegendBuilder />] },
+  {
+    id: 'sampling',
+    label: 'Sampling',
+    items: [
+      <WfSamplingList />,
+      <WfSamplingGenerator />,
+      <WfSamplingStrategies />,
+      <WfSamplingDetail />,
+    ],
+  },
+  { id: 'validation', label: 'Validation', items: [<WfValidationCreate />, <WfValidationB />] },
+  { id: 'reports', label: 'Reports', items: [<WfReportsList />, <WfReportMatrix />] },
+  { id: 'account', label: 'Account', items: [<WfAccount />] },
+];
+
+const sectionPad = (i: number) => (i + 1 < 10 ? `0${i + 1}` : String(i + 1));
+
+const gridClassFor = (s: Section) => {
+  if (s.id === 'validation') return 'wf-grid-2';
+  if (s.items.length >= 2) return 'wf-grid-2';
+  return '';
+};
+
+export const Wireframes = () => (
+  <div>
+    <div className="eyebrow">02 — Wireframes</div>
+    <h1 className="h-display">Screens.</h1>
+    <p className="lede">
+      Mid-fidelity, one accent color, tabular numerals. Validation focuses on one sample at a time —
+      a single classify panel beside the map.
+    </p>
+
+    <div className="wf-toc">
+      {SECTIONS.map((s) => (
+        <a key={s.id} href={`#${s.id}`}>
+          ↳ {s.label}
+        </a>
+      ))}
+    </div>
+
+    {SECTIONS.map((s, i) => (
+      <section key={s.id} id={s.id} className="wf-section">
+        <SectionHead id={s.id} label={`${sectionPad(i)} · module`}>
+          {s.label}
+        </SectionHead>
+        <div className={gridClassFor(s)}>
+          {s.items.map((Item, idx) => (
+            <div key={idx}>{Item}</div>
+          ))}
+        </div>
+      </section>
+    ))}
+  </div>
+);
diff --git a/packages/ui/src/layouts/AuthCardShell.tsx b/packages/ui/src/layouts/AuthCardShell.tsx
index cb695bc5..fe8eacfd 100644
--- a/packages/ui/src/layouts/AuthCardShell.tsx
+++ b/packages/ui/src/layouts/AuthCardShell.tsx
@@ -1,15 +1,35 @@
 import type React from 'react';
 
+const MAP_BG = `radial-gradient(ellipse at 30% 40%, oklch(0.92 0.03 155) 0%, transparent 35%),
+  radial-gradient(ellipse at 70% 60%, oklch(0.88 0.04 200) 0%, transparent 40%),
+  repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,0.025) 14px 15px),
+  repeating-linear-gradient(-45deg, transparent 0 14px, rgba(0,0,0,0.025) 14px 15px),
+  oklch(0.93 0.005 250)`;
+
 /**
- * Full-viewport centered-card shell for unauthenticated flows
- * (login, register, password reset, email verify, invite accept).
- *
- * Distinct from PublicLayout (branded landing nav + footer) and
- * AuthenticatedLayout (sidebar shell): auth-form pages want a minimal
- * undecorated centering wrapper with nothing else on the page.
+ * Two-column shell for unauthenticated flows (login, register, password
+ * reset, email verify, invite accept). Left column hosts the form;
+ * right column is a quiet map placeholder that mirrors the LacoWiki
+ * landing aesthetic. Falls back to a single-column layout under the lg
+ * breakpoint so password-reset flows still read well on mobile.
  */
 export function AuthCardShell({ children }: { children: React.ReactNode }) {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-muted p-4">{children}</div>
+    <div className="grid min-h-screen grid-cols-1 bg-background lg:grid-cols-2">
+      <div className="flex flex-col justify-center px-6 py-12 sm:px-12 lg:px-20">
+        <div className="mx-auto w-full max-w-sm">
+          <div className="mb-10 flex items-center gap-2.5">
+            <div className="h-5 w-5 rounded bg-primary" />
+            <span className="text-sm font-semibold tracking-tight">SimpleModule</span>
+          </div>
+          {children}
+        </div>
+      </div>
+      <div
+        className="hidden border-l border-border/60 lg:block"
+        style={{ backgroundImage: MAP_BG }}
+        aria-hidden="true"
+      />
+    </div>
   );
 }
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index 2b84dc07..79bd8192 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -5,19 +5,25 @@
 /* Self-scan — app-level @source lines live in host/client_app/styles.css. */
 @source "../../**/*.{ts,tsx}";
 
-/* ── Design System Theme ── Cool Teal ──────────────────────── */
+/* ── Design System Theme ── LacoWiki Migration ─────────────────
+   Modern scientific/technical aesthetic:
+   - Inter for UI, JetBrains Mono for tabular data and IDs
+   - Cool grays at near-zero saturation
+   - One precise teal-cyan accent (oklch hue 200)
+   - 1px borders, no gradients or heavy shadows
+*/
 @theme {
-  /* Teal / Cyan primary scale */
-  --color-primary-50: oklch(0.97 0.02 185);
-  --color-primary-100: oklch(0.93 0.04 185);
-  --color-primary-200: oklch(0.86 0.07 185);
-  --color-primary-300: oklch(0.76 0.1 185);
-  --color-primary-400: oklch(0.68 0.12 185);
-  --color-primary-500: oklch(0.6 0.13 185);
-  --color-primary-600: oklch(0.52 0.12 185);
-  --color-primary-700: oklch(0.44 0.1 185);
-  --color-primary-800: oklch(0.36 0.08 185);
-  --color-primary-900: oklch(0.28 0.06 185);
+  /* Teal / Cyan primary scale — hue 200 to match the LacoWiki accent */
+  --color-primary-50: oklch(0.97 0.02 200);
+  --color-primary-100: oklch(0.93 0.04 200);
+  --color-primary-200: oklch(0.86 0.07 200);
+  --color-primary-300: oklch(0.76 0.1 200);
+  --color-primary-400: oklch(0.68 0.12 200);
+  --color-primary-500: oklch(0.62 0.12 200);
+  --color-primary-600: oklch(0.52 0.12 200);
+  --color-primary-700: oklch(0.44 0.1 200);
+  --color-primary-800: oklch(0.36 0.08 200);
+  --color-primary-900: oklch(0.28 0.06 200);
 
   /* Cool neutrals for surfaces */
   --color-surface: oklch(0.985 0.003 250);
@@ -62,32 +68,32 @@
   --color-violet-icon-bg: oklch(0.92 0.05 300);
   --color-violet-value: oklch(0.3 0.08 300);
 
-  /* Typography */
-  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
-  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+  /* Typography — Inter for UI, JetBrains Mono for tabular data and IDs */
+  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
 
-  /* Shadows */
-  --shadow-card: 0 1px 3px oklch(0.2 0.01 250 / 0.08), 0 1px 2px oklch(0.2 0.01 250 / 0.04);
-  --shadow-card-hover: 0 4px 12px oklch(0.2 0.01 250 / 0.12), 0 2px 4px oklch(0.2 0.01 250 / 0.06);
+  /* Shadows — restrained, mostly flat surfaces */
+  --shadow-card: 0 1px 2px oklch(0.14 0.02 250 / 0.04);
+  --shadow-card-hover: 0 1px 3px oklch(0.14 0.02 250 / 0.08);
 }
 
 /* ── shadcn/ui Semantic Color Tokens ───────────────────────── */
 :root {
-  /* Core */
-  --background: oklch(0.985 0.003 250);
-  --foreground: oklch(0.2 0.02 250);
+  /* Core — cool grays, near-zero saturation, matching LacoWiki tokens */
+  --background: oklch(0.985 0.002 250); /* #fafbfc */
+  --foreground: oklch(0.18 0.01 250); /* #0e1116 */
 
-  /* Card */
+  /* Card — pure white surface on the cool gray bg */
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.2 0.02 250);
+  --card-foreground: oklch(0.18 0.01 250);
 
   /* Popover */
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.2 0.02 250);
+  --popover-foreground: oklch(0.18 0.01 250);
 
-  /* Primary (teal) */
-  --primary: oklch(0.52 0.12 185);
+  /* Primary — solid ink for primary CTAs (LacoWiki style: ink-1, not accent) */
+  --primary: oklch(0.18 0.01 250);
   --primary-foreground: oklch(1 0 0);
 
   /* Secondary */
@@ -105,29 +111,30 @@
   /* Destructive */
   --destructive: oklch(0.55 0.2 25);
 
-  /* Border / Input / Ring */
-  --border: oklch(0.9 0.005 250);
-  --input: oklch(0.82 0.005 250);
-  --ring: oklch(0.6 0.13 185);
-
-  /* Chart colors */
-  --chart-1: oklch(0.6 0.13 185);
-  --chart-2: oklch(0.55 0.12 85);
-  --chart-3: oklch(0.55 0.14 300);
-  --chart-4: oklch(0.6 0.15 145);
-  --chart-5: oklch(0.55 0.12 30);
-
-  /* Sidebar (shadcn sidebar component) */
-  --sidebar: oklch(0.985 0.003 250);
-  --sidebar-foreground: oklch(0.25 0.02 250);
-  --sidebar-primary: oklch(0.52 0.12 185);
+  /* Border / Input / Ring — 1px cool gray lines */
+  --border: oklch(0.9 0.003 250);
+  --input: oklch(0.85 0.003 250);
+  --ring: oklch(0.62 0.12 200);
+
+  /* Chart colors — drawn from the LacoWiki land-cover legend palette */
+  --chart-1: oklch(0.62 0.12 200); /* accent / wetlands */
+  --chart-2: oklch(0.6 0.14 145); /* forest */
+  --chart-3: oklch(0.72 0.13 75); /* cropland */
+  --chart-4: oklch(0.55 0.14 285); /* sampling / settlements */
+  --chart-5: oklch(0.58 0.16 25); /* alert / settlements */
+
+  /* Sidebar (shadcn sidebar component) — light cool gray */
+  --sidebar: oklch(0.96 0.003 250);
+  --sidebar-foreground: oklch(0.32 0.01 250);
+  --sidebar-primary: oklch(0.18 0.01 250);
   --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.96 0.005 250);
-  --sidebar-accent-foreground: oklch(0.25 0.02 250);
-  --sidebar-border: oklch(0.9 0.005 250);
-  --sidebar-ring: oklch(0.6 0.13 185);
+  --sidebar-accent: oklch(1 0 0);
+  --sidebar-accent-foreground: oklch(0.18 0.01 250);
+  --sidebar-border: oklch(0.93 0.003 250);
+  --sidebar-ring: oklch(0.62 0.12 200);
 
-  --radius: 0.625rem;
+  /* Tighter radii — LacoWiki uses 4px / 6px corners */
+  --radius: 0.375rem;
 }
 
 .dark {