diff --git a/apps/ui/app/chat/chat-preview.tsx b/apps/ui/app/chat/chat-preview.tsx
index 73c153a0a..072a7243a 100644
--- a/apps/ui/app/chat/chat-preview.tsx
+++ b/apps/ui/app/chat/chat-preview.tsx
@@ -122,7 +122,13 @@ const DIRECT_REPLIES = [
   "Perfect. Let’s catch up this afternoon.",
 ];
 
-export function ChatPreview({ direct = false }: { direct?: boolean }) {
+export function ChatPreview({
+  className,
+  direct = false,
+}: {
+  className?: string;
+  direct?: boolean;
+}) {
   const previewId = useId();
   const initialMessages = direct ? DIRECT_MESSAGES : GROUP_MESSAGES;
   const members: MemberId[] = direct ? ["maya"] : ["maya", "jordan", "alex"];
@@ -379,7 +385,10 @@ export function ChatPreview({ direct = false }: { direct?: boolean }) {
           cancelReply();
         }
       }}
-      className="flex h-144 min-w-0 flex-col overflow-hidden rounded-2xl border bg-popover shadow-lg/5"
+      className={cn(
+        "flex h-144 min-w-0 flex-col overflow-hidden rounded-2xl border bg-popover shadow-lg/5",
+        className,
+      )}
     >
       <div className="flex shrink-0 items-center justify-between gap-4 px-4 py-3.5">
         <div className="flex items-center gap-3">
diff --git a/apps/ui/app/chat/chat-showcase.tsx b/apps/ui/app/chat/chat-showcase.tsx
index 2210ecbab..15977a826 100644
--- a/apps/ui/app/chat/chat-showcase.tsx
+++ b/apps/ui/app/chat/chat-showcase.tsx
@@ -1,5 +1,9 @@
 "use client";
 
