feat(website): editorial/blueprint visual redesign of docs

Replaces the generic neutral preset + Inter homepage with a distinct
engineering-blueprint aesthetic: warm paper / deep ink palette with a
single safety-orange accent, Fraunces (display) + IBM Plex Sans (body)
+ JetBrains Mono (labels) via next/font, blueprint-grid hero with
monospace meta bar and italic-orange "bimanual" accent, numbered spec
sheet, mono-indexed routes list, serif docs titles with a "§ Category"
section pip, paper-card Mermaid frames with corner registration marks,
and a [ Haller ] serif+brackets nav wordmark.

Also fixes silent Mermaid failure on docs pages: browsers resolved the
oklch() palette vars to lab() strings which Mermaid 11's khroma color
parser can't read, so initialize() threw and the diagram stuck on its
skeleton. Mermaid now uses a hardcoded hex palette keyed by resolvedTheme.

Author: oscardvs

website/app/(home)/page.tsx

@@ -1,60 +1,259 @@
 import Link from 'next/link';
+import { ArrowUpRight } from 'lucide-react';
 
 export default function HomePage() {
   return (
-    <main className="flex flex-1 flex-col">
-      <section className="flex flex-col items-center justify-center px-6 py-24 text-center md:py-32">
-        <p className="mb-4 font-mono text-xs uppercase tracking-[0.18em] text-fd-muted-foreground">
-          open hardware + software
-        </p>
-        <h1 className="max-w-3xl text-4xl font-semibold leading-tight tracking-tight md:text-6xl">
-          Haller — a hackable bimanual mobile manipulator.
-        </h1>
-        <p className="mt-6 max-w-2xl text-base text-fd-muted-foreground md:text-lg">
-          A four-wheel differential-drive base carrying two SO-101 arms.
-          ROS 2 for the base, LeRobot for the arms, a unified FastAPI + Next.js HMI
-          that ties it all together. Build it, calibrate it in the browser, teleoperate it
-          across the room.
-        </p>
-        <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
-          <Link
-            href="/docs"
-            className="inline-flex h-10 items-center rounded-md bg-fd-primary px-5 text-sm font-medium text-fd-primary-foreground transition hover:opacity-90"
-          >
-            Read the docs
-          </Link>
-          <Link
-            href="https://github.com/oscardvs/haller_ws"
-            className="inline-flex h-10 items-center rounded-md border border-fd-border px-5 text-sm font-medium transition hover:bg-fd-accent"
-          >
-            View on GitHub
-          </Link>
-        </div>
-      </section>
-
-      <section className="mx-auto grid w-full max-w-5xl gap-4 px-6 pb-24 md:grid-cols-3">
-        <Feature
-          title="ROS 2 base"
-          body="Differential drive on LK-TECH MF5010 BLDCs over CAN. RPLIDAR A1M8 for 2D mapping. Runs on Jetson Orin Nano."
-        />
-        <Feature
-          title="Two SO-101 arms"
-          body="Open hardware design from TheRobotStudio, 6× Feetech STS3215 servos each. Symmetric build — either arm can lead or follow."
-        />
-        <Feature
-          title="Browser HMI"
-          body="One unified web interface for both arms and the base. Joint sliders, teleop launcher, calibration wizard, dataset recording."
-        />
-      </section>
+    <main className="relative flex flex-1 flex-col overflow-hidden">
+      {/* full-bleed blueprint grid sits behind the hero only */}
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-[120vh] [mask-image:linear-gradient(to_bottom,black_0%,black_55%,transparent_100%)]">
+        <div className="h-grid h-full w-full" />
+      </div>
+
+      <Hero />
+      <SpecSheet />
+      <RoutesIndex />
+      <Footnote />
     </main>
   );
 }
 
-function Feature({ title, body }: { title: string; body: string }) {
+/* ────────────────────────────────────────────────────────────────────────── */
+
+function Hero() {
+  return (
+    <section className="relative mx-auto w-full max-w-6xl px-6 pt-14 pb-24 sm:pt-20 md:pt-28">
+      {/* registration marks pinned to the hero block */}
+      <span className="h-cross" style={{ top: 24, left: 8 }} />
+      <span className="h-cross" style={{ top: 24, right: 8 }} />
+
+      {/* meta bar */}
+      <div
+        className="h-rise flex flex-wrap items-center gap-x-5 gap-y-2 text-fd-muted-foreground h-mono"
+        style={{ animationDelay: '0ms' }}
+      >
+        <span className="inline-flex items-center gap-2 text-[11px]">
+          <span className="h-status-dot" />
+          <span>HALLER / V0.1 / OPEN HARDWARE</span>
+        </span>
+        <span className="hidden h-3 w-px bg-fd-border sm:block" />
+        <span className="text-[11px]">N 50°50′ · E 04°21′ · BRUSSELS</span>
+        <span className="hidden h-3 w-px bg-fd-border sm:block" />
+        <span className="text-[11px]">DOCS · LAST PUSH 2026-05-23</span>
+      </div>
+
+      {/* title — serif display, italic accent, mono pip */}
+      <h1
+        className="h-rise mt-10 text-balance text-[clamp(2.6rem,7.4vw,6.4rem)] leading-[0.96] text-fd-foreground h-display"
+        style={{ animationDelay: '80ms' }}
+      >
+        A hackable{' '}
+        <span className="italic text-fd-primary" style={{ fontVariationSettings: "'opsz' 144, 'SOFT' 100" }}>
+          bimanual
+        </span>{' '}
+        mobile manipulator,
+        <br className="hidden sm:block" />
+        engineered in the open.
+      </h1>
+
+      {/* deck / lede */}
+      <p
+        className="h-rise mt-8 max-w-2xl text-pretty text-[1.05rem] leading-[1.55] text-fd-muted-foreground sm:text-[1.12rem]"
+        style={{ animationDelay: '160ms' }}
+      >
+        Haller is a four-wheel differential-drive base carrying two SO-101 arms.
+        ROS&nbsp;2 for the base, LeRobot for the arms, a unified FastAPI&nbsp;+&nbsp;Next.js HMI
+        that ties it all together —{' '}
+        <span className="italic text-fd-foreground">build it, calibrate it in the browser,
+        teleoperate it across the room.</span>
+      </p>
+
+      {/* CTAs */}
+      <div
+        className="h-rise mt-10 flex flex-wrap items-center gap-3"
+        style={{ animationDelay: '240ms' }}
+      >
+        <Link
+          href="/docs"
+          className="group inline-flex h-11 items-center gap-2 rounded-md bg-fd-primary px-5 text-[13px] font-medium tracking-wide text-fd-primary-foreground shadow-[0_1px_0_0_oklch(0%_0_0_/_8%)] transition hover:translate-y-[-1px] hover:shadow-[0_4px_18px_-6px_oklch(63%_0.21_42_/_55%)]"
+        >
+          <span className="h-mono text-[10px] opacity-80">→</span>
+          Read the documentation
+        </Link>
+        <Link
+          href="https://github.com/oscardvs/haller_ws"
+          className="group inline-flex h-11 items-center gap-2 rounded-md border border-fd-border bg-fd-card/40 px-5 text-[13px] font-medium tracking-wide text-fd-foreground backdrop-blur transition hover:border-fd-primary/60 hover:bg-fd-card"
+        >
+          View on GitHub
+          <ArrowUpRight className="h-3.5 w-3.5 opacity-70 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+        </Link>
+        <Link
+          href="/docs/architecture"
+          className="ml-1 inline-flex h-11 items-center text-[13px] text-fd-muted-foreground underline underline-offset-4 decoration-fd-border transition hover:text-fd-primary hover:decoration-fd-primary/60"
+        >
+          See the architecture diagram
+        </Link>
+      </div>
+    </section>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+
+const SPECS = [
+  {
+    n: '01',
+    tag: 'BASE',
+    title: 'ROS 2 differential drive',
+    body: 'LK-TECH MF5010 BLDCs over CAN at 1 Mbps. RPLIDAR A1M8 publishes 2D scans into Nav2. The whole stack runs on a Jetson Orin Nano with a 0.5 s cmd_vel watchdog as the secondary safety.',
+    stat: ['/cmd_vel', '50 Hz odom'],
+  },
+  {
+    n: '02',
+    tag: 'ARMS',
+    title: 'Two symmetric SO-101 arms',
+    body: 'Open hardware from TheRobotStudio — 6× Feetech STS3215 servos each, on half-duplex USB-TTL buses. Either arm can lead or follow. Calibration sidecars are saved and backed up on every write.',
+    stat: ['6 DoF × 2', 'in-browser calib'],
+  },
+  {
+    n: '03',
+    tag: 'HMI',
+    title: 'One browser, every loop closed',
+    body: 'A unified Next.js + FastAPI dashboard: joint sliders, pose presets, MJPEG feeds, leader↔follower teleop at 60 Hz, webcam pose-teleop with a SPACE dead-man, dataset recording — all behind a single E-STOP.',
+    stat: ['60 Hz teleop', '20 Hz telemetry'],
+  },
+];
+
+function SpecSheet() {
   return (
-    <div className="rounded-lg border border-fd-border bg-fd-card p-5">
-      <h3 className="mb-2 font-medium">{title}</h3>
-      <p className="text-sm text-fd-muted-foreground">{body}</p>
-    </div>
+    <section className="relative mx-auto w-full max-w-6xl px-6 pt-6 pb-24">
+      <header className="mb-10 flex items-baseline justify-between">
+        <span className="h-label">[ Spec Sheet · 03 ]</span>
+        <span className="h-mono text-[10px] text-fd-muted-foreground">
+          §01—03 / overview
+        </span>
+      </header>
+
+      <div className="h-rule mb-8" />
+
+      <ol className="grid gap-px overflow-hidden rounded-md border border-fd-border bg-fd-border md:grid-cols-3">
+        {SPECS.map((s) => (
+          <li
+            key={s.n}
+            className="group relative flex flex-col bg-fd-background p-7 transition hover:bg-fd-card"
+          >
+            <div className="flex items-baseline justify-between">
+              <span className="h-mono text-[11px] tracking-widest text-fd-primary">
+                [{s.n}]
+              </span>
+              <span className="h-label">{s.tag}</span>
+            </div>
+
+            <h3
+              className="mt-6 text-[1.55rem] leading-[1.1] text-fd-foreground h-display"
+            >
+              {s.title}
+            </h3>
+
+            <p className="mt-4 text-[0.95rem] leading-[1.55] text-fd-muted-foreground">
+              {s.body}
+            </p>
+
+            <ul className="mt-6 flex flex-wrap gap-x-4 gap-y-1 border-t border-fd-border pt-4">
+              {s.stat.map((k) => (
+                <li
+                  key={k}
+                  className="h-mono text-[10.5px] uppercase tracking-[0.14em] text-fd-muted-foreground"
+                >
+                  · {k}
+                </li>
+              ))}
+            </ul>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+
+const ROUTES: { label: string; href: string; hint: string }[] = [
+  { label: 'Architecture', href: '/docs/architecture', hint: 'one-screen mental model' },
+  { label: 'Bill of materials', href: '/docs/hardware/bom', hint: 'parts & sourcing' },
+  { label: 'Build', href: '/docs/hardware/build', hint: 'mechanical assembly' },
+  { label: 'Mobile base (ROS 2)', href: '/docs/base/overview', hint: 'bringup & drive' },
+  { label: 'Vision pipeline', href: '/docs/base/vision', hint: 'detection + seg + costmap' },
+  { label: 'LeRobot environment', href: '/docs/setup/lerobot-environment', hint: 'python tooling' },
+  { label: 'SO-101 arms', href: '/docs/setup/so101-arm', hint: 'calibrate & test' },
+  { label: 'HMI overview', href: '/docs/hmi/overview', hint: 'web frontend' },
+  { label: 'Calibration wizard', href: '/docs/hmi/calibration-wizard', hint: 'browser flow' },
+  { label: 'Leader ↔ follower teleop', href: '/docs/hmi/teleop', hint: '60 Hz mirror' },
+  { label: 'Human-pose teleop', href: '/docs/hmi/human-teleop', hint: 'webcam → joints' },
+  { label: 'Dataset collection', href: '/docs/data/dataset-collection', hint: 'record & push' },
+  { label: 'RunPod inference', href: '/docs/data/runpod-inference', hint: 'cloud GPU' },
+  { label: 'Jetson deployment', href: '/docs/deployment/jetson', hint: 'on-robot install' },
+  { label: 'Wi-Fi AP fallback', href: '/docs/deployment/wifi-ap', hint: 'HallerRobot SSID' },
+  { label: 'Troubleshooting', href: '/docs/troubleshooting', hint: 'when it lies to you' },
+];
+
+function RoutesIndex() {
+  return (
+    <section className="relative mx-auto w-full max-w-6xl px-6 pb-28">
+      <header className="mb-6 flex items-baseline justify-between">
+        <span className="h-label">[ Index ]</span>
+        <span className="h-mono text-[10px] text-fd-muted-foreground">
+          {ROUTES.length.toString().padStart(2, '0')} entries
+        </span>
+      </header>
+      <div className="h-rule mb-6" />
+
+      <ul className="divide-y divide-fd-border border-y border-fd-border">
+        {ROUTES.map((r, i) => (
+          <li key={r.href}>
+            <Link
+              href={r.href}
+              className="group flex items-baseline gap-4 py-3.5 transition hover:bg-fd-card hover:pl-2"
+            >
+              <span className="h-mono w-8 shrink-0 text-[11px] text-fd-muted-foreground">
+                {(i + 1).toString().padStart(2, '0')}
+              </span>
+              <span className="flex-1 text-[1rem] text-fd-foreground transition group-hover:text-fd-primary">
+                {r.label}
+              </span>
+              <span className="hidden sm:inline h-mono text-[10.5px] uppercase tracking-[0.14em] text-fd-muted-foreground">
+                {r.hint}
+              </span>
+              <ArrowUpRight className="h-3.5 w-3.5 -translate-x-1 opacity-0 transition group-hover:translate-x-0 group-hover:opacity-70" />
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────────────────── */
+
+function Footnote() {
+  return (
+    <section className="mx-auto w-full max-w-6xl px-6 pb-20">
+      <div className="h-rule mb-8" />
+      <div className="flex flex-wrap items-end justify-between gap-6">
+        <p className="max-w-xl text-sm leading-relaxed text-fd-muted-foreground">
+          Apache-2.0. The SO-101 mechanical design is licensed under its own
+          terms by{' '}
+          <Link
+            href="https://github.com/TheRobotStudio/SO-ARM100"
+            className="text-fd-foreground underline underline-offset-4 decoration-fd-border hover:text-fd-primary hover:decoration-fd-primary/60"
+          >
+            TheRobotStudio
+          </Link>
+          .
+        </p>
+        <p className="h-mono text-[10px] uppercase tracking-[0.18em] text-fd-muted-foreground">
+          Set in Fraunces · IBM Plex Sans · JetBrains Mono
+        </p>
+      </div>
+    </section>
   );
 }

website/app/docs/[[...slug]]/page.tsx

@@ -21,8 +21,21 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
   const MDX = page.data.body;
   const markdownUrl = getPageMarkdownUrl(page).url;
 
+  /* "§ HMI / Calibration" — section pip above the title.
+     Skips for the docs index where slugs is empty. */
+  const slugs = page.slugs;
+  const sectionLabel = formatSectionLabel(slugs);
+
   return (
     <DocsPage toc={page.data.toc} full={page.data.full}>
+      {sectionLabel && (
+        <div className="mb-3 flex items-center gap-2">
+          <span className="h-mono text-[10.5px] tracking-[0.18em] uppercase text-fd-primary">
+            §
+          </span>
+          <span className="h-label">{sectionLabel}</span>
+        </div>
+      )}
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription className="mb-0">{page.data.description}</DocsDescription>
       <div className="flex flex-row gap-2 items-center border-b pb-6">
@@ -35,7 +48,6 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
       <DocsBody>
         <MDX
           components={getMDXComponents({
-            // this allows you to link to other pages with relative file paths
             a: createRelativeLink(source, page),
           })}
         />
@@ -44,6 +56,22 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
   );
 }
 
+function formatSectionLabel(slugs: string[]): string | null {
+  /* Only render the label for nested pages — for top-level entries the H1
+     already shows the same word, so a "Architecture / Architecture" pair
+     would be noise. */
+  if (slugs.length < 2) return null;
+  const pretty = (s: string) =>
+    s
+      .replace(/-/g, ' ')
+      .replace(/\b\w/g, (c) => c.toUpperCase())
+      .replace(/Hmi/g, 'HMI')
+      .replace(/Ros/g, 'ROS')
+      .replace(/\bSo101\b/gi, 'SO-101')
+      .replace(/\bBom\b/gi, 'BOM');
+  return pretty(slugs[0]);
+}
+
 export async function generateStaticParams() {
   return source.generateParams();
 }