+import {
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@coss/ui/shared/page-header";
 import {
   ArrowRightIcon,
   ArrowUpRightIcon,
@@ -15,11 +19,12 @@ import { useCopyToClipboard } from "@/registry/default/hooks/use-copy-to-clipboa
 import { Badge } from "@/registry/default/ui/badge";
 import { Button } from "@/registry/default/ui/button";
 import { DrawerTrigger } from "@/registry/default/ui/drawer";
-import { Tabs, TabsList, TabsPanel, TabsTab } from "@/registry/default/ui/tabs";
+import { Tabs, TabsPanel, TabsPrimitive } from "@/registry/default/ui/tabs";
 import { ChatFeatures } from "./chat-features";
 import { ChatLayouts } from "./chat-layouts";
 import { ChatPreview } from "./chat-preview";
 import { ChatStatesSection } from "./chat-states-section";
+import { PageHero } from "@/components/page-hero";
 
 const COMPONENT_MAP = [
   { area: "Conversation", components: ["ChatConversation", "useChatScroll"] },
@@ -108,70 +113,77 @@ export function ChatShowcase() {
     <ChatDemo
       renderTriggers={(select) => (
         <>
-          <section className="container grid items-center gap-12 py-14 md:grid-cols-2 md:gap-14 md:py-20 lg:gap-24">
-            <div className="flex min-w-0 flex-col items-start">
-              <Badge
-                variant="outline"
-                className="mb-6 h-7 gap-1.5 rounded-full px-2.5 text-xs shadow-xs/5 sm:h-7"
-              >
-                <MessagesSquareIcon aria-hidden="true" className="size-3.5" />
-                Chat UI
-              </Badge>
-              <h1 className="font-bold font-heading text-5xl leading-none tracking-tight lg:text-6xl xl:text-7xl">
-                Make room
-                <br />
-                for conversation.
-              </h1>
-              <p className="mt-6 max-w-md text-pretty text-lg text-muted-foreground">
-                Chat components for React with replies, reactions, mentions, and
-                delivery states built in. Copy the source and make it yours.
-              </p>
-              <div className="mt-8 flex flex-wrap gap-2.5">
-                <DrawerTrigger
-                  render={<Button size="lg" />}
-                  onClick={() => select("conversation")}
-                >
-                  Open the full demo
-                  <ArrowUpRightIcon aria-hidden="true" />
-                </DrawerTrigger>
-                <Button
-                  size="lg"
-                  variant="outline"
-                  render={<Link href="/docs/chat" />}
-                >
-                  Read the docs
-                </Button>
-              </div>
-              <div className="mt-5">
-                <InstallCommand command="npx shadcn@latest add @coss/chat" />
-              </div>
-              <p className="mt-8 text-muted-foreground text-xs">
-                Built with Base UI, Tailwind CSS, and Motion
-              </p>
-            </div>
-            <div className="mx-auto w-full max-w-md">
-              <Tabs defaultValue="direct" className="gap-5">
-                <TabsList
+          <PageHero
+            aside={
+              <Tabs defaultValue="direct" className="w-full max-w-md">
+                <TabsPrimitive.List
                   aria-label="Conversation type"
-                  className="self-center"
+                  className="absolute right-5 bottom-4 flex gap-2 font-mono text-xs leading-relaxed"
                 >
-                  <TabsTab value="direct">Direct message</TabsTab>
-                  <TabsTab value="group">Group chat</TabsTab>
-                </TabsList>
-                <TabsPanel value="direct">
-                  <ChatPreview direct />
+                  <TabsPrimitive.Tab
+                    className="cursor-pointer rounded-sm text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring data-active:text-foreground"
+                    value="direct"
+                  >
+                    direct message
+                  </TabsPrimitive.Tab>
+                  <span aria-hidden="true" className="text-muted-foreground/48">
+                    ·
+                  </span>
+                  <TabsPrimitive.Tab
+                    className="cursor-pointer rounded-sm text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring data-active:text-foreground"
+                    value="group"
+                  >
+                    group chat
+                  </TabsPrimitive.Tab>
+                </TabsPrimitive.List>
+                <TabsPanel className="relative" value="direct">
+                  <ChatPreview className="h-120" direct />
                 </TabsPanel>
-                <TabsPanel value="group">
-                  <ChatPreview />
+                <TabsPanel className="relative" value="group">
+                  <ChatPreview className="h-120" />
                 </TabsPanel>
               </Tabs>
+            }
+          >
+            <Badge
+              variant="outline"
+              className="h-7 gap-1.5 rounded-full px-2.5 text-xs shadow-xs/5 sm:h-7"
+            >
+              <MessagesSquareIcon aria-hidden="true" className="size-3.5" />
+              Chat UI
+            </Badge>
+            <PageHeaderHeading>
+              Make room
+              <br />
+              for conversation.
+            </PageHeaderHeading>
+            <PageHeaderDescription className="max-w-xl text-pretty">
+              Chat components for React with replies, reactions, mentions, and
+              delivery states built in. Copy the source and make it yours.
+            </PageHeaderDescription>
+            <div className="mt-2 flex flex-wrap gap-2">
+              <DrawerTrigger
+                render={<Button size="lg" />}
+                onClick={() => select("conversation")}
+              >
+                Open the full demo
+                <ArrowUpRightIcon aria-hidden="true" />
+              </DrawerTrigger>
+              <Button
+                size="lg"
+                variant="outline"
+                render={<Link href="/docs/chat" />}
+              >
+                Read the docs
+              </Button>
             </div>
-          </section>
+            <InstallCommand command="npx shadcn@latest add @coss/chat" />
+            <p className="text-muted-foreground text-xs">
+              Built with Base UI, Tailwind CSS, and Motion
+            </p>
+          </PageHero>
 
-          <section
-            aria-labelledby="chat-features"
-            className="border-t bg-muted/24"
-          >
+          <section aria-labelledby="chat-features" className="bg-muted/24">
             <div className="container py-14 md:py-20">
               <SectionHeading
                 id="chat-features"
diff --git a/apps/ui/app/not-found.tsx b/apps/ui/app/not-found.tsx
index 5dd71547a..e451d0584 100644
--- a/apps/ui/app/not-found.tsx
+++ b/apps/ui/app/not-found.tsx
@@ -1,5 +1,4 @@
 import {
-  PageHeader,
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@coss/ui/shared/page-header";
@@ -7,38 +6,36 @@ import { RiArrowLeftLine } from "@remixicon/react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { Button } from "@/registry/default/ui/button";
+import { PageHero } from "@/components/page-hero";
 
 export const metadata: Metadata = {
   description:
-    "The page you're looking for doesn't exist or may have been moved.",
+    "The page you’re looking for doesn’t exist or may have been moved.",
   title: "Page Not Found",
 };
 
 export default function NotFound() {
   return (
-    <div className="container w-full">
-      <PageHeader>
-        <PageHeaderHeading>Page Not Found</PageHeaderHeading>
-        <PageHeaderDescription>
-          The page you&apos;re looking for doesn&apos;t exist or may have been
-          moved.
-        </PageHeaderDescription>
-        <div className="mt-4">
-          <Button
-            className="group"
-            render={
-              <Link href="/">
-                <RiArrowLeftLine
-                  aria-hidden="true"
-                  className="-ms-1 opacity-60 transition-transform group-hover:-translate-x-0.5"
-                />
-                Back to Home
-              </Link>
-            }
-            size="lg"
-          />
-        </div>
-      </PageHeader>
-    </div>
+    <PageHero figure="plug">
+      <PageHeaderHeading>Page Not Found</PageHeaderHeading>
+      <PageHeaderDescription>
+        The page you’re looking for doesn’t exist or may have been moved.
+      </PageHeaderDescription>
+      <div className="mt-2">
+        <Button
+          className="group"
+          render={
+            <Link href="/">
+              <RiArrowLeftLine
+                aria-hidden="true"
+                className="-ms-1 opacity-60 transition-transform group-hover:-translate-x-0.5"
+              />
+              Back to Home
+            </Link>
+          }
+          size="lg"
+        />
+      </div>
+    </PageHero>
   );
 }
diff --git a/apps/ui/app/page.tsx b/apps/ui/app/page.tsx
index 4e706d5ba..b5fc25770 100644
--- a/apps/ui/app/page.tsx
+++ b/apps/ui/app/page.tsx
@@ -1,5 +1,4 @@
 import {
-  PageHeader,
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@coss/ui/shared/page-header";
@@ -18,6 +17,7 @@ import {
 } from "@/registry/default/ui/card";
 import { particles } from "@/registry/registry-particles";
 import { getCategoryThumbnail } from "@/components/category-thumbnails";
+import { PageHero } from "@/components/page-hero";
 import { categories } from "@/config/categories";
 import { PAGES_NEW } from "@/lib/docs";
 
@@ -32,43 +32,35 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <>
+      <PageHero figure="settle">
+        <PageHeaderHeading>
+          A new, modern UI component library built on top of Base UI.
+        </PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
+        <div className="mt-2 flex gap-2">
+          <Button render={<Link href="/docs" />} size="lg">
+            Get started
+          </Button>
+          <Button
+            render={<Link href="/particles" />}
+            size="lg"
+            variant="outline"
+          >
+            Browse {particleCount} particles
+          </Button>
+        </div>
+      </PageHero>
       <div className="container w-full">
-        <PageHeader className="max-w-2xl *:items-start *:text-left">
-          <PageHeaderHeading>
-            A new, modern UI component library built on top of Base UI.
-          </PageHeaderHeading>
-          <PageHeaderDescription>{description}</PageHeaderDescription>
-          <div className="mt-2 flex gap-2">
-            <Button render={<Link href="/docs" />} size="lg">
-              Get started
-            </Button>
-            <Button
-              render={<Link href="/particles" />}
-              size="lg"
-              variant="outline"
-            >
-              Browse {particleCount} particles
-            </Button>
-          </div>
-        </PageHeader>
-      </div>
-      <div className="relative before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border/64">
-        <div
-          aria-hidden="true"
-          className="container pointer-events-none absolute inset-0 z-50 before:absolute before:top-[-3.5px] before:-left-[11.5px] before:z-1 before:-ml-1 before:size-2 before:rounded-[2px] before:border before:border-border before:bg-popover before:bg-clip-padding before:shadow-xs after:absolute after:top-[-3.5px] after:-right-[11.5px] after:z-1 after:-mr-1 after:size-2 after:rounded-[2px] after:border after:border-border after:bg-background after:bg-clip-padding after:shadow-xs dark:after:bg-clip-border dark:before:bg-clip-border"
-        />
-        <div className="container w-full">
-          <div className="grid gap-6 pt-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8 xl:grid-cols-4">
-            {categories.map((category) => (
-              <CategoryCard
-                description={category.description}
-                key={category.slug}
-                name={category.name}
-                slug={category.slug}
-                thumbnail={getCategoryThumbnail(category.slug)}
-              />
-            ))}
-          </div>
+        <div className="grid gap-6 pt-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8 xl:grid-cols-4">
+          {categories.map((category) => (
+            <CategoryCard
+              description={category.description}
+              key={category.slug}
+              name={category.name}
+              slug={category.slug}
+              thumbnail={getCategoryThumbnail(category.slug)}
+            />
+          ))}
         </div>
       </div>
       <SiteFooter />
diff --git a/apps/ui/app/particles/page.tsx b/apps/ui/app/particles/page.tsx
index e6a41b197..88dadfddc 100644
--- a/apps/ui/app/particles/page.tsx
+++ b/apps/ui/app/particles/page.tsx
@@ -1,5 +1,4 @@
 import {
-  PageHeader,
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@coss/ui/shared/page-header";
@@ -9,6 +8,7 @@ import { isValidRegistryCategory } from "@/registry/registry-categories";
 import { particles } from "@/registry/registry-particles";
 import { ParticlesDisplay } from "./particles-display";
 import SearchContainer from "./search-container";
+import { PageHero } from "@/components/page-hero";
 
 const particleCount = particles.length;
 
@@ -58,19 +58,21 @@ export default function Page({
   searchParams: Promise<{ tags?: string }>;
 }) {
   return (
-    <div className="container w-full">
-      <PageHeader className="*:pb-8!">
+    <>
+      <PageHero figure="riffle">
         <PageHeaderHeading>Browse Particles</PageHeaderHeading>
         <PageHeaderDescription className="max-w-2xl">
           {description}
         </PageHeaderDescription>
-      </PageHeader>
-      <Suspense>
-        <SearchContainer />
-      </Suspense>
-      <Suspense>
-        <ParticlesDisplayServer searchParams={searchParams} />
-      </Suspense>
-    </div>
+        <Suspense>
+          <SearchContainer />
+        </Suspense>
+      </PageHero>
+      <div className="container w-full pt-8 md:pt-12">
+        <Suspense>
+          <ParticlesDisplayServer searchParams={searchParams} />
+        </Suspense>
+      </div>
+    </>
   );
 }
diff --git a/apps/ui/app/particles/search-container.tsx b/apps/ui/app/particles/search-container.tsx
index ce9655fea..bc160b2c7 100644
--- a/apps/ui/app/particles/search-container.tsx
+++ b/apps/ui/app/particles/search-container.tsx
@@ -50,7 +50,7 @@ export default function SearchContainer() {
   );
 
   return (
-    <div className="mb-8 md:mb-12 lg:mb-16">
+    <div className="mt-2 w-full">
       <SearchField
         items={searchItems}
         onItemsChange={updateSelectedItems}
diff --git a/apps/ui/app/particles/search-field.tsx b/apps/ui/app/particles/search-field.tsx
index eaa3e0673..bfcc9a3ed 100644
--- a/apps/ui/app/particles/search-field.tsx
+++ b/apps/ui/app/particles/search-field.tsx
@@ -132,7 +132,7 @@ export default function SearchField({
   };
 
   return (
-    <div className="mx-auto max-w-2xl">
+    <div className="w-full max-w-xl">
       <Combobox
         aria-label="Filter particles"
         autoHighlight
diff --git a/apps/ui/components/hairline/hairline-figure.tsx b/apps/ui/components/hairline/hairline-figure.tsx
new file mode 100644
index 000000000..93bc95f1e
--- /dev/null
+++ b/apps/ui/components/hairline/hairline-figure.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { Plug, Riffle, Settle } from "@lucasmarkes/hairline/react";
+import { type CSSProperties, useState } from "react";
+import { cn } from "@/lib/utils";
+
+const figures = { plug: Plug, riffle: Riffle, settle: Settle };
+
+export type HairlineFigureName = keyof typeof figures;
+
+// Hairline's palette, mapped onto the site's tokens. The plate is the page
+// background, since plates are opaque and must match what they sit on.
+const palette = {
+  "--hairline-edge":
+    "color-mix(in oklab, var(--muted-foreground) 72%, var(--sidebar))",
+  "--hairline-hi": "var(--foreground)",
+  "--hairline-lo":
+    "color-mix(in oklab, var(--muted-foreground) 24%, var(--sidebar))",
+  "--hairline-mid":
+    "color-mix(in oklab, var(--muted-foreground) 50%, var(--sidebar))",
+  "--hairline-plate": "var(--sidebar)",
+} as CSSProperties;
+
+/** A figure with its read-out: what the pointer is over, or "rest". */
+export function HairlineFigureReadout({
+  figure,
+  className,
+  figureClassName,
+}: {
+  figure: HairlineFigureName;
+  className?: string;
+  figureClassName?: string;
+}) {
+  const [text, setText] = useState("rest");
+  const Figure = figures[figure];
+  return (
+    <>
+      <Figure
+        className={cn("w-full", figureClassName)}
+        onRead={(value) => setText(value || "rest")}
+        style={palette}
+      />
+      <span aria-hidden="true" className={className}>
+        {text}
+      </span>
+    </>
+  );
+}
diff --git a/apps/ui/components/page-hero.tsx b/apps/ui/components/page-hero.tsx
new file mode 100644
index 000000000..739007f46
--- /dev/null
+++ b/apps/ui/components/page-hero.tsx
@@ -0,0 +1,102 @@
+import type { CSSProperties, ReactNode } from "react";
+import {
+  type HairlineFigureName,
+  HairlineFigureReadout,
+} from "@/components/hairline/hairline-figure";
+import { cn } from "@/lib/utils";
+
+// A drafting grid that reaches under the copy and fades out toward the left.
+const grid = {
+  backgroundImage:
+    "radial-gradient(color-mix(in srgb, var(--foreground) 16%, transparent) 1px, transparent 1.3px)",
+  backgroundPosition: "-1px -1px",
+  backgroundSize: "24px 24px",
+  maskImage: "linear-gradient(to left, #000 35%, transparent)",
+} as CSSProperties;
+
+function RegistrationMark({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn("absolute size-2.25 text-muted-foreground/48", className)}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 9 9"
+    >
+      <path d="M4.5 0v9M0 4.5h9" />
+    </svg>
+  );
+}
+
+/** The hairline under a hero, with squares where it crosses the side rails. */
+export function HeroDivider() {
+  return (
+    <div className="relative before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border/64">
+      <div
+        aria-hidden="true"
+        className="container pointer-events-none absolute inset-0 z-50 before:absolute before:top-[-3.5px] before:-left-[11.5px] before:z-1 before:-ml-1 before:size-2 before:rounded-[2px] before:border before:border-border before:bg-popover before:bg-clip-padding before:shadow-xs after:absolute after:top-[-3.5px] after:-right-[11.5px] after:z-1 after:-mr-1 after:size-2 after:rounded-[2px] after:border after:border-border after:bg-background after:bg-clip-padding after:shadow-xs dark:after:bg-clip-border dark:before:bg-clip-border"
+      />
+    </div>
+  );
+}
+
+/**
+ * A page's hero: the copy on the left and, from lg up, a side cell on the
+ * right that runs to the rail and holds a hairline figure on a drafting grid,
+ * or whatever `aside` gives it in the figure's place. The grid is absolutely
+ * positioned, so an aside needs a positioned box (`relative`) to sit above it.
+ */
+export function PageHero({
+  aside,
+  children,
+  className,
+  figure,
+}: {
+  aside?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  figure?: HairlineFigureName;
+}) {
+  return (
+    <>
+      <section className={cn("container", className)}>
+        <div className="grid lg:min-h-120 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]">
+          <div className="relative z-10 flex min-w-0 flex-col items-start justify-center gap-2 py-8 md:py-12 lg:py-16 lg:pe-12 xl:gap-4">
+            {children}
+          </div>
+          {/* A figure is decoration and only shows from lg up; an aside stacks under the copy below lg. */}
+          <div
+            className={cn(
+              "relative items-center justify-center border-border/64 lg:-me-9 lg:px-6 lg:py-10",
+              figure
+                ? "hidden lg:flex"
+                : "-mx-4 flex border-t px-4 pt-10 pb-14 sm:-mx-6 sm:px-6 lg:mx-0 lg:border-t-0 lg:pb-12",
+            )}
+          >
+            <div
+              aria-hidden="true"
+              className="absolute inset-y-0 right-0 left-0 lg:-left-48"
+              style={grid}
+            />
+            {figure && (
+              <>
+                <RegistrationMark className="top-3 right-3" />
+                <RegistrationMark className="bottom-3 left-1/2" />
+              </>
+            )}
+            {figure ? (
+              <HairlineFigureReadout
+                className="absolute right-5 bottom-4 font-mono text-muted-foreground text-xs"
+                figure={figure}
+                figureClassName="relative max-w-140"
+              />
+            ) : (
+              aside
+            )}
+          </div>
+        </div>
+      </section>
+      <HeroDivider />
+    </>
+  );
+}
diff --git a/apps/ui/components/site-header.tsx b/apps/ui/components/site-header.tsx
index 52cf2e81d..51874e247 100644
--- a/apps/ui/components/site-header.tsx
+++ b/apps/ui/components/site-header.tsx
@@ -12,6 +12,7 @@ export function SiteHeader() {
   return (
     <WorkspaceSiteHeader
       currentProduct="ui"
+      homeHref="/"
       mobileNav={
         <MobileNav
           className="flex lg:hidden"
diff --git a/apps/ui/package.json b/apps/ui/package.json
index c5163683f..9ea999e54 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -5,6 +5,7 @@
     "@daypicker/react": "10.0.1",
     "@hugeicons/core-free-icons": "^2.0.0",
     "@hugeicons/react": "^1.1.1",
+    "@lucasmarkes/hairline": "0.5.1",
     "@remixicon/react": "^4.7.0",
     "@tanstack/react-table": "^9.2.4",
     "class-variance-authority": "^0.7.1",
diff --git a/bun.lock b/bun.lock
index d64d45238..9683653ba 100644
--- a/bun.lock
+++ b/bun.lock
@@ -109,6 +109,7 @@
         "@daypicker/react": "10.0.1",
         "@hugeicons/core-free-icons": "^2.0.0",
         "@hugeicons/react": "^1.1.1",
+        "@lucasmarkes/hairline": "0.5.1",
         "@remixicon/react": "^4.7.0",
         "@tanstack/react-table": "^9.2.4",
         "class-variance-authority": "^0.7.1",
@@ -210,6 +211,9 @@
       },
     },
   },
+  "patchedDependencies": {
+    "@lucasmarkes/hairline@0.5.1": "patches/@lucasmarkes%2Fhairline@0.5.1.patch",
+  },
   "packages": {
     "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
 
@@ -503,6 +507,8 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.29", "", { "dependencies": { "@jridgewell/resolve-uri": "3.1.2", "@jridgewell/sourcemap-codec": "1.5.4" } }, "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ=="],
 
+    "@lucasmarkes/hairline": ["@lucasmarkes/hairline@0.5.1", "", { "peerDependencies": { "react": ">=18" }, "optionalPeers": ["react"] }, "sha512-zjY3bdMC3As/+enKitZ1X+D1HjpesQiAKzG1sbCFsOrb5xIuJEoepkJTBIO4jmFh6JXOQlGGylhV71nr9ipNpQ=="],
+
     "@mdx-js/mdx": ["@mdx-js/mdx@3.1.1", "", { "dependencies": { "@types/estree": "1.0.8", "@types/estree-jsx": "1.0.5", "@types/hast": "3.0.4", "@types/mdx": "2.0.13", "acorn": "8.15.0", "collapse-white-space": "2.1.0", "devlop": "1.1.0", "estree-util-is-identifier-name": "3.0.0", "estree-util-scope": "1.0.0", "estree-walker": "3.0.3", "hast-util-to-jsx-runtime": "2.3.6", "markdown-extensions": "2.0.0", "recma-build-jsx": "1.0.0", "recma-jsx": "1.0.1", "recma-stringify": "1.0.0", "rehype-recma": "1.0.0", "remark-mdx": "3.1.1", "remark-parse": "11.0.0", "remark-rehype": "11.1.2", "source-map": "0.7.6", "unified": "11.0.5", "unist-util-position-from-estree": "2.0.0", "unist-util-stringify-position": "4.0.0", "unist-util-visit": "5.0.0", "vfile": "6.0.3" } }, "sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ=="],
 
     "@modelcontextprotocol/sdk": ["@modelcontextprotocol/sdk@1.18.1", "", { "dependencies": { "ajv": "6.12.6", "content-type": "1.0.5", "cors": "2.8.5", "cross-spawn": "7.0.6", "eventsource": "3.0.7", "eventsource-parser": "3.0.6", "express": "5.1.0", "express-rate-limit": "7.5.1", "pkce-challenge": "5.0.0", "raw-body": "3.0.1", "zod": "3.25.76", "zod-to-json-schema": "3.24.6" } }, "sha512-d//GE8/Yh7aC3e7p+kZG8JqqEAwwDUmAfvH1quogtbk+ksS6E0RR6toKKESPYYZVre0meqkJb27zb+dhqE9Sgw=="],
diff --git a/package.json b/package.json
index eb9902dca..43ef1a2aa 100644
--- a/package.json
+++ b/package.json
@@ -29,5 +29,8 @@
     "apps/*",
     "apps/examples/*",
     "packages/*"
-  ]
+  ],
+  "patchedDependencies": {
+    "@lucasmarkes/hairline@0.5.1": "patches/@lucasmarkes%2Fhairline@0.5.1.patch"
+  }
 }
diff --git a/packages/ui/src/shared/page-header.tsx b/packages/ui/src/shared/page-header.tsx
index 35cd3dbd1..6628af4e0 100644
--- a/packages/ui/src/shared/page-header.tsx
+++ b/packages/ui/src/shared/page-header.tsx
@@ -20,7 +20,10 @@ function PageHeaderHeading({
 }: React.ComponentProps<"h1">) {
   return (
     <h1
-      className={cn("font-bold font-heading text-4xl lg:text-5xl", className)}
+      className={cn(
+        "text-balance font-bold font-heading text-[clamp(2.25rem,1.5rem+2.6vw,4rem)] leading-none [font-variation-settings:'GEOM'_50]",
+        className,
+      )}
       {...props}
     />
   );
diff --git a/packages/ui/src/shared/site-header.tsx b/packages/ui/src/shared/site-header.tsx
index cba7161ab..64a8f2042 100644
--- a/packages/ui/src/shared/site-header.tsx
+++ b/packages/ui/src/shared/site-header.tsx
@@ -9,12 +9,15 @@ export function SiteHeader({
   children,
   currentProduct,
   github,
+  homeHref,
 }: {
   mobileNav?: React.ReactNode;
   children?: React.ReactNode;
   currentProduct?: string;
   /** The product's own repository for the GitHub link and its stars. */
   github?: { repo: string; href: string };
+  /** Where the logo goes, inside this app; the coss.com gateway when left out. */
+  homeHref?: string;
 }) {
   const gatewayOrigin = process.env.NEXT_PUBLIC_COSS_URL || "";
   const gatewayHome = gatewayOrigin ? `${gatewayOrigin}/` : "/";
@@ -25,19 +28,35 @@ export function SiteHeader({
       <div className="container relative flex h-(--header-height) w-full items-center justify-between gap-2 px-4 sm:px-6">
         {mobileNav}
         <div className="flex shrink-0 items-center gap-1.5 font-bold font-heading text-[1.375em] [font-variation-settings:'GEOM'_50,'opsz'_32] sm:text-2xl">
-          {isExternal ? (
-            <a aria-label="Home" href={gatewayHome}>
-              coss.com
-            </a>
-          ) : (
-            <Link aria-label="Home" href={gatewayHome}>
+          {homeHref ? (
+            <Link
+              aria-label="Home"
+              className="flex items-center gap-1.5"
+              href={homeHref}
+            >
               coss.com
+              <ProductLabel
+                currentProduct={currentProduct}
+                items={siteConfig.products}
+              />
             </Link>
+          ) : (
+            <>
+              {isExternal ? (
+                <a aria-label="Home" href={gatewayHome}>
+                  coss.com
+                </a>
+              ) : (
+                <Link aria-label="Home" href={gatewayHome}>
+                  coss.com
+                </Link>
+              )}
+              <ProductLabel
+                currentProduct={currentProduct}
+                items={siteConfig.products}
+              />
+            </>
           )}
-          <ProductLabel
-            currentProduct={currentProduct}
-            items={siteConfig.products}
-          />
         </div>
         <div className="ms-auto flex items-center gap-2 md:flex-1 md:justify-end">
           {children}
diff --git a/patches/@lucasmarkes%2Fhairline@0.5.1.patch b/patches/@lucasmarkes%2Fhairline@0.5.1.patch
new file mode 100644
index 000000000..14e66a170
--- /dev/null
+++ b/patches/@lucasmarkes%2Fhairline@0.5.1.patch
@@ -0,0 +1,14 @@
+diff --git a/dist/index.js b/dist/index.js
+index f6cef05016c9d1e6be80a4dd06e232797baf3330..a987bd3d384c38e10159cf065bfb1382e94758ad 100644
+--- a/dist/index.js
++++ b/dist/index.js
+@@ -4525,7 +4525,8 @@ var mount26 = ({ stage, svg, read }, value) => {
+     if (key === tl.key) return;
+     tl.key = key;
+     const r = turned(p.x, p.y, HALF2, 3.6, p.a);
+-    put(tl.el, slab3(P, front2, r, inset(C, r, 1), p.z, p.z + TH5));
++    // patched: a concentric lip; inset() overshoots the tile at some turns
++    put(tl.el, slab3(P, front2, r, turned(p.x, p.y, HALF2 - 1.2, 2.4, p.a), p.z, p.z + TH5));
+   }
+   let order2 = "";
+   function paintOrder2() {