From b7058d4b310a48b19c3f72484cc10d667cb75e19 Mon Sep 17 00:00:00 2001
From: Cinnnnnnndy <wangxindi0126@outlook.com>
Date: Tue, 13 Oct 2026 17:27:40 +0800
Subject: [PATCH 1/6] feat(ui): Add the mobile component set and retune brand
 motion

Add MobileAvatar, MobileCheckbox, MobileRadioGroup, MobileSelect,
MobileStepper, MobileSwitch, MobileTabBar, MobileTag, and MobileToolbar,
each with its contract, styles and catalog entry, so the mobile surface
reaches the same coverage as the desktop kit. Export them from the mobile
entry point, extend the registry types, and cover the catalog with the
mobile, registry and consistency tests.

Retune the brand flow animation: shorter cycle, per-strand stagger, and a
comet-shaped highlight whose opacity ramps along the strand instead of
cutting a hole in the ribbon.

Co-authored-by: OpenBitFun <318544290+bitfun-ai@users.noreply.github.com>
---
 .../ui/src/brand/OpenBitFunBrandMotion.tsx    |  52 ++++-
 .../packages/ui/src/brand/brand.module.css    |  17 +-
 design-system/packages/ui/src/mobile.ts       |  50 +++++
 .../mobile/MobileAvatar/MobileAvatar.meta.ts  |  36 ++++
 .../MobileAvatar/MobileAvatar.module.css      |  22 ++
 .../src/mobile/MobileAvatar/MobileAvatar.tsx  |  68 +++++++
 .../ui/src/mobile/MobileAvatar/index.ts       |   7 +
 .../MobileCheckbox/MobileCheckbox.meta.ts     |  42 ++++
 .../MobileCheckbox/MobileCheckbox.module.css  |  30 +++
 .../mobile/MobileCheckbox/MobileCheckbox.tsx  | 104 ++++++++++
 .../ui/src/mobile/MobileCheckbox/index.ts     |   5 +
 .../MobileDisclosure/MobileDisclosure.meta.ts |   2 +-
 .../MobileDisclosure.module.css               |   4 +
 .../MobileRadioGroup/MobileRadioGroup.meta.ts |  39 ++++
 .../MobileRadioGroup.module.css               |  39 ++++
 .../MobileRadioGroup/MobileRadioGroup.tsx     | 102 ++++++++++
 .../ui/src/mobile/MobileRadioGroup/index.ts   |   6 +
 .../MobileSegmentedControl.meta.ts            |   2 +-
 .../MobileSegmentedControl.module.css         |   8 +-
 .../mobile/MobileSelect/MobileSelect.meta.ts  |  43 ++++
 .../MobileSelect/MobileSelect.module.css      |  27 +++
 .../src/mobile/MobileSelect/MobileSelect.tsx  | 124 ++++++++++++
 .../ui/src/mobile/MobileSelect/index.ts       |   6 +
 .../MobileStepper/MobileStepper.meta.ts       |  44 ++++
 .../MobileStepper/MobileStepper.module.css    |  35 ++++
 .../mobile/MobileStepper/MobileStepper.tsx    | 117 +++++++++++
 .../ui/src/mobile/MobileStepper/index.ts      |   1 +
 .../mobile/MobileSwitch/MobileSwitch.meta.ts  |  38 ++++
 .../MobileSwitch/MobileSwitch.module.css      |  29 +++
 .../src/mobile/MobileSwitch/MobileSwitch.tsx  |  84 ++++++++
 .../ui/src/mobile/MobileSwitch/index.ts       |   5 +
 .../mobile/MobileTabBar/MobileTabBar.meta.ts  |  34 ++++
 .../MobileTabBar/MobileTabBar.module.css      |  31 +++
 .../src/mobile/MobileTabBar/MobileTabBar.tsx  |  82 ++++++++
 .../ui/src/mobile/MobileTabBar/index.ts       |   6 +
 .../ui/src/mobile/MobileTag/MobileTag.meta.ts |  38 ++++
 .../src/mobile/MobileTag/MobileTag.module.css |  21 ++
 .../ui/src/mobile/MobileTag/MobileTag.tsx     |  55 +++++
 .../packages/ui/src/mobile/MobileTag/index.ts |   6 +
 .../MobileToolbar/MobileToolbar.meta.ts       |  25 +++
 .../MobileToolbar/MobileToolbar.module.css    |  11 +
 .../mobile/MobileToolbar/MobileToolbar.tsx    |  52 +++++
 .../ui/src/mobile/MobileToolbar/index.ts      |   5 +
 design-system/packages/ui/src/registry.ts     |  47 ++++-
 .../packages/ui/src/registry.types.ts         |   7 +
 .../packages/ui/tests/consistency.test.mjs    | 191 ++++++++++++++++++
 .../packages/ui/tests/mobile.test.mjs         |  92 +++++++++
 .../packages/ui/tests/registry.test.mjs       |   9 +
 48 files changed, 1889 insertions(+), 11 deletions(-)
 create mode 100644 design-system/packages/ui/src/mobile/MobileAvatar/MobileAvatar.meta.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileAvatar/MobileAvatar.module.css
 create mode 100644 design-system/packages/ui/src/mobile/MobileAvatar/MobileAvatar.tsx
 create mode 100644 design-system/packages/ui/src/mobile/MobileAvatar/index.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileCheckbox/MobileCheckbox.meta.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileCheckbox/MobileCheckbox.module.css
 create mode 100644 design-system/packages/ui/src/mobile/MobileCheckbox/MobileCheckbox.tsx
 create mode 100644 design-system/packages/ui/src/mobile/MobileCheckbox/index.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileRadioGroup/MobileRadioGroup.meta.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileRadioGroup/MobileRadioGroup.module.css
 create mode 100644 design-system/packages/ui/src/mobile/MobileRadioGroup/MobileRadioGroup.tsx
 create mode 100644 design-system/packages/ui/src/mobile/MobileRadioGroup/index.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileSelect/MobileSelect.meta.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileSelect/MobileSelect.module.css
 create mode 100644 design-system/packages/ui/src/mobile/MobileSelect/MobileSelect.tsx
 create mode 100644 design-system/packages/ui/src/mobile/MobileSelect/index.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileStepper/MobileStepper.meta.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileStepper/MobileStepper.module.css
 create mode 100644 design-system/packages/ui/src/mobile/MobileStepper/MobileStepper.tsx
 create mode 100644 design-system/packages/ui/src/mobile/MobileStepper/index.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileSwitch/MobileSwitch.meta.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileSwitch/MobileSwitch.module.css
 create mode 100644 design-system/packages/ui/src/mobile/MobileSwitch/MobileSwitch.tsx
 create mode 100644 design-system/packages/ui/src/mobile/MobileSwitch/index.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileTabBar/MobileTabBar.meta.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileTabBar/MobileTabBar.module.css
 create mode 100644 design-system/packages/ui/src/mobile/MobileTabBar/MobileTabBar.tsx
 create mode 100644 design-system/packages/ui/src/mobile/MobileTabBar/index.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileTag/MobileTag.meta.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileTag/MobileTag.module.css
 create mode 100644 design-system/packages/ui/src/mobile/MobileTag/MobileTag.tsx
 create mode 100644 design-system/packages/ui/src/mobile/MobileTag/index.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileToolbar/MobileToolbar.meta.ts
 create mode 100644 design-system/packages/ui/src/mobile/MobileToolbar/MobileToolbar.module.css
 create mode 100644 design-system/packages/ui/src/mobile/MobileToolbar/MobileToolbar.tsx
 create mode 100644 design-system/packages/ui/src/mobile/MobileToolbar/index.ts
 create mode 100644 design-system/packages/ui/tests/consistency.test.mjs

diff --git a/design-system/packages/ui/src/brand/OpenBitFunBrandMotion.tsx b/design-system/packages/ui/src/brand/OpenBitFunBrandMotion.tsx
index b3bbf61e06..b9fcc3d558 100644
--- a/design-system/packages/ui/src/brand/OpenBitFunBrandMotion.tsx
+++ b/design-system/packages/ui/src/brand/OpenBitFunBrandMotion.tsx
@@ -5,7 +5,9 @@ import markSource from "./assets/openbitfun-mark.svg?raw";
 import styles from "./brand.module.css";
 
 const CONTOUR_COUNT = 15;
-const FLOW_CYCLE_MS = 18000;
+const FLOW_CYCLE_MS = 10000;
+const FLOW_STRAND_CYCLE_MS = 7600;
+const FLOW_STRAND_STAGGER_MS = 380;
 const COUNTER_ROTATE_CYCLE_MS = 1000;
 const COUNTER_ROTATE_TURN_MS = 420;
 const CONSTRUCTION_TIMING = {
@@ -19,12 +21,32 @@ const CONSTRUCTION_TIMING = {
   strokeFade: 80,
 };
 const CONSTRUCTION_EASING = "cubic-bezier(0.35, 0, 0.65, 1)";
+// A comet rather than a dashes trail: six nested arcs whose opacities ramp from a barely-there
+// tail to a brighter head, so the highlight fades in and out along the strand instead of
+// chopping a hole in it. Two constraints come from the geometry: the tail stays long because
+// the strands are barely more than a pixel wide, and the head stops short of opaque because a
+// fully blown-out hairline reads as a break in the ribbon rather than as light on metal.
 const FLOW_LAYERS = [
-  { length: 34, opacity: 0.12 },
-  { length: 26, opacity: 0.14 },
-  { length: 18, opacity: 0.36 },
+  { length: 34, opacity: 0.05 },
+  { length: 28, opacity: 0.09 },
+  { length: 22, opacity: 0.15 },
+  { length: 16, opacity: 0.24 },
+  { length: 11, opacity: 0.38 },
+  { length: 6, opacity: 0.6 },
 ];
 
+/** The edge contours stay darker than the middle of the ribbon. */
+function strandOpacity(index: number): number {
+  return index === 0 || index === CONTOUR_COUNT - 1 ? 0.58 : 0.34;
+}
+
+/** Light travels across the ribbon: the middle of the form lifts well above its resting
+ * weight and swells slightly, which is what makes the sweep read as gloss on a body rather
+ * than as a row of lines fading in and out. */
+const STRAND_LIGHT_PEAK = 2.6;
+const STRAND_REST_WIDTH = 1.15;
+const STRAND_LIT_WIDTH = 1.75;
+
 type Point = [number, number];
 
 function createContour(index: number): string {
@@ -166,13 +188,30 @@ export function OpenBitFunBrandMotion({ active = true, size = 192, label, varian
           ], { duration: COUNTER_ROTATE_CYCLE_MS, iterations: Infinity, easing: "linear" });
         });
       }
-      return Array.from(svg.querySelectorAll('[data-brand-flow]')).map((strand, index) => {
+      // Two motions, deliberately out of step: a bright wave travels across the ribbon
+      // (strand to strand) while the highlights travel along it (contour to contour).
+      const waves = Array.from(svg.querySelectorAll('[data-brand-strand]')).map((strand, index) => {
+        const base = strandOpacity(index);
+        return strand.animate([
+          { opacity: base, strokeWidth: `${STRAND_REST_WIDTH}` },
+          { opacity: Math.min(1, base * STRAND_LIGHT_PEAK), strokeWidth: `${STRAND_LIT_WIDTH}` },
+          { opacity: base, strokeWidth: `${STRAND_REST_WIDTH}` },
+        ], {
+          duration: FLOW_STRAND_CYCLE_MS,
+          iterations: Infinity,
+          easing: 'ease-in-out',
+          // Offset each contour's beat so the ribbon brightens inward to outward.
+          delay: -index * FLOW_STRAND_STAGGER_MS,
+        });
+      });
+      const sweeps = Array.from(svg.querySelectorAll('[data-brand-flow]')).map((strand, index) => {
         const start = -index * 3;
         return strand.animate([
           { strokeDashoffset: String(start) },
           { strokeDashoffset: String(start - 100) },
         ], { duration: FLOW_CYCLE_MS, iterations: Infinity, easing: 'linear' });
       });
+      return [...waves, ...sweeps];
     });
   }, [active, variant]);
 
@@ -212,11 +251,12 @@ export function OpenBitFunBrandMotion({ active = true, size = 192, label, varian
         </g>
       )) : contours.map((path, index) => (
         <g key={index}>
-          <path d={path} opacity={index === 0 || index === CONTOUR_COUNT - 1 ? 0.58 : 0.34} />
+          <path d={path} data-brand-strand="true" opacity={strandOpacity(index)} />
           <g data-brand-flow="true" strokeDashoffset={-index * 3}>
             {FLOW_LAYERS.map(layer => (
               <path
                 key={layer.length}
+                className={styles.flowSheen}
                 d={path}
                 pathLength={100}
                 strokeDasharray={`${layer.length / 2} ${100 - layer.length} ${layer.length / 2} 0`}
diff --git a/design-system/packages/ui/src/brand/brand.module.css b/design-system/packages/ui/src/brand/brand.module.css
index f3ddd4a30f..967e78571b 100644
--- a/design-system/packages/ui/src/brand/brand.module.css
+++ b/design-system/packages/ui/src/brand/brand.module.css
@@ -25,11 +25,26 @@
     flex: 0 0 auto;
     max-width: 100%;
     height: auto;
-    stroke-width: 0.7;
+    /* Thick enough to read as a ribbon at hero size; the 256 viewBox still thins it out for
+       the small sizes the brand pages use. */
+    stroke-width: 1.15;
     stroke-linecap: round;
     stroke-linejoin: round;
     user-select: none;
     pointer-events: none;
+    /* The sheen blends against the strands inside this box, never against the page behind it. */
+    isolation: isolate;
+  }
+
+  /* The travelling highlight is light, not paint: white screened over the strand lightens
+     whatever it crosses — ink to a flash on the light theme, pale to bright on the dark one —
+     so it borrows the one token that stays light in both schemes instead of a raw colour. Held
+     just above the resting strand width: wide enough to cover the strand it crosses, narrow
+     enough not to smear past it into a blob. */
+  .flowSheen {
+    stroke: var(--openbitfun-color-content-on-dark);
+    stroke-width: 1.5;
+    mix-blend-mode: screen;
   }
 
   .iconMotion {
diff --git a/design-system/packages/ui/src/mobile.ts b/design-system/packages/ui/src/mobile.ts
index 82c4960458..94b45fbb5a 100644
--- a/design-system/packages/ui/src/mobile.ts
+++ b/design-system/packages/ui/src/mobile.ts
@@ -5,6 +5,13 @@ export {
   type MobileActionSheetItem,
   type MobileActionSheetProps,
 } from "./mobile/MobileActionSheet";
+export {
+  MobileAvatar,
+  type MobileAvatarProps,
+  type MobileAvatarShape,
+  type MobileAvatarSize,
+  type MobileAvatarStatus,
+} from "./mobile/MobileAvatar";
 export {
   MobileBadge,
   type MobileBadgeProps,
@@ -27,6 +34,11 @@ export {
   type MobileCardPadding,
   type MobileCardProps,
 } from "./mobile/MobileCard";
+export {
+  MobileCheckbox,
+  type MobileCheckboxAppearance,
+  type MobileCheckboxProps,
+} from "./mobile/MobileCheckbox";
 export {
   MobileChoiceSheet,
   type MobileChoiceSheetOption,
@@ -78,6 +90,12 @@ export {
   MobilePageHeader,
   type MobilePageHeaderProps,
 } from "./mobile/MobilePageHeader";
+export {
+  MobileRadioGroup,
+  type MobileRadioGroupAppearance,
+  type MobileRadioGroupProps,
+  type MobileRadioOption,
+} from "./mobile/MobileRadioGroup";
 export {
   MobileSection,
   type MobileSectionProps,
@@ -91,6 +109,12 @@ export {
   type MobileSegmentedControlOption,
   type MobileSegmentedControlProps,
 } from "./mobile/MobileSegmentedControl";
+export {
+  MobileSelect,
+  type MobileSelectAppearance,
+  type MobileSelectOption,
+  type MobileSelectProps,
+} from "./mobile/MobileSelect";
 export {
   MobileSheet,
   type MobileSheetCloseReason,
@@ -101,6 +125,27 @@ export {
   type MobileStatusProps,
   type MobileStatusTone,
 } from "./mobile/MobileStatus";
+export {
+  MobileStepper,
+  type MobileStepperProps,
+} from "./mobile/MobileStepper";
+export {
+  MobileSwitch,
+  type MobileSwitchAppearance,
+  type MobileSwitchProps,
+} from "./mobile/MobileSwitch";
+export {
+  MobileTabBar,
+  type MobileTabBarAppearance,
+  type MobileTabBarItem,
+  type MobileTabBarProps,
+} from "./mobile/MobileTabBar";
+export {
+  MobileTag,
+  type MobileTagAppearance,
+  type MobileTagProps,
+  type MobileTagSize,
+} from "./mobile/MobileTag";
 export {
   MobileTextField,
   type MobileTextFieldAppearance,
@@ -110,3 +155,8 @@ export {
   MobileTextarea,
   type MobileTextareaProps,
 } from "./mobile/MobileTextarea";
+export {
+  MobileToolbar,
+  type MobileToolbarAppearance,
+  type MobileToolbarProps,
+} from "./mobile/MobileToolbar";
diff --git a/design-system/packages/ui/src/mobile/MobileAvatar/MobileAvatar.meta.ts b/design-system/packages/ui/src/mobile/MobileAvatar/MobileAvatar.meta.ts
new file mode 100644
index 0000000000..c2fe2ae36a
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileAvatar/MobileAvatar.meta.ts
@@ -0,0 +1,36 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const mobileAvatarMeta = {
+  category: "mobile",
+  description: "A touch-scale identity mark that carries character artwork, an image, initials, or a status dot.",
+  maturity: "stable",
+  name: "MobileAvatar",
+  props: [
+    { name: "src", type: "string" },
+    { name: "alt", type: "string" },
+    { name: "name", type: "string" },
+    { name: "children", type: "ReactNode" },
+    { defaultValue: "md", name: "size", type: '"xs" | "sm" | "md" | "lg"' },
+    { defaultValue: "circle", name: "shape", type: '"circle" | "rounded"' },
+    { name: "status", type: '"online" | "away" | "busy" | "offline"' },
+    { name: "statusLabel", type: "string" },
+  ],
+  states: ["image", "artwork", "initials", "online", "away", "busy", "offline"],
+  tokens: [
+    "color.action.neutral.surface",
+    "color.content.disabled",
+    "color.content.muted",
+    "color.content.secondary",
+    "color.status.danger.emphasis",
+    "color.status.success.emphasis",
+    "color.status.warning.emphasis",
+    "color.surface.canvas",
+    "control.height.lg",
+    "control.height.sm",
+    "radius.base",
+    "radius.pill",
+    "space.6",
+    "type.label.selected.fontSize",
+    "type.label.selected.fontWeight",
+  ],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/mobile/MobileAvatar/MobileAvatar.module.css b/design-system/packages/ui/src/mobile/MobileAvatar/MobileAvatar.module.css
new file mode 100644
index 0000000000..ad8ca60cc8
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileAvatar/MobileAvatar.module.css
@@ -0,0 +1,22 @@
+@layer openbitfun.components {
+  /* Sizes ride the control scale, so an avatar lines up with the rows and buttons beside it. */
+  .root { --_avatar-size: var(--openbitfun-control-height-md); --_avatar-dot: 10px; position: relative; display: inline-flex; box-sizing: border-box; inline-size: var(--_avatar-size); block-size: var(--_avatar-size); flex: 0 0 auto; align-items: center; justify-content: center; overflow: visible; border-radius: var(--openbitfun-radius-pill); color: var(--openbitfun-color-content-secondary); background: var(--openbitfun-color-action-neutral-surface); font-size: var(--openbitfun-type-label-selected-font-size); font-weight: var(--openbitfun-type-label-selected-font-weight); }
+  .root[data-size="xs"] { --_avatar-size: var(--openbitfun-space-6); --_avatar-dot: 8px; }
+  .root[data-size="sm"] { --_avatar-size: var(--openbitfun-control-height-sm); --_avatar-dot: 8px; }
+  .root[data-size="lg"] { --_avatar-size: var(--openbitfun-control-height-lg); --_avatar-dot: 12px; }
+  .root[data-shape="rounded"] { border-radius: var(--openbitfun-radius-base); }
+
+  .image, .content { display: block; inline-size: 100%; block-size: 100%; overflow: hidden; border-radius: inherit; object-fit: cover; }
+  .content { display: grid; place-items: center; }
+  .content > :where(svg, img) { inline-size: 100%; block-size: 100%; }
+  .initials { display: grid; inline-size: 100%; block-size: 100%; place-items: center; letter-spacing: var(--openbitfun-letter-spacing-subtle); }
+
+  /* The dot keeps a ring of the surrounding surface so it separates from the artwork it overlaps. */
+  .status { position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: var(--_avatar-dot); block-size: var(--_avatar-dot); border-radius: var(--openbitfun-radius-pill); background: var(--openbitfun-color-content-muted); box-shadow: 0 0 0 2px var(--openbitfun-color-surface-canvas); }
+  .status[data-status="online"] { background: var(--openbitfun-color-status-success-emphasis); }
+  .status[data-status="away"] { background: var(--openbitfun-color-status-warning-emphasis); }
+  .status[data-status="busy"] { background: var(--openbitfun-color-status-danger-emphasis); }
+  .status[data-status="offline"] { background: var(--openbitfun-color-content-disabled); }
+
+  @media (forced-colors: active) { .status { border: var(--openbitfun-border-width-default) solid CanvasText; } }
+}
diff --git a/design-system/packages/ui/src/mobile/MobileAvatar/MobileAvatar.tsx b/design-system/packages/ui/src/mobile/MobileAvatar/MobileAvatar.tsx
new file mode 100644
index 0000000000..ba6981d924
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileAvatar/MobileAvatar.tsx
@@ -0,0 +1,68 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { classNames } from "../../internal/classNames";
+import styles from "./MobileAvatar.module.css";
+
+export type MobileAvatarShape = "circle" | "rounded";
+export type MobileAvatarSize = "xs" | "sm" | "md" | "lg";
+export type MobileAvatarStatus = "online" | "away" | "busy" | "offline";
+
+export interface MobileAvatarProps extends HTMLAttributes<HTMLSpanElement> {
+  alt?: string;
+  children?: ReactNode;
+  name?: string;
+  shape?: MobileAvatarShape;
+  size?: MobileAvatarSize;
+  src?: string;
+  status?: MobileAvatarStatus;
+  statusLabel?: string;
+}
+
+/** Two letters is all a fallback can carry before it stops being readable at avatar scale. */
+function initialsOf(name: string) {
+  const parts = name.split(/[\s\-_]+/).filter(Boolean);
+  return parts.slice(0, 2).map(part => part[0]?.toUpperCase() ?? "").join("");
+}
+
+/** A mobile identity mark: character artwork, an image, or initials. The status dot carries its own
+    label when the caller supplies one, because a colour alone is not a status. */
+export function MobileAvatar({
+  alt,
+  children,
+  className,
+  name,
+  shape = "circle",
+  size = "md",
+  src,
+  status,
+  statusLabel,
+  ...props
+}: MobileAvatarProps) {
+  const label = alt || name;
+  return (
+    <span
+      {...props}
+      aria-label={label}
+      className={classNames(styles.root, className)}
+      data-openbitfun-component="mobile-avatar"
+      data-shape={shape}
+      data-size={size}
+      role={label ? "img" : undefined}
+    >
+      {children !== undefined && children !== null
+        ? <span aria-hidden="true" className={styles.content} data-openbitfun-part="content">{children}</span>
+        : src !== undefined && src !== null
+          ? <img alt="" className={styles.image} data-openbitfun-part="image" draggable={false} height={48} src={src} width={48} />
+          : <span aria-hidden="true" className={styles.initials} data-openbitfun-part="initials">{initialsOf(name ?? "")}</span>}
+      {status !== undefined && status !== null && (
+        <span
+          aria-label={statusLabel}
+          aria-hidden={statusLabel ? undefined : true}
+          className={styles.status}
+          data-openbitfun-part="status"
+          data-status={status}
+          role={statusLabel ? "img" : undefined}
+        />
+      )}
+    </span>
+  );
+}
diff --git a/design-system/packages/ui/src/mobile/MobileAvatar/index.ts b/design-system/packages/ui/src/mobile/MobileAvatar/index.ts
new file mode 100644
index 0000000000..65259aa70e
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileAvatar/index.ts
@@ -0,0 +1,7 @@
+export {
+  MobileAvatar,
+  type MobileAvatarProps,
+  type MobileAvatarShape,
+  type MobileAvatarSize,
+  type MobileAvatarStatus,
+} from "./MobileAvatar";
diff --git a/design-system/packages/ui/src/mobile/MobileCheckbox/MobileCheckbox.meta.ts b/design-system/packages/ui/src/mobile/MobileCheckbox/MobileCheckbox.meta.ts
new file mode 100644
index 0000000000..1e78773943
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileCheckbox/MobileCheckbox.meta.ts
@@ -0,0 +1,42 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const mobileCheckboxMeta = {
+  category: "mobile",
+  description: "A touch-sized check row with an indeterminate state for partial selections.",
+  maturity: "stable",
+  name: "MobileCheckbox",
+  props: [
+    { name: "label", type: "ReactNode" },
+    { name: "description", type: "ReactNode" },
+    { name: "checked", type: "boolean" },
+    { defaultValue: "false", name: "defaultChecked", type: "boolean" },
+    { defaultValue: "false", name: "indeterminate", type: "boolean" },
+    { name: "onCheckedChange", type: "(checked: boolean) => void" },
+    { defaultValue: "false", name: "invalid", type: "boolean" },
+    { defaultValue: "plain", name: "appearance", type: '"plain" | "surface"' },
+  ],
+  states: ["default", "checked", "indeterminate", "hover", "active", "focus-visible", "invalid", "disabled"],
+  tokens: [
+    "color.action.neutral.surface.hover",
+    "color.action.neutral.surface.pressed",
+    "color.border.subtle",
+    "color.content.disabled",
+    "color.content.muted",
+    "color.content.primary",
+    "color.control.highlight.background",
+    "color.control.switch.thumb",
+    "color.field.background",
+    "color.field.border",
+    "color.focus.ring",
+    "color.status.danger.border",
+    "radius.md",
+    "radius.sm",
+    "shadow.xs",
+    "space.1",
+    "space.2",
+    "space.3",
+    "type.body.md.fontSize",
+    "type.body.xs.fontSize",
+    "type.label.lg.fontWeight",
+  ],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/mobile/MobileCheckbox/MobileCheckbox.module.css b/design-system/packages/ui/src/mobile/MobileCheckbox/MobileCheckbox.module.css
new file mode 100644
index 0000000000..40641aad8e
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileCheckbox/MobileCheckbox.module.css
@@ -0,0 +1,30 @@
+@layer openbitfun.components {
+  .root { --_box-size: 20px; display: flex; box-sizing: border-box; inline-size: 100%; min-inline-size: 0; min-block-size: 52px; align-items: center; gap: var(--openbitfun-space-3); margin: 0; padding: var(--openbitfun-space-2) var(--openbitfun-space-3); border: var(--openbitfun-border-width-default) solid transparent; border-radius: var(--openbitfun-radius-md); color: var(--openbitfun-color-content-primary); background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
+  .root[data-appearance="surface"] { min-block-size: 64px; border-color: var(--openbitfun-color-border-subtle); background: var(--openbitfun-color-surface-panel); box-shadow: var(--openbitfun-shadow-xs); }
+  .root[data-disabled="true"] { color: var(--openbitfun-color-content-disabled); cursor: not-allowed; }
+
+  @media (hover: hover) and (pointer: fine) {
+    .root:is(:hover, [data-openbitfun-preview-state="hover"]):not([data-disabled="true"]) { background: var(--openbitfun-color-action-neutral-surface-hover); }
+  }
+  .root:is(:active, [data-openbitfun-preview-state="active"]):not([data-disabled="true"]) { background: var(--openbitfun-color-action-neutral-surface-pressed); }
+  .root:is(:has(.input:focus-visible), [data-openbitfun-preview-state="focus-visible"]) { outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring); outline-offset: var(--openbitfun-focus-offset); }
+
+  /* The box is the web Checkbox at touch scale: same tokens, 20px instead of 14px, so it can carry
+     the row's weight without a second visual language. */
+  .control { position: relative; display: inline-flex; inline-size: var(--_box-size); block-size: var(--_box-size); flex: 0 0 auto; }
+  .input { position: absolute; z-index: var(--openbitfun-layer-content); inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: inherit; }
+  .box { display: inline-flex; inline-size: 100%; block-size: 100%; align-items: center; justify-content: center; border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-field-border); border-radius: var(--openbitfun-radius-sm); color: var(--openbitfun-color-control-switch-thumb); background: var(--openbitfun-color-field-background); transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard), border-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
+  .root[data-checked="true"] .box, .root[data-indeterminate="true"] .box { border-color: var(--openbitfun-color-control-highlight-background); background: var(--openbitfun-color-control-highlight-background); }
+  .root[data-invalid="true"] .box { border-color: var(--openbitfun-color-status-danger-border); }
+  .root[data-disabled="true"] .box { color: var(--openbitfun-color-content-disabled); background: var(--openbitfun-color-field-background); }
+  .icon { inline-size: 14px; block-size: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; opacity: 0; }
+  .root[data-checked="true"] .icon, .root[data-indeterminate="true"] .icon { opacity: 1; }
+
+  .copy { display: flex; box-sizing: border-box; min-inline-size: 0; flex: 1 1 auto; flex-direction: column; gap: var(--openbitfun-space-1); }
+  .label { color: var(--openbitfun-color-content-primary); font-size: var(--openbitfun-type-body-md-font-size); font-weight: var(--openbitfun-type-label-lg-font-weight); }
+  .description { color: var(--openbitfun-color-content-muted); font-size: var(--openbitfun-type-body-xs-font-size); }
+  .root[data-disabled="true"] .label, .root[data-disabled="true"] .description { color: inherit; }
+
+  @media (prefers-reduced-motion: reduce) { .root, .box { transition: none; } }
+  @media (forced-colors: active) { .root[data-appearance="surface"], .box { border-color: ButtonText; } .root[data-checked="true"] .box, .root[data-indeterminate="true"] .box { border-color: Highlight; color: HighlightText; background: Highlight; } .root:has(.input:focus-visible), .root[data-openbitfun-preview-state="focus-visible"] { outline-color: Highlight; } }
+}
diff --git a/design-system/packages/ui/src/mobile/MobileCheckbox/MobileCheckbox.tsx b/design-system/packages/ui/src/mobile/MobileCheckbox/MobileCheckbox.tsx
new file mode 100644
index 0000000000..b933ee22bd
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileCheckbox/MobileCheckbox.tsx
@@ -0,0 +1,104 @@
+import { Check, Minus } from "lucide-react";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type InputHTMLAttributes,
+  type ReactNode,
+} from "react";
+import { classNames } from "../../internal/classNames";
+import styles from "./MobileCheckbox.module.css";
+
+export type MobileCheckboxAppearance = "plain" | "surface";
+
+export interface MobileCheckboxProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "type"> {
+  appearance?: MobileCheckboxAppearance;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  description?: ReactNode;
+  indeterminate?: boolean;
+  invalid?: boolean;
+  label: ReactNode;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+/** A check row. A checkbox in a mobile list is a row, not a box beside a caption: the whole row is
+    the target, so the box keeps the web control's geometry and the row supplies the touch size. */
+export const MobileCheckbox = forwardRef<HTMLInputElement, MobileCheckboxProps>(
+  function MobileCheckbox({
+    appearance = "plain",
+    checked,
+    className,
+    defaultChecked,
+    description,
+    disabled,
+    indeterminate = false,
+    invalid = false,
+    label,
+    onChange,
+    onCheckedChange,
+    ...props
+  }, ref) {
+    const [uncontrolled, setUncontrolled] = useState(defaultChecked ?? false);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const controlled = checked !== undefined;
+    const resolved = controlled ? checked : uncontrolled;
+    /* Focus and press states belong to the hidden input, but the row is what changes. The Lab drives
+       the row through a root attribute, so lift that hook off the input onto the label. */
+    const previewState = (props as Record<string, unknown>)["data-openbitfun-preview-state"];
+
+    // `indeterminate` has no HTML attribute: it only exists as a DOM property, and it also
+    // decides which glyph the box draws, which is why it is mirrored into a data attribute.
+    useEffect(() => {
+      if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+
+    useImperativeHandle(ref, () => inputRef.current!, []);
+
+    function handleChange(event: ChangeEvent<HTMLInputElement>) {
+      if (!controlled) setUncontrolled(event.target.checked);
+      onChange?.(event);
+      onCheckedChange?.(event.target.checked);
+    }
+
+    return (
+      <label
+        className={classNames(styles.root, className)}
+        data-appearance={appearance}
+        data-checked={resolved ? "true" : "false"}
+        data-disabled={disabled ? "true" : "false"}
+        data-indeterminate={indeterminate ? "true" : "false"}
+        data-invalid={invalid ? "true" : "false"}
+        data-openbitfun-component="mobile-checkbox"
+        data-openbitfun-preview-state={typeof previewState === "string" ? previewState : undefined}
+      >
+        <span className={styles.control}>
+          <input
+            {...props}
+            aria-checked={indeterminate ? "mixed" : undefined}
+            aria-invalid={invalid || undefined}
+            checked={resolved}
+            className={styles.input}
+            disabled={disabled}
+            onChange={handleChange}
+            ref={inputRef}
+            type="checkbox"
+          />
+          <span aria-hidden="true" className={styles.box} data-openbitfun-part="box">
+            {indeterminate ? <Minus className={styles.icon} /> : <Check className={styles.icon} />}
+          </span>
+        </span>
+        <span className={styles.copy} data-openbitfun-part="copy">
+          <span className={styles.label} data-openbitfun-part="label">{label}</span>
+          {description !== undefined && description !== null && (
+            <span className={styles.description} data-openbitfun-part="description">{description}</span>
+          )}
+        </span>
+      </label>
+    );
+  },
+);
diff --git a/design-system/packages/ui/src/mobile/MobileCheckbox/index.ts b/design-system/packages/ui/src/mobile/MobileCheckbox/index.ts
new file mode 100644
index 0000000000..05f320c235
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileCheckbox/index.ts
@@ -0,0 +1,5 @@
+export {
+  MobileCheckbox,
+  type MobileCheckboxAppearance,
+  type MobileCheckboxProps,
+} from "./MobileCheckbox";
diff --git a/design-system/packages/ui/src/mobile/MobileDisclosure/MobileDisclosure.meta.ts b/design-system/packages/ui/src/mobile/MobileDisclosure/MobileDisclosure.meta.ts
index a4e6964489..4d4ba7759d 100644
--- a/design-system/packages/ui/src/mobile/MobileDisclosure/MobileDisclosure.meta.ts
+++ b/design-system/packages/ui/src/mobile/MobileDisclosure/MobileDisclosure.meta.ts
@@ -1,2 +1,2 @@
 import type { ComponentMeta } from "../../registry.types";
-export const mobileDisclosureMeta = { category: "mobile", description: "A compact disclosure row for thinking, tool groups, and advanced options.", maturity: "stable", name: "MobileDisclosure", props: [{ name: "open", type: "boolean" }, { name: "onToggle", type: "() => void" }, { name: "title", type: "ReactNode" }, { name: "metadata", type: "ReactNode" }], states: ["closed", "open", "focus-visible", "disabled"], tokens: ["color.content.primary", "color.content.muted", "color.focus.ring", "space.2", "space.3"] } as const satisfies ComponentMeta;
+export const mobileDisclosureMeta = { category: "mobile", description: "A compact disclosure row for thinking, tool groups, and advanced options.", maturity: "stable", name: "MobileDisclosure", props: [{ name: "open", type: "boolean" }, { name: "onToggle", type: "() => void" }, { name: "title", type: "ReactNode" }, { name: "metadata", type: "ReactNode" }], states: ["closed", "open", "hover", "focus-visible", "disabled"], tokens: ["color.content.primary", "color.content.muted", "color.focus.ring", "space.2", "space.3"] } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/mobile/MobileDisclosure/MobileDisclosure.module.css b/design-system/packages/ui/src/mobile/MobileDisclosure/MobileDisclosure.module.css
index b5121b5204..7748d2265c 100644
--- a/design-system/packages/ui/src/mobile/MobileDisclosure/MobileDisclosure.module.css
+++ b/design-system/packages/ui/src/mobile/MobileDisclosure/MobileDisclosure.module.css
@@ -1,6 +1,10 @@
 @layer openbitfun.components {
   .root { box-sizing: border-box; min-inline-size: 0; color: var(--openbitfun-color-content-primary); }
   .trigger { display: flex; inline-size: 100%; min-block-size: 44px; align-items: center; gap: var(--openbitfun-space-2); margin: 0; padding: var(--openbitfun-space-2) 0; border: 0; color: inherit; background: transparent; cursor: pointer; text-align: start; font: inherit; }
+  @media (hover: hover) and (pointer: fine) {
+    .trigger:not(:disabled):hover,
+    .root[data-openbitfun-preview-state="hover"] .trigger:not(:disabled) { color: var(--openbitfun-color-content-primary); background: var(--openbitfun-color-action-neutral-surface-hover); box-shadow: 0 0 0 var(--openbitfun-space-2) var(--openbitfun-color-action-neutral-surface-hover); }
+  }
   .trigger:focus-visible { outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring); outline-offset: var(--openbitfun-focus-offset); border-radius: var(--openbitfun-radius-sm); }
   .trigger:disabled { color: var(--openbitfun-color-content-disabled); cursor: not-allowed; }
   .leading { display: grid; inline-size: 20px; block-size: 20px; flex: 0 0 20px; place-items: center; }
diff --git a/design-system/packages/ui/src/mobile/MobileRadioGroup/MobileRadioGroup.meta.ts b/design-system/packages/ui/src/mobile/MobileRadioGroup/MobileRadioGroup.meta.ts
new file mode 100644
index 0000000000..8c4e8fbfba
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileRadioGroup/MobileRadioGroup.meta.ts
@@ -0,0 +1,39 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const mobileRadioGroupMeta = {
+  category: "mobile",
+  description: "A touch-sized single-choice list whose options share one input name for native keyboard navigation.",
+  maturity: "stable",
+  name: "MobileRadioGroup",
+  props: [
+    { name: "options", type: "readonly MobileRadioOption[]" },
+    { name: "value", type: "string" },
+    { name: "defaultValue", type: "string" },
+    { name: "onValueChange", type: "(value: string) => void" },
+    { name: "name", type: "string" },
+    { defaultValue: "plain", name: "appearance", type: '"plain" | "surface"' },
+  ],
+  states: ["default", "selected", "hover", "active", "focus-visible", "disabled"],
+  tokens: [
+    "color.action.neutral.surface.hover",
+    "color.action.neutral.surface.pressed",
+    "color.border.subtle",
+    "color.content.disabled",
+    "color.content.inverse",
+    "color.content.muted",
+    "color.content.primary",
+    "color.content.secondary",
+    "color.control.highlight.background",
+    "color.field.background",
+    "color.field.border",
+    "color.focus.ring",
+    "radius.md",
+    "shadow.xs",
+    "space.1",
+    "space.2",
+    "space.3",
+    "type.body.md.fontSize",
+    "type.body.xs.fontSize",
+    "type.label.lg.fontWeight",
+  ],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/mobile/MobileRadioGroup/MobileRadioGroup.module.css b/design-system/packages/ui/src/mobile/MobileRadioGroup/MobileRadioGroup.module.css
new file mode 100644
index 0000000000..f3208ed408
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileRadioGroup/MobileRadioGroup.module.css
@@ -0,0 +1,39 @@
+@layer openbitfun.components {
+  /* The group is the surface: options are flush rows inside it, so a surface group reads as one
+     card instead of a stack of separate controls. */
+  .root { display: flex; box-sizing: border-box; inline-size: 100%; min-inline-size: 0; flex-direction: column; overflow: hidden; gap: 0; border: var(--openbitfun-border-width-default) solid transparent; border-radius: var(--openbitfun-radius-md); background: transparent; }
+  .root[data-appearance="surface"] { border-color: var(--openbitfun-color-border-subtle); background: var(--openbitfun-color-surface-panel); box-shadow: var(--openbitfun-shadow-xs); }
+  .root[data-appearance="surface"] .option + .option { border-block-start: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle); }
+
+  .option { display: flex; box-sizing: border-box; inline-size: 100%; min-inline-size: 0; min-block-size: 52px; align-items: center; gap: var(--openbitfun-space-3); padding: var(--openbitfun-space-2) var(--openbitfun-space-3); color: var(--openbitfun-color-content-primary); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
+  .root[data-appearance="surface"] .option { min-block-size: 64px; }
+  .option[data-disabled="true"] { color: var(--openbitfun-color-content-disabled); cursor: not-allowed; }
+
+  @media (hover: hover) and (pointer: fine) {
+    .option:is(:hover, [data-openbitfun-preview-state="hover"]):not([data-disabled="true"]),
+    .root[data-openbitfun-preview-state="hover"] .option:not([data-disabled="true"]) { background: var(--openbitfun-color-action-neutral-surface-hover); }
+  }
+  .option:is(:active, [data-openbitfun-preview-state="active"]):not([data-disabled="true"]),
+  .root[data-openbitfun-preview-state="active"] .option:not([data-disabled="true"]) { background: var(--openbitfun-color-action-neutral-surface-pressed); }
+  .option:has(.input:focus-visible),
+  .root[data-openbitfun-preview-state="focus-visible"] .option[data-checked="true"] { outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring); outline-offset: calc(var(--openbitfun-focus-offset) * -1); }
+
+  .control { position: relative; display: inline-flex; inline-size: 20px; block-size: 20px; flex: 0 0 auto; }
+  .input { position: absolute; z-index: var(--openbitfun-layer-content); inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: inherit; }
+  .circle { display: grid; inline-size: 100%; block-size: 100%; place-items: center; border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-field-border); border-radius: 50%; background: var(--openbitfun-color-field-background); transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard), border-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
+  /* The selected mark is a filled core, not a ring: the row already states the choice, so the
+     control only has to confirm it. */
+  .dot { inline-size: 60%; block-size: 60%; border-radius: 50%; background: var(--openbitfun-color-content-inverse); opacity: 0; transition: opacity var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
+  .option[data-checked="true"] .circle { border-color: var(--openbitfun-color-control-highlight-background); background: var(--openbitfun-color-control-highlight-background); }
+  .option[data-checked="true"] .dot { opacity: 1; }
+
+  .copy { display: flex; box-sizing: border-box; min-inline-size: 0; flex: 1 1 auto; flex-direction: column; gap: var(--openbitfun-space-1); }
+  .label { font-size: var(--openbitfun-type-body-md-font-size); font-weight: var(--openbitfun-type-label-lg-font-weight); }
+  .description { color: var(--openbitfun-color-content-muted); font-size: var(--openbitfun-type-body-xs-font-size); }
+  .option[data-disabled="true"] .label, .option[data-disabled="true"] .description { color: inherit; }
+  .leading { display: grid; inline-size: 20px; block-size: 20px; flex: 0 0 20px; place-items: center; color: var(--openbitfun-color-content-secondary); }
+  .leading > :where(svg, img) { inline-size: 100%; block-size: 100%; }
+
+  @media (prefers-reduced-motion: reduce) { .option, .circle, .dot { transition: none; } }
+  @media (forced-colors: active) { .root[data-appearance="surface"], .circle { border-color: ButtonText; } .option[data-checked="true"] .circle { border-color: Highlight; background: Highlight; } .option:has(.input:focus-visible), .root[data-openbitfun-preview-state="focus-visible"] .option[data-checked="true"] { outline-color: Highlight; } }
+}
diff --git a/design-system/packages/ui/src/mobile/MobileRadioGroup/MobileRadioGroup.tsx b/design-system/packages/ui/src/mobile/MobileRadioGroup/MobileRadioGroup.tsx
new file mode 100644
index 0000000000..e5cc5c7dcf
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileRadioGroup/MobileRadioGroup.tsx
@@ -0,0 +1,102 @@
+import {
+  forwardRef,
+  useState,
+  type ChangeEvent,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import { classNames } from "../../internal/classNames";
+import styles from "./MobileRadioGroup.module.css";
+
+export type MobileRadioGroupAppearance = "plain" | "surface";
+
+export interface MobileRadioOption {
+  description?: ReactNode;
+  disabled?: boolean;
+  label: ReactNode;
+  leading?: ReactNode;
+  value: string;
+}
+
+export interface MobileRadioGroupProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  appearance?: MobileRadioGroupAppearance;
+  defaultValue?: string;
+  name: string;
+  onValueChange?: (value: string) => void;
+  options: readonly MobileRadioOption[];
+  value?: string;
+}
+
+/** A single-choice list. The options share one input name, so the platform keeps arrow-key
+    navigation; the group is a radiogroup rather than a menu of buttons. */
+export const MobileRadioGroup = forwardRef<HTMLDivElement, MobileRadioGroupProps>(
+  function MobileRadioGroup({
+    appearance = "plain",
+    className,
+    defaultValue,
+    name,
+    onValueChange,
+    options,
+    value,
+    ...props
+  }, ref) {
+    const [uncontrolled, setUncontrolled] = useState(defaultValue);
+    const controlled = value !== undefined;
+    const selected = controlled ? value : uncontrolled;
+
+    function handleChange(event: ChangeEvent<HTMLInputElement>) {
+      if (!controlled) setUncontrolled(event.target.value);
+      onValueChange?.(event.target.value);
+    }
+
+    return (
+      <div
+        {...props}
+        className={classNames(styles.root, className)}
+        data-appearance={appearance}
+        data-openbitfun-component="mobile-radio-group"
+        ref={ref}
+        role="radiogroup"
+      >
+        {options.map(option => {
+          const checked = selected === option.value;
+          const disabled = option.disabled ?? false;
+          return (
+            <label
+              className={styles.option}
+              data-checked={checked ? "true" : "false"}
+              data-disabled={disabled ? "true" : "false"}
+              data-openbitfun-part="option"
+              key={option.value}
+            >
+              <span className={styles.control}>
+                <input
+                  checked={checked}
+                  className={styles.input}
+                  disabled={disabled}
+                  name={name}
+                  onChange={handleChange}
+                  type="radio"
+                  value={option.value}
+                />
+                <span aria-hidden="true" className={styles.circle} data-openbitfun-part="circle">
+                  <span className={styles.dot} data-openbitfun-part="dot" />
+                </span>
+              </span>
+              <span className={styles.copy} data-openbitfun-part="copy">
+                <span className={styles.label} data-openbitfun-part="label">{option.label}</span>
+                {option.description !== undefined && option.description !== null && (
+                  <span className={styles.description} data-openbitfun-part="description">{option.description}</span>
+                )}
+              </span>
+              {option.leading !== undefined && option.leading !== null && (
+                <span className={styles.leading} data-openbitfun-part="leading">{option.leading}</span>
+              )}
+            </label>
+          );
+        })}
+      </div>
+    );
+  },
+);
diff --git a/design-system/packages/ui/src/mobile/MobileRadioGroup/index.ts b/design-system/packages/ui/src/mobile/MobileRadioGroup/index.ts
new file mode 100644
index 0000000000..81422cf506
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileRadioGroup/index.ts
@@ -0,0 +1,6 @@
+export {
+  MobileRadioGroup,
+  type MobileRadioGroupAppearance,
+  type MobileRadioGroupProps,
+  type MobileRadioOption,
+} from "./MobileRadioGroup";
diff --git a/design-system/packages/ui/src/mobile/MobileSegmentedControl/MobileSegmentedControl.meta.ts b/design-system/packages/ui/src/mobile/MobileSegmentedControl/MobileSegmentedControl.meta.ts
index f73dad238f..b9b92cfc44 100644
--- a/design-system/packages/ui/src/mobile/MobileSegmentedControl/MobileSegmentedControl.meta.ts
+++ b/design-system/packages/ui/src/mobile/MobileSegmentedControl/MobileSegmentedControl.meta.ts
@@ -1,2 +1,2 @@
 import type { ComponentMeta } from "../../registry.types";
-export const mobileSegmentedControlMeta = { category: "mobile", description: "A touch-first segmented selector for compact mode and filter choices.", maturity: "stable", name: "MobileSegmentedControl", props: [{ name: "value", type: "string" }, { name: "options", type: "readonly MobileSegmentedControlOption[]" }, { name: "onChange", type: "(value: string) => void" }], states: ["default", "selected", "focus-visible", "disabled"], tokens: ["color.action.neutral.surface", "color.content.primary", "color.surface.panel", "radius.pill", "shadow.xs", "space.1"] } as const satisfies ComponentMeta;
+export const mobileSegmentedControlMeta = { category: "mobile", description: "A touch-first segmented selector for compact mode and filter choices.", maturity: "stable", name: "MobileSegmentedControl", props: [{ name: "value", type: "string" }, { name: "options", type: "readonly MobileSegmentedControlOption[]" }, { name: "onChange", type: "(value: string) => void" }], states: ["selected", "unselected", "hover", "active", "focus-visible", "disabled"], tokens: ["color.action.neutral.surface", "color.content.primary", "color.surface.panel", "radius.pill", "shadow.xs", "space.1"] } as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/mobile/MobileSegmentedControl/MobileSegmentedControl.module.css b/design-system/packages/ui/src/mobile/MobileSegmentedControl/MobileSegmentedControl.module.css
index 667cb8d3be..81c3a94d8d 100644
--- a/design-system/packages/ui/src/mobile/MobileSegmentedControl/MobileSegmentedControl.module.css
+++ b/design-system/packages/ui/src/mobile/MobileSegmentedControl/MobileSegmentedControl.module.css
@@ -2,7 +2,13 @@
   .root { display: inline-grid; box-sizing: border-box; min-block-size: 44px; grid-auto-columns: minmax(72px, 1fr); grid-auto-flow: column; gap: var(--openbitfun-space-1); padding: var(--openbitfun-space-1); border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle); border-radius: var(--openbitfun-radius-pill); background: var(--openbitfun-color-surface-panel); box-shadow: var(--openbitfun-shadow-xs); }
   .option { min-block-size: 36px; margin: 0; padding: 0 var(--openbitfun-space-4); border: 0; border-radius: var(--openbitfun-radius-pill); color: var(--openbitfun-color-content-secondary); background: transparent; cursor: pointer; touch-action: manipulation; font: inherit; font-size: var(--openbitfun-type-label-md-font-size); }
   .option[data-selected="true"] { color: var(--openbitfun-color-content-primary); background: var(--openbitfun-color-action-neutral-surface); box-shadow: var(--openbitfun-shadow-xs); }
-  .option:active:not(:disabled) { background: var(--openbitfun-color-action-neutral-surface-pressed); }
+  @media (hover: hover) and (pointer: fine) {
+    .option:not([data-selected="true"]):hover:not(:disabled),
+    .root[data-openbitfun-preview-state="hover"] .option:not([data-selected="true"]):not(:disabled) { background: var(--openbitfun-color-action-neutral-surface-hover); }
+  }
+  .option:active:not(:disabled),
+  .root[data-openbitfun-preview-state="active"] .option:not([data-selected="true"]):not(:disabled) { background: var(--openbitfun-color-action-neutral-surface-pressed); }
+  .root[data-openbitfun-preview-state="focus-visible"] .option[data-selected="true"] { outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring); outline-offset: calc(var(--openbitfun-focus-offset) * -1); }
   .option:focus-visible { outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring); outline-offset: calc(var(--openbitfun-focus-offset) * -1); }
   .option:disabled { color: var(--openbitfun-color-content-disabled); cursor: not-allowed; }
   @media (prefers-reduced-motion: reduce) { .option { transition: none; } }
diff --git a/design-system/packages/ui/src/mobile/MobileSelect/MobileSelect.meta.ts b/design-system/packages/ui/src/mobile/MobileSelect/MobileSelect.meta.ts
new file mode 100644
index 0000000000..65f5d9a091
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileSelect/MobileSelect.meta.ts
@@ -0,0 +1,43 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const mobileSelectMeta = {
+  category: "mobile",
+  description: "A touch-sized choice field that opens the mobile choice sheet instead of a desktop popup list.",
+  maturity: "stable",
+  name: "MobileSelect",
+  props: [
+    { name: "options", type: "readonly MobileSelectOption[]" },
+    { name: "value", type: "string" },
+    { name: "defaultValue", type: "string" },
+    { name: "open", type: "boolean" }, { defaultValue: "false", name: "defaultOpen", type: "boolean" }, { name: "onOpenChange", type: "(open: boolean) => void" }, { name: "onValueChange", type: "(value: string) => void" },
+    { name: "sheetTitle", type: "ReactNode" },
+    { name: "label", type: "ReactNode" },
+    { name: "description", type: "ReactNode" },
+    { name: "placeholder", type: "ReactNode" },
+    { defaultValue: "false", name: "invalid", type: "boolean" },
+    { defaultValue: "soft", name: "appearance", type: '"soft" | "surface"' },
+  ],
+  states: ["default", "hover", "active", "focus-visible", "open", "invalid", "disabled"],
+  tokens: [
+    "color.action.neutral.surface.hover",
+    "color.action.neutral.surface.pressed",
+    "color.content.disabled",
+    "color.content.muted",
+    "color.content.primary",
+    "color.content.secondary",
+    "color.field.background",
+    "color.field.border",
+    "color.focus.ring",
+    "color.status.danger.border",
+    "color.surface.tertiary",
+    "radius.md",
+    "shadow.xs",
+    "space.1",
+    "space.2",
+    "space.4",
+    "type.body.md.fontSize",
+    "type.body.xs.fontSize",
+    "type.label.md.fontSize",
+    "type.label.md.fontWeight",
+  ],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/mobile/MobileSelect/MobileSelect.module.css b/design-system/packages/ui/src/mobile/MobileSelect/MobileSelect.module.css
new file mode 100644
index 0000000000..3ec9f64b75
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileSelect/MobileSelect.module.css
@@ -0,0 +1,27 @@
+@layer openbitfun.components {
+  .root { display: flex; box-sizing: border-box; inline-size: 100%; min-inline-size: 0; flex-direction: column; gap: var(--openbitfun-space-2); }
+
+  .copy { display: flex; flex-direction: column; gap: var(--openbitfun-space-1); }
+  .label { color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-label-md-font-size); font-weight: var(--openbitfun-type-label-md-font-weight); }
+  .description { color: var(--openbitfun-color-content-muted); font-size: var(--openbitfun-type-body-xs-font-size); }
+
+  /* The field is the MobileTextField surface: a select and a text field sit in the same column, so
+     they must read as the same control until one of them is opened. */
+  .field { display: flex; box-sizing: border-box; inline-size: 100%; min-inline-size: 0; min-block-size: 44px; align-items: center; gap: var(--openbitfun-space-2); margin: 0; padding: 0 var(--openbitfun-space-4); border: var(--openbitfun-border-width-default) solid transparent; border-radius: var(--openbitfun-radius-md); color: var(--openbitfun-color-content-primary); background: var(--openbitfun-color-surface-tertiary); font: inherit; font-size: var(--openbitfun-type-body-md-font-size); text-align: start; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard), box-shadow var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
+  .root[data-appearance="surface"] .field { border-color: var(--openbitfun-color-field-border); background: var(--openbitfun-color-field-background); box-shadow: var(--openbitfun-shadow-xs); }
+  .root[data-invalid="true"] .field { border-color: var(--openbitfun-color-status-danger-border); }
+  .root[data-disabled="true"] .field { color: var(--openbitfun-color-content-disabled); cursor: not-allowed; }
+
+  @media (hover: hover) and (pointer: fine) {
+    .field:is(:hover, [data-openbitfun-preview-state="hover"]):not(:disabled) { background: var(--openbitfun-color-action-neutral-surface-hover); }
+  }
+  .field:is(:active, [data-openbitfun-preview-state="active"]):not(:disabled) { background: var(--openbitfun-color-action-neutral-surface-pressed); }
+  .field:is(:focus-visible, [data-openbitfun-preview-state="focus-visible"]) { outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring); outline-offset: var(--openbitfun-focus-offset); }
+
+  .value { min-inline-size: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .value[data-placeholder="true"] { color: var(--openbitfun-color-content-muted); }
+  .chevron { inline-size: 18px; block-size: 18px; flex: 0 0 18px; color: var(--openbitfun-color-content-secondary); }
+
+  @media (prefers-reduced-motion: reduce) { .field { transition: none; } }
+  @media (forced-colors: active) { .root[data-appearance="surface"] .field { border-color: ButtonText; } .field:focus-visible { outline-color: Highlight; } }
+}
diff --git a/design-system/packages/ui/src/mobile/MobileSelect/MobileSelect.tsx b/design-system/packages/ui/src/mobile/MobileSelect/MobileSelect.tsx
new file mode 100644
index 0000000000..2e40ecafbf
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileSelect/MobileSelect.tsx
@@ -0,0 +1,124 @@
+import { ChevronDown } from "lucide-react";
+import { useState, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { classNames } from "../../internal/classNames";
+import { MobileChoiceSheet } from "../MobileChoiceSheet";
+import styles from "./MobileSelect.module.css";
+
+export type MobileSelectAppearance = "soft" | "surface";
+
+export interface MobileSelectOption {
+  description?: ReactNode;
+  disabled?: boolean;
+  label: ReactNode;
+  leading?: ReactNode;
+  value: string;
+}
+
+export interface MobileSelectProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled" | "onChange" | "value"> {
+  appearance?: MobileSelectAppearance;
+  cancelLabel?: ReactNode;
+  defaultOpen?: boolean;
+  defaultValue?: string;
+  description?: ReactNode;
+  disabled?: boolean;
+  emptyContent?: ReactNode;
+  invalid?: boolean;
+  label?: ReactNode;
+  onOpenChange?: (open: boolean) => void;
+  onValueChange?: (value: string) => void;
+  open?: boolean;
+  options: readonly MobileSelectOption[];
+  placeholder?: ReactNode;
+  sheetTitle: ReactNode;
+  value?: string;
+}
+
+/** A choice field. Mobile has no room for a popup listbox, so the field opens the choice sheet the
+    rest of the mobile set already uses; the selected option is read from the field's own text. */
+export function MobileSelect({
+  appearance = "soft",
+  cancelLabel,
+  className,
+  defaultValue,
+  defaultOpen = false,
+  description,
+  disabled = false,
+  emptyContent,
+  invalid = false,
+  label,
+  onOpenChange,
+  onValueChange,
+  open: controlledOpen,
+  options,
+  placeholder,
+  sheetTitle,
+  value,
+  ...props
+}: MobileSelectProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen && !disabled);
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const controlled = value !== undefined;
+  const selected = controlled ? value : uncontrolled;
+  const selectedOption = options.find(option => option.value === selected);
+  /* The sheet is the component's open state, so it follows the same controlled trio as the web
+     Select: `open` wins, `defaultOpen` seeds the uncontrolled case, and both report changes. */
+  const open = disabled ? false : controlledOpen ?? uncontrolledOpen;
+
+  function setSheetOpen(next: boolean) {
+    if (controlledOpen === undefined) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  }
+
+  function select(next: string) {
+    if (!controlled) setUncontrolled(next);
+    onValueChange?.(next);
+    setSheetOpen(false);
+  }
+
+  return (
+    <div
+      className={classNames(styles.root, className)}
+      data-appearance={appearance}
+      data-disabled={disabled ? "true" : "false"}
+      data-invalid={invalid ? "true" : "false"}
+      data-open={open ? "true" : "false"}
+      data-openbitfun-component="mobile-select"
+    >
+      {label !== undefined && label !== null && (
+        <span className={styles.copy} data-openbitfun-part="copy">
+          <span className={styles.label} data-openbitfun-part="label">{label}</span>
+          {description !== undefined && description !== null && (
+            <span className={styles.description} data-openbitfun-part="description">{description}</span>
+          )}
+        </span>
+      )}
+      <button
+        {...props}
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        aria-invalid={invalid || undefined}
+        className={styles.field}
+        data-openbitfun-part="field"
+        disabled={disabled}
+        onClick={() => setSheetOpen(true)}
+        type="button"
+      >
+        <span className={styles.value} data-openbitfun-part="value" data-placeholder={selectedOption ? "false" : "true"}>
+          {selectedOption ? selectedOption.label : placeholder}
+        </span>
+        <ChevronDown aria-hidden="true" className={styles.chevron} />
+      </button>
+      <MobileChoiceSheet
+        cancelLabel={cancelLabel}
+        emptyContent={emptyContent}
+        onOpenChange={next => { if (!next) setSheetOpen(false); }}
+        onSelect={select}
+        open={open}
+        options={options}
+        selectedValue={selected}
+        title={sheetTitle}
+      />
+    </div>
+  );
+}
diff --git a/design-system/packages/ui/src/mobile/MobileSelect/index.ts b/design-system/packages/ui/src/mobile/MobileSelect/index.ts
new file mode 100644
index 0000000000..077cfd8b3e
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileSelect/index.ts
@@ -0,0 +1,6 @@
+export {
+  MobileSelect,
+  type MobileSelectAppearance,
+  type MobileSelectOption,
+  type MobileSelectProps,
+} from "./MobileSelect";
diff --git a/design-system/packages/ui/src/mobile/MobileStepper/MobileStepper.meta.ts b/design-system/packages/ui/src/mobile/MobileStepper/MobileStepper.meta.ts
new file mode 100644
index 0000000000..85fb680138
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileStepper/MobileStepper.meta.ts
@@ -0,0 +1,44 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const mobileStepperMeta = {
+  category: "mobile",
+  description: "A touch-sized numeric row whose bounds disable the decrement and increment buttons.",
+  maturity: "stable",
+  name: "MobileStepper",
+  props: [
+    { name: "label", type: "ReactNode" },
+    { name: "description", type: "ReactNode" },
+    { name: "value", type: "number" },
+    { name: "onValueChange", type: "(value: number) => void" },
+    { name: "min", type: "number" },
+    { name: "max", type: "number" },
+    { defaultValue: "1", name: "step", type: "number" },
+    { name: "unit", type: "ReactNode" },
+    { defaultValue: "false", name: "invalid", type: "boolean" },
+    { name: "decrementLabel", type: "string" },
+    { name: "incrementLabel", type: "string" },
+  ],
+  states: ["default", "hover", "active", "focus-within", "invalid", "disabled"],
+  tokens: [
+    "color.action.neutral.surface.hover",
+    "color.action.neutral.surface.pressed",
+    "color.content.disabled",
+    "color.content.muted",
+    "color.content.primary",
+    "color.content.secondary",
+    "color.field.background",
+    "color.field.border",
+    "color.field.borderFocus",
+    "color.focus.ring",
+    "color.status.danger.border",
+    "color.status.danger.content",
+    "radius.md",
+    "space.1",
+    "space.2",
+    "space.3",
+    "type.body.md.fontSize",
+    "type.body.sm.fontSize",
+    "type.body.xs.fontSize",
+    "type.label.lg.fontWeight",
+  ],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/mobile/MobileStepper/MobileStepper.module.css b/design-system/packages/ui/src/mobile/MobileStepper/MobileStepper.module.css
new file mode 100644
index 0000000000..85212e37c0
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileStepper/MobileStepper.module.css
@@ -0,0 +1,35 @@
+@layer openbitfun.components {
+  /* A control row, like the switch: the label explains the value, the value carries the buttons. */
+  .root { display: flex; box-sizing: border-box; inline-size: 100%; min-inline-size: 0; min-block-size: 52px; align-items: center; gap: var(--openbitfun-space-3); padding-block: var(--openbitfun-space-2); }
+  .root[data-disabled="true"] { color: var(--openbitfun-color-content-disabled); }
+
+  .copy { display: flex; box-sizing: border-box; min-inline-size: 0; flex: 1 1 auto; flex-direction: column; gap: var(--openbitfun-space-1); }
+  .label { color: var(--openbitfun-color-content-primary); font-size: var(--openbitfun-type-body-md-font-size); font-weight: var(--openbitfun-type-label-lg-font-weight); }
+  .description { color: var(--openbitfun-color-content-muted); font-size: var(--openbitfun-type-body-xs-font-size); }
+  .root[data-disabled="true"] .label, .root[data-disabled="true"] .description { color: inherit; }
+
+  .control { display: inline-flex; min-inline-size: 0; flex: 0 0 auto; align-items: center; gap: var(--openbitfun-space-1); border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-field-border); border-radius: var(--openbitfun-radius-md); background: var(--openbitfun-color-field-background); }
+  .root[data-invalid="true"] .control { border-color: var(--openbitfun-color-status-danger-border); }
+  .root:not([data-disabled="true"]) .control:focus-within,
+  .root[data-openbitfun-preview-state="focus-within"] .control { border-color: var(--openbitfun-color-field-border-focus); box-shadow: 0 0 0 var(--openbitfun-focus-width) var(--openbitfun-color-focus-ring); }
+
+  .button { display: grid; inline-size: 44px; block-size: 44px; flex: 0 0 44px; margin: 0; padding: 0; border: 0; border-radius: var(--openbitfun-radius-md); place-items: center; color: var(--openbitfun-color-content-secondary); background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
+  .button > svg { inline-size: 18px; block-size: 18px; }
+  @media (hover: hover) and (pointer: fine) {
+    .button:is(:hover, [data-openbitfun-preview-state="hover"]):not(:disabled),
+    .root[data-openbitfun-preview-state="hover"] .button:not(:disabled) { background: var(--openbitfun-color-action-neutral-surface-hover); }
+  }
+  .button:is(:active, [data-openbitfun-preview-state="active"]):not(:disabled),
+  .root[data-openbitfun-preview-state="active"] .button:not(:disabled) { background: var(--openbitfun-color-action-neutral-surface-pressed); }
+  .button:focus-visible { outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring); outline-offset: calc(var(--openbitfun-focus-offset) * -1); }
+  .button:disabled { color: var(--openbitfun-color-content-disabled); cursor: not-allowed; }
+
+  .value { display: inline-flex; min-inline-size: 0; align-items: baseline; gap: var(--openbitfun-space-1); }
+  .input { box-sizing: border-box; inline-size: 4ch; min-block-size: 44px; margin: 0; padding: 0; border: 0; outline: 0; color: inherit; background: transparent; font: inherit; font-size: var(--openbitfun-type-body-md-font-size); font-variant-numeric: tabular-nums; text-align: center; }
+  .input:disabled { color: var(--openbitfun-color-content-disabled); }
+  .unit { color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); }
+  .root[data-invalid="true"] .input { color: var(--openbitfun-color-status-danger-content); }
+
+  @media (prefers-reduced-motion: reduce) { .button { transition: none; } }
+  @media (forced-colors: active) { .control { border-color: ButtonText; } .button:focus-visible { outline-color: Highlight; } }
+}
diff --git a/design-system/packages/ui/src/mobile/MobileStepper/MobileStepper.tsx b/design-system/packages/ui/src/mobile/MobileStepper/MobileStepper.tsx
new file mode 100644
index 0000000000..f27b9948cf
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileStepper/MobileStepper.tsx
@@ -0,0 +1,117 @@
+import { Minus, Plus } from "lucide-react";
+import { useState, type ChangeEvent, type HTMLAttributes, type ReactNode } from "react";
+import { classNames } from "../../internal/classNames";
+import styles from "./MobileStepper.module.css";
+
+export interface MobileStepperProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  decrementLabel: string;
+  description?: ReactNode;
+  disabled?: boolean;
+  incrementLabel: string;
+  invalid?: boolean;
+  label?: ReactNode;
+  max?: number;
+  min?: number;
+  onValueChange?: (value: number) => void;
+  step?: number;
+  unit?: ReactNode;
+  value?: number;
+}
+
+/** The mobile form of a number input: a value that is usually nudged, so the two ends are buttons
+    and the middle stays typable. Bounds disable the buttons rather than rejecting the tap. */
+export function MobileStepper({
+  className,
+  decrementLabel,
+  description,
+  disabled = false,
+  incrementLabel,
+  invalid = false,
+  label,
+  max,
+  min,
+  onValueChange,
+  step = 1,
+  unit,
+  value,
+  ...props
+}: MobileStepperProps) {
+  const [uncontrolled, setUncontrolled] = useState(min ?? 0);
+  const controlled = value !== undefined;
+  const current = controlled ? value : uncontrolled;
+
+  function commit(next: number) {
+    const bounded = Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min ?? Number.NEGATIVE_INFINITY, next));
+    if (!controlled) setUncontrolled(bounded);
+    onValueChange?.(bounded);
+  }
+
+  function handleInput(event: ChangeEvent<HTMLInputElement>) {
+    const parsed = Number(event.target.value);
+    if (Number.isFinite(parsed)) commit(parsed);
+  }
+
+  const atMin = min !== undefined && current <= min;
+  const atMax = max !== undefined && current >= max;
+
+  return (
+    <div
+      {...props}
+      className={classNames(styles.root, className)}
+      data-disabled={disabled ? "true" : "false"}
+      data-invalid={invalid ? "true" : "false"}
+      data-openbitfun-component="mobile-stepper"
+    >
+      {(label !== undefined && label !== null) && (
+        <span className={styles.copy} data-openbitfun-part="copy">
+          <span className={styles.label} data-openbitfun-part="label">{label}</span>
+          {description !== undefined && description !== null && (
+            <span className={styles.description} data-openbitfun-part="description">{description}</span>
+          )}
+        </span>
+      )}
+      <span className={styles.control} data-openbitfun-part="control">
+        <button
+          aria-label={decrementLabel}
+          className={styles.button}
+          data-openbitfun-part="decrement"
+          disabled={disabled || atMin}
+          onClick={() => commit(current - step)}
+          type="button"
+        >
+          <Minus aria-hidden="true" />
+        </button>
+        <span className={styles.value}>
+          <input
+            aria-invalid={invalid || undefined}
+            aria-valuemax={max}
+            aria-valuemin={min}
+            aria-valuenow={current}
+            className={styles.input}
+            data-openbitfun-part="value"
+            disabled={disabled}
+            inputMode="numeric"
+            onChange={handleInput}
+            role="spinbutton"
+            type="text"
+            value={current}
+          />
+          {unit !== undefined && unit !== null && (
+            <span className={styles.unit} data-openbitfun-part="unit">{unit}</span>
+          )}
+        </span>
+        <button
+          aria-label={incrementLabel}
+          className={styles.button}
+          data-openbitfun-part="increment"
+          disabled={disabled || atMax}
+          onClick={() => commit(current + step)}
+          type="button"
+        >
+          <Plus aria-hidden="true" />
+        </button>
+      </span>
+    </div>
+  );
+}
diff --git a/design-system/packages/ui/src/mobile/MobileStepper/index.ts b/design-system/packages/ui/src/mobile/MobileStepper/index.ts
new file mode 100644
index 0000000000..a3ef374473
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileStepper/index.ts
@@ -0,0 +1 @@
+export { MobileStepper, type MobileStepperProps } from "./MobileStepper";
diff --git a/design-system/packages/ui/src/mobile/MobileSwitch/MobileSwitch.meta.ts b/design-system/packages/ui/src/mobile/MobileSwitch/MobileSwitch.meta.ts
new file mode 100644
index 0000000000..03b8f55eb4
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileSwitch/MobileSwitch.meta.ts
@@ -0,0 +1,38 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const mobileSwitchMeta = {
+  category: "mobile",
+  description: "A touch-sized settings row that pairs a label and its explanation with the product switch.",
+  maturity: "stable",
+  name: "MobileSwitch",
+  props: [
+    { name: "label", type: "ReactNode" },
+    { name: "description", type: "ReactNode" },
+    { name: "checked", type: "boolean" },
+    { defaultValue: "false", name: "defaultChecked", type: "boolean" },
+    { name: "onCheckedChange", type: "(checked: boolean) => void" },
+    { defaultValue: "plain", name: "appearance", type: '"plain" | "surface"' },
+  ],
+  states: ["off", "on", "hover", "active", "focus-visible", "disabled"],
+  tokens: [
+    "color.action.neutral.surface.hover",
+    "color.action.neutral.surface.pressed",
+    "color.border.subtle",
+    "color.content.disabled",
+    "color.content.muted",
+    "color.content.primary",
+    "color.control.switch.thumb",
+    "color.control.switch.track",
+    "color.control.switch.track.checked",
+    "color.focus.ring",
+    "radius.md",
+    "radius.pill",
+    "shadow.xs",
+    "space.1",
+    "space.2",
+    "space.3",
+    "type.body.md.fontSize",
+    "type.body.xs.fontSize",
+    "type.label.lg.fontWeight",
+  ],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/mobile/MobileSwitch/MobileSwitch.module.css b/design-system/packages/ui/src/mobile/MobileSwitch/MobileSwitch.module.css
new file mode 100644
index 0000000000..4d59b70000
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileSwitch/MobileSwitch.module.css
@@ -0,0 +1,29 @@
+@layer openbitfun.components {
+  /* Touch geometry lives on the row, not on the switch: a 32px track inside a 52px row is the
+     mobile pattern — the label is the target, the track is the state. */
+  .root { display: flex; box-sizing: border-box; inline-size: 100%; min-inline-size: 0; min-block-size: 52px; align-items: center; gap: var(--openbitfun-space-3); margin: 0; padding: var(--openbitfun-space-2) var(--openbitfun-space-3); border: var(--openbitfun-border-width-default) solid transparent; border-radius: var(--openbitfun-radius-md); color: var(--openbitfun-color-content-primary); background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
+  .root[data-appearance="surface"] { min-block-size: 64px; border-color: var(--openbitfun-color-border-subtle); background: var(--openbitfun-color-surface-panel); box-shadow: var(--openbitfun-shadow-xs); }
+  .root[data-disabled="true"] { color: var(--openbitfun-color-content-disabled); cursor: not-allowed; }
+
+  @media (hover: hover) and (pointer: fine) {
+    .root:is(:hover, [data-openbitfun-preview-state="hover"]):not([data-disabled="true"]) { background: var(--openbitfun-color-action-neutral-surface-hover); }
+  }
+  .root:is(:active, [data-openbitfun-preview-state="active"]):not([data-disabled="true"]) { background: var(--openbitfun-color-action-neutral-surface-pressed); }
+  .root:is(:has(.input:focus-visible), [data-openbitfun-preview-state="focus-visible"]) { outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring); outline-offset: var(--openbitfun-focus-offset); }
+
+  .copy { display: flex; box-sizing: border-box; min-inline-size: 0; flex: 1 1 auto; flex-direction: column; gap: var(--openbitfun-space-1); }
+  .label { color: var(--openbitfun-color-content-primary); font-size: var(--openbitfun-type-body-md-font-size); font-weight: var(--openbitfun-type-label-lg-font-weight); }
+  .description { color: var(--openbitfun-color-content-muted); font-size: var(--openbitfun-type-body-xs-font-size); }
+  .root[data-disabled="true"] .label, .root[data-disabled="true"] .description { color: inherit; }
+
+  .control { position: relative; display: inline-flex; inline-size: var(--openbitfun-control-switch-track-width); block-size: var(--openbitfun-control-switch-track-height); flex: 0 0 auto; }
+  .input { position: absolute; z-index: var(--openbitfun-layer-content); inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: inherit; }
+  .track { position: relative; display: block; inline-size: 100%; block-size: 100%; overflow: hidden; border-radius: var(--openbitfun-radius-pill); background: var(--openbitfun-color-control-switch-track); pointer-events: none; transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
+  .thumb { position: absolute; inset-block-start: var(--openbitfun-control-switch-thumb-inset); inset-inline-start: var(--openbitfun-control-switch-thumb-inset); inline-size: var(--openbitfun-control-switch-thumb-size); block-size: var(--openbitfun-control-switch-thumb-size); border-radius: var(--openbitfun-radius-pill); background: var(--openbitfun-color-control-switch-thumb); transition: transform var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
+  .root[data-checked="true"] .track { background: var(--openbitfun-color-control-switch-track-checked); }
+  .root[data-checked="true"] .thumb { transform: translateX(var(--openbitfun-control-switch-thumb-travel)); }
+  .root:dir(rtl)[data-checked="true"] .thumb { transform: translateX(var(--openbitfun-control-switch-thumb-travel-reverse)); }
+
+  @media (prefers-reduced-motion: reduce) { .root, .track, .thumb { transition: none; } }
+  @media (forced-colors: active) { .root[data-appearance="surface"] { border-color: ButtonText; } .track { border: var(--openbitfun-border-width-default) solid ButtonText; } .root:has(.input:focus-visible), .root[data-openbitfun-preview-state="focus-visible"] { outline-color: Highlight; } }
+}
diff --git a/design-system/packages/ui/src/mobile/MobileSwitch/MobileSwitch.tsx b/design-system/packages/ui/src/mobile/MobileSwitch/MobileSwitch.tsx
new file mode 100644
index 0000000000..c91f9702bd
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileSwitch/MobileSwitch.tsx
@@ -0,0 +1,84 @@
+import {
+  forwardRef,
+  useState,
+  type ChangeEvent,
+  type InputHTMLAttributes,
+  type ReactNode,
+} from "react";
+import { classNames } from "../../internal/classNames";
+import styles from "./MobileSwitch.module.css";
+
+export type MobileSwitchAppearance = "plain" | "surface";
+
+export interface MobileSwitchProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "type"> {
+  appearance?: MobileSwitchAppearance;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  description?: ReactNode;
+  label: ReactNode;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+/** A settings row: the label and its explanation are the tap target, the switch is the control.
+    The switch itself is the web Switch's track and thumb, so both entries read as one product. */
+export const MobileSwitch = forwardRef<HTMLInputElement, MobileSwitchProps>(
+  function MobileSwitch({
+    appearance = "plain",
+    checked,
+    className,
+    defaultChecked,
+    description,
+    disabled,
+    label,
+    onChange,
+    onCheckedChange,
+    ...props
+  }, ref) {
+    const [uncontrolled, setUncontrolled] = useState(defaultChecked ?? false);
+    const controlled = checked !== undefined;
+    const resolved = controlled ? checked : uncontrolled;
+    /* Focus and press states belong to the hidden input, but the row is what changes. The Lab drives
+       the row through a root attribute, so lift that hook off the input onto the label. */
+    const previewState = (props as Record<string, unknown>)["data-openbitfun-preview-state"];
+
+    function handleChange(event: ChangeEvent<HTMLInputElement>) {
+      if (!controlled) setUncontrolled(event.target.checked);
+      onChange?.(event);
+      onCheckedChange?.(event.target.checked);
+    }
+
+    return (
+      <label
+        className={classNames(styles.root, className)}
+        data-appearance={appearance}
+        data-checked={resolved ? "true" : "false"}
+        data-disabled={disabled ? "true" : "false"}
+        data-openbitfun-component="mobile-switch"
+        data-openbitfun-preview-state={typeof previewState === "string" ? previewState : undefined}
+      >
+        <span className={styles.copy} data-openbitfun-part="copy">
+          <span className={styles.label} data-openbitfun-part="label">{label}</span>
+          {description !== undefined && description !== null && (
+            <span className={styles.description} data-openbitfun-part="description">{description}</span>
+          )}
+        </span>
+        <span className={styles.control}>
+          <input
+            {...props}
+            checked={resolved}
+            className={styles.input}
+            disabled={disabled}
+            onChange={handleChange}
+            ref={ref}
+            role="switch"
+            type="checkbox"
+          />
+          <span aria-hidden="true" className={styles.track} data-openbitfun-part="track">
+            <span className={styles.thumb} data-openbitfun-part="thumb" />
+          </span>
+        </span>
+      </label>
+    );
+  },
+);
diff --git a/design-system/packages/ui/src/mobile/MobileSwitch/index.ts b/design-system/packages/ui/src/mobile/MobileSwitch/index.ts
new file mode 100644
index 0000000000..8c54ca54e6
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileSwitch/index.ts
@@ -0,0 +1,5 @@
+export {
+  MobileSwitch,
+  type MobileSwitchAppearance,
+  type MobileSwitchProps,
+} from "./MobileSwitch";
diff --git a/design-system/packages/ui/src/mobile/MobileTabBar/MobileTabBar.meta.ts b/design-system/packages/ui/src/mobile/MobileTabBar/MobileTabBar.meta.ts
new file mode 100644
index 0000000000..c02d83c7e1
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileTabBar/MobileTabBar.meta.ts
@@ -0,0 +1,34 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const mobileTabBarMeta = {
+  category: "mobile",
+  description: "The bottom destination bar: equal-width items, a filled selection pill, and safe-area padding.",
+  maturity: "stable",
+  name: "MobileTabBar",
+  props: [
+    { name: "items", type: "readonly MobileTabBarItem[]" },
+    { name: "value", type: "string" },
+    { name: "defaultValue", type: "string" },
+    { name: "onValueChange", type: "(value: string) => void" },
+    { name: "label", type: "string" },
+    { defaultValue: "surface", name: "appearance", type: '"surface" | "plain"' },
+    { defaultValue: "true", name: "safeArea", type: "boolean" },
+  ],
+  states: ["default", "selected", "hover", "active", "focus-visible", "disabled", "safe-area"],
+  tokens: [
+    "color.action.neutral.surface.hover",
+    "color.action.neutral.surface.pressed",
+    "color.content.disabled",
+    "color.content.primary",
+    "color.content.secondary",
+    "color.focus.ring",
+    "color.selection.surface",
+    "color.surface.panel",
+    "radius.md",
+    "radius.pill",
+    "space.1",
+    "space.2",
+    "type.label.md.fontWeight",
+    "type.label.sm.fontSize",
+  ],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/mobile/MobileTabBar/MobileTabBar.module.css b/design-system/packages/ui/src/mobile/MobileTabBar/MobileTabBar.module.css
new file mode 100644
index 0000000000..8b72499488
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileTabBar/MobileTabBar.module.css
@@ -0,0 +1,31 @@
+@layer openbitfun.components {
+  .root { display: flex; box-sizing: border-box; inline-size: 100%; min-block-size: 56px; align-items: stretch; gap: 0; padding-inline: var(--openbitfun-space-1); background: var(--openbitfun-color-surface-panel); }
+  .root[data-appearance="plain"] { background: transparent; }
+  /* The bar owns the bottom edge of the screen, so it owns the home indicator's space too. */
+  .root[data-safe-area="true"] { padding-block-end: env(safe-area-inset-bottom, 0px); }
+
+  .item { display: flex; box-sizing: border-box; min-inline-size: 0; min-block-size: 52px; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: var(--openbitfun-space-1); margin: 0; padding: var(--openbitfun-space-2) var(--openbitfun-space-1); border: 0; border-radius: var(--openbitfun-radius-md); color: var(--openbitfun-color-content-secondary); background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; font: inherit; transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard), color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
+  /* Selection is a filled pill behind the icon: no underline, no border. */
+  .item[data-selected="true"] { color: var(--openbitfun-color-content-primary); }
+  .item[data-selected="true"] .icon { background: var(--openbitfun-color-selection-surface); }
+
+  @media (hover: hover) and (pointer: fine) {
+    .item:is(:hover, [data-openbitfun-preview-state="hover"]):not(:disabled),
+    .root[data-openbitfun-preview-state="hover"] .item:not(:disabled) { color: var(--openbitfun-color-content-primary); }
+    .item:is(:hover, [data-openbitfun-preview-state="hover"]):not(:disabled) .icon,
+    .root[data-openbitfun-preview-state="hover"] .item:not(:disabled) .icon { background: var(--openbitfun-color-action-neutral-surface-hover); }
+  }
+  .item:is(:active, [data-openbitfun-preview-state="active"]):not(:disabled) .icon,
+  .root[data-openbitfun-preview-state="active"] .item:not(:disabled) .icon { background: var(--openbitfun-color-action-neutral-surface-pressed); }
+  .item:is(:focus-visible, [data-openbitfun-preview-state="focus-visible"]),
+  .root[data-openbitfun-preview-state="focus-visible"] .item[data-selected="true"] { outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring); outline-offset: calc(var(--openbitfun-focus-offset) * -1); }
+  .item:disabled { color: var(--openbitfun-color-content-disabled); cursor: not-allowed; }
+
+  .icon { position: relative; display: grid; box-sizing: border-box; inline-size: 64px; block-size: 32px; place-items: center; border-radius: var(--openbitfun-radius-pill); transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
+  .icon > :where(svg, img) { inline-size: 20px; block-size: 20px; }
+  .badge { position: absolute; inset-block-start: 0; inset-inline-start: 50%; margin-inline-start: 4px; }
+  .label { display: block; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--openbitfun-type-label-sm-font-size); font-weight: var(--openbitfun-type-label-md-font-weight); }
+
+  @media (prefers-reduced-motion: reduce) { .item, .icon { transition: none; } }
+  @media (forced-colors: active) { .item:focus-visible { outline-color: Highlight; } .item[data-selected="true"] .icon { border: var(--openbitfun-border-width-default) solid Highlight; } }
+}
diff --git a/design-system/packages/ui/src/mobile/MobileTabBar/MobileTabBar.tsx b/design-system/packages/ui/src/mobile/MobileTabBar/MobileTabBar.tsx
new file mode 100644
index 0000000000..4545195ca1
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileTabBar/MobileTabBar.tsx
@@ -0,0 +1,82 @@
+import { useState, type HTMLAttributes, type ReactNode } from "react";
+import { classNames } from "../../internal/classNames";
+import styles from "./MobileTabBar.module.css";
+
+export type MobileTabBarAppearance = "surface" | "plain";
+
+export interface MobileTabBarItem {
+  badge?: ReactNode;
+  disabled?: boolean;
+  icon?: ReactNode;
+  label: ReactNode;
+  value: string;
+}
+
+export interface MobileTabBarProps
+  extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+  appearance?: MobileTabBarAppearance;
+  defaultValue?: string;
+  items: readonly MobileTabBarItem[];
+  label: string;
+  onValueChange?: (value: string) => void;
+  safeArea?: boolean;
+  value?: string;
+}
+
+/** Destinations, not tabs: the bar swaps the screen, so each item is a link-like button marked with
+    aria-current rather than a tab in a tablist. */
+export function MobileTabBar({
+  appearance = "surface",
+  className,
+  defaultValue,
+  items,
+  label,
+  onValueChange,
+  safeArea = true,
+  value,
+  ...props
+}: MobileTabBarProps) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const controlled = value !== undefined;
+  const current = controlled ? value : uncontrolled;
+
+  function select(next: string) {
+    if (!controlled) setUncontrolled(next);
+    onValueChange?.(next);
+  }
+
+  return (
+    <nav
+      {...props}
+      aria-label={label}
+      className={classNames(styles.root, className)}
+      data-appearance={appearance}
+      data-openbitfun-component="mobile-tab-bar"
+      data-safe-area={safeArea ? "true" : "false"}
+    >
+      {items.map(item => {
+        const selected = item.value === current;
+        return (
+          <button
+            aria-current={selected ? "page" : undefined}
+            className={styles.item}
+            data-openbitfun-part="item"
+            data-selected={selected ? "true" : "false"}
+            disabled={item.disabled}
+            key={item.value}
+            onClick={() => select(item.value)}
+            type="button"
+          >
+            <span className={styles.icon} data-openbitfun-part="icon">
+              {item.icon}
+              {item.badge !== undefined && item.badge !== null && (
+                <span className={styles.badge} data-openbitfun-part="badge">{item.badge}</span>
+              )}
+            </span>
+            <span className={styles.label} data-openbitfun-part="label">{item.label}</span>
+          </button>
+        );
+      })}
+    </nav>
+  );
+}
diff --git a/design-system/packages/ui/src/mobile/MobileTabBar/index.ts b/design-system/packages/ui/src/mobile/MobileTabBar/index.ts
new file mode 100644
index 0000000000..13d30e2ab7
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileTabBar/index.ts
@@ -0,0 +1,6 @@
+export {
+  MobileTabBar,
+  type MobileTabBarAppearance,
+  type MobileTabBarItem,
+  type MobileTabBarProps,
+} from "./MobileTabBar";
diff --git a/design-system/packages/ui/src/mobile/MobileTag/MobileTag.meta.ts b/design-system/packages/ui/src/mobile/MobileTag/MobileTag.meta.ts
new file mode 100644
index 0000000000..015502d550
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileTag/MobileTag.meta.ts
@@ -0,0 +1,38 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const mobileTagMeta = {
+  category: "mobile",
+  description: "A touch-sized labelled pill for filters and tags, with leading and trailing slots and a filled selected state.",
+  maturity: "stable",
+  name: "MobileTag",
+  props: [
+    { name: "children", type: "ReactNode" },
+    { name: "leading", type: "ReactNode" },
+    { name: "trailing", type: "ReactNode" },
+    { defaultValue: "false", name: "selected", type: "boolean" },
+    { defaultValue: "soft", name: "appearance", type: '"soft" | "accent"' },
+    { defaultValue: "md", name: "size", type: '"sm" | "md"' },
+  ],
+  states: ["default", "selected", "hover", "active", "focus-visible", "disabled"],
+  tokens: [
+    "color.accent.default",
+    "color.accent.surface",
+    "color.action.neutral.surface",
+    "color.action.neutral.surface.hover",
+    "color.action.neutral.surface.pressed",
+    "color.action.primary.content",
+    "color.content.disabled",
+    "color.content.primary",
+    "color.content.secondary",
+    "color.focus.ring",
+    "color.selection.surface",
+    "font.weight.semibold",
+    "radius.pill",
+    "space.2",
+    "space.3",
+    "space.4",
+    "type.label.md.fontSize",
+    "type.label.md.fontWeight",
+    "type.label.sm.fontSize",
+  ],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/mobile/MobileTag/MobileTag.module.css b/design-system/packages/ui/src/mobile/MobileTag/MobileTag.module.css
new file mode 100644
index 0000000000..a0dcc476c2
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileTag/MobileTag.module.css
@@ -0,0 +1,21 @@
+@layer openbitfun.components {
+  .root { box-sizing: border-box; display: inline-flex; min-block-size: 44px; align-items: center; justify-content: center; gap: var(--openbitfun-space-2); margin: 0; padding: 0 var(--openbitfun-space-4); border: 0; border-radius: var(--openbitfun-radius-pill); color: var(--openbitfun-color-content-secondary); background: var(--openbitfun-color-action-neutral-surface); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; font: inherit; font-size: var(--openbitfun-type-label-md-font-size); font-weight: var(--openbitfun-type-label-md-font-weight); transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard); }
+  .root[data-size="sm"] { min-block-size: 36px; padding-inline: var(--openbitfun-space-3); font-size: var(--openbitfun-type-label-sm-font-size); }
+  .root[data-appearance="accent"] { color: var(--openbitfun-color-accent-default); background: var(--openbitfun-color-accent-surface); }
+  /* Selection is a filled block, the same signal the rest of the mobile set uses for state. */
+  .root[data-selected="true"] { color: var(--openbitfun-color-content-primary); background: var(--openbitfun-color-selection-surface); font-weight: var(--openbitfun-font-weight-semibold); }
+  .root[data-selected="true"][data-appearance="accent"] { color: var(--openbitfun-color-action-primary-content); background: var(--openbitfun-color-accent-default); }
+
+  @media (hover: hover) and (pointer: fine) {
+    .root:is(:hover, [data-openbitfun-preview-state="hover"]):not(:disabled) { background: var(--openbitfun-color-action-neutral-surface-hover); }
+  }
+  .root:is(:active, [data-openbitfun-preview-state="active"]):not(:disabled) { background: var(--openbitfun-color-action-neutral-surface-pressed); }
+  .root:is(:focus-visible, [data-openbitfun-preview-state="focus-visible"]) { outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring); outline-offset: var(--openbitfun-focus-offset); }
+  .root:disabled { color: var(--openbitfun-color-content-disabled); cursor: not-allowed; }
+
+  .label { display: block; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .leading, .trailing { display: grid; inline-size: 16px; block-size: 16px; flex: 0 0 16px; place-items: center; }
+  .leading > :where(svg, img), .trailing > :where(svg, img) { inline-size: 100%; block-size: 100%; }
+
+  @media (prefers-reduced-motion: reduce) { .root { transition: none; } }
+}
diff --git a/design-system/packages/ui/src/mobile/MobileTag/MobileTag.tsx b/design-system/packages/ui/src/mobile/MobileTag/MobileTag.tsx
new file mode 100644
index 0000000000..041b4c5a2b
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileTag/MobileTag.tsx
@@ -0,0 +1,55 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { classNames } from "../../internal/classNames";
+import styles from "./MobileTag.module.css";
+
+export type MobileTagAppearance = "soft" | "accent";
+export type MobileTagSize = "sm" | "md";
+
+export interface MobileTagProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  appearance?: MobileTagAppearance;
+  children: ReactNode;
+  leading?: ReactNode;
+  selected?: boolean;
+  size?: MobileTagSize;
+  trailing?: ReactNode;
+}
+
+/** The mobile form of the web Capsule: a labelled pill that may carry a leading mark and a trailing
+    slot. Selection is a fill, never a stroke — a bordered chip would make a filter row read as a
+    row of inputs. */
+export const MobileTag = forwardRef<HTMLButtonElement, MobileTagProps>(
+  function MobileTag({
+    appearance = "soft",
+    children,
+    className,
+    leading,
+    selected = false,
+    size = "md",
+    trailing,
+    type = "button",
+    ...props
+  }, ref) {
+    return (
+      <button
+        aria-pressed={selected}
+        {...props}
+        className={classNames(styles.root, className)}
+        data-appearance={appearance}
+        data-openbitfun-component="mobile-tag"
+        data-selected={selected ? "true" : "false"}
+        data-size={size}
+        ref={ref}
+        type={type}
+      >
+        {leading !== undefined && leading !== null && (
+          <span aria-hidden="true" className={styles.leading} data-openbitfun-part="leading">{leading}</span>
+        )}
+        <span className={styles.label} data-openbitfun-part="label">{children}</span>
+        {trailing !== undefined && trailing !== null && (
+          <span className={styles.trailing} data-openbitfun-part="trailing">{trailing}</span>
+        )}
+      </button>
+    );
+  },
+);
diff --git a/design-system/packages/ui/src/mobile/MobileTag/index.ts b/design-system/packages/ui/src/mobile/MobileTag/index.ts
new file mode 100644
index 0000000000..0dc683aaca
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileTag/index.ts
@@ -0,0 +1,6 @@
+export {
+  MobileTag,
+  type MobileTagAppearance,
+  type MobileTagProps,
+  type MobileTagSize,
+} from "./MobileTag";
diff --git a/design-system/packages/ui/src/mobile/MobileToolbar/MobileToolbar.meta.ts b/design-system/packages/ui/src/mobile/MobileToolbar/MobileToolbar.meta.ts
new file mode 100644
index 0000000000..e75f978290
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileToolbar/MobileToolbar.meta.ts
@@ -0,0 +1,25 @@
+import type { ComponentMeta } from "../../registry.types";
+
+export const mobileToolbarMeta = {
+  category: "mobile",
+  description: "A bottom action bar with leading, middle, and trailing slots that keeps clear of the home indicator.",
+  maturity: "stable",
+  name: "MobileToolbar",
+  props: [
+    { name: "leading", type: "ReactNode" },
+    { name: "children", type: "ReactNode" },
+    { name: "trailing", type: "ReactNode" },
+    { name: "label", type: "string" },
+    { defaultValue: "surface", name: "appearance", type: '"surface" | "plain"' },
+    { defaultValue: "true", name: "safeArea", type: "boolean" },
+    { defaultValue: "false", name: "sticky", type: "boolean" },
+  ],
+  states: ["default", "plain", "sticky", "safe-area"],
+  tokens: [
+    "color.surface.panel",
+    "shadow.sm",
+    "space.2",
+    "space.3",
+    "space.4",
+  ],
+} as const satisfies ComponentMeta;
diff --git a/design-system/packages/ui/src/mobile/MobileToolbar/MobileToolbar.module.css b/design-system/packages/ui/src/mobile/MobileToolbar/MobileToolbar.module.css
new file mode 100644
index 0000000000..126745a44f
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileToolbar/MobileToolbar.module.css
@@ -0,0 +1,11 @@
+@layer openbitfun.components {
+  .root { display: flex; box-sizing: border-box; inline-size: 100%; min-block-size: 56px; align-items: center; justify-content: space-between; gap: var(--openbitfun-space-3); padding: var(--openbitfun-space-2) var(--openbitfun-space-4); background: var(--openbitfun-color-surface-panel); box-shadow: var(--openbitfun-shadow-sm); }
+  .root[data-appearance="plain"] { background: transparent; box-shadow: none; }
+  .root[data-safe-area="true"] { padding-block-end: calc(var(--openbitfun-space-2) + env(safe-area-inset-bottom, 0px)); }
+  .root[data-sticky="true"] { position: sticky; inset-block-end: 0; z-index: var(--openbitfun-layer-sticky); }
+
+  .leading, .trailing { display: inline-flex; min-inline-size: 0; flex: 0 0 auto; align-items: center; gap: var(--openbitfun-space-2); }
+  .content { display: inline-flex; min-inline-size: 0; flex: 1 1 auto; align-items: center; justify-content: center; gap: var(--openbitfun-space-2); }
+
+  @media (forced-colors: active) { .root { border-block-start: var(--openbitfun-border-width-default) solid CanvasText; } }
+}
diff --git a/design-system/packages/ui/src/mobile/MobileToolbar/MobileToolbar.tsx b/design-system/packages/ui/src/mobile/MobileToolbar/MobileToolbar.tsx
new file mode 100644
index 0000000000..fa73d6070b
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileToolbar/MobileToolbar.tsx
@@ -0,0 +1,52 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { classNames } from "../../internal/classNames";
+import styles from "./MobileToolbar.module.css";
+
+export type MobileToolbarAppearance = "surface" | "plain";
+
+export interface MobileToolbarProps extends HTMLAttributes<HTMLDivElement> {
+  appearance?: MobileToolbarAppearance;
+  children?: ReactNode;
+  label?: string;
+  leading?: ReactNode;
+  safeArea?: boolean;
+  sticky?: boolean;
+  trailing?: ReactNode;
+}
+
+/** The action bar under a mobile screen. It separates from the content by fill and elevation rather
+    than a rule, the same way the rest of the mobile surfaces do. */
+export function MobileToolbar({
+  appearance = "surface",
+  children,
+  className,
+  label,
+  leading,
+  safeArea = true,
+  sticky = false,
+  trailing,
+  ...props
+}: MobileToolbarProps) {
+  return (
+    <div
+      {...props}
+      aria-label={label}
+      className={classNames(styles.root, className)}
+      data-appearance={appearance}
+      data-openbitfun-component="mobile-toolbar"
+      data-safe-area={safeArea ? "true" : "false"}
+      data-sticky={sticky ? "true" : "false"}
+      role={label ? "toolbar" : undefined}
+    >
+      {leading !== undefined && leading !== null && (
+        <span className={styles.leading} data-openbitfun-part="leading">{leading}</span>
+      )}
+      {children !== undefined && children !== null && (
+        <span className={styles.content} data-openbitfun-part="content">{children}</span>
+      )}
+      {trailing !== undefined && trailing !== null && (
+        <span className={styles.trailing} data-openbitfun-part="trailing">{trailing}</span>
+      )}
+    </div>
+  );
+}
diff --git a/design-system/packages/ui/src/mobile/MobileToolbar/index.ts b/design-system/packages/ui/src/mobile/MobileToolbar/index.ts
new file mode 100644
index 0000000000..df7d915828
--- /dev/null
+++ b/design-system/packages/ui/src/mobile/MobileToolbar/index.ts
@@ -0,0 +1,5 @@
+export {
+  MobileToolbar,
+  type MobileToolbarAppearance,
+  type MobileToolbarProps,
+} from "./MobileToolbar";
diff --git a/design-system/packages/ui/src/registry.ts b/design-system/packages/ui/src/registry.ts
index abda186802..98afc696d7 100644
--- a/design-system/packages/ui/src/registry.ts
+++ b/design-system/packages/ui/src/registry.ts
@@ -47,10 +47,12 @@ import { voiceCallPanelMeta } from "./components/VoiceCallPanel/VoiceCallPanel.m
 import { voiceParticleLogoMeta } from "./brand/VoiceParticleLogo/VoiceParticleLogo.meta";
 import { mobileIconButtonMeta } from "./mobile/MobileIconButton/MobileIconButton.meta";
 import { mobileActionSheetMeta } from "./mobile/MobileActionSheet/MobileActionSheet.meta";
+import { mobileAvatarMeta } from "./mobile/MobileAvatar/MobileAvatar.meta";
 import { mobileBadgeMeta } from "./mobile/MobileBadge/MobileBadge.meta";
 import { mobileBannerMeta } from "./mobile/MobileBanner/MobileBanner.meta";
 import { mobileButtonMeta } from "./mobile/MobileButton/MobileButton.meta";
 import { mobileCardMeta } from "./mobile/MobileCard/MobileCard.meta";
+import { mobileCheckboxMeta } from "./mobile/MobileCheckbox/MobileCheckbox.meta";
 import { mobileChoiceSheetMeta } from "./mobile/MobileChoiceSheet/MobileChoiceSheet.meta";
 import { mobileConfirmSheetMeta } from "./mobile/MobileConfirmSheet/MobileConfirmSheet.meta";
 import { mobileComposerMeta } from "./mobile/MobileComposer/MobileComposer.meta";
@@ -61,13 +63,20 @@ import { mobileListRowMeta } from "./mobile/MobileListRow/MobileListRow.meta";
 import { mobileLinkMeta } from "./mobile/MobileLink/MobileLink.meta";
 import { mobileMessageMeta } from "./mobile/MobileMessage/MobileMessage.meta";
 import { mobilePageHeaderMeta } from "./mobile/MobilePageHeader/MobilePageHeader.meta";
+import { mobileRadioGroupMeta } from "./mobile/MobileRadioGroup/MobileRadioGroup.meta";
 import { mobileSectionMeta } from "./mobile/MobileSection/MobileSection.meta";
 import { mobileScrimMeta } from "./mobile/MobileScrim/MobileScrim.meta";
 import { mobileSegmentedControlMeta } from "./mobile/MobileSegmentedControl/MobileSegmentedControl.meta";
+import { mobileSelectMeta } from "./mobile/MobileSelect/MobileSelect.meta";
 import { mobileSheetMeta } from "./mobile/MobileSheet/MobileSheet.meta";
 import { mobileStatusMeta } from "./mobile/MobileStatus/MobileStatus.meta";
+import { mobileStepperMeta } from "./mobile/MobileStepper/MobileStepper.meta";
+import { mobileSwitchMeta } from "./mobile/MobileSwitch/MobileSwitch.meta";
+import { mobileTabBarMeta } from "./mobile/MobileTabBar/MobileTabBar.meta";
+import { mobileTagMeta } from "./mobile/MobileTag/MobileTag.meta";
 import { mobileTextFieldMeta } from "./mobile/MobileTextField/MobileTextField.meta";
 import { mobileTextareaMeta } from "./mobile/MobileTextarea/MobileTextarea.meta";
+import { mobileToolbarMeta } from "./mobile/MobileToolbar/MobileToolbar.meta";
 import { askUserMeta } from "./flow-chat/ask-user/AskUser.meta";
 import { chatComposerMeta } from "./flow-chat/composer/ChatComposer.meta";
 import { thinkingBlockMeta, flowGroupMeta, exploreGroupMeta, contextLoadGroupMeta, flowChatRuntimeStatusMeta } from "./flow-chat/conversation/ConversationBlocks.meta";
@@ -108,11 +117,12 @@ import {
   webSearchToolCardMeta,
 } from "./flow-chat/tool-cards/StandardToolCards.meta";
 import { openBitFunSolidMarkMeta, openBitFunAppIconMeta, openBitFunMarkMeta, openBitFunBrandMotionMeta, subagentHatchMeta } from "./brand/brand.meta";
-import type { ComponentMeta } from "./registry.types";
+import type { ComponentMeta, ComponentPlatform } from "./registry.types";
 
 export type {
   ComponentMaturity,
   ComponentMeta,
+  ComponentPlatform,
   ComponentPropMeta,
 } from "./registry.types";
 
@@ -169,10 +179,12 @@ export const componentRegistry = [
   loadingStateMeta,
   menuMeta,
   mobileActionSheetMeta,
+  mobileAvatarMeta,
   mobileBadgeMeta,
   mobileBannerMeta,
   mobileButtonMeta,
   mobileCardMeta,
+  mobileCheckboxMeta,
   mobileChoiceSheetMeta,
   mobileConfirmSheetMeta,
   mobileComposerMeta,
@@ -184,13 +196,20 @@ export const componentRegistry = [
   mobileListRowMeta,
   mobileMessageMeta,
   mobilePageHeaderMeta,
+  mobileRadioGroupMeta,
   mobileScrimMeta,
   mobileSectionMeta,
   mobileSegmentedControlMeta,
+  mobileSelectMeta,
   mobileSheetMeta,
   mobileStatusMeta,
+  mobileStepperMeta,
+  mobileSwitchMeta,
+  mobileTabBarMeta,
+  mobileTagMeta,
   mobileTextFieldMeta,
   mobileTextareaMeta,
+  mobileToolbarMeta,
   dialogMeta,
   multiSelectMeta,
   navigationPanelMeta,
@@ -235,3 +254,29 @@ export const componentRegistry = [
   webFetchToolCardMeta,
   webSearchToolCardMeta,
 ] as const satisfies readonly ComponentMeta[];
+
+const categoryPlatform: Readonly<Record<ComponentMeta["category"], readonly ComponentPlatform[]>> = {
+  action: ["web"],
+  brand: ["web"],
+  feedback: ["web"],
+  "flow-chat": ["web"],
+  form: ["web"],
+  mobile: ["mobile"],
+  navigation: ["web"],
+  primitive: ["web"],
+};
+
+/* The surfaces a component is authored for. Entries stay derived until a component is really
+   shared, which keeps a new platform from forcing a rewrite of every existing entry. */
+export function componentPlatforms(
+  component: Pick<ComponentMeta, "category" | "platforms">,
+): readonly ComponentPlatform[] {
+  return component.platforms ?? categoryPlatform[component.category];
+}
+
+export function isComponentForPlatform(
+  component: Pick<ComponentMeta, "category" | "platforms">,
+  platform: ComponentPlatform,
+): boolean {
+  return componentPlatforms(component).includes(platform);
+}
diff --git a/design-system/packages/ui/src/registry.types.ts b/design-system/packages/ui/src/registry.types.ts
index 62e67ec892..f3df97220b 100644
--- a/design-system/packages/ui/src/registry.types.ts
+++ b/design-system/packages/ui/src/registry.types.ts
@@ -1,5 +1,9 @@
 export type ComponentMaturity = "experimental" | "beta" | "stable" | "deprecated";
 
+/* Platform is orthogonal to category: a surface ("where it runs") never becomes a category
+   ("what it is"), so adding tablet, desktop or watch never renames an existing entry. */
+export type ComponentPlatform = "web" | "mobile" | "tablet" | "desktop" | "watch";
+
 export interface ComponentPropMeta {
   defaultValue?: string;
   name: string;
@@ -11,6 +15,9 @@ export interface ComponentMeta {
   description: string;
   maturity: ComponentMaturity;
   name: string;
+  /* Defaults to a single platform derived from `category`, so an entry only states this
+     explicitly when it is authored for several surfaces at once. */
+  platforms?: readonly ComponentPlatform[];
   props: readonly ComponentPropMeta[];
   states: readonly string[];
   tokens: readonly string[];
diff --git a/design-system/packages/ui/tests/consistency.test.mjs b/design-system/packages/ui/tests/consistency.test.mjs
new file mode 100644
index 0000000000..3fbbb434c9
--- /dev/null
+++ b/design-system/packages/ui/tests/consistency.test.mjs
@@ -0,0 +1,191 @@
+// Cross-platform contract, enforced instead of described.
+//
+// The design system ships one visual language per surface (web today, mobile today, tablet and
+// watch later) and a shared token layer underneath. Two things must therefore stay true as the
+// surfaces multiply:
+//
+//   1. Vocabulary — one word per idea. A platform may skip a state it cannot express on its
+//      input model (a touch device has no hover), but it may not rename the idea. `off/on` and
+//      `checked`, or `focus-visible` and `focus-within` on the same element, are the drift this
+//      test exists to stop.
+//   2. Platform — a surface is declared, never implied by the component name. `category` says
+//      what a component is; `platforms` says where it runs, so a third surface never renames an
+//      existing entry.
+//
+// Divergence that is deliberate is listed in the registers below with a reason, so the next
+// reader can tell a decision from an accident.
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+import { componentPlatforms, componentRegistry } from "../dist/registry.js";
+
+const KNOWN_PLATFORMS = ["web", "mobile", "tablet", "desktop", "watch"];
+
+/* States that describe how a control behaves, not what it contains. Content variants ("with-title",
+   "media", "artwork") stay free-form. */
+const INTERACTION_STATES = new Set([
+  "active", "checked", "collapsed", "disabled", "expanded", "focus-visible", "focus-within", "hover",
+  "indeterminate", "invalid", "loading", "off", "on", "open", "pressed", "read-only", "selected",
+  "unselected",
+]);
+
+/* Pairs that name the same idea and must not both appear on one component's counterpart pair. */
+const SYNONYM_PAIRS = [
+  ["checked", "on"],
+  ["checked", "off"],
+  ["selected", "checked"],
+];
+
+/* Register 1 — a web interaction state a mobile counterpart does not declare.
+   Reason is required: platform anatomy is allowed to excuse a state, silence is not. */
+const MOBILE_STATE_GAPS = {
+  MobileButton: "web Button declares no interaction state for the press ring the touch surface draws itself",
+  MobileComposer: "the mobile composer is an expandable shell whose validation lives in the sheet, not in the row",
+  MobileTextarea: "touch text fields draw focus on the wrapper and never show hover",
+  MobileSelect: "the mobile select has no hover on touch; its field is a button, so pressed feedback replaces it",
+};
+
+/* Register 2 — a shared axis the two surfaces express differently: either the same name with a
+   second meaning, or an axis only one surface has. */
+const PROP_PARITY_GAPS = {
+  Checkbox: "appearance means the control skin (custom|native); the mobile row uses the same name for its container surface",
+  IconButton: "the mobile button exposes selected and writes aria-pressed itself; the web button is stateless and leaves the toggle to the caller",
+};
+
+async function source(relative) {
+  return readFile(new URL(`../src/${relative}`, import.meta.url), "utf8");
+}
+
+/* Compound entries (Sheet lives with Dialog) have no file of their own. */
+async function optionalSource(relative) {
+  try {
+    return await source(relative);
+  } catch {
+    return "";
+  }
+}
+
+function propsOf(tsx) {
+  /* Interfaces are written both multiline and inline, so read to the closing brace at depth zero
+     instead of assuming a line break before it. */
+  const start = tsx.search(/export interface \w+Props/);
+  if (start < 0) return [];
+  const body = tsx.slice(tsx.indexOf("{", start) + 1);
+  let depth = 0;
+  let end = body.length;
+  for (let index = 0; index < body.length; index += 1) {
+    const char = body[index];
+    if (char === "{" || char === "<") depth += 1;
+    else if (char === ">" || char === "}") {
+      if (char === "}" && depth === 0) { end = index; break; }
+      depth -= 1;
+    }
+  }
+  const members = body.slice(0, end);
+  return [...new Set([...members.matchAll(/(?:^|[,;{\s])([A-Za-z][A-Za-z0-9]*)\??:/g)].map(match => match[1]))];
+}
+
+test("every component declares the surfaces it is authored for", () => {
+  for (const component of componentRegistry) {
+    const platforms = componentPlatforms(component);
+    assert.ok(platforms.length > 0, `${component.name} declares no platform`);
+    for (const platform of platforms) {
+      assert.ok(KNOWN_PLATFORMS.includes(platform), `${component.name} declares unknown platform ${platform}`);
+    }
+  }
+  assert.ok(componentPlatforms({ category: "mobile" }).includes("mobile"));
+  assert.ok(componentPlatforms({ category: "form", platforms: ["web", "mobile"] }).includes("mobile"));
+});
+
+test("both surfaces keep one word per interaction state", async () => {
+  const mobileEntry = await source("mobile.ts");
+  const names = [...mobileEntry.matchAll(/^\s*(Mobile[A-Za-z]+),$/gm)].map(match => match[1]);
+  assert.ok(names.length > 0);
+
+  for (const name of names) {
+    const mobile = componentRegistry.find(component => component.name === name);
+    assert.ok(mobile, `${name} is exported but not registered`);
+
+    for (const state of mobile.states) {
+      if (!INTERACTION_STATES.has(state)) continue;
+      const counterpart = SYNONYM_PAIRS.find(pair => pair.includes(state));
+      if (!counterpart) continue;
+      const web = componentRegistry.find(component => component.name === name.replace(/^Mobile/, ""));
+      if (!web) continue;
+      assert.ok(
+        !counterpart.every(word => mobile.states.includes(word) || web.states.includes(word)),
+        `${name} and ${web.name} name one interaction twice: ${counterpart.join(" / ")}`,
+      );
+    }
+  }
+});
+
+test("a web interaction state reaches its mobile counterpart or is registered as a gap", async () => {
+  const mobileEntry = await source("mobile.ts");
+  const names = [...mobileEntry.matchAll(/^\s*(Mobile[A-Za-z]+),$/gm)].map(match => match[1]);
+
+  for (const name of names) {
+    const web = componentRegistry.find(component => component.name === name.replace(/^Mobile/, ""));
+    const mobile = componentRegistry.find(component => component.name === name);
+    if (!web || !mobile) continue;
+
+    const missing = web.states.filter((state) => {
+      if (!INTERACTION_STATES.has(state)) return false;
+      if (mobile.states.includes(state)) return false;
+      /* A wrapper that draws the focus ring reports focus-within; the input inside still gets
+         focus-visible from the browser, so the pair names the same moment on different elements. */
+      if (state === "focus-visible" && mobile.states.includes("focus-within")) return false;
+      /* Selection words differ per control family by design: a switch has off/on, a tab has
+         selected, a checkbox has checked. */
+      if (["off", "on"].includes(state)) return false;
+      return true;
+    });
+
+    if (missing.length === 0) continue;
+    assert.ok(
+      MOBILE_STATE_GAPS[name],
+      `${name} is missing ${missing.join(", ")} from ${web.name}: add the state or register the gap`,
+    );
+  }
+});
+
+test("a shared prop name keeps one meaning across surfaces", async () => {
+  const mobileEntry = await source("mobile.ts");
+  const names = [...mobileEntry.matchAll(/^\s*(Mobile[A-Za-z]+),$/gm)].map(match => match[1]);
+  /* Native attributes (`disabled`) are shared by construction, so only the system axes are read. */
+  const shared = ["value", "checked", "selected", "onValueChange", "onCheckedChange", "size", "tone", "variant", "appearance", "invalid"];
+
+  for (const name of names) {
+    const web = componentRegistry.find(component => component.name === name.replace(/^Mobile/, ""));
+    if (!web || PROP_PARITY_GAPS[web.name]) continue;
+    const [webSource, mobileSource] = await Promise.all([
+      optionalSource(`components/${web.name}/${web.name}.tsx`),
+      source(`mobile/${name}/${name}.tsx`),
+    ]);
+    const webProps = new Set([...propsOf(webSource), ...web.props.map(prop => prop.name)]);
+    const mobileProps = propsOf(mobileSource);
+    assert.ok(mobileProps.length > 0, `${name} exposes no props`);
+    for (const prop of shared) {
+      if (!mobileProps.includes(prop)) continue;
+      assert.ok(
+        webProps.has(prop) || prop === "appearance",
+        `${name}.${prop} has no counterpart on ${web.name}: name the axis both surfaces know`,
+      );
+    }
+  }
+});
+
+test("mobile components reuse the shared token layer instead of private colour", async () => {
+  const mobileEntry = await source("mobile.ts");
+  const names = [...mobileEntry.matchAll(/^\s*(Mobile[A-Za-z]+),$/gm)].map(match => match[1]);
+
+  for (const name of names) {
+    const styles = await source(`mobile/${name}/${name}.module.css`);
+    assert.match(styles, /@layer openbitfun\.components/, `${name} styles must stay in the shared layer`);
+    assert.doesNotMatch(styles, /#[0-9a-f]{3,8}\b/i, `${name} must not hardcode a colour`);
+    assert.doesNotMatch(styles, /rgba?\(/, `${name} must not hardcode a colour`);
+    for (const match of styles.matchAll(/var\((--openbitfun-[a-z0-9-]+)/g)) {
+      assert.match(match[1], /^--openbitfun-/, `${name} uses a non-token custom property`);
+    }
+  }
+});
diff --git a/design-system/packages/ui/tests/mobile.test.mjs b/design-system/packages/ui/tests/mobile.test.mjs
index c5515a71a5..931fdaf423 100644
--- a/design-system/packages/ui/tests/mobile.test.mjs
+++ b/design-system/packages/ui/tests/mobile.test.mjs
@@ -5,10 +5,12 @@ import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import {
   MobileActionSheet,
+  MobileAvatar,
   MobileBadge,
   MobileBanner,
   MobileButton,
   MobileCard,
+  MobileCheckbox,
   MobileChoiceSheet,
   MobileConfirmSheet,
   MobileComposer,
@@ -20,13 +22,20 @@ import {
   MobileListRow,
   MobileMessage,
   MobilePageHeader,
+  MobileRadioGroup,
   MobileScrim,
   MobileSection,
   MobileSegmentedControl,
+  MobileSelect,
   MobileSheet,
   MobileStatus,
+  MobileStepper,
+  MobileSwitch,
+  MobileTabBar,
+  MobileTag,
   MobileTextField,
   MobileTextarea,
+  MobileToolbar,
 } from "../dist/mobile.js";
 
 test("mobile entry exposes touch controls without product state", () => {
@@ -187,3 +196,86 @@ test("mobile stylesheet is isolated and uses semantic tokens", async () => {
   assert.match(styles, /--openbitfun-shadow-base/);
   assert.doesNotMatch(styles, /#[0-9a-f]{3,8}\b/i);
 });
+
+test("mobile entry exposes the second round of touch controls", () => {
+  const markup = [
+    createElement(MobileSwitch, { defaultChecked: true, description: "/workspace", label: "Streaming" }),
+    createElement(MobileCheckbox, { indeterminate: true, label: "Include archived", name: "archived" }),
+    createElement(MobileRadioGroup, {
+      name: "density",
+      options: [{ label: "Comfortable", value: "comfortable" }, { label: "Compact", value: "compact" }],
+      value: "compact",
+    }),
+    createElement(MobileTag, { selected: true }, "TypeScript"),
+    createElement(MobileSelect, {
+      label: "Model",
+      options: [{ label: "Sonnet", value: "sonnet" }],
+      sheetTitle: "Model",
+      value: "sonnet",
+    }),
+    createElement(MobileStepper, {
+      decrementLabel: "Decrease",
+      incrementLabel: "Increase",
+      label: "Retries",
+      max: 5,
+      min: 0,
+      value: 3,
+    }),
+    createElement(MobileAvatar, { name: "Cindy", status: "online" }),
+    createElement(MobileTabBar, {
+      items: [{ label: "Chat", value: "chat" }, { label: "Files", value: "files" }],
+      label: "Sections",
+      value: "chat",
+    }),
+    createElement(MobileToolbar, { label: "Selection" }, "2 selected"),
+  ].map(example => renderToStaticMarkup(example));
+
+  for (const name of ["switch", "checkbox", "radio-group", "tag", "select", "stepper", "avatar", "tab-bar", "toolbar"]) {
+    assert.ok(markup.some(html => html.includes(`data-openbitfun-component="mobile-${name}"`)), `missing mobile-${name}`);
+  }
+});
+
+test("mobile touch controls keep native input semantics", () => {
+  const switchMarkup = renderToStaticMarkup(createElement(MobileSwitch, {
+    defaultChecked: true,
+    label: "Streaming",
+  }));
+  const checkboxMarkup = renderToStaticMarkup(createElement(MobileCheckbox, {
+    label: "Include archived",
+  }));
+  const radioMarkup = renderToStaticMarkup(createElement(MobileRadioGroup, {
+    name: "density",
+    options: [{ label: "Comfortable", value: "comfortable" }],
+    value: "comfortable",
+  }));
+
+  assert.match(switchMarkup, /<input[^>]*type="checkbox"/);
+  assert.match(switchMarkup, /<input[^>]*role="switch"/);
+  assert.match(switchMarkup, /checked=""/);
+  assert.match(checkboxMarkup, /<input[^>]*type="checkbox"/);
+  assert.match(radioMarkup, /<input[^>]*type="radio"/);
+  assert.match(radioMarkup, /<input[^>]*name="density"/);
+});
+
+test("mobile tag, tab bar and stepper expose filled selection state", () => {
+  const tag = renderToStaticMarkup(createElement(MobileTag, { selected: true }, "TypeScript"));
+  const tabBar = renderToStaticMarkup(createElement(MobileTabBar, {
+    items: [{ label: "Chat", value: "chat" }],
+    label: "Sections",
+    value: "chat",
+  }));
+  const stepper = renderToStaticMarkup(createElement(MobileStepper, {
+    decrementLabel: "Decrease",
+    incrementLabel: "Increase",
+    max: 1,
+    min: 0,
+    value: 1,
+  }));
+
+  assert.match(tag, /aria-pressed="true"/);
+  assert.match(tag, /data-selected="true"/);
+  assert.match(tabBar, /role="tablist"|aria-current="page"/);
+  assert.match(stepper, /role="spinbutton"/);
+  assert.match(stepper, /aria-valuenow="1"/);
+  assert.match(stepper, /aria-valuemax="1"/);
+});
diff --git a/design-system/packages/ui/tests/registry.test.mjs b/design-system/packages/ui/tests/registry.test.mjs
index e7539b8c92..c9d57572e7 100644
--- a/design-system/packages/ui/tests/registry.test.mjs
+++ b/design-system/packages/ui/tests/registry.test.mjs
@@ -65,10 +65,12 @@ test("registry exposes only the formal stable components", () => {
       "LoadingState",
       "Menu",
       "MobileActionSheet",
+      "MobileAvatar",
       "MobileBadge",
       "MobileBanner",
       "MobileButton",
       "MobileCard",
+      "MobileCheckbox",
       "MobileChoiceSheet",
       "MobileConfirmSheet",
       "MobileComposer",
@@ -80,13 +82,20 @@ test("registry exposes only the formal stable components", () => {
       "MobileListRow",
       "MobileMessage",
       "MobilePageHeader",
+      "MobileRadioGroup",
       "MobileScrim",
       "MobileSection",
       "MobileSegmentedControl",
+      "MobileSelect",
       "MobileSheet",
       "MobileStatus",
+      "MobileStepper",
+      "MobileSwitch",
+      "MobileTabBar",
+      "MobileTag",
       "MobileTextField",
       "MobileTextarea",
+      "MobileToolbar",
       "Dialog",
       "MultiSelect",
       "NavigationPanel",

From 5d27431cdcdf57398fdba0217c97ee8e03ed53ef Mon Sep 17 00:00:00 2001
From: Cinnnnnnndy <wangxindi0126@outlook.com>
Date: Tue, 13 Oct 2026 17:27:48 +0800
Subject: [PATCH 2/6] feat(design-lab): Cover every surface and unify the Lab's
 chrome type

Rebuild the homepage showcase as a single frame that morphs between the
desktop window, a phone, a watch and glasses, assembled from the design
system's own mobile parts, and play the character hatch in the hero
instead of the static brand mark. Fill in the mobile gallery, the brand
motion banner, the foundations chapters and the shared guide contract,
lift the rail directory plus the page and foundation navigation into
shared modules, and self-host the Lab's IBM Plex Mono.

Put every piece of chrome typography on one published type role: one
leading per size, one tracking level per label, one code role for snippet
blocks, and the wordmark recipe in a single set of variables. Tighten the
closing band and size the showcase stage to the first screen so the whole
morph is visible without scrolling.

Co-authored-by: OpenBitFun <318544290+bitfun-ai@users.noreply.github.com>
---
 design-system/apps/design-lab/src/App.tsx     |  44 +-
 .../fonts/ibm-plex-mono-latin-400.woff2       | Bin 0 -> 14708 bytes
 .../fonts/ibm-plex-mono-latin-500.woff2       | Bin 0 -> 14888 bytes
 .../fonts/ibm-plex-mono-latin-600.woff2       | Bin 0 -> 15620 bytes
 .../design-lab/src/componentNavigation.ts     |  14 +
 .../src/components/GuideContract.tsx          |  73 +++
 .../src/components/LabComponentIndex.tsx      |  77 +++
 .../src/components/LabNavigation.tsx          |  55 +-
 .../apps/design-lab/src/design-layout.css     | 410 +++++++++----
 .../design-lab/src/foundationNavigation.ts    |  47 ++
 .../apps/design-lab/src/i18n/brandMessages.ts |   3 +
 .../design-lab/src/i18n/componentMetadata.ts  |   9 +
 .../design-lab/src/i18n/designMessages.ts     | 113 ++++
 .../apps/design-lab/src/i18n/messages.ts      |  42 ++
 .../design-lab/src/i18n/previewMessages.ts    |   3 +
 .../apps/design-lab/src/pages/BrandPage.css   |  71 ++-
 .../apps/design-lab/src/pages/BrandPage.tsx   |  54 +-
 .../src/pages/ComponentDetailPage.tsx         | 233 +++++++-
 .../design-lab/src/pages/ComponentsPage.tsx   | 203 ++++---
 .../src/pages/FoundationSpecimens.css         |   8 +-
 .../design-lab/src/pages/FoundationsPage.css  |  53 +-
 .../design-lab/src/pages/FoundationsPage.tsx  | 208 +++----
 .../src/pages/GettingStartedPage.tsx          |  55 +-
 .../design-lab/src/pages/OverviewPage.css     | 549 ++++++++++++++----
 .../design-lab/src/pages/OverviewPage.tsx     | 315 ++++++++--
 .../design-lab/src/pages/SubagentIpPage.css   |   4 +-
 .../src/preview/ComponentShowcase.css         |   2 +-
 .../src/preview/LiveComponentExamples.tsx     |   2 +-
 .../src/preview/MultiSurfaceMorph.css         | 222 +++++++
 .../src/preview/MultiSurfaceMorph.tsx         | 191 ++++++
 .../src/preview/SubagentMotionPreview.css     |   6 +-
 .../src/preview/componentPresentation.ts      |   4 +
 design-system/apps/design-lab/src/styles.css  | 123 ++--
 design-system/apps/design-lab/vite.config.ts  |   4 +
 .../vite/component-detail-contract.test.mjs   |  12 +-
 .../vite/component-preview-render.test.mjs    |  10 +-
 .../design-lab/vite/icon-consumers.test.mjs   |  24 +-
 37 files changed, 2575 insertions(+), 668 deletions(-)
 create mode 100644 design-system/apps/design-lab/src/assets/fonts/ibm-plex-mono-latin-400.woff2
 create mode 100644 design-system/apps/design-lab/src/assets/fonts/ibm-plex-mono-latin-500.woff2
 create mode 100644 design-system/apps/design-lab/src/assets/fonts/ibm-plex-mono-latin-600.woff2
 create mode 100644 design-system/apps/design-lab/src/componentNavigation.ts
 create mode 100644 design-system/apps/design-lab/src/components/GuideContract.tsx
 create mode 100644 design-system/apps/design-lab/src/components/LabComponentIndex.tsx
 create mode 100644 design-system/apps/design-lab/src/foundationNavigation.ts
 create mode 100644 design-system/apps/design-lab/src/preview/MultiSurfaceMorph.css
 create mode 100644 design-system/apps/design-lab/src/preview/MultiSurfaceMorph.tsx

diff --git a/design-system/apps/design-lab/src/App.tsx b/design-system/apps/design-lab/src/App.tsx
index 554b7a33d8..1803dd5cce 100644
--- a/design-system/apps/design-lab/src/App.tsx
+++ b/design-system/apps/design-lab/src/App.tsx
@@ -1,5 +1,6 @@
 import { FoundationsPage } from "./pages/FoundationsPage";
-import { LabNavigation, LabSectionNavigation } from "./components/LabNavigation";
+import { LabNavigation, LabSectionNavigation, hasSectionNavigation } from "./components/LabNavigation";
+import { defaultComponent, libraryCategory } from "./componentNavigation";
 import {
   useEffect,
   useLayoutEffect,
@@ -18,7 +19,7 @@ import { Button, Dialog, DialogBody, DialogClose, DialogDescription, DialogHeade
   type DensityMode,
   type IconName,
 } from "@openbitfun/ui";
-import { OpenBitFunMark } from "@openbitfun/ui/brand";
+import { OpenBitFunSolidMark } from "@openbitfun/ui/brand";
 import { BrandPage } from "./pages/BrandPage";
 import { componentRegistry } from "@openbitfun/ui/registry";
 import {
@@ -174,7 +175,6 @@ export function App() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const searchResultsRef = useRef<HTMLDivElement>(null);
-  const searchShortcut = /Mac|iPhone|iPad/i.test(navigator.userAgent) ? "⌘ K" : "Ctrl K";
 
   const themeName = getThemeDataName(colorScheme, contrast);
   // Document-level portals live outside the page ThemeRoot. Give them the same
@@ -413,13 +413,16 @@ export function App() {
   const activeComponent = route.page === "component"
     ? componentRegistry.find((component) => component.name === route.componentName)
     : undefined;
+  const librarySelection = route.page === "components" || route.page === "mobile" || route.page === "flow-chat"
+    ? defaultComponent(libraryCategory(route.page))
+    : activeComponent;
 
   return (
     <DesignSystemProvider colorScheme={colorScheme} contrast={contrast} density={density} locale={locale} nativeTooltipPolicy="application">
     <ThemeRoot
       className="lab-shell"
       data-page={route.page}
-      data-component-library={["components", "component", "mobile", "flow-chat"].includes(route.page) || undefined}
+      data-section-navigation={hasSectionNavigation(route.page) || undefined}
       data-sidebar-open={sidebarOpen || undefined}
       colorScheme={colorScheme}
       contrast={contrast}
@@ -433,23 +436,23 @@ export function App() {
             icon={<CatalogIcon glyph={Menu} />}
             onClick={() => setSidebarOpen(true)}
           />
-          <a className="design-wordmark-link" href="#overview" onClick={event => {
+          <a className="design-wordmark-link" href="#overview" aria-label="OpenBitFun Design" onClick={event => {
             if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
             event.preventDefault();
             navigate({ page: "overview" });
           }}>
-            <OpenBitFunMark size={28} /><span>OpenBitFun<span className="design-wordmark-suffix"> Design</span></span>
+            {/* The product site's header lockup: the app mark next to the wordmark. The name is
+                visible now, and the link's accessible label still says which site it leads to. */}
+            <OpenBitFunSolidMark className="design-app-mark" size={28} />
+            <span className="design-wordmark-name">OpenBitFun</span>
           </a>
           <LabNavigation page={route.page} componentName={activeComponent?.name}
             onNavigate={page => page === "tokens" ? openTokenPage() : navigate({ page })} />
           <div className="lab-topbar-actions">
-            <Button className="lab-search-trigger" size="sm" variant="fill"
-              aria-label={t("search.label")} aria-haspopup="dialog"
-              leadingIcon={<CatalogIcon name="search" />}
-              onClick={() => setSearchOpen(true)}>
-              <span className="lab-search-trigger-label">{t("search.placeholder")}</span>
-              <KeyHint className="lab-search-shortcut">{searchShortcut}</KeyHint>
-            </Button>
+            {/* Icon only, like the two controls beside it: the accessible name still says what it
+                opens, and the shortcut hint moved into the dialog it opens. */}
+            <IconButton className="lab-search-trigger" aria-label={t("search.label")} aria-haspopup="dialog"
+              icon={<CatalogIcon name="search" />} onClick={() => setSearchOpen(true)} />
             <IconButton
               aria-label={colorScheme === "light" ? t("theme.switchToDark") : t("theme.switchToLight")}
               icon={<CatalogIcon glyph={colorScheme === "light" ? Sun : Moon} />}
@@ -469,6 +472,7 @@ export function App() {
             <SearchField aria-label={t("search.label")} placeholder={t("search.placeholder")}
               ref={searchInputRef} value={searchQuery} onChange={event => setSearchQuery(event.target.value)}
               leadingIcon={<CatalogIcon name="search" />} clearLabel={t("design.clear")} onClear={() => setSearchQuery("")}
+              shortcut={<KeyHint icon={<CatalogIcon name="command-mac" />}>K</KeyHint>}
               onKeyDown={event => {
                 if (event.nativeEvent.isComposing) return;
                 if (event.key === "ArrowDown") {
@@ -542,14 +546,20 @@ export function App() {
           </DialogHeader>
           <DialogBody className="lab-mobile-navigation">
             <LabNavigation page={route.page} onNavigate={page => page === "tokens" ? openTokenPage() : navigate({ page })} />
-            <LabSectionNavigation page={route.page} onNavigate={page => page === "tokens" ? openTokenPage() : navigate({ page })} />
+            <LabSectionNavigation componentName={librarySelection?.name} page={route.page} onNavigate={page => page === "tokens" ? openTokenPage() : navigate({ page })} />
           </DialogBody>
         </Sheet>
 
-        <LabSectionNavigation page={route.page} onNavigate={page => page === "tokens" ? openTokenPage() : navigate({ page })} />
+        <LabSectionNavigation componentName={librarySelection?.name} page={route.page} onNavigate={page => page === "tokens" ? openTokenPage() : navigate({ page })} />
         <div className="lab-content">
           {route.page === "overview" && (
-            <OverviewPage onNavigate={(target) => navigate({ page: target })} />
+            <OverviewPage
+              colorScheme={colorScheme}
+              contrast={contrast}
+              density={density}
+              onNavigate={(target) => navigate({ page: target })}
+              tokenOverrides={tokenOverrides}
+            />
           )}
 
           {route.page === "foundations" && <FoundationsPage
@@ -568,7 +578,7 @@ export function App() {
 
           {(["components", "component", "mobile", "flow-chat"].includes(route.page)) && (
             <ComponentsPage
-              category={route.page === "mobile" ? "mobile" : route.page === "flow-chat" ? "flow-chat" : undefined}
+              category={libraryCategory(route.page)}
               colorScheme={colorScheme}
               component={activeComponent}
               contrast={contrast}
diff --git a/design-system/apps/design-lab/src/assets/fonts/ibm-plex-mono-latin-400.woff2 b/design-system/apps/design-lab/src/assets/fonts/ibm-plex-mono-latin-400.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..0804aaff92260b5359330f63e05b9ac25ccabeee
GIT binary patch
literal 14708
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
CRdxsf

literal 0
HcmV?d00001

diff --git a/design-system/apps/design-lab/src/assets/fonts/ibm-plex-mono-latin-500.woff2 b/design-system/apps/design-lab/src/assets/fonts/ibm-plex-mono-latin-500.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..090f82f7ec7997047324e07650865305a099969a
GIT binary patch
literal 14888
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
ad};MAP-qCiD$QV&cRGZj2*AytTLJ*~+Orn`

literal 0
HcmV?d00001

diff --git a/design-system/apps/design-lab/src/assets/fonts/ibm-plex-mono-latin-600.woff2 b/design-system/apps/design-lab/src/assets/fonts/ibm-plex-mono-latin-600.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..67aeeb0104a02cf060b813abf6dcb6fdb97b7512
GIT binary patch
literal 15620
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

literal 0
HcmV?d00001

diff --git a/design-system/apps/design-lab/src/componentNavigation.ts b/design-system/apps/design-lab/src/componentNavigation.ts
new file mode 100644
index 0000000000..c4b1fbe257
--- /dev/null
+++ b/design-system/apps/design-lab/src/componentNavigation.ts
@@ -0,0 +1,14 @@
+import { componentRegistry, type ComponentMeta } from "@openbitfun/ui/registry";
+
+/* Which directory route belongs to which component category. The shell passes it to the page and
+   the rail reads it back, so both agree on the route without duplicating the mapping. */
+export function libraryCategory(page: string): ComponentMeta["category"] | undefined {
+  return page === "mobile" ? "mobile" : page === "flow-chat" ? "flow-chat" : undefined;
+}
+
+/* The component a directory route opens with. Shared so the rail can mark the same row the page is
+   showing when the route names no component of its own. */
+export function defaultComponent(category?: ComponentMeta["category"]): ComponentMeta | undefined {
+  return componentRegistry.find(item => category ? item.category === category : item.name === "Button")
+    ?? componentRegistry[0];
+}
diff --git a/design-system/apps/design-lab/src/components/GuideContract.tsx b/design-system/apps/design-lab/src/components/GuideContract.tsx
new file mode 100644
index 0000000000..4875dd4446
--- /dev/null
+++ b/design-system/apps/design-lab/src/components/GuideContract.tsx
@@ -0,0 +1,73 @@
+import { Icon as CatalogIcon, type IconName } from "@openbitfun/ui";
+import { Blocks, FileCode2, Layers3 } from "lucide-react";
+import { useI18n, type MessageKey } from "../i18n";
+
+/* The usage block the guide opens with and the homepage closes on: three steps of the package
+   contract beside the imports they add up to. One source, two homes — the homepage would otherwise
+   carry a second copy of the snippet and drift from it. */
+
+const steps: readonly {
+  description: MessageKey;
+  icon: typeof Layers3 | IconName;
+  title: MessageKey;
+}[] = [
+  {
+    description: "gettingStarted.stepContractDescription",
+    icon: Layers3,
+    title: "gettingStarted.stepContractTitle",
+  },
+  {
+    description: "gettingStarted.stepThemeDescription",
+    icon: "palette",
+    title: "gettingStarted.stepThemeTitle",
+  },
+  {
+    description: "gettingStarted.stepComponentDescription",
+    icon: Blocks,
+    title: "gettingStarted.stepComponentTitle",
+  },
+];
+
+const snippet = `import "@openbitfun/theme-openbitfun/default.css";
+import "@openbitfun/ui/styles.css";
+import { Button, ThemeRoot } from "@openbitfun/ui";
+
+export function App() {
+  return (
+    <ThemeRoot colorScheme="light" density="compact">
+      <Button variant="primary">Continue</Button>
+    </ThemeRoot>
+  );
+}`;
+
+interface GuideStepListProps {
+  /** The guide puts the steps under its page title, so they are h2; a page that nests them under
+      its own section title needs h3. One list, whichever level the outline asks for. */
+  headingLevel?: 2 | 3;
+}
+
+export function GuideStepList({ headingLevel = 2 }: GuideStepListProps) {
+  const { t } = useI18n();
+  const StepHeading = headingLevel === 3 ? "h3" : "h2";
+
+  return (
+    <ol className="guide-step-list" aria-label={t("gettingStarted.stepsLabel")}>
+      {steps.map(step => {
+        const Icon = step.icon;
+        return <li key={step.title}>
+          <span className="guide-step-icon">{typeof Icon === "string" ? <CatalogIcon name={Icon} /> : <CatalogIcon glyph={Icon} />}</span>
+          <div><StepHeading>{t(step.title)}</StepHeading><p>{t(step.description)}</p></div>
+        </li>;
+      })}
+    </ol>
+  );
+}
+
+export function GuideCodeCard() {
+  return (
+    <div className="guide-code-card">
+      <div><CatalogIcon glyph={FileCode2} size="sm" /><span>App.tsx</span></div>
+      <pre><code>{snippet}</code></pre>
+    </div>
+  );
+}
diff --git a/design-system/apps/design-lab/src/components/LabComponentIndex.tsx b/design-system/apps/design-lab/src/components/LabComponentIndex.tsx
new file mode 100644
index 0000000000..2bb5fc1636
--- /dev/null
+++ b/design-system/apps/design-lab/src/components/LabComponentIndex.tsx
@@ -0,0 +1,77 @@
+import { useEffect, useRef, useState } from "react";
+import { Button, Icon as CatalogIcon, OverflowText, SearchField } from "@openbitfun/ui";
+import { componentRegistry } from "@openbitfun/ui/registry";
+import { useI18n } from "../i18n";
+import { getComponentCategoryLabel, getComponentDescription } from "../i18n/componentMetadata";
+
+/* The component directory belongs to the navigation, not to a second index beside it: it hangs
+   under the Components route in the rail, the way the Foundations chapters hang under theirs. It
+   keeps its own search and its own scroll region, so a list this long never pushes the other
+   routes out of the rail. */
+export function LabComponentIndex({ selected }: { selected?: string }) {
+  const { t } = useI18n();
+  const [query, setQuery] = useState("");
+  const listRef = useRef<HTMLElement>(null);
+  const activeLinkRef = useRef<HTMLAnchorElement>(null);
+  const categories = Array.from(new Set(componentRegistry.map(component => component.category)));
+  const normalizedQuery = query.trim().toLowerCase();
+  const catalogComponents = componentRegistry.filter(component =>
+    `${component.name} ${component.category} ${component.description} ${getComponentDescription(component.name, component.description, t)} ${getComponentCategoryLabel(component.category, t)}`.toLowerCase().includes(normalizedQuery),
+  );
+
+  useEffect(() => {
+    const list = listRef.current;
+    const activeLink = activeLinkRef.current;
+    if (!list) return;
+    if (!activeLink) {
+      list.scrollTop = 0;
+      return;
+    }
+    // Keep the open component visible inside the directory without moving the page itself.
+    const listBounds = list.getBoundingClientRect();
+    const linkBounds = activeLink.getBoundingClientRect();
+    if (linkBounds.top < listBounds.top) list.scrollTop += linkBounds.top - listBounds.top;
+    else if (linkBounds.bottom > listBounds.bottom) list.scrollTop += linkBounds.bottom - listBounds.bottom;
+  }, [selected, normalizedQuery]);
+
+  return (
+    <div className="design-navigation-index">
+      <SearchField aria-label={t("design.search")} placeholder={t("design.search")} value={query}
+        onChange={event => setQuery(event.target.value)} clearLabel={t("design.clear")} onClear={() => setQuery("")}
+        leadingIcon={<CatalogIcon name="search" />} />
+      {/* The directory can be counted by looking, so the rail does not print the total — but a reader
+          who cannot see the list still needs the filtered count as the query changes. The region stays
+          live and comes off screen instead of out of the page. */}
+      <span className="design-sr-only" role="status">{t("design.results", { count: catalogComponents.length })}</span>
+      <nav className="design-library-list" aria-label={t("design.all")} ref={listRef}>
+        {categories.map(group => {
+          const items = catalogComponents.filter(item => item.category === group).sort((a, b) => a.name.localeCompare(b.name));
+          if (!items.length) return null;
+          return (
+            <section className="design-library-group" key={group} aria-labelledby={`component-group-${group}`}>
+              <h3 id={`component-group-${group}`}>{getComponentCategoryLabel(group, t)}</h3>
+              <ul>
+                {items.map(item => (
+                  <li key={item.name}>
+                    <a data-overflow-trigger className="design-library-link" href={`#component/${item.name.toLowerCase()}`}
+                      aria-current={selected === item.name ? "page" : undefined}
+                      ref={selected === item.name ? activeLinkRef : undefined}
+                      title={`${item.name} · ${getComponentDescription(item.name, item.description, t)}`}>
+                      <OverflowText>{item.name}</OverflowText>
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          );
+        })}
+        {catalogComponents.length === 0 && (
+          <div className="design-library-empty">
+            <p>{t("design.noResults")}</p>
+            <Button size="sm" variant="text" onClick={() => setQuery("")}>{t("design.clear")}</Button>
+          </div>
+        )}
+      </nav>
+    </div>
+  );
+}
diff --git a/design-system/apps/design-lab/src/components/LabNavigation.tsx b/design-system/apps/design-lab/src/components/LabNavigation.tsx
index 1bb81891dc..09fa9ef949 100644
--- a/design-system/apps/design-lab/src/components/LabNavigation.tsx
+++ b/design-system/apps/design-lab/src/components/LabNavigation.tsx
@@ -1,4 +1,14 @@
+import { enUSMessages } from "../i18n/messages";
 import { useI18n, type MessageKey } from "../i18n";
+import { Fragment, useSyncExternalStore } from "react";
+import { OpenBitFunSolidMark } from "@openbitfun/ui/brand";
+import {
+  focusFoundationSection,
+  foundationSections,
+  getActiveFoundationSection,
+  subscribeFoundationSection,
+} from "../foundationNavigation";
+import { LabComponentIndex } from "./LabComponentIndex";
 
 type Page = "components" | "foundations" | "brand" | "colors" | "tokens" | "getting-started" | "resources" | "patterns" | "flow-chat" | "flow-chat-mock" | "mobile" | "subagent-ip";
 type NavigationProps = { page: string; componentName?: string; onNavigate: (page: Page) => void };
@@ -7,16 +17,26 @@ function sectionFor(page: string) {
     : ["foundations", "colors", "tokens", "getting-started", "resources"].includes(page) ? "foundations"
     : page === "overview" ? undefined : "components";
 }
+/** Whether this route has a section level at all. The shell needs to know before it renders, so
+ *  it can give the rail a column instead of a single centred one. */
+export function hasSectionNavigation(page: string) {
+  return sectionFor(page) !== undefined;
+}
+/* Top-level site navigation, labelled from the English catalog in every locale: like the
+   homepage slogan, these three names are the Lab's own identity rather than page copy, and a
+   design system's canonical naming does not move with the reader's language. Everything
+   inside the pages still follows the active locale. */
 export function LabNavigation({ page, onNavigate }: NavigationProps) {
   const { t } = useI18n();
   return <nav aria-label={t("app.pagesLabel")} className="lab-navigation design-primary-navigation">
     {(["components", "foundations", "brand"] as const).map(target => <a key={target} href={`#${target}`} aria-current={sectionFor(page) === target ? "true" : undefined}
-      onClick={event => { if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; event.preventDefault(); onNavigate(target); }}>{t(`design.${target}`)}</a>)}
+      onClick={event => { if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; event.preventDefault(); onNavigate(target); }}>{enUSMessages[`design.${target}`]}</a>)}
   </nav>;
 }
-export function LabSectionNavigation({ page, onNavigate }: NavigationProps) {
+export function LabSectionNavigation({ page, componentName, onNavigate }: NavigationProps) {
   const { t } = useI18n();
   const section = sectionFor(page);
+  const activeChapter = useSyncExternalStore(subscribeFoundationSection, getActiveFoundationSection);
   const links: readonly [Page, MessageKey][] = section === "brand"
     ? [["brand", "design.identity"], ["subagent-ip", "design.characters"]]
     : section === "foundations"
@@ -26,7 +46,34 @@ export function LabSectionNavigation({ page, onNavigate }: NavigationProps) {
         : [];
   if (!links.length) return null;
   return <nav className="design-secondary-navigation" aria-label={t(`design.${section!}`)}>
-    {links.map(([target, label]) => <a key={target} href={`#${target}`} aria-current={page === target || (target === "components" && ["component", "mobile", "flow-chat"].includes(page)) ? "page" : undefined}
-      onClick={event => { if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; event.preventDefault(); onNavigate(target); }}>{t(label)}</a>)}
+    {links.map(([target, label]) => <Fragment key={target}>
+      <a href={`#${target}`} aria-current={page === target || (target === "components" && ["component", "mobile", "flow-chat"].includes(page)) ? "page" : undefined}
+        data-group={target === "foundations" || target === "components" ? "open" : undefined}
+        className={target === "components" ? "design-navigation-library" : undefined}
+        onClick={event => { if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; event.preventDefault(); onNavigate(target); }}>
+        {t(label)}
+        {/* The library's own row wears the mark — the same artwork and the same flattening the
+            topbar's wordmark uses, one step down in size (the 16px control-icon step), and
+            decorative: the row's text already names the route. */}
+        {target === "components" && <OpenBitFunSolidMark className="design-app-mark" size={16} />}
+      </a>
+      {/* Both indexes hang under their route: one tree per section, so the rail and the page never
+          show two competing lists of the same thing. */}
+      {target === "components" && <LabComponentIndex selected={componentName} />}
+      {target === "foundations" && <ul className="design-navigation-chapters" aria-label={t("foundations.contents")}>
+        {foundationSections.map(chapter => <li key={chapter.id}>
+          <a href={`#foundations/${chapter.id}`}
+            aria-current={page === "foundations" && activeChapter === chapter.id ? "location" : undefined}
+            onClick={event => {
+              if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+              // Same chapter as the address bar: no hash change follows, so move the reader here.
+              if (window.location.hash === `#foundations/${chapter.id}`) {
+                event.preventDefault();
+                focusFoundationSection(chapter.id);
+              }
+            }}>{t(chapter.label)}</a>
+        </li>)}
+      </ul>}
+    </Fragment>)}
   </nav>;
 }
diff --git a/design-system/apps/design-lab/src/design-layout.css b/design-system/apps/design-lab/src/design-layout.css
index 36875207d5..b8505e1c68 100644
--- a/design-system/apps/design-lab/src/design-layout.css
+++ b/design-system/apps/design-lab/src/design-layout.css
@@ -1,3 +1,32 @@
+/* IBM Plex Mono, latin subset, as served by openbitfun.com. The product site sets both body and
+   display to it, so the homepage follows; CJK still falls back to the platform sans below. */
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("./assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
+}
+
+/* The reference site ships 400 and 500 only. The Lab needs one real bolder cut for the
+   homepage headline, so 600 (SemiBold, the same OFL 1.1 family) is self-hosted here
+   rather than letting the browser synthesise a fake bold from 400. */
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("./assets/fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
+}
+
 /* The site shell uses the same theme, density and control contracts as its specimens. */
 :root[data-openbitfun-design-system-root] {
   color-scheme: light;
@@ -12,8 +41,40 @@
 
 .lab-shell {
   --_lab-topbar-height: var(--openbitfun-space-16);
-  --_lab-section-height: calc(var(--openbitfun-control-tab-group-item-height) + var(--openbitfun-space-4));
-  --_lab-content-width: 1360px;
+  /* Shell width cap. Measured off the reference product sites: 1440 viewport, page content
+     1248 wide, 96 clear on each side. The box is the cap plus the page's own 24px inner
+     padding, so a wide viewport grows the margins instead of stretching the page. */
+  --_lab-content-width: 1296px;
+  /* One margin system for the whole shell. Every page sits in the same centred column with the same
+     two side margins; the topbar's wordmark, the rail and the pages all measure from that column,
+     so no page can drift away from the homepage. A page that carries a rail takes the rail's width
+     out of its own column instead of widening the shell. */
+  --_lab-column-inset: max(0px, calc((100% - var(--_lab-content-width)) / 2));
+  /* The section navigation is a left rail rather than a horizontal tab row. It is pinned at the
+     column's edge plus the page's own inner padding, so its first item lines up with the wordmark
+     above it and the page copy beside it. */
+  --_lab-rail-width: 216px;
+  --_lab-rail-inset: calc(var(--_lab-column-inset) + var(--openbitfun-space-6));
+  /* The component directory is a long column of names and it lives in the rail, so the section that
+     owns it gets the width the page's own index column used to hold. */
+  --_lab-rail-width-directory: 256px;
+  /* Shell language follows the reference product sites: soft rounded containers on a plain canvas,
+     hairlines for structure, and the design system's own sans label voice instead of a mono one. */
+  --_lab-rule: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
+  /* The product site is monospace-first: body, display and labels all resolve to IBM Plex Mono,
+     with the platform CJK sans taking over the characters the latin subset does not cover.
+     Lab chrome adopts it; component instances keep the design system's published type roles. */
+  --_lab-font: "IBM Plex Mono", "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", "Hiragino Sans GB", sans-serif;
+  --_lab-label-font: var(--_lab-font);
+  /* The product site's wordmark lockup (25px / 500 / -0.05em / leading 1). The site's own value, not
+     a design-system role; defined once so the topbar and the homepage footer cannot drift apart. */
+  --_lab-wordmark-size: 25px;
+  --_lab-wordmark-weight: var(--openbitfun-font-weight-medium);
+  --_lab-wordmark-tracking: -0.05em;
+  --_lab-wordmark-leading: 1;
+  --_lab-radius-surface: var(--openbitfun-radius-lg);
+  --_lab-radius-inset: var(--openbitfun-radius-md);
+  --_lab-radius-control: var(--openbitfun-radius-md);
   display: block;
   min-height: 100dvh;
   color: var(--openbitfun-color-content-primary);
@@ -24,7 +85,29 @@
   line-height: var(--openbitfun-type-body-md-line-height);
 }
 .lab-shell [hidden] { display: none !important; }
+/* The homepage's closing band is the one block that leaves the centred column and runs edge to edge
+   (see .design-home-footer). Where the platform reserves space for a scrollbar, 100vw is wider than
+   what is visible, so the band is clipped instead of widening the document. clip is not a scroll
+   container: the sticky topbar still pins to the viewport. */
+.lab-shell[data-page="overview"] { overflow-x: clip; }
 .lab-workspace, .lab-content { min-width: 0; }
+/* Two columns on every page that has a section level: the rail, then the page. The topbar spans
+   both, so the bar keeps its own width and padding; pages without a section level (the
+   homepage) keep the single centred column they were designed on. */
+.lab-workspace { display: grid; grid-template-columns: minmax(0, 1fr); }
+.lab-workspace > .lab-topbar { grid-column: 1 / -1; }
+.lab-shell[data-section-navigation] .lab-workspace {
+  /* Rail gutter, rail, page, then the same gutter again on the right, so a rail page ends where the
+     homepage ends instead of running to the window edge. */
+  grid-template-columns: calc(var(--_lab-rail-inset) + var(--_lab-rail-width)) minmax(0, 1fr) var(--_lab-column-inset);
+}
+.lab-shell[data-section-navigation] .lab-workspace > .design-secondary-navigation { grid-column: 1; grid-row: 2; }
+.lab-shell[data-section-navigation] .lab-workspace > .lab-content { grid-column: 2; grid-row: 2; }
+/* The component library is the one section whose tree is a long list of names, so its rail takes the
+   directory width instead of the default one. */
+.lab-shell:is([data-page="components"], [data-page="component"], [data-page="mobile"], [data-page="flow-chat"]) {
+  --_lab-rail-width: var(--_lab-rail-width-directory);
+}
 .lab-topbar {
   position: sticky;
   top: 0;
@@ -33,68 +116,147 @@
   align-items: center;
   gap: var(--openbitfun-space-6);
   min-height: var(--_lab-topbar-height);
-  padding: var(--openbitfun-space-2) max(var(--openbitfun-space-6), calc((100% - var(--_lab-content-width)) / 2 + var(--openbitfun-space-6)));
+  padding: var(--openbitfun-space-2) calc(var(--_lab-column-inset) + var(--openbitfun-space-6));
   background: var(--openbitfun-color-surface-canvas);
 }
+/* The brand lockup is copied from the product site's header, to the pixel: the 28px app mark,
+   a 12px gap, then the name in the site's own 25px/500 mono with -0.05em tracking. The Lab bar
+   is shorter than that header, so the wordmark carries more presence here than the 13px
+   navigation beside it — that contrast is the site's own hierarchy, not an accident. */
 .design-wordmark-link {
   display: inline-flex;
   flex: none;
   align-items: center;
-  gap: var(--openbitfun-space-2);
+  gap: var(--openbitfun-space-3);
   color: var(--openbitfun-color-content-primary);
   text-decoration: none;
-  white-space: nowrap;
-  font-family: var(--openbitfun-type-label-lg-font-family);
-  font-size: var(--openbitfun-type-label-lg-font-size);
-  font-weight: var(--openbitfun-type-label-selected-font-weight);
+  font-size: var(--_lab-wordmark-size);
+  font-weight: var(--_lab-wordmark-weight);
+  letter-spacing: var(--_lab-wordmark-tracking);
+  line-height: var(--_lab-wordmark-leading);
 }
-.design-wordmark-suffix { color: var(--openbitfun-color-content-secondary); font-weight: var(--openbitfun-type-body-md-font-weight); }
+/* The app mark is silver artwork on a transparent canvas. The site flattens it to solid ink in
+   its light header; the Lab does the same, and lifts it back for the dark theme. */
+.design-app-mark { filter: brightness(0); }
+:root[data-openbitfun-design-system-root][data-color-scheme="dark"] .design-app-mark { filter: brightness(0) invert(1); }
 .design-primary-navigation, .design-secondary-navigation { display: flex; align-items: center; gap: var(--openbitfun-control-tab-group-gap); }
 .design-primary-navigation { flex: 1; }
+/* The section level of the site used to be a horizontal tab row under the topbar. It reads as
+   the top of the left column instead: one rail, always in the same place, mirroring the page's
+   own index beneath it. It stays a nav of real links, so nothing about routing changes. */
 .design-secondary-navigation {
-  max-width: var(--_lab-content-width);
-  min-height: var(--_lab-section-height);
-  margin-inline: auto;
-  padding: var(--openbitfun-space-2) var(--openbitfun-space-6);
-  overflow-x: auto;
+  position: sticky;
+  top: var(--_lab-topbar-height);
+  align-self: start;
+  z-index: calc(var(--openbitfun-layer-sticky) - 1);
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
+  /* The rail holds the viewport it is pinned in, so a route branch that carries a long list scrolls
+     inside the rail instead of pushing the sibling routes off the screen. */
+  max-height: calc(100dvh - var(--_lab-topbar-height));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  /* Pinned to the column's edge plus the page's own padding, measured by the grid column it sits in
+     rather than by its own box, so the rail's first item lines up with the wordmark above it. */
+  justify-self: end;
+  width: var(--_lab-rail-width);
+  padding: var(--openbitfun-space-6) var(--openbitfun-space-4) var(--openbitfun-space-10) 0;
 }
-/* Routes remain real links; their geometry and states follow TabGroup. */
+/* Routes remain real links; the shell squares them off and marks the active route with a rule. */
 .design-primary-navigation a, .design-secondary-navigation a {
+  position: relative;
   display: inline-flex;
   flex: none;
   align-items: center;
   min-height: var(--openbitfun-control-tab-group-item-height);
   padding: var(--openbitfun-space-component-block) var(--openbitfun-control-tab-group-item-padding-inline);
   border: var(--openbitfun-border-width-default) solid transparent;
-  border-radius: var(--openbitfun-control-tab-group-item-radius);
+  border-radius: var(--_lab-radius-control);
   color: var(--openbitfun-color-content-secondary);
   background: transparent;
-  font-family: var(--openbitfun-type-label-md-font-family);
+  font-family: var(--_lab-label-font);
   font-size: var(--openbitfun-type-label-md-font-size);
-  font-weight: var(--openbitfun-type-label-md-font-weight);
-  line-height: var(--openbitfun-type-label-md-line-height);
+  font-weight: var(--openbitfun-font-weight-regular);
+  line-height: var(--openbitfun-type-modifier-leading-ui-line-height);
+  letter-spacing: var(--openbitfun-type-modifier-tracking-subtle-letter-spacing);
   text-decoration: none;
   white-space: nowrap;
-  transition: background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard), color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
+  transition: color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
 }
+/* A stacked link takes the page index's own rhythm: control height, tighter inline padding, and
+   the active route marked by the same inset bar the index uses. */
+.design-secondary-navigation a {
+  min-height: var(--openbitfun-control-height-md);
+  padding: var(--openbitfun-space-2);
+}
+/* The component library is the shell's front door, so it is the one route that wears the mark: the
+   row keeps its own fill and rhythm and the logo only takes the right edge. */
+.design-secondary-navigation .design-navigation-library {
+  justify-content: space-between;
+  gap: var(--openbitfun-space-3);
+}
+/* The rail is a tree, not a row of siblings: a route's own chapters hang directly under it, one
+   step indented and one step quieter. Both levels are the same list, so the page never draws a
+   second index of itself beside the one the shell already has. */
+.design-navigation-chapters {
+  display: grid;
+  gap: 0;
+  margin: 0 0 var(--openbitfun-space-2);
+  padding: 0;
+  list-style: none;
+}
+.design-secondary-navigation .design-navigation-chapters a {
+  min-height: var(--openbitfun-control-height-sm);
+  padding-inline-start: var(--openbitfun-space-6);
+  color: var(--openbitfun-color-content-muted);
+  font-size: var(--openbitfun-type-label-sm-font-size);
+}
+/* The active route is a filled surface, never a stroke: same treatment and same token the
+   component library's own TabGroup uses for its selected tab, so a nav highlight and a tab
+   highlight read as the same material. */
 .design-primary-navigation a[aria-current], .design-secondary-navigation a[aria-current] {
   color: var(--openbitfun-color-content-primary);
   background: var(--openbitfun-color-selection-surface);
-  font-weight: var(--openbitfun-type-label-selected-font-weight);
+  font-weight: var(--openbitfun-font-weight-semibold);
 }
-.design-primary-navigation a:hover, .design-secondary-navigation a:hover { color: var(--openbitfun-color-content-primary); background: var(--openbitfun-color-action-neutral-surface-hover); }
+/* The group parent is the open branch, so it does not take a second filled row: the fill marks the
+   chapter being read, and two stacked fills would read as one heavy block. Declared after the
+   route fill so an open branch wins it. */
+.design-secondary-navigation a[data-group] {
+  background: transparent;
+  color: var(--openbitfun-color-content-primary);
+}
+.design-primary-navigation a:hover, .design-secondary-navigation a:hover { color: var(--openbitfun-color-content-primary); }
 .lab-topbar-actions { display: flex; align-items: center; gap: var(--openbitfun-space-2); margin-inline-start: auto; }
+/* The top-level nav is centred on the topbar itself rather than on whatever slack is left
+   between the wordmark and the actions, so it holds the bar's centre as those clusters change
+   width. Only the topbar copy — the same nav is stacked inside the mobile sheet, where it has
+   to stay in flow. */
+.lab-topbar > .lab-navigation {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  flex: none;
+  translate: -50% -50%;
+}
 .lab-navigation-trigger { display: none; }
 .lab-search-trigger { flex: none; }
-.lab-search-shortcut { margin-inline-start: var(--openbitfun-space-4); }
 .lab-search-dialog, .lab-settings-form { display: flex; flex-direction: column; gap: var(--openbitfun-space-4); }
 .lab-search-options { max-height: min(55dvh, 32rem); }
 .lab-settings-field { display: grid; gap: var(--openbitfun-space-2); }
 .lab-settings-field > span:first-child { color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-label-md-font-size); }
 .lab-mobile-navigation { display: flex; flex-direction: column; gap: var(--openbitfun-space-6); }
-.lab-mobile-navigation :is(.design-primary-navigation, .design-secondary-navigation) { display: flex; flex-direction: column; align-items: stretch; margin: 0; padding: 0; }
+/* Inside the sheet the same navs are the sheet's own stacked list, not a sticky rail, and nothing
+   is bounded or clipped: the sheet body does the scrolling. */
+.lab-mobile-navigation :is(.design-primary-navigation, .design-secondary-navigation) { display: flex; flex-direction: column; align-items: stretch; width: auto; margin: 0; padding: 0; position: static; z-index: auto; max-height: none; overflow: visible; }
+/* In the sheet the list is unbounded, so the directory moves behind the routes: a drawer keeps its
+   destinations within reach instead of burying them under 129 rows. */
+.lab-mobile-navigation .design-navigation-index { flex: none; order: 1; }
+.lab-mobile-navigation .design-library-list { overflow: visible; }
 .lab-page { width: 100%; max-width: var(--_lab-content-width); padding: var(--openbitfun-space-8) var(--openbitfun-space-6) var(--openbitfun-space-12); margin-inline: auto; }
-.page-heading { display: grid; gap: var(--openbitfun-space-3); max-width: 52rem; margin-bottom: var(--openbitfun-space-6); }
+.page-heading { display: grid; gap: var(--openbitfun-space-3); max-width: 52rem; padding-bottom: var(--openbitfun-space-4); margin-bottom: var(--openbitfun-space-6); }
 .page-heading--split > div:first-child { display: grid; min-width: 0; gap: var(--openbitfun-space-3); }
 .lab-shell :is(.page-heading, .component-detail-heading, .colors-heading-copy, .guide-hero, .brand-gallery-heading) h1 {
   margin: 0;
@@ -106,67 +268,68 @@
   overflow-wrap: anywhere;
 }
 .page-kicker {
-  color: var(--openbitfun-color-content-muted);
-  font-family: var(--openbitfun-type-label-sm-font-family);
-  font-size: var(--openbitfun-type-label-sm-font-size);
-  font-weight: var(--openbitfun-type-label-sm-font-weight);
-  line-height: var(--openbitfun-type-label-sm-line-height);
-  letter-spacing: var(--openbitfun-type-label-sm-letter-spacing);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--openbitfun-space-3);
+  color: var(--openbitfun-color-content-caption);
+  font-family: var(--_lab-label-font);
+  font-size: var(--openbitfun-type-label-xs-font-size);
+  font-weight: var(--openbitfun-font-weight-regular);
+  line-height: var(--openbitfun-type-modifier-leading-ui-line-height);
+  letter-spacing: var(--openbitfun-type-modifier-tracking-wide-letter-spacing);
   text-transform: none;
 }
+.page-kicker-index { color: var(--openbitfun-color-content-primary); font-weight: var(--openbitfun-font-weight-semibold); font-variant-numeric: tabular-nums; }
 .lab-shell :is(.page-heading, .component-detail-heading, .colors-heading-copy, .guide-hero) p { margin: 0; max-width: 46rem; color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-md-font-size); line-height: var(--openbitfun-type-body-md-line-height); }
 .design-brand-page p, .design-foundation-section p, .design-component-usage p, .design-component-tokens p { color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-md-font-size); line-height: var(--openbitfun-type-body-md-line-height); }
-.design-component-card h2 a { display: flex; gap: var(--openbitfun-space-3); align-items: center; justify-content: space-between; color: inherit; text-decoration: none; }
-.design-component-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--openbitfun-radius-lg); }
+.design-component-card :is(h2, h3) a { display: flex; gap: var(--openbitfun-space-3); align-items: center; justify-content: space-between; color: inherit; text-decoration: none; }
+.design-component-card :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; border-radius: var(--_lab-radius-surface); }
 .design-catalog-search { display: flex; gap: var(--openbitfun-space-5); align-items: center; margin-bottom: var(--openbitfun-space-4); }
 .design-catalog-search > :first-child { flex: 1; max-width: 34rem; }
 .design-catalog-search > span:last-child { color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); white-space: nowrap; }
-.design-catalog-filters { display: flex; gap: var(--openbitfun-space-5); flex-wrap: wrap; padding-block: var(--openbitfun-space-3); margin-bottom: var(--openbitfun-space-8); border-bottom: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle); }
-.design-catalog-filter { position: relative; padding: var(--openbitfun-space-2) 0 var(--openbitfun-space-3); border: 0; background: transparent; color: var(--openbitfun-color-content-muted); font: inherit; font-size: var(--openbitfun-type-body-sm-font-size); cursor: pointer; }
-.design-catalog-filter[aria-pressed="true"] { color: var(--openbitfun-color-content-primary); }
-.design-catalog-filter[aria-pressed="true"]::after { content: ""; position: absolute; bottom: calc(-1 * var(--openbitfun-space-3)); inset-inline: 0; height: var(--openbitfun-border-width-strong); background: currentColor; }
-.lab-shell[data-component-library] .design-secondary-navigation { position: sticky; top: var(--_lab-topbar-height); z-index: calc(var(--openbitfun-layer-sticky) - 1); height: var(--_lab-section-height); background: var(--openbitfun-color-surface-canvas); }
-.lab-page.design-component-library { display: grid; grid-template-columns: 256px minmax(0, 1fr); align-items: start; column-gap: var(--openbitfun-space-10); padding-block: 0; min-height: calc(100dvh - var(--_lab-topbar-height) - var(--_lab-section-height)); }
-.design-library-sidebar { position: sticky; top: calc(var(--_lab-topbar-height) + var(--_lab-section-height)); height: calc(100dvh - var(--_lab-topbar-height) - var(--_lab-section-height)); min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--openbitfun-space-4); padding-block: var(--openbitfun-space-6); padding-inline-end: var(--openbitfun-space-5); }
-.design-library-heading { display: flex; align-items: center; gap: var(--openbitfun-space-2); flex: none; }
-.design-library-heading h2 { margin: 0; font-size: var(--openbitfun-type-heading-card-font-size); font-weight: var(--openbitfun-type-heading-card-font-weight); }
-.design-library-count { margin-inline-start: auto; color: var(--openbitfun-color-content-muted); font-size: var(--openbitfun-type-body-xs-font-size); white-space: nowrap; }
-.design-library-toggle {
-  display: none; }
-.design-library-index { display: flex; flex-direction: column; gap: var(--openbitfun-space-4); min-height: 0; flex: 1; }
-.design-library-index > :first-child { flex-shrink: 0; }
-.design-library-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: var(--openbitfun-space-1); margin-inline: calc(-1 * var(--openbitfun-space-1)); }
+.design-catalog-filters { display: flex; gap: var(--openbitfun-space-2); flex-wrap: wrap; padding-block: var(--openbitfun-space-3); margin-bottom: var(--openbitfun-space-8); }
+.design-catalog-filter { position: relative; padding: var(--openbitfun-space-2) var(--openbitfun-space-3); border: 0; border-radius: var(--_lab-radius-control); background: transparent; color: var(--openbitfun-color-content-muted); font: inherit; font-size: var(--openbitfun-type-body-sm-font-size); cursor: pointer; }
+.design-catalog-filter:hover { background: var(--openbitfun-component-button-fill-background); color: var(--openbitfun-color-content-secondary); }
+.design-catalog-filter[aria-pressed="true"] { background: var(--openbitfun-color-selection-surface); color: var(--openbitfun-color-content-primary); font-weight: var(--openbitfun-font-weight-semibold); }
+.lab-page.design-component-library { display: block; padding-block: 0; min-height: calc(100dvh - var(--_lab-topbar-height)); }
+/* The directory keeps its own scroll region inside the rail: a route branch, then the long list,
+   then the sibling routes, so neither the preview nor the rest of the section moves with it. */
+.design-navigation-index { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--openbitfun-space-2); min-height: 0; padding-block-end: var(--openbitfun-space-3); }
+/* Off-screen live region: the rail announces its filtered total without printing it. */
+.design-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+.design-library-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: var(--openbitfun-space-1); margin-inline: calc(-1 * var(--openbitfun-space-1)); counter-reset: lab-component; }
+/* Categories are separated by space, not by a rule: the same reason the page index dropped its
+   hairlines, and the caption weight already carries the grouping. */
 .design-library-group + .design-library-group { margin-top: var(--openbitfun-space-5); }
-.design-library-group h3 { margin: 0; padding: var(--openbitfun-space-2) var(--openbitfun-space-3); color: var(--openbitfun-color-content-muted); font-size: var(--openbitfun-type-label-sm-font-size); font-weight: var(--openbitfun-type-label-sm-font-weight); }
-.design-library-group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--openbitfun-space-1); }
-.design-library-link { position: relative; display: flex; align-items: center; min-height: var(--openbitfun-control-height-md); padding: var(--openbitfun-space-2) var(--openbitfun-space-3); border-radius: var(--openbitfun-radius-md); color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-label-md-font-size); line-height: var(--openbitfun-type-label-md-line-height); text-decoration: none; }
-.design-library-link:hover { color: var(--openbitfun-color-content-primary); background: var(--openbitfun-color-action-neutral-surface-hover); }
-.design-library-link[aria-current="page"] { color: var(--openbitfun-color-content-primary); background: var(--openbitfun-color-action-neutral-surface); font-weight: var(--openbitfun-type-label-selected-font-weight); }
-.design-library-sidebar :is(a, button):focus-visible { outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring); outline-offset: var(--openbitfun-focus-offset); }
+.design-library-group h3 { margin: 0; padding: var(--openbitfun-space-2) var(--openbitfun-space-2); color: var(--openbitfun-color-content-caption); font-family: var(--_lab-label-font); font-size: var(--openbitfun-type-label-xs-font-size); font-weight: var(--openbitfun-font-weight-regular); letter-spacing: var(--openbitfun-type-modifier-tracking-wide-letter-spacing); }
+.design-library-group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
+.design-library-link { position: relative; display: flex; align-items: center; gap: var(--openbitfun-space-3); min-height: var(--openbitfun-control-height-md); padding: var(--openbitfun-space-2); border-radius: var(--_lab-radius-control); color: var(--openbitfun-color-content-secondary); font-family: var(--_lab-label-font); font-size: var(--openbitfun-type-label-sm-font-size); line-height: var(--openbitfun-type-modifier-leading-ui-line-height); letter-spacing: var(--openbitfun-type-modifier-tracking-subtle-letter-spacing); text-decoration: none; }
+.design-library-link > * { min-width: 0; }
+.design-library-link::before { counter-increment: lab-component; content: counter(lab-component, decimal-leading-zero); flex: none; color: var(--openbitfun-color-content-caption); font-variant-numeric: tabular-nums; }
+.design-library-link:hover { color: var(--openbitfun-color-content-primary); background: transparent; }
+.design-library-link[aria-current="page"] { color: var(--openbitfun-color-content-primary); background: var(--openbitfun-color-selection-surface); font-weight: var(--openbitfun-font-weight-semibold); }
+.design-library-link[aria-current="page"]::before { color: var(--openbitfun-color-content-primary); }
 .design-library-empty { padding: var(--openbitfun-space-3); color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); }
-.design-library-footer { flex: none; display: grid; gap: var(--openbitfun-space-3); padding: var(--openbitfun-space-4) var(--openbitfun-space-3) 0; }
-.design-library-footer a { display: flex; align-items: center; justify-content: space-between; gap: var(--openbitfun-space-2); color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); text-decoration: none; }
-.design-library-footer a:hover { color: var(--openbitfun-color-content-primary); }
 .design-library-content { min-width: 0; padding-block: var(--openbitfun-space-6) var(--openbitfun-space-12); }
 .design-library-detail { min-width: 0; }
-.design-library-detail .component-detail-heading { min-height: 0; padding: 0; }
+.design-library-detail .component-detail-heading { min-height: 0; padding: 0 0 var(--openbitfun-space-4); margin-bottom: var(--openbitfun-space-4); }
 .design-library-detail .component-detail-heading > div { min-width: 0; gap: var(--openbitfun-space-3); }
 .design-library-detail .component-detail-heading h1 { margin: 0; overflow-wrap: anywhere; }
 .design-library-detail .component-preview-main { gap: var(--openbitfun-space-6); }
 .design-library-detail .design-state-comparison { margin-block: 0; }
-.design-library-detail .component-inspector { top: calc(var(--_lab-topbar-height) + var(--_lab-section-height) + var(--openbitfun-space-6)); max-height: calc(100dvh - var(--_lab-topbar-height) - var(--_lab-section-height) - var(--openbitfun-space-12)); }
+.design-library-detail .component-inspector { top: calc(var(--_lab-topbar-height) + var(--openbitfun-space-6)); max-height: calc(100dvh - var(--_lab-topbar-height) - var(--openbitfun-space-12)); }
 .design-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: var(--openbitfun-space-8) var(--openbitfun-space-5); }
-.design-component-card { position: relative; min-width: 0; border-radius: var(--openbitfun-radius-lg); }
-.design-component-card-preview { height: 240px; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: var(--openbitfun-space-3); padding: var(--openbitfun-space-6); border: 0; border-radius: var(--openbitfun-radius-lg); background: var(--openbitfun-color-surface-subtle); pointer-events: none; }
+.design-component-card { position: relative; min-width: 0; border-radius: var(--_lab-radius-surface); }
+.design-component-card-preview { height: 240px; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: var(--openbitfun-space-3); padding: var(--openbitfun-space-6); border-radius: var(--_lab-radius-surface); background: var(--openbitfun-color-surface-subtle); pointer-events: none; }
 .design-component-card-preview > * { max-width: 100%; }
 .design-component-card-preview .flow-chat-preview-frame { min-width: 0; width: 100%; }
 .design-component-card-preview .lab-brand-solid-stage { display: contents; }
 .design-component-card-copy { padding: var(--openbitfun-space-4) var(--openbitfun-space-1) 0; }
-.design-component-card h2 { margin: var(--openbitfun-space-2) 0 var(--openbitfun-space-2); font-size: var(--openbitfun-type-heading-panel-font-size); overflow-wrap: anywhere; }
+.design-component-card :is(h2, h3) { margin: var(--openbitfun-space-2) 0 var(--openbitfun-space-2); font-size: var(--openbitfun-type-heading-panel-font-size); overflow-wrap: anywhere; }
 .design-component-card p { color: var(--openbitfun-color-content-secondary); margin: 0; font-size: var(--openbitfun-type-body-sm-font-size); line-height: var(--openbitfun-type-body-sm-line-height); }
-.design-component-card:hover .design-component-card-preview { border-color: var(--openbitfun-color-border-strong); }
+.design-component-card:hover .design-component-card-preview { background: var(--openbitfun-color-surface-tertiary); }
 .design-component-card:focus-within { outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring); outline-offset: var(--openbitfun-focus-offset); }
-.design-context-link { display: flex; align-items: center; justify-content: space-between; gap: var(--openbitfun-space-5); padding: var(--openbitfun-space-5); margin-bottom: var(--openbitfun-space-8); background: var(--openbitfun-color-surface-subtle); border-radius: var(--openbitfun-radius-lg); }
+.design-context-link { display: flex; align-items: center; justify-content: space-between; gap: var(--openbitfun-space-5); padding: var(--openbitfun-space-5); margin-bottom: var(--openbitfun-space-8); border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle); background: transparent; border-radius: var(--_lab-radius-surface); }
 .design-context-link h2 { margin: 0 0 var(--openbitfun-space-2); font-size: var(--openbitfun-type-heading-card-font-size); }
 .design-context-link p { margin: 0; color: var(--openbitfun-color-content-secondary); }
 .design-directory-footer, .design-preview-caption { display: flex; align-items: center; justify-content: space-between; gap: var(--openbitfun-space-4); padding-top: var(--openbitfun-space-6); }
@@ -175,14 +338,20 @@
 .design-state-comparison > summary, .design-tool-reference > summary { padding: var(--openbitfun-space-4) 0; cursor: pointer; font-size: var(--openbitfun-type-label-lg-font-size); }
 .design-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--openbitfun-space-6); }
 .design-detail-layout[data-inspector-open] { grid-template-columns: minmax(0, 1fr) 280px; }
-.design-detail-layout .component-inspector { position: sticky; top: calc(var(--_lab-topbar-height) + var(--_lab-section-height) + var(--openbitfun-space-4)); max-height: calc(100dvh - var(--_lab-topbar-height) - var(--_lab-section-height) - var(--openbitfun-space-8)); overflow-y: auto; }
+.design-detail-layout .component-inspector { position: sticky; top: calc(var(--_lab-topbar-height) + var(--openbitfun-space-4)); max-height: calc(100dvh - var(--_lab-topbar-height) - var(--openbitfun-space-8)); overflow-y: auto; }
 .design-detail-layout .component-inspector-content { display: block; }
-.design-detail-layout .component-preview-panel { border: 0; border-radius: var(--openbitfun-radius-lg); overflow: visible; }
-.design-preview-toolbar { flex-wrap: wrap; gap: var(--openbitfun-space-3); padding: var(--openbitfun-space-4); border-bottom: 0; }
-.design-preview-options { display: flex; align-items: center; flex-wrap: wrap; gap: var(--openbitfun-space-3); padding: 0 var(--openbitfun-space-4) var(--openbitfun-space-3); }
+/* The preview is one framed specimen, not a box inside a box: the panel keeps no shell of its own,
+   and the heading and the option row share a single closing rule instead of stacking two bands. */
+.design-detail-layout .component-preview-panel { border: var(--_lab-rule); border-radius: var(--_lab-radius-surface); background: var(--openbitfun-color-surface-panel); overflow: hidden; }
+.design-preview-toolbar { flex-wrap: wrap; gap: var(--openbitfun-space-3); padding: var(--openbitfun-space-3) var(--openbitfun-space-4); border-bottom: var(--_lab-rule); }
+.component-preview-panel:has(.design-preview-options) .design-preview-toolbar { border-bottom: 0; }
+.design-preview-options { display: flex; align-items: center; flex-wrap: wrap; gap: var(--openbitfun-space-3); padding: var(--openbitfun-space-3) var(--openbitfun-space-4); border-bottom: var(--_lab-rule); }
 .design-preview-options .component-inspector-select { display: flex; align-items: center; gap: var(--openbitfun-space-2); }
+/* Flex drops the 82px column floor the inspector grid gives this caption, so a two-character label
+   shrinks past its own width and stacks vertically. The caption is a fixed label: never shrink it. */
+.design-preview-options .component-inspector-select > span:first-child { flex: none; white-space: nowrap; }
 .design-preview-options select { width: auto; max-width: 15rem; }
-.design-selected-stage { display: flex; flex-direction: column; justify-content: center; min-height: 300px; min-width: 0; padding: var(--openbitfun-space-10); background: var(--openbitfun-color-surface-panel); border-radius: 0 0 var(--openbitfun-radius-lg) var(--openbitfun-radius-lg); }
+.design-selected-stage { display: flex; flex-direction: column; justify-content: center; min-height: 300px; min-width: 0; padding: var(--openbitfun-space-8); background: var(--openbitfun-color-surface-panel); border-radius: inherit; }
 .design-selected-component { min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--openbitfun-space-4); width: 100%; margin-inline: auto; }
 .design-selected-component > * { max-width: 100%; }
 .design-selected-component > label { display: flex; gap: var(--openbitfun-space-2); align-items: center; }
@@ -204,8 +373,8 @@
 .design-component-tokens .component-inspector-token-list { flex-direction: row; flex-wrap: wrap; }
 .design-state-comparison .component-preview-canvas { max-height: 75vh; overflow: auto; padding: var(--openbitfun-space-5); }
 .design-state-comparison .component-preview-matrix { width: max-content; min-width: 100%; }
-.design-button-overview { display: grid; min-width: 0; gap: var(--openbitfun-space-6); padding: var(--openbitfun-space-5); overflow-x: auto; border-radius: 0 0 var(--openbitfun-radius-lg) var(--openbitfun-radius-lg); }
-.design-button-overview .button-state-surface { min-width: 640px; border-radius: var(--openbitfun-radius-md); padding-bottom: var(--openbitfun-space-4); }
+.design-button-overview { display: grid; min-width: 0; gap: var(--openbitfun-space-6); padding: var(--openbitfun-space-5); overflow-x: auto; border-radius: inherit; }
+.design-button-overview .button-state-surface { min-width: 640px; border-radius: var(--_lab-radius-inset); padding-bottom: var(--openbitfun-space-4); }
 .design-button-overview .component-preview-matrix { width: 100%; min-width: 640px; grid-template-columns: 96px repeat(var(--_preview-state-count), minmax(100px, 1fr)); grid-template-rows: var(--openbitfun-space-10); grid-auto-rows: minmax(var(--openbitfun-space-16), auto); }
 .design-section-index { display: flex; gap: var(--openbitfun-space-5); flex-wrap: wrap; padding-bottom: var(--openbitfun-space-6); }
 .design-section-index a { color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); }
@@ -215,37 +384,91 @@
 .design-token-owner-preview > div { display: grid; align-items: center; justify-items: center; min-height: 240px; padding: var(--openbitfun-space-5); background: var(--openbitfun-color-surface-subtle); border-radius: var(--openbitfun-radius-lg); }
 .design-token-owner-preview > div > * { max-width: 100%; }
 @media (max-width: 1100px) {
-  .lab-page.design-component-library { grid-template-columns: 224px minmax(0, 1fr); column-gap: var(--openbitfun-space-6); }
+  /* Two left columns would eat the reading measure, so the rail gets narrower here instead. Its
+     margin is the shell's, not a local number: the rail stays on the page's edge at every width. */
+  .lab-shell { --_lab-rail-width: 176px; }
   .design-library-detail .component-inspector { position: static; max-height: none; }
   .design-detail-layout[data-inspector-open] { grid-template-columns: minmax(0, 1fr); }
-  .design-detail-layout .component-inspector { grid-row: 1; position: static; max-height: calc(100dvh - var(--_lab-topbar-height) - var(--_lab-section-height) - var(--openbitfun-space-8)); top: calc(var(--_lab-topbar-height) + var(--_lab-section-height) + var(--openbitfun-space-4)); }
+  .design-detail-layout .component-inspector { grid-row: 1; position: static; max-height: calc(100dvh - var(--_lab-topbar-height) - var(--openbitfun-space-8)); top: calc(var(--_lab-topbar-height) + var(--openbitfun-space-4)); }
 }
 @media (max-width: 860px) {
-  .lab-page.design-component-library { grid-template-columns: minmax(0, 1fr); }
-  .design-library-sidebar { position: static; height: auto; padding-inline-end: 0; padding-block: var(--openbitfun-space-3); gap: 0; }
-  .design-library-toggle {
-    display: inline-flex; }
-  .design-library-sidebar:not([data-open]) .design-library-index { display: none; }
-  .design-library-index { padding-block-start: var(--openbitfun-space-4); }
-  .design-library-list { flex: none; max-height: 40dvh; }
-  .design-library-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block-end: var(--openbitfun-space-2); }
+  /* Below the navigation breakpoint the rail gives its column back and the same nav is reached
+     through the topbar's navigation sheet. */
+  .lab-shell[data-section-navigation] .lab-workspace { grid-template-columns: minmax(0, 1fr); }
+  .lab-shell[data-section-navigation] .lab-workspace > .lab-content { grid-column: 1; }
+  .lab-workspace > .design-secondary-navigation { display: none; }
   .design-library-content { padding-block-start: var(--openbitfun-space-6); padding-block: var(--openbitfun-space-6) var(--openbitfun-space-12); }
   .design-preview-caption, .design-context-link { align-items: flex-start; flex-direction: column; }
   .design-selected-stage { padding: var(--openbitfun-space-5); background: var(--openbitfun-color-surface-panel); }
 }
 @media (max-width: 600px) {
   .lab-page { padding: var(--openbitfun-space-8) var(--openbitfun-space-4) var(--openbitfun-space-12); }
-  .design-secondary-navigation { padding-inline: var(--openbitfun-space-4); }
   .design-catalog-search { align-items: stretch; flex-direction: column; }
 }
 /* Shared document layout; controls retain their public component styles. */
 .lab-shell :is(a, summary, [role="tabpanel"]):focus-visible { outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring); outline-offset: var(--openbitfun-focus-offset); }
-.design-secondary-navigation { position: sticky; top: var(--_lab-topbar-height); z-index: calc(var(--openbitfun-layer-sticky) - 1); background: var(--openbitfun-color-surface-canvas); }
-.lab-mobile-navigation .design-secondary-navigation { position: static; }
 .lab-text-link { display: inline-flex; align-items: center; gap: var(--openbitfun-space-2); min-height: var(--openbitfun-control-height-sm); color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-label-md-font-size); text-decoration: none; }
 .lab-text-link:hover { color: var(--openbitfun-color-content-primary); text-decoration: underline; }
-.design-reference-disclosure { padding-block: var(--openbitfun-space-2); }
+/* Level-2 reference blocks keep a real heading: `renderHeader` moves the trigger inside it, so the
+   block owns its heading while the component keeps its state. Geometry reuses the component's own
+   layout tokens, so this header stays in sync with the package instead of drifting from it.
+   Blocks are separated by space, not by a rule: the content column keeps its rules for things that
+   are actually tabular. */
+.design-reference-disclosure { padding-block: var(--openbitfun-space-2) var(--openbitfun-space-4); }
+.design-reference-heading { margin: 0; font: inherit; }
+.design-reference-trigger {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  min-block-size: var(--openbitfun-layout-disclosure-trigger-min-block-size);
+  gap: var(--openbitfun-layout-disclosure-trigger-gap);
+  padding-block: var(--openbitfun-layout-disclosure-trigger-padding-block);
+  padding-inline: var(--openbitfun-layout-disclosure-trigger-padding-inline);
+  border: 0;
+  border-radius: var(--_lab-radius-control);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.design-reference-trigger:hover { color: var(--openbitfun-color-content-primary); }
+.design-reference-trigger:focus-visible { outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring); outline-offset: var(--openbitfun-focus-offset); }
+.design-reference-indicator {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--openbitfun-layout-disclosure-indicator-size);
+  block-size: var(--openbitfun-layout-disclosure-indicator-size);
+  color: var(--openbitfun-color-content-muted);
+  transition: transform var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
+}
+.design-reference-disclosure[data-open="true"] .design-reference-indicator { transform: rotate(90deg); }
+.design-reference-label {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  font-family: var(--openbitfun-type-heading-section-font-family);
+  font-size: var(--openbitfun-type-heading-section-font-size);
+  font-weight: var(--openbitfun-type-heading-section-font-weight);
+  letter-spacing: var(--openbitfun-type-heading-section-letter-spacing);
+}
 .design-reference-note { margin: 0; color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); line-height: var(--openbitfun-type-body-sm-line-height); padding-block: var(--openbitfun-space-2); }
+/* Pattern sections (Icon contexts, Menu nesting, native disclosure) are Lab structure, not component
+   previews, so they take the same level-2 block treatment. The text starts where the reference labels
+   start, which is one indicator column into the block. */
+.design-detail-layout .design-icon-documentation {
+  padding-block: 0 var(--openbitfun-space-6);
+}
+.design-detail-layout .design-icon-documentation > h2 {
+  margin: 0;
+  padding-block: var(--openbitfun-layout-disclosure-trigger-padding-block);
+  padding-inline: calc(var(--openbitfun-layout-disclosure-trigger-padding-inline) + var(--openbitfun-layout-disclosure-indicator-size) + var(--openbitfun-layout-disclosure-trigger-gap));
+  font-family: var(--openbitfun-type-heading-section-font-family);
+  font-size: var(--openbitfun-type-heading-section-font-size);
+  font-weight: var(--openbitfun-type-heading-section-font-weight);
+  letter-spacing: var(--openbitfun-type-heading-section-letter-spacing);
+}
 .design-reference-disclosure .component-code-panel { border: 0; background: var(--openbitfun-color-surface-subtle); }
 .design-reference-disclosure .component-code-heading { justify-content: flex-end; border-bottom: 0; }
 .design-component-tokens { display: grid; gap: var(--openbitfun-space-4); justify-items: start; }
@@ -253,20 +476,19 @@
 .colors-theme-value { display: flex; align-items: center; min-height: var(--openbitfun-control-height-md); color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); }
 .colors-semantic-tools > [data-openbitfun-component="search-field"] { flex: 1; min-width: 12rem; }
 .colors-semantic-tools > [data-openbitfun-component="select"] { min-width: 10rem; }
-.colors-expand-action { display: flex; justify-content: center; padding: var(--openbitfun-space-2); border-top: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle); }
+.colors-expand-action { display: flex; justify-content: center; padding: var(--openbitfun-space-4) var(--openbitfun-space-2); }
 .token-tools > * { min-width: 0; }
 .token-action-row { flex-wrap: wrap; }
 .token-value-control > [data-openbitfun-component="input"] { flex: 1; min-width: 0; }
 .guide-setup-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: var(--openbitfun-space-8); }
 .guide-step-list { display: grid; gap: var(--openbitfun-space-6); list-style: none; padding: 0; margin: 0; }
 .guide-step-list li { display: flex; align-items: flex-start; gap: var(--openbitfun-space-3); }
-.guide-step-list h2 { margin: 0 0 var(--openbitfun-space-2); font-family: var(--openbitfun-type-heading-section-font-family); font-size: var(--openbitfun-type-heading-section-font-size); font-weight: var(--openbitfun-type-heading-section-font-weight); line-height: var(--openbitfun-type-heading-section-line-height); }
+.guide-step-list :is(h2, h3) { margin: 0 0 var(--openbitfun-space-2); font-family: var(--openbitfun-type-heading-section-font-family); font-size: var(--openbitfun-type-heading-section-font-size); font-weight: var(--openbitfun-type-heading-section-font-weight); line-height: var(--openbitfun-type-heading-section-line-height); }
 .guide-step-list p { margin: 0; color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); line-height: var(--openbitfun-type-body-sm-line-height); }
 .guide-step-icon { flex: none; }
 .guide-next-action { margin-top: var(--openbitfun-space-6); display: flex; flex-wrap: wrap; gap: var(--openbitfun-space-3); }
 @media (max-width: 1100px) {
  .lab-topbar { gap: var(--openbitfun-space-3); }
- .design-wordmark-suffix, .lab-search-shortcut { display: none; }
  .colors-page-heading { grid-template-columns: minmax(0, 1fr); }
 }
 @media (max-width: 860px) {
@@ -276,7 +498,6 @@
  .guide-setup-layout { grid-template-columns: minmax(0, 1fr); }
 }
 @media (max-width: 600px) {
- .lab-search-trigger-label { display: none; }
  .lab-topbar-actions { gap: var(--openbitfun-space-1); }
  .lab-page { padding-block: var(--openbitfun-space-6) var(--openbitfun-space-8); }
  .colors-context-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
@@ -294,14 +515,9 @@
  .design-primary-navigation a, .design-secondary-navigation a { transition: none; }
 }
 /* Keep document offsets beside the shell that owns their geometry. */
-.lab-page.design-foundations { --_foundation-sticky-top: calc(var(--_lab-topbar-height) + var(--_lab-section-height) + var(--openbitfun-space-4)); }
-.foundation-sidebar { top: var(--_foundation-sticky-top); max-height: calc(100dvh - var(--_foundation-sticky-top)); }
+.lab-page.design-foundations { --_foundation-sticky-top: calc(var(--_lab-topbar-height) + var(--openbitfun-space-4)); }
 .foundation-chapter { scroll-margin-top: var(--_foundation-sticky-top); }
-.subagent-ip-detail { top: calc(var(--_lab-topbar-height) + var(--_lab-section-height) + var(--openbitfun-space-4)); scroll-margin-top: calc(var(--_lab-topbar-height) + var(--_lab-section-height) + var(--openbitfun-space-4)); }
-.brand-gallery :is(section, details) { scroll-margin-top: calc(var(--_lab-topbar-height) + var(--_lab-section-height) + var(--openbitfun-space-4)); }
-@media (max-width: 860px) {
-  .lab-page.design-foundations { --_foundation-sticky-top: calc(var(--_lab-topbar-height) + var(--_lab-section-height) + var(--openbitfun-control-height-lg) + var(--openbitfun-space-6)); }
-  .foundation-sidebar { top: calc(var(--_lab-topbar-height) + var(--_lab-section-height)); max-height: none; }
-}
+.subagent-ip-detail { top: calc(var(--_lab-topbar-height) + var(--openbitfun-space-4)); scroll-margin-top: calc(var(--_lab-topbar-height) + var(--openbitfun-space-4)); }
+.brand-gallery :is(section, details) { scroll-margin-top: calc(var(--_lab-topbar-height) + var(--openbitfun-space-4)); }
 
 .page-heading--split { max-width: none; }
diff --git a/design-system/apps/design-lab/src/foundationNavigation.ts b/design-system/apps/design-lab/src/foundationNavigation.ts
new file mode 100644
index 0000000000..1fc20fb33e
--- /dev/null
+++ b/design-system/apps/design-lab/src/foundationNavigation.ts
@@ -0,0 +1,47 @@
+import type { MessageKey } from "./i18n";
+
+/* The Foundations chapters. One list, two consumers: the page renders each entry as a section, and
+   the rail renders the same entries as the children of the Foundations route, so the tree in the
+   rail and the document can never drift apart. */
+export const foundationSections = [
+  { id: "colors", label: "nav.colors", note: "design.colorNote" },
+  { id: "type", label: "design.type", note: "design.typeNote" },
+  { id: "space", label: "design.space", note: "design.spaceNote" },
+  { id: "shape", label: "design.shape", note: "design.shapeNote" },
+  { id: "motion", label: "design.motion", note: "design.motionNote" },
+  { id: "accessibility", label: "design.accessibility", note: "design.accessibilityNote" },
+] as const satisfies readonly { id: string; label: MessageKey; note: MessageKey }[];
+
+export type FoundationSectionId = typeof foundationSections[number]["id"];
+
+/* The reader's position belongs to the page: it is the only part that measures scroll geometry.
+   It publishes the current chapter here so the rail's tree can mark it, and the shell never has to
+   know how the page measures itself. */
+let activeSection: FoundationSectionId = "colors";
+const listeners = new Set<() => void>();
+
+export function getActiveFoundationSection() {
+  return activeSection;
+}
+
+export function subscribeFoundationSection(listener: () => void) {
+  listeners.add(listener);
+  return () => { listeners.delete(listener); };
+}
+
+export function setActiveFoundationSection(id: FoundationSectionId) {
+  if (id === activeSection) return;
+  activeSection = id;
+  for (const listener of listeners) listener();
+}
+
+/* Move the reader to a chapter the way a hash change would. Used for the initial anchor and for
+   clicking the chapter already in the address, where no hash change will follow. */
+export function focusFoundationSection(id: FoundationSectionId, behavior?: ScrollBehavior) {
+  const element = document.getElementById(`foundation-${id}`);
+  element?.querySelector<HTMLElement>("h2")?.focus({ preventScroll: true });
+  element?.scrollIntoView({
+    behavior: behavior ?? (window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth"),
+    block: "start",
+  });
+}
diff --git a/design-system/apps/design-lab/src/i18n/brandMessages.ts b/design-system/apps/design-lab/src/i18n/brandMessages.ts
index aadba3e7e3..9840179602 100644
--- a/design-system/apps/design-lab/src/i18n/brandMessages.ts
+++ b/design-system/apps/design-lab/src/i18n/brandMessages.ts
@@ -12,6 +12,7 @@ export const brandAssetsEn = {
   "brandAssets.backgroundFor": "{asset} preview background",
   "brandAssets.downloadLabel": "Download {asset} ({format})",
   "brandAssets.chooseMotion": "Motion style",
+  "brandAssets.characterMotion": "Characters",
   "brandAssets.breathe": "Breathe",
   "brandAssets.flow": "Flow",
   "brandAssets.particles": "Particles",
@@ -33,6 +34,7 @@ export const brandAssetsZhCN = {
   "brandAssets.backgroundFor": "{asset}预览背景",
   "brandAssets.downloadLabel": "下载{asset}（{format}）",
   "brandAssets.chooseMotion": "动效样式",
+  "brandAssets.characterMotion": "角色",
   "brandAssets.breathe": "呼吸",
   "brandAssets.flow": "流光",
   "brandAssets.particles": "粒子",
@@ -54,6 +56,7 @@ export const brandAssetsZhTW = {
   "brandAssets.backgroundFor": "{asset}預覽背景",
   "brandAssets.downloadLabel": "下載{asset}（{format}）",
   "brandAssets.chooseMotion": "動效樣式",
+  "brandAssets.characterMotion": "角色",
   "brandAssets.breathe": "呼吸",
   "brandAssets.flow": "流光",
   "brandAssets.particles": "粒子",
diff --git a/design-system/apps/design-lab/src/i18n/componentMetadata.ts b/design-system/apps/design-lab/src/i18n/componentMetadata.ts
index e9bad7fdd0..910845529d 100644
--- a/design-system/apps/design-lab/src/i18n/componentMetadata.ts
+++ b/design-system/apps/design-lab/src/i18n/componentMetadata.ts
@@ -15,6 +15,15 @@ const categoryKeys: Readonly<Record<string, MessageKey>> = {
 };
 
 const descriptionKeys: Readonly<Record<string, MessageKey>> = {
+  MobileAvatar: "component.MobileAvatar.description",
+  MobileCheckbox: "component.MobileCheckbox.description",
+  MobileRadioGroup: "component.MobileRadioGroup.description",
+  MobileSelect: "component.MobileSelect.description",
+  MobileStepper: "component.MobileStepper.description",
+  MobileSwitch: "component.MobileSwitch.description",
+  MobileTabBar: "component.MobileTabBar.description",
+  MobileTag: "component.MobileTag.description",
+  MobileToolbar: "component.MobileToolbar.description",
   SplitView: "component.SplitView.description",
   ListModelsToolCard: "component.ListModelsToolCard.description",
   ControlHubToolCard: "component.ControlHubToolCard.description",
diff --git a/design-system/apps/design-lab/src/i18n/designMessages.ts b/design-system/apps/design-lab/src/i18n/designMessages.ts
index f3fb446b8c..6e1308235e 100644
--- a/design-system/apps/design-lab/src/i18n/designMessages.ts
+++ b/design-system/apps/design-lab/src/i18n/designMessages.ts
@@ -24,9 +24,54 @@ export const designEn = {
   "design.character.robot-20": "Oat",
 
   "design.components": "Components",
+  "design.componentIndex": "Component index",
   "design.foundations": "Foundations",
   "design.brand": "Brand resources",
   "design.intro": "Components, foundations, and brand assets for OpenBitFun.",
+  /* Brand line: the same English sentence in every locale, as on the reference product sites.
+     It states the design stance (neutral, connected, intelligent) and what it is the stance of,
+     so it is not translated. Short enough to hold two lines at every width. */
+  "design.slogan": "Neutral, connected, intelligent AI Core Blocks.",
+  /* The line under the brand line, in the same English in every locale: it explains the sentence
+     above it (what the blocks are) and what this site is for, in the register the reference
+     products use for the same job. */
+  "design.sloganSupport": "Tokens, components, and motion every OpenBitFun surface is assembled from. Neutral by default, connected across surfaces, live in this Lab.",
+  /* Homepage product picture. The showcase frame repeats the product's own welcome screen, so its
+     chrome labels stay English in every locale — the same rule as the brand line above. Sample data
+     inside that frame (session and repository names, machine, version, model) is not copy: it lives
+     in the page, unlabelled, the way it lives in the product. */
+  "design.homePreview.search": "Search",
+  "design.homePreview.newSession": "New session",
+  "design.homePreview.assistant": "AI Assistant",
+  "design.homePreview.taskBoard": "Task Board",
+  "design.homePreview.miniApp": "Mini App",
+  "design.homePreview.extensions": "Extensions",
+  "design.homePreview.sessions": "Sessions",
+  "design.homePreview.showMore": "Show more",
+  "design.homePreview.welcome": "Welcome",
+  "design.homePreview.settings": "Settings",
+  "design.homePreview.greeting": "Good morning, coding partner",
+  "design.homePreview.support": "Let’s create something together.",
+  "design.homePreview.composerPlaceholder": "How can I help you…",
+  "design.homePreview.composerVoice": "Voice input",
+  "design.homePreview.contextMachine": "This computer",
+  "design.homePreview.contextWorkspace": "worktree",
+  "design.homePreview.contextAsk": "Ask",
+  "design.homePreview.mode": "Standard",
+  /* The page closes on a footer built like the product site's own: the line under the wordmark,
+     the columns, and the small print. Its copy is translated, unlike the picture above, because a
+     reader of a translated catalog still expects a footer in their language. */
+  "design.homeFooter.pathsLabel": "OpenBitFun design system",
+  "design.homeFooter.tagline": "Built in the open.",
+  "design.homeFooter.taglineAccent": "Moving forward together.",
+  "design.homeFooter.copyright": "© {year} OpenBitFun",
+  "design.homeFooter.contactLabel": "Contact OpenBitFun",
+  "design.homeFooter.contact": "hello@openbitfun.com",
+  "design.homeFooter.openSource": "Open Source",
+  "design.homeFooter.license": "MIT",
+  /* The lockup is a way out of the Lab: it opens the product site in a new tab, so the label says
+     both what it is and that focus will move to another tab. */
+  "design.homeFooter.siteLabel": "OpenBitFun website (opens in a new tab)",
   "design.componentsIntro": "Browse components and try their states and interactions.",
   "design.foundationsIntro": "Color, typography, spacing, shape, and motion.",
   "design.brandIntro": "Original artwork, characters, and brand motion.",
@@ -118,9 +163,43 @@ export const designZhCN = {
   "design.character.robot-20": "燕麦",
 
   "design.components": "组件库",
+  "design.componentIndex": "组件索引",
   "design.foundations": "设计规范",
   "design.brand": "品牌资源",
   "design.intro": "OpenBitFun 的组件、设计规范与品牌资源。",
+  /* Brand line; kept English in every locale on purpose. See designEn above. */
+  "design.slogan": "Neutral, connected, intelligent AI Core Blocks.",
+  /* Support line; kept English in every locale on purpose. See designEn above. */
+  "design.sloganSupport": "Tokens, components, and motion every OpenBitFun surface is assembled from. Neutral by default, connected across surfaces, live in this Lab.",
+  /* Homepage product picture; kept English in every locale on purpose. See designEn above. */
+  "design.homePreview.search": "Search",
+  "design.homePreview.newSession": "New session",
+  "design.homePreview.assistant": "AI Assistant",
+  "design.homePreview.taskBoard": "Task Board",
+  "design.homePreview.miniApp": "Mini App",
+  "design.homePreview.extensions": "Extensions",
+  "design.homePreview.sessions": "Sessions",
+  "design.homePreview.showMore": "Show more",
+  "design.homePreview.welcome": "Welcome",
+  "design.homePreview.settings": "Settings",
+  "design.homePreview.greeting": "Good morning, coding partner",
+  "design.homePreview.support": "Let’s create something together.",
+  "design.homePreview.composerPlaceholder": "How can I help you…",
+  "design.homePreview.composerVoice": "Voice input",
+  "design.homePreview.contextMachine": "This computer",
+  "design.homePreview.contextWorkspace": "worktree",
+  "design.homePreview.contextAsk": "Ask",
+  "design.homePreview.mode": "Standard",
+  /* Footer copy is translated; see designEn above. */
+  "design.homeFooter.pathsLabel": "OpenBitFun 设计系统",
+  "design.homeFooter.tagline": "开放共建，",
+  "design.homeFooter.taglineAccent": "一起向前。",
+  "design.homeFooter.copyright": "© {year} OpenBitFun",
+  "design.homeFooter.contactLabel": "联系 OpenBitFun",
+  "design.homeFooter.contact": "hello@openbitfun.com",
+  "design.homeFooter.openSource": "开放源码",
+  "design.homeFooter.license": "MIT",
+  "design.homeFooter.siteLabel": "访问 OpenBitFun 官网（在新标签页打开）",
   "design.componentsIntro": "查看组件，体验状态与交互。",
   "design.foundationsIntro": "颜色、排版、间距、形态与动效。",
   "design.brandIntro": "原始标识、角色形象与品牌动效。",
@@ -213,9 +292,43 @@ export const designZhTW = {
   "design.character.robot-20": "燕麥",
 
   "design.components": "元件庫",
+  "design.componentIndex": "元件索引",
   "design.foundations": "設計規範",
   "design.brand": "品牌資源",
   "design.intro": "OpenBitFun 的元件、設計規範與品牌資源。",
+  /* Brand line; kept English in every locale on purpose. See designEn above. */
+  "design.slogan": "Neutral, connected, intelligent AI Core Blocks.",
+  /* Support line; kept English in every locale on purpose. See designEn above. */
+  "design.sloganSupport": "Tokens, components, and motion every OpenBitFun surface is assembled from. Neutral by default, connected across surfaces, live in this Lab.",
+  /* Homepage product picture; kept English in every locale on purpose. See designEn above. */
+  "design.homePreview.search": "Search",
+  "design.homePreview.newSession": "New session",
+  "design.homePreview.assistant": "AI Assistant",
+  "design.homePreview.taskBoard": "Task Board",
+  "design.homePreview.miniApp": "Mini App",
+  "design.homePreview.extensions": "Extensions",
+  "design.homePreview.sessions": "Sessions",
+  "design.homePreview.showMore": "Show more",
+  "design.homePreview.welcome": "Welcome",
+  "design.homePreview.settings": "Settings",
+  "design.homePreview.greeting": "Good morning, coding partner",
+  "design.homePreview.support": "Let’s create something together.",
+  "design.homePreview.composerPlaceholder": "How can I help you…",
+  "design.homePreview.composerVoice": "Voice input",
+  "design.homePreview.contextMachine": "This computer",
+  "design.homePreview.contextWorkspace": "worktree",
+  "design.homePreview.contextAsk": "Ask",
+  "design.homePreview.mode": "Standard",
+  /* Footer copy is translated; see designEn above. */
+  "design.homeFooter.pathsLabel": "OpenBitFun 設計系統",
+  "design.homeFooter.tagline": "開放共建，",
+  "design.homeFooter.taglineAccent": "一起向前。",
+  "design.homeFooter.copyright": "© {year} OpenBitFun",
+  "design.homeFooter.contactLabel": "聯絡 OpenBitFun",
+  "design.homeFooter.contact": "hello@openbitfun.com",
+  "design.homeFooter.openSource": "開放原始碼",
+  "design.homeFooter.license": "MIT",
+  "design.homeFooter.siteLabel": "前往 OpenBitFun 官網（另開分頁）",
   "design.componentsIntro": "查看元件，體驗狀態與互動。",
   "design.foundationsIntro": "色彩、排版、間距、形態與動效。",
   "design.brandIntro": "原始標誌、角色形象與品牌動效。",
diff --git a/design-system/apps/design-lab/src/i18n/messages.ts b/design-system/apps/design-lab/src/i18n/messages.ts
index e143ff2acc..479aba17e9 100644
--- a/design-system/apps/design-lab/src/i18n/messages.ts
+++ b/design-system/apps/design-lab/src/i18n/messages.ts
@@ -139,6 +139,15 @@ export const enUSMessages = {
   "component.MobileStatus.description": "A consistent mobile loading, empty, or error state with optional recovery action.",
   "component.MobileTextField.description": "A mobile text field with touch geometry and optional content slots.",
   "component.MobileTextarea.description": "A touch-friendly multiline field for expanded mobile composition and forms.",
+  "component.MobileAvatar.description": "A mobile identity avatar that renders initials, supplied artwork, or an image with an optional status ring.",
+  "component.MobileCheckbox.description": "A touch-sized checkbox row for multi-select mobile forms and settings lists.",
+  "component.MobileRadioGroup.description": "A flush mobile radio group where the group, not each row, carries the surface.",
+  "component.MobileSelect.description": "A mobile select field that opens the shared choice sheet instead of a native picker.",
+  "component.MobileStepper.description": "A bounded numeric stepper with decrease and increase controls at touch size.",
+  "component.MobileSwitch.description": "A touch-sized switch row for settings that take effect immediately.",
+  "component.MobileTabBar.description": "A safe-area-aware bottom tab bar whose selection is a filled pill, never an underline.",
+  "component.MobileTag.description": "A tappable mobile tag whose selection is a filled pill rather than an outline.",
+  "component.MobileToolbar.description": "A contextual mobile toolbar with independent leading, content, and trailing regions.",
   "component.ActionItem.description": "A native button row with independent leading, shortcut, and sibling action areas.",
   "component.ActivityItem.description": "A compact activity row with independent identity, description, metadata, and sibling action areas.",
   "component.AgentControlToolCard.description": "A compact agent capsule with lifecycle status that opens its conversation in the side pane.",
@@ -459,6 +468,11 @@ export const enUSMessages = {
   "components.preview.composerDevice": "This computer",
   "components.preview.composerWorkspace": "OpenBitFun",
   "components.preview.composerMode": "Ask",
+  "components.preview.mobileSelectLabel": "Model",
+  "components.preview.mobileStepperLabel": "Retries",
+  "components.preview.mobileDecrease": "Decrease",
+  "components.preview.mobileIncrease": "Increase",
+  "components.preview.mobileToolbarSelection": "2 selected",
   "components.preview.composerStandard": "Standard",
   "components.preview.composerModel": "deepseek-v4-pro",
   "components.preview.session": "Session",
@@ -947,6 +961,15 @@ export const zhCNMessages = {
   "component.MobileStatus.description": "统一呈现加载、空状态和错误恢复操作的移动端状态组件。",
   "component.MobileTextField.description": "具备触控几何与可选内容插槽的移动端文本框。",
   "component.MobileTextarea.description": "用于展开态输入和表单的触控友好多行文本框。",
+  "component.MobileAvatar.description": "移动端身份头像，支持首字母、图形或图片，并可附带状态圆环。",
+  "component.MobileCheckbox.description": "用于多选表单与设置列表的触控尺寸复选行。",
+  "component.MobileRadioGroup.description": "整组承担表面的移动端单选组，选项之间无缝排列。",
+  "component.MobileSelect.description": "打开统一选择弹层、而非系统选择器的移动端选择字段。",
+  "component.MobileStepper.description": "带上下限的数值步进器，减少与增加按钮均为触控尺寸。",
+  "component.MobileSwitch.description": "用于即时生效设置的触控尺寸开关行。",
+  "component.MobileTabBar.description": "适配安全区域的底部标签栏，选中态为色块填充而非下划线。",
+  "component.MobileTag.description": "可点按的移动端标签，选中态为填充胶囊而非描边。",
+  "component.MobileToolbar.description": "带前置、内容与后置区域的移动端上下文工具栏。",
   "component.ActionItem.description": "使用原生按钮语义，并拆分前置、快捷键与同级尾部操作区域的行项目。",
   "component.ActivityItem.description": "紧凑的活动行，可独立配置标识、描述、统计信息和同级尾部操作。",
   "component.AgentControlToolCard.description": "紧凑的子 Agent 胶囊，呈现任务和状态，点击在侧栏打开会话。",
@@ -1267,6 +1290,11 @@ export const zhCNMessages = {
   "components.preview.composerDevice": "此电脑",
   "components.preview.composerWorkspace": "OpenBitFun",
   "components.preview.composerMode": "询问",
+  "components.preview.mobileSelectLabel": "模型",
+  "components.preview.mobileStepperLabel": "重试次数",
+  "components.preview.mobileDecrease": "减少",
+  "components.preview.mobileIncrease": "增加",
+  "components.preview.mobileToolbarSelection": "已选 2 项",
   "components.preview.composerStandard": "标准",
   "components.preview.composerModel": "deepseek-v4-pro",
   "components.preview.session": "会话",
@@ -1801,6 +1829,15 @@ export const zhTWMessages = {
   "component.MobileStatus.description": "統一呈現載入、空狀態和錯誤恢復操作的行動端狀態元件。",
   "component.MobileTextField.description": "具備觸控幾何與可選內容插槽的移動端文字欄位。",
   "component.MobileTextarea.description": "用於展開態輸入和表單的觸控友好多行文字欄位。",
+  "component.MobileAvatar.description": "行動裝置身分頭像，支援縮寫字母、圖形或圖片，並可附帶狀態圓環。",
+  "component.MobileCheckbox.description": "用於多選表單與設定清單的觸控尺寸核取列。",
+  "component.MobileRadioGroup.description": "整組承擔表面的行動單選群組，選項之間無縫排列。",
+  "component.MobileSelect.description": "開啟統一選擇彈層、而非系統選擇器的行動選擇欄位。",
+  "component.MobileStepper.description": "具上下限的數值步進器，減少與增加按鈕皆為觸控尺寸。",
+  "component.MobileSwitch.description": "用於即時生效設定的觸控尺寸開關列。",
+  "component.MobileTabBar.description": "適配安全區域的底部標籤列，選中態為色塊填滿而非底線。",
+  "component.MobileTag.description": "可點按的行動標籤，選中態為填滿膠囊而非描邊。",
+  "component.MobileToolbar.description": "具前置、內容與後置區域的行動情境工具列。",
   "component.ActionItem.description": "使用原生按鈕語意，並拆分前置、快捷鍵與同級尾端操作區域的列項目。",
   "component.ActivityItem.description": "緊湊的活動列，可獨立設定標識、描述、統計資訊和同級尾端操作。",
   "component.AgentControlToolCard.description": "精簡的子 Agent 膠囊，呈現任務與狀態，點擊在側欄開啟對話。",
@@ -2024,6 +2061,11 @@ export const zhTWMessages = {
   "components.preview.composerDevice": "這台電腦",
   "components.preview.composerWorkspace": "OpenBitFun",
   "components.preview.composerMode": "詢問",
+  "components.preview.mobileSelectLabel": "模型",
+  "components.preview.mobileStepperLabel": "重試次數",
+  "components.preview.mobileDecrease": "減少",
+  "components.preview.mobileIncrease": "增加",
+  "components.preview.mobileToolbarSelection": "已選 2 項",
   "components.preview.composerStandard": "標準",
   "components.preview.composerModel": "deepseek-v4-pro",
   "components.preview.session": "工作階段",
diff --git a/design-system/apps/design-lab/src/i18n/previewMessages.ts b/design-system/apps/design-lab/src/i18n/previewMessages.ts
index fdd313a376..ffa1d2e33d 100644
--- a/design-system/apps/design-lab/src/i18n/previewMessages.ts
+++ b/design-system/apps/design-lab/src/i18n/previewMessages.ts
@@ -24,6 +24,7 @@ export const previewEn = {
   "preview.state.accent": "Accent", "preview.state.neutral": "Neutral", "preview.state.danger": "Danger",
   "preview.state.image": "Image", "preview.state.fallback": "Fallback", "preview.state.grouped": "Group",
   "preview.state.indeterminate": "Indeterminate", "preview.state.checked": "Checked",
+  "preview.state.on": "On", "preview.state.off": "Off", "preview.state.unselected": "Unselected",
   "preview.state.indicator": "Indicator", "preview.state.with-label": "With label",
   "preview.state.with-title": "With title", "preview.state.with-actions": "With actions",
   "preview.state.matrix": "Matrix", "preview.state.bars": "Bars", "preview.state.reduced-motion": "Reduced motion",
@@ -65,6 +66,7 @@ export const previewZhCN: Record<keyof typeof previewEn, string> = {
   "preview.state.accent": "强调", "preview.state.neutral": "中性", "preview.state.danger": "危险",
   "preview.state.image": "图片", "preview.state.fallback": "缺省头像", "preview.state.grouped": "头像组",
   "preview.state.indeterminate": "部分选中", "preview.state.checked": "选中",
+  "preview.state.on": "开", "preview.state.off": "关", "preview.state.unselected": "未选中",
   "preview.state.indicator": "指示器", "preview.state.with-label": "附带文字",
   "preview.state.with-title": "附带标题", "preview.state.with-actions": "附带操作",
   "preview.state.matrix": "点阵", "preview.state.bars": "条形", "preview.state.reduced-motion": "减少动态效果",
@@ -102,6 +104,7 @@ export const previewZhTW: Record<keyof typeof previewEn, string> = {
   "preview.scrimHint": "點擊遮罩可將其關閉。", "preview.sent": "預覽訊息已加入對話。",
   "preview.state.accent": "強調", "preview.state.danger": "危險", "preview.state.image": "圖片",
   "preview.state.fallback": "預設頭像", "preview.state.grouped": "頭像群組", "preview.state.indeterminate": "部分選取", "preview.state.checked": "選取",
+  "preview.state.on": "開", "preview.state.off": "關", "preview.state.unselected": "未選取",
   "preview.state.indicator": "指示器", "preview.state.with-label": "附帶文字", "preview.state.with-title": "附帶標題", "preview.state.with-actions": "附帶操作",
   "preview.state.matrix": "點陣", "preview.state.bars": "條形", "preview.state.reduced-motion": "減少動態效果",
   "preview.state.counter-rotate": "雙六邊形對轉",
diff --git a/design-system/apps/design-lab/src/pages/BrandPage.css b/design-system/apps/design-lab/src/pages/BrandPage.css
index 0e7342dbf6..ad96ea690d 100644
--- a/design-system/apps/design-lab/src/pages/BrandPage.css
+++ b/design-system/apps/design-lab/src/pages/BrandPage.css
@@ -78,6 +78,14 @@
   background: var(--openbitfun-color-surface-panel);
 }
 
+/* A dark-scheme tile has to paint its own surface. The dark `surface-subtle` is a translucent white
+   that assumes a dark app background, so on the light Lab page the tile stayed white while its text
+   flipped to the dark-scheme foreground: the title was white-on-white. Same solid stage the voice
+   motion preview uses. */
+.brand-gallery-tile[data-color-scheme="dark"] {
+  background: var(--openbitfun-color-content-on-light);
+}
+
 .brand-gallery-tile-options {
   position: absolute;
   top: var(--openbitfun-space-4);
@@ -103,9 +111,10 @@
   cursor: pointer;
 }
 
+/* Selection is a filled block, never a ring: the swatch keeps its own colour, the button
+   behind it carries the selection surface. */
 .brand-gallery-backgrounds button[aria-pressed="true"] {
-  border-width: var(--openbitfun-border-width-strong);
-  border-color: var(--openbitfun-color-content-primary);
+  background: var(--openbitfun-color-selection-surface);
 }
 
 .brand-gallery-backgrounds button:hover {
@@ -160,16 +169,16 @@
   padding: var(--openbitfun-space-3) var(--openbitfun-space-5) var(--openbitfun-space-5);
 }
 
-.brand-gallery-tile h2,
-.brand-gallery-wordmark h2 {
+/* One level-2 heading spec for the whole page. The asset titles, the wordmark band and the section
+   headings (标识 / 动效 / 角色) all take the panel heading, so no title on this page drifts by a
+   size tier or a weight, and the ramp stays monotonic: h1 24 / h2 18 / h3 13. */
+.brand-gallery :is(.brand-gallery-tile h2, .brand-gallery-wordmark h2, .brand-gallery-section-heading h2) {
+  color: var(--openbitfun-color-content-primary);
   font-family: var(--openbitfun-type-heading-panel-font-family);
   font-size: var(--openbitfun-type-heading-panel-font-size);
   font-weight: var(--openbitfun-type-heading-panel-font-weight);
   line-height: var(--openbitfun-type-heading-panel-line-height);
-}
-
-.brand-gallery-tile--silver h2 {
-  font-size: var(--openbitfun-type-heading-section-font-size);
+  letter-spacing: var(--openbitfun-type-heading-panel-letter-spacing);
 }
 
 .brand-gallery-actions {
@@ -232,29 +241,30 @@
   margin-bottom: var(--openbitfun-space-5);
 }
 
-.brand-gallery-section-heading h2 {
-  font-family: var(--openbitfun-type-heading-section-font-family);
-  font-size: var(--openbitfun-type-heading-section-font-size);
-  font-weight: var(--openbitfun-type-heading-section-font-weight);
-  line-height: var(--openbitfun-type-heading-section-line-height);
-}
-
+/* The banner is a plate the mark is drawn on: the frame crops the texture layer, and the live
+   graphic plus the controls stay above it. */
 .brand-gallery-motion {
+  position: relative;
   display: grid;
   grid-template-rows: minmax(0, 1fr) auto;
   gap: var(--openbitfun-space-3);
   min-height: 400px;
   padding: var(--openbitfun-space-5);
+  overflow: hidden;
   border-radius: var(--openbitfun-radius-xl);
   color: var(--openbitfun-color-content-primary);
   background: var(--openbitfun-color-surface-subtle);
 }
 
-.brand-gallery-motion[data-voice] {
+/* The dark option has to paint its own plate — the solid surface the voice stage already uses. The
+   dark `surface-subtle` is a translucent white that assumes a dark app background, so on the light
+   Lab page the "dark" banner stayed white and the white silk mark vanished into it. */
+.brand-gallery-motion[data-color-scheme="dark"] {
   background: var(--openbitfun-color-content-on-light);
 }
 
 .brand-gallery-motion-art {
+  position: relative;
   display: grid;
   place-items: center;
   min-width: 0;
@@ -263,6 +273,35 @@
 
 .brand-gallery-motion-art > * { max-width: 100%; }
 
+/* The live graphic and the controls sit above the texture layer, which is out of flow. */
+.brand-gallery-motion-art > :not(.brand-gallery-motion-texture),
+.brand-gallery-motion-controls {
+  position: relative;
+  z-index: 1;
+}
+
+/* The banner's own texture: the mark again, wider than the frame and left unlit, so the silk
+   reaches both edges and gets cropped by them instead of stopping inside the banner. The texture
+   takes its size from the frame rather than the component's `size` prop, because that prop writes
+   an inline size which would win over the frame. */
+.brand-gallery-motion .brand-gallery-motion-texture {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 132%;
+  max-width: none;
+  translate: -50% -50%;
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.brand-gallery-motion-texture > * {
+  width: 100%;
+  height: auto;
+  max-width: none;
+  aspect-ratio: 1;
+}
+
 .brand-gallery-voice {
   width: min(280px, 100%);
   aspect-ratio: 1;
diff --git a/design-system/apps/design-lab/src/pages/BrandPage.tsx b/design-system/apps/design-lab/src/pages/BrandPage.tsx
index 840ed6a54f..24690d5a74 100644
--- a/design-system/apps/design-lab/src/pages/BrandPage.tsx
+++ b/design-system/apps/design-lab/src/pages/BrandPage.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Code2, Pause, Play } from "lucide-react";
 import { SegmentedControl, Icon, IconButton, ThemeRoot } from "@openbitfun/ui";
 import {
@@ -6,7 +6,9 @@ import {
   OpenBitFunBrandMotion,
   OpenBitFunMark,
   OpenBitFunSolidMark,
+  SubagentHatch,
   VoiceParticleLogo,
+  type SubagentHatchPhase,
 } from "@openbitfun/ui/brand";
 import { useI18n, type MessageKey } from "../i18n";
 import { SUBAGENT_AVATAR_CATALOG } from "../assets/subagentAvatars";
@@ -62,11 +64,19 @@ export const brandResources: readonly BrandResource[] = [
   },
 ];
 
+/* The banner shows the family's own motion first: the hatch is the one animation the characters
+   have, and the banner is where a reader meets the brand. The three mark motions stay one click
+   away, because they are the brand's own vectors rather than product artwork. */
 const motionScenes = [
+  { name: "SubagentHatch", label: "brandAssets.characterMotion" },
   { name: "OpenBitFunMark", label: "brandAssets.breathe" },
   { name: "OpenBitFunBrandMotion", label: "brandAssets.flow" },
   { name: "VoiceParticleLogo", label: "brandAssets.particles" },
 ] as const;
+
+/* The banner leads with the lilac character: the family keeps all twenty. */
+const bannerCharacter = SUBAGENT_AVATAR_CATALOG.find(avatar => avatar.id === "robot-03") ?? SUBAGENT_AVATAR_CATALOG[0]!;
+const bannerCharacterSize = 256;
 type Background = "light" | "dark";
 type OpenComponent = (name: string) => void;
 
@@ -134,10 +144,31 @@ function IdentityTile({ resource, onOpenComponent }: { resource: BrandResource;
 
 function BrandMotionShowcase({ onOpenComponent }: { onOpenComponent: OpenComponent }) {
   const { t } = useI18n();
-  const [selected, setSelected] = useState<(typeof motionScenes)[number]>(motionScenes[1]);
+  const [selected, setSelected] = useState<(typeof motionScenes)[number]>(motionScenes[0]);
   const [playing, setPlaying] = useState(true);
   const [background, setBackground] = useState<Background>("dark");
+  const [hatch, setHatch] = useState<SubagentHatchPhase>("incubating");
   const voice = selected.name === "VoiceParticleLogo";
+  const character = selected.name === "SubagentHatch";
+  /* The hatch is a one-shot reveal, so the banner runs it as a loop: the egg incubates, the
+     character comes out, and the loop starts again. Pausing settles the character instead of
+     freezing it mid-hatch, which is the state a reader wants to look at. */
+  useEffect(() => {
+    if (!character || !playing) {
+      setHatch("ready");
+      return;
+    }
+    let timer = 0;
+    let incubating = true;
+    setHatch("incubating");
+    const step = () => {
+      incubating = !incubating;
+      setHatch(incubating ? "incubating" : "ready");
+      timer = window.setTimeout(step, incubating ? 1800 : 3600);
+    };
+    timer = window.setTimeout(step, 1800);
+    return () => window.clearTimeout(timer);
+  }, [character, playing]);
   return (
     <section className="brand-gallery-section" id="brand-motion" aria-labelledby="brand-motion-title">
       <header className="brand-gallery-section-heading">
@@ -147,9 +178,26 @@ function BrandMotionShowcase({ onOpenComponent }: { onOpenComponent: OpenCompone
           options={motionScenes.map(scene => ({ value: scene.name, label: t(scene.label) }))} />
       </header>
       <ThemeRoot className="brand-gallery-motion" id="brand-motion-stage"
-        colorScheme={voice ? "dark" : background} density="compact" data-voice={voice || undefined}
+        colorScheme={voice ? "dark" : background} density="compact"
         role="group" aria-label={t(selected.label)}>
         <div className="brand-gallery-motion-art" key={selected.name}>
+          {/* The banner's own texture: the same mark drawn far larger than the frame and left
+              unlit, so the silk runs off both edges instead of stopping inside the banner. It
+              carries no label and never animates — the live graphic stays the one thing named
+              here. Both marks take their size from the frame (see the stylesheet); passing the
+              size prop would put an inline size on the mark and win over the frame. */}
+          {!voice && !character && (
+            <div className="brand-gallery-motion-texture" aria-hidden="true">
+              {selected.name === "OpenBitFunMark"
+                ? <OpenBitFunMark motion="breathe" active={false} />
+                : <OpenBitFunBrandMotion active={false} />}
+            </div>
+          )}
+          {character && (
+            <SubagentHatch phase={hatch} size={bannerCharacterSize} active={playing}>
+              <img src={bannerCharacter.src} alt="" draggable={false} width={bannerCharacterSize} height={bannerCharacterSize} />
+            </SubagentHatch>
+          )}
           {selected.name === "OpenBitFunMark" && <OpenBitFunMark size={216} motion="breathe" active={playing} />}
           {selected.name === "OpenBitFunBrandMotion" && <OpenBitFunBrandMotion size={320} active={playing} />}
           {voice && <div className="brand-gallery-voice"><VoiceParticleLogo active={playing} /></div>}
diff --git a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
index e041290432..07b56130cf 100644
--- a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
+++ b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
@@ -1,5 +1,5 @@
 import { CapsulePreview } from "../preview/CapsulePreview";
-import { Fragment, useEffect, useMemo, useState, type CSSProperties } from "react";
+import { Fragment, useEffect, useMemo, useState, type CSSProperties, type ReactNode } from "react";
 import { ComponentOverview } from "../preview/ComponentOverview";
 import { getComponentPresentation, getInitialPreviewState, hasComponentOverview } from "../preview/componentPresentation";
 import { previewEn } from "../i18n/previewMessages";
@@ -65,6 +65,7 @@ import {
   NavigationPanelSection,
   NavigationPanelSeparator,
   NumberInput,
+  OverflowText,
   PageHeader,
   Radio,
   ScrollArea,
@@ -103,13 +104,15 @@ import {
 } from "@openbitfun/ui";
 import {
   MobileActionSheet,
+  MobileAvatar,
   MobileBadge,
   MobileBanner,
   MobileButton,
   MobileCard,
+  MobileCheckbox,
   MobileChoiceSheet,
-  MobileConfirmSheet,
   MobileComposer,
+  MobileConfirmSheet,
   MobileDisclosure,
   MobileFileButton,
   MobileFloatingActions,
@@ -118,15 +121,23 @@ import {
   MobileListRow,
   MobileMessage,
   MobilePageHeader,
+  MobileRadioGroup,
   MobileScrim,
   MobileSection,
   MobileSegmentedControl,
+  MobileSelect,
   MobileSheet,
   MobileStatus,
+  MobileStepper,
+  MobileSwitch,
+  MobileTabBar,
+  MobileTag,
   MobileTextField,
   MobileTextarea,
-} from "@openbitfun/ui/mobile";
-import type { ComponentMeta } from "@openbitfun/ui/registry";
+  MobileToolbar,
+}
+from "@openbitfun/ui/mobile";
+import { componentRegistry, type ComponentMeta } from "@openbitfun/ui/registry";
 import previewImage from "../assets/design-system-hero.webp";
 import { IconCompositionPreview } from "../preview/IconCompositionPreview";
 import { RollingTextPreview } from "../preview/RollingTextPreview";
@@ -163,6 +174,41 @@ type FieldOrientation = "horizontal" | "vertical";
 type PageHeaderAlign = "center" | "start";
 type PageHeaderSize = "display" | "lg" | "md" | "sm";
 
+/** Registry order, so a detail heading can carry the same category index as the library index. */
+const categoryOrder = Array.from(new Set(componentRegistry.map(item => item.category)));
+
+/**
+ * A level-2 reference block that keeps a real heading.
+ *
+ * `Disclosure` renders its `summary` inside the trigger `<button>`, and a button cannot contain a
+ * heading. `renderHeader` hands over the trigger attributes instead, letting the heading own the
+ * trigger the other way round: `<h2><button>…</button></h2>` is valid phrasing content, while
+ * `<button><h2>…</h2></button>` is not. The block keeps its document structure, and the component
+ * still owns open state, ids, and ARIA wiring.
+ *
+ * `summary` stays because the component requires it; `renderHeader` replaces the visible header.
+ */
+function ReferenceDisclosure({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <Disclosure
+      className="design-reference-disclosure"
+      summary={label}
+      renderHeader={triggerProps => (
+        <h2 className="design-reference-heading" data-openbitfun-part="header">
+          <button {...triggerProps} className="design-reference-trigger" data-overflow-trigger>
+            <span aria-hidden="true" className="design-reference-indicator" data-openbitfun-part="indicator">
+              <Icon name="chevron-right" size="sm" />
+            </span>
+            <OverflowText className="design-reference-label" data-openbitfun-part="heading">{label}</OverflowText>
+          </button>
+        </h2>
+      )}
+    >
+      {children}
+    </Disclosure>
+  );
+}
+
 const buttonVariants = ["outline", "fill", "secondary", "primary", "text"] as const;
 const iconButtonVariants = ["annotation", "quiet", "glass", "outline", "fill", "primary"] as const;
 const iconButtonSizes = ["xs", "standard", "sm", "md", "lg"] as const;
@@ -470,6 +516,15 @@ export function ComponentDetailPage({
     if (component.name === "MobileLink") return `import { MobileLink } from "@openbitfun/ui/mobile";\n\n<MobileLink href="https://example.com">\n  ${t("nav.docs")}\n</MobileLink>`;
     if (component.name === "MobileTextField") return `import { MobileTextField } from "@openbitfun/ui/mobile";\n\n<MobileTextField\n  aria-label="${t("components.preview.searchLabel")}"\n  placeholder="${t("components.preview.searchPlaceholder")}"\n/>`;
     if (component.name === "MobileListRow") return `import { MobileListRow } from "@openbitfun/ui/mobile";\n\n<MobileListRow\n  appearance="surface"\n  label="${t("components.preview.session")}"\n  supportingText="/workspace"\n/>`;
+    if (component.name === "MobileAvatar") return `import { MobileAvatar } from "@openbitfun/ui/mobile";\n\n<MobileAvatar name="${t("components.preview.session")}" size="md" status="online" />`;
+    if (component.name === "MobileCheckbox") return `import { MobileCheckbox } from "@openbitfun/ui/mobile";\n\n<MobileCheckbox\n  label="${t("components.preview.notifications")}"\n  description="${t("components.preview.fieldDescription")}"\n  checked={enabled}\n  onCheckedChange={setEnabled}\n/>`;
+    if (component.name === "MobileRadioGroup") return `import { MobileRadioGroup } from "@openbitfun/ui/mobile";\n\n<MobileRadioGroup\n  name="density"\n  options={densityOptions}\n  value={density}\n  onValueChange={setDensity}\n/>`;
+    if (component.name === "MobileSelect") return `import { MobileSelect } from "@openbitfun/ui/mobile";\n\n<MobileSelect\n  label="${t("components.preview.mobileSelectLabel")}"\n  options={models}\n  sheetTitle="${t("components.preview.mobileSelectLabel")}"\n  value={model}\n  onValueChange={setModel}\n/>`;
+    if (component.name === "MobileStepper") return `import { MobileStepper } from "@openbitfun/ui/mobile";\n\n<MobileStepper\n  label="${t("components.preview.mobileStepperLabel")}"\n  decrementLabel="${t("components.preview.mobileDecrease")}"\n  incrementLabel="${t("components.preview.mobileIncrease")}"\n  min={0}\n  max={5}\n  value={value}\n  onValueChange={setValue}\n/>`;
+    if (component.name === "MobileSwitch") return `import { MobileSwitch } from "@openbitfun/ui/mobile";\n\n<MobileSwitch\n  label="${t("components.preview.notifications")}"\n  description="${t("components.preview.fieldDescription")}"\n  checked={enabled}\n  onCheckedChange={setEnabled}\n/>`;
+    if (component.name === "MobileTabBar") return `import { MobileTabBar } from "@openbitfun/ui/mobile";\n\n<MobileTabBar\n  label="${t("components.preview.segmentedLabel")}"\n  items={destinations}\n  value={section}\n  onValueChange={setSection}\n/>`;
+    if (component.name === "MobileTag") return `import { MobileTag } from "@openbitfun/ui/mobile";\n\n<MobileTag\n  selected={active}\n  onClick={toggle}\n>\n  Design\n</MobileTag>`;
+    if (component.name === "MobileToolbar") return `import { MobileToolbar } from "@openbitfun/ui/mobile";\n\n<MobileToolbar\n  label="${t("components.preview.mobileToolbarSelection")}"\n  leading={<BackButton />}\n  trailing={<MoreButton />}\n>\n  ${t("components.preview.mobileToolbarSelection")}\n</MobileToolbar>`;
     if (component.name === "MobileSheet") return `import { MobileSheet } from "@openbitfun/ui/mobile";\n\n<MobileSheet\n  footer={<CancelButton />}\n  onOpenChange={() => setOpen(false)}\n  open={open}\n  title="${t("components.preview.modalTitle")}"\n>\n  <ActionList />\n</MobileSheet>`;
     if (component.name === "Textarea") return `import { Textarea } from "@openbitfun/ui";\n\n<Textarea\n  label="${t("components.preview.inputLabel")}"\n  defaultValue="${t("components.preview.fieldValue")}"\n  hint="${t("components.preview.fieldDescription")}"\n  maxLength={200}\n  rows={3}\n  showCount\n/>`;
     if (component.name === "Alert") return `import { Alert } from "@openbitfun/ui";\n\n<Alert tone="info" title="${t("components.preview.notifications")}" message="${t("components.preview.fieldDescription")}" />`;
@@ -1002,6 +1057,153 @@ export function ComponentDetailPage({
       );
     }
 
+    if (component.name === "MobileAvatar") {
+      const avatarStatus = state === "online" || state === "away" || state === "busy" || state === "offline" ? state : undefined;
+      return (
+        <MobileAvatar
+          key={state}
+          name={t("components.preview.session")}
+          shape={state === "artwork" ? "rounded" : "circle"}
+          size={state === "initials" ? "lg" : "md"}
+          src={state === "image" ? previewImage : undefined}
+          status={avatarStatus}
+        >
+          {state === "image" || state === "initials" ? undefined : <Icon aria-hidden="true" name="session" />}
+        </MobileAvatar>
+      );
+    }
+
+    if (component.name === "MobileCheckbox") {
+      return (
+        <MobileCheckbox
+          data-openbitfun-preview-state={state === "hover" || state === "active" || state === "focus-visible" ? state : undefined}
+          defaultChecked={state === "checked"}
+          description={t("components.preview.fieldDescription")}
+          disabled={state === "disabled"}
+          indeterminate={state === "indeterminate"}
+          invalid={state === "invalid"}
+          key={state}
+          label={t("components.preview.notifications")}
+        />
+      );
+    }
+
+    if (component.name === "MobileRadioGroup") {
+      return (
+        <MobileRadioGroup
+          data-openbitfun-preview-state={state === "hover" || state === "active" || state === "focus-visible" ? state : undefined}
+          key={state}
+          name="detail-mobile-radio"
+          options={[
+            { description: t("components.preview.fieldDescription"), disabled: state === "disabled", label: t("components.preview.segmentedChat"), value: "chat" },
+            { disabled: state === "disabled", label: t("components.preview.segmentedAgent"), value: "agent" },
+          ]}
+          value="chat"
+        />
+      );
+    }
+
+    if (component.name === "MobileSelect") {
+      return (
+        <MobileSelect
+          data-openbitfun-preview-state={state === "hover" || state === "active" || state === "focus-visible" ? state : undefined}
+          defaultOpen={state === "open"}
+          description={state === "invalid" ? t("components.preview.inputError") : undefined}
+          disabled={state === "disabled"}
+          invalid={state === "invalid"}
+          key={state}
+          label={t("components.preview.mobileSelectLabel")}
+          options={[
+            { label: "deepseek-v4-pro", value: "pro" },
+            { label: "deepseek-v4-flash", value: "flash" },
+          ]}
+          sheetTitle={t("components.preview.mobileSelectLabel")}
+          value="pro"
+        />
+      );
+    }
+
+    if (component.name === "MobileStepper") {
+      return (
+        <MobileStepper
+          data-openbitfun-preview-state={state === "hover" || state === "active" || state === "focus-within" ? state : undefined}
+          decrementLabel={t("components.preview.mobileDecrease")}
+          description={state === "invalid" ? t("components.preview.inputError") : undefined}
+          disabled={state === "disabled"}
+          incrementLabel={t("components.preview.mobileIncrease")}
+          invalid={state === "invalid"}
+          key={state}
+          label={t("components.preview.mobileStepperLabel")}
+          max={5}
+          min={0}
+          value={3}
+        />
+      );
+    }
+
+    if (component.name === "MobileSwitch") {
+      return (
+        <MobileSwitch
+          data-openbitfun-preview-state={state === "hover" || state === "active" || state === "focus-visible" ? state : undefined}
+          defaultChecked={state === "on"}
+          description={t("components.preview.fieldDescription")}
+          disabled={state === "disabled"}
+          key={state}
+          label={t("components.preview.notifications")}
+        />
+      );
+    }
+
+    if (component.name === "MobileTabBar") {
+      return (
+        <MobileTabBar
+          data-openbitfun-preview-state={state === "hover" || state === "active" || state === "focus-visible" ? state : undefined}
+          items={[
+            { icon: <Icon aria-hidden="true" name="session" />, label: t("components.preview.segmentedChat"), value: "chat" },
+            { icon: <Icon aria-hidden="true" name="folder" />, label: t("components.preview.segmentedAgent"), value: "agent" },
+            { disabled: state === "disabled", icon: <Icon aria-hidden="true" name="gear" />, label: t("components.preview.settings"), value: "settings" },
+          ]}
+          key={state}
+          label={t("components.preview.segmentedLabel")}
+          value={state === "selected" ? "agent" : "chat"}
+        />
+      );
+    }
+
+    if (component.name === "MobileTag") {
+      const forcedTagState = state === "hover" || state === "active" || state === "focus-visible" ? state : undefined;
+      return (
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+          {["Design", "Frontend", "Tokens"].map((label, index) => (
+            <MobileTag
+              data-openbitfun-preview-state={index === 0 ? forcedTagState : undefined}
+              disabled={state === "disabled"}
+              key={label}
+              selected={state === "selected" && index === 0}
+              size={index === 2 ? "sm" : "md"}
+            >
+              {label}
+            </MobileTag>
+          ))}
+        </div>
+      );
+    }
+
+    if (component.name === "MobileToolbar") {
+      return (
+        <MobileToolbar
+          appearance={state === "plain" ? "plain" : "surface"}
+          key={state}
+          label={t("components.preview.mobileToolbarSelection")}
+          leading={<MobileIconButton appearance="plain" aria-label={t("components.preview.close")} icon={<Icon aria-hidden="true" name="chevron-left" />} size="sm" />}
+          sticky={state === "sticky"}
+          trailing={<MobileIconButton appearance="plain" aria-label={t("components.preview.more")} icon={<Icon aria-hidden="true" name="more" />} size="sm" />}
+        >
+          <span>{t("components.preview.mobileToolbarSelection")}</span>
+        </MobileToolbar>
+      );
+    }
+
     if (component.name === "MobilePageHeader") {
       return <MobilePageHeader actions={<MobileIconButton appearance="plain" aria-label={t("components.preview.more")} icon={<Icon name="more" aria-hidden="true" />} size="sm" />} centered={state === "centered"} leading={<MobileIconButton appearance="plain" aria-label={t("components.preview.close")} icon={<Icon name="chevron-left" aria-hidden="true" />} size="sm" />} subtitle={state === "with-subtitle" ? t("components.preview.fieldDescription") : undefined} title={t("components.preview.session")} />;
     }
@@ -2121,7 +2323,12 @@ export function ComponentDetailPage({
         <div className="component-preview-main">
           <header className="component-detail-heading">
             <div>
-              {embedded && <span className="page-kicker">{getComponentCategoryLabel(component.category, t)}</span>}
+              {embedded && (
+                <span className="page-kicker">
+                  <span className="page-kicker-index">{String(categoryOrder.indexOf(component.category) + 1).padStart(2, "0")}</span>
+                  {getComponentCategoryLabel(component.category, t)}
+                </span>
+              )}
               <h1 id="component-detail-title">{component.name}</h1>
               <p>{getComponentDescription(component.name, component.description, t)}</p>
             </div>
@@ -2172,15 +2379,15 @@ export function ComponentDetailPage({
             <summary>{t("design.compare")}</summary>
             {comparisonOpen && renderStateComparison()}
           </details>}
-          <Disclosure className="design-reference-disclosure" summary={t("design.usage")}>
+          <ReferenceDisclosure label={t("design.usage")}>
             <p className="design-reference-note">{t(`preview.note.${presentation}`)}</p>
             {isFlowChatComponent && <div className="design-preview-caption"><p>{t("design.chatContextNote")}</p><a href="#flow-chat-mock">{t("design.conversation")}<Icon name="arrow-right" /></a></div>}
-          </Disclosure>
+          </ReferenceDisclosure>
 
           {component.name === "Icon" && <section className="design-icon-documentation"><h2>{t("design.contexts")}</h2><IconCompositionPreview /></section>}
           {component.name === "Menu" && <section className="design-icon-documentation"><h2>{t("design.contexts")}</h2><NestedMenuPattern /></section>}
           {component.name === "Disclosure" && <section className="design-icon-documentation"><h2>{t("preview.nativeDisclosure")}</h2><Disclosure presentation="native" summary={t("components.preview.appearance")}>{t("components.preview.appearanceDescription")}</Disclosure></section>}
-          <Disclosure className="design-reference-disclosure" summary={t("detail.code")}>
+          <ReferenceDisclosure label={t("detail.code")}>
           <section className="component-code-panel component-code-panel--standalone">
             <header className="component-panel-heading component-code-heading">
               <div>
@@ -2192,8 +2399,8 @@ export function ComponentDetailPage({
             </header>
             <pre><code>{codeSample}</code></pre>
           </section>
-          </Disclosure>
-              <Disclosure className="design-reference-disclosure" summary={t("detail.inspector.publicApi")}>
+          </ReferenceDisclosure>
+              <ReferenceDisclosure label={t("detail.inspector.publicApi")}>
               <div className="design-component-api">
                 <div className="component-inspector-props">
                   {component.props.map((prop) => (
@@ -2205,12 +2412,12 @@ export function ComponentDetailPage({
                   ))}
                 </div>
               </div>
-              </Disclosure>
-          <Disclosure className="design-reference-disclosure" summary={t("detail.ownedTokens")}>
+              </ReferenceDisclosure>
+          <ReferenceDisclosure label={t("detail.ownedTokens")}>
           <div className="design-component-tokens"><div className="component-inspector-token-list">{component.tokens.map(token => <code key={token}>{token}</code>)}</div>
             <Button variant="text" onClick={() => onInspectTokens(component.name)} trailingIcon={<Icon name="arrow-right" />}>{t("detail.openWorkbench")}</Button>
           </div>
-          </Disclosure>
+          </ReferenceDisclosure>
         </div>
 
         <aside className="component-inspector" id="component-preview-configuration" hidden={!inspectorOpen}>
diff --git a/design-system/apps/design-lab/src/pages/ComponentsPage.tsx b/design-system/apps/design-lab/src/pages/ComponentsPage.tsx
index 41e187d0b5..ed21357448 100644
--- a/design-system/apps/design-lab/src/pages/ComponentsPage.tsx
+++ b/design-system/apps/design-lab/src/pages/ComponentsPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { ComponentDetailPage } from "./ComponentDetailPage";
 import { BrandPreview } from "../preview/BrandPreview";
 import { CapsulePreview } from "../preview/CapsulePreview";
@@ -12,7 +12,6 @@ import {
   Avatar,
   AvatarGroup,
   Button,
-  OverflowText,
   Card,
   CardHeader,
   ChangeCount,
@@ -70,10 +69,12 @@ import {
   type TokenOverrides,
 } from "@openbitfun/ui";
 import {
+  MobileAvatar,
   MobileBadge,
   MobileBanner,
   MobileButton,
   MobileCard,
+  MobileCheckbox,
   MobileComposer,
   MobileDisclosure,
   MobileFileButton,
@@ -83,19 +84,24 @@ import {
   MobileListRow,
   MobileMessage,
   MobilePageHeader,
+  MobileRadioGroup,
   MobileScrim,
   MobileSection,
   MobileSegmentedControl,
+  MobileSelect,
   MobileStatus,
+  MobileStepper,
+  MobileSwitch,
+  MobileTabBar,
+  MobileTag,
   MobileTextField,
   MobileTextarea,
-} from "@openbitfun/ui/mobile";
-import { componentRegistry, type ComponentMeta } from "@openbitfun/ui/registry";
+  MobileToolbar,
+}
+from "@openbitfun/ui/mobile";
+import { type ComponentMeta } from "@openbitfun/ui/registry";
 import { useI18n } from "../i18n";
-import {
-  getComponentCategoryLabel,
-  getComponentDescription,
-} from "../i18n/componentMetadata";
+import { defaultComponent } from "../componentNavigation";
 import {
   FlowChatComponentPreview,
   getFlowChatPreviewDefinition,
@@ -132,10 +138,12 @@ const componentIcons = {
   LoadingState: <AppWindow aria-hidden="true" size={19} />,
   Menu: <List aria-hidden="true" size={19} />,
   MobileActionSheet: <List aria-hidden="true" size={19} />,
+  MobileAvatar: <CatalogIcon name="session" style={{ width: 19, height: 19 }} />,
   MobileBadge: <CatalogIcon name="check-line" style={{ width: 19, height: 19 }} />,
   MobileBanner: <AppWindow aria-hidden="true" size={19} />,
   MobileButton: <MousePointerClick aria-hidden="true" size={19} />,
   MobileCard: <Rows3 aria-hidden="true" size={19} />,
+  MobileCheckbox: <CatalogIcon name="check-line" style={{ width: 19, height: 19 }} />,
   MobileChoiceSheet: <List aria-hidden="true" size={19} />,
   MobileConfirmSheet: <AppWindow aria-hidden="true" size={19} />,
   MobileComposer: <CatalogIcon name="arrow-up" style={{ width: 19, height: 19 }} />,
@@ -147,14 +155,21 @@ const componentIcons = {
   MobileListRow: <Rows3 aria-hidden="true" size={19} />,
   MobileMessage: <CatalogIcon name="session" style={{ width: 19, height: 19 }} />,
   MobilePageHeader: <Heading aria-hidden="true" size={19} />,
+  MobileRadioGroup: <List aria-hidden="true" size={19} />,
   MobileScrim: <AppWindow aria-hidden="true" size={19} />,
   MobileSection: <Rows3 aria-hidden="true" size={19} />,
   MobileSegmentedControl: <ToggleLeft aria-hidden="true" size={19} />,
+  MobileSelect: <Rows3 aria-hidden="true" size={19} />,
   MobileSheet: <AppWindow aria-hidden="true" size={19} />,
   MobileStatus: <AppWindow aria-hidden="true" size={19} />,
+  MobileStepper: <CatalogIcon name="plus" style={{ width: 19, height: 19 }} />,
+  MobileSwitch: <ToggleLeft aria-hidden="true" size={19} />,
+  MobileTabBar: <PanelTop aria-hidden="true" size={19} />,
+  MobileTag: <CatalogIcon name="check-line" style={{ width: 19, height: 19 }} />,
   MobileTextField: <CatalogIcon name="search" style={{ width: 19, height: 19 }} />,
   MobileTextarea: <CatalogIcon name="arrow-up" style={{ width: 19, height: 19 }} />,
   Dialog: <AppWindow aria-hidden="true" size={19} />,
+  MobileToolbar: <Heading aria-hidden="true" size={19} />,
   Sheet: <AppWindow aria-hidden="true" size={19} />,
   MultiSelect: <List aria-hidden="true" size={19} />,
   NavigationPanel: <CatalogIcon name="sidebar-left" style={{ width: 19, height: 19 }} />,
@@ -356,6 +371,100 @@ export function ComponentCardPreview({ component }: { component: ComponentMeta }
       return <MobileStatus description={t("components.preview.fieldDescription")} title={t("components.preview.cardTitle")} />;
     case "MobileTextarea":
       return <MobileTextarea aria-label={t("components.preview.composerPlaceholder")} placeholder={t("components.preview.composerPlaceholder")} readOnly />;
+    case "MobileAvatar":
+      return (
+        <Stack align="center" direction="horizontal" gap="3">
+          <MobileAvatar name={t("components.preview.session")} status="online" />
+          <MobileAvatar shape="rounded">BF</MobileAvatar>
+          <MobileAvatar size="sm">UI</MobileAvatar>
+        </Stack>
+      );
+    case "MobileCheckbox":
+      return (
+        <MobileCheckbox
+          defaultChecked
+          description={t("components.preview.fieldDescription")}
+          label={t("components.preview.notifications")}
+          tabIndex={-1}
+        />
+      );
+    case "MobileRadioGroup":
+      return (
+        <MobileRadioGroup
+          appearance="surface"
+          name="catalog-mobile-radio"
+          options={[
+            { label: t("components.preview.segmentedChat"), value: "chat" },
+            { label: t("components.preview.segmentedAgent"), value: "agent" },
+          ]}
+          tabIndex={-1}
+          value="chat"
+        />
+      );
+    case "MobileSelect":
+      return (
+        <MobileSelect
+          label={t("components.preview.mobileSelectLabel")}
+          options={[
+            { label: "deepseek-v4-pro", value: "pro" },
+            { label: "deepseek-v4-flash", value: "flash" },
+          ]}
+          sheetTitle={t("components.preview.mobileSelectLabel")}
+          tabIndex={-1}
+          value="pro"
+        />
+      );
+    case "MobileStepper":
+      return (
+        <MobileStepper
+          decrementLabel={t("components.preview.mobileDecrease")}
+          incrementLabel={t("components.preview.mobileIncrease")}
+          label={t("components.preview.mobileStepperLabel")}
+          max={5}
+          min={0}
+          value={3}
+        />
+      );
+    case "MobileSwitch":
+      return (
+        <MobileSwitch
+          defaultChecked
+          description={t("components.preview.fieldDescription")}
+          label={t("components.preview.notifications")}
+          tabIndex={-1}
+        />
+      );
+    case "MobileTabBar":
+      return (
+        <MobileTabBar
+          items={[
+            { icon: <CatalogIcon name="session" aria-hidden="true" />, label: t("components.preview.segmentedChat"), value: "chat" },
+            { icon: <CatalogIcon name="folder" aria-hidden="true" />, label: t("components.preview.segmentedAgent"), value: "agent" },
+            { icon: <CatalogIcon name="gear" aria-hidden="true" />, label: t("components.preview.settings"), value: "settings" },
+          ]}
+          label={t("components.preview.segmentedLabel")}
+          tabIndex={-1}
+          value="chat"
+        />
+      );
+    case "MobileTag":
+      return (
+        <Stack align="center" direction="horizontal" gap="2">
+          <MobileTag selected>Design</MobileTag>
+          <MobileTag>Frontend</MobileTag>
+          <MobileTag size="sm">Tokens</MobileTag>
+        </Stack>
+      );
+    case "MobileToolbar":
+      return (
+        <MobileToolbar
+          leading={<MobileIconButton appearance="plain" aria-label={t("components.preview.close")} icon={<CatalogIcon name="chevron-left" aria-hidden="true" />} size="sm" tabIndex={-1} />}
+          trailing={<MobileIconButton appearance="plain" aria-label={t("components.preview.more")} icon={<CatalogIcon name="more" aria-hidden="true" />} size="sm" tabIndex={-1} />}
+        >
+          {t("components.preview.mobileToolbarSelection")}
+        </MobileToolbar>
+      );
+
     case "Input":
       return (
         <Input
@@ -733,85 +842,13 @@ export function ComponentsPage({
   tokenOverrides,
 }: ComponentsPageProps) {
   const { t } = useI18n();
-  const [query, setQuery] = useState("");
-  const [catalogOpen, setCatalogOpen] = useState(false);
   const [toolReferenceOpen, setToolReferenceOpen] = useState(false);
-  const listRef = useRef<HTMLElement>(null);
-  const activeLinkRef = useRef<HTMLAnchorElement>(null);
-  const selectedComponent = component
-    ?? componentRegistry.find(item => category ? item.category === category : item.name === "Button")
-    ?? componentRegistry[0];
-  const categories = Array.from(new Set(componentRegistry.map(component => component.category)));
-  const normalizedQuery = query.trim().toLowerCase();
-  const catalogComponents = componentRegistry.filter(component =>
-    `${component.name} ${component.category} ${component.description} ${getComponentDescription(component.name, component.description, t)} ${getComponentCategoryLabel(component.category, t)}`.toLowerCase().includes(normalizedQuery),
-  );
-
-  useEffect(() => {
-    const list = listRef.current;
-    const activeLink = activeLinkRef.current;
-    if (!list) return;
-    if (!activeLink) {
-      list.scrollTop = 0;
-      return;
-    }
-    // Keep selection visible inside the directory without scrolling the preview.
-    const listBounds = list.getBoundingClientRect();
-    const linkBounds = activeLink.getBoundingClientRect();
-    if (linkBounds.top < listBounds.top) list.scrollTop += linkBounds.top - listBounds.top;
-    else if (linkBounds.bottom > listBounds.bottom) list.scrollTop += linkBounds.bottom - listBounds.bottom;
-  }, [selectedComponent?.name, normalizedQuery, catalogOpen]);
+  const selectedComponent = component ?? defaultComponent(category);
 
   return (
     <main className="lab-page design-component-library" id="components">
-      <aside className="design-library-sidebar" aria-labelledby="component-library-title" data-open={catalogOpen || undefined}>
-        <div className="design-library-heading">
-          <h2 id="component-library-title">{t("design.components")}</h2>
-          <span className="design-library-count" role="status">{t("design.results", { count: catalogComponents.length })}</span>
-          <IconButton className="design-library-toggle" aria-controls="component-library-index" aria-expanded={catalogOpen}
-            aria-label={t("design.browseComponents")} onClick={() => setCatalogOpen(open => !open)}
-            icon={<CatalogIcon name={catalogOpen ? "chevron-up" : "chevron-down"} />} />
-        </div>
-        <div className="design-library-index" id="component-library-index">
-          <SearchField aria-label={t("design.search")} placeholder={t("design.search")} value={query}
-            onChange={event => setQuery(event.target.value)} clearLabel={t("design.clear")} onClear={() => setQuery("")}
-            leadingIcon={<CatalogIcon name="search" />} />
-          <nav className="design-library-list" aria-label={t("design.all")} ref={listRef}>
-            {categories.map(group => {
-              const items = catalogComponents.filter(item => item.category === group).sort((a, b) => a.name.localeCompare(b.name));
-              if (!items.length) return null;
-              return (
-                <section className="design-library-group" key={group} aria-labelledby={`component-group-${group}`}>
-                  <h3 id={`component-group-${group}`}>{getComponentCategoryLabel(group, t)}</h3>
-                  <ul>
-                    {items.map(item => (
-                      <li key={item.name}>
-                        <a data-overflow-trigger className="design-library-link" href={`#component/${item.name.toLowerCase()}`}
-                          aria-current={selectedComponent?.name === item.name ? "page" : undefined}
-                          ref={selectedComponent?.name === item.name ? activeLinkRef : undefined}
-                          title={`${item.name} · ${getComponentDescription(item.name, item.description, t)}`}
-                          onClick={event => {
-                            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
-                            event.preventDefault();
-                            setCatalogOpen(false);
-                            onOpenComponent(item.name);
-                          }}>
-                          <OverflowText>{item.name}</OverflowText>
-                        </a>
-                      </li>
-                    ))}
-                  </ul>
-                </section>
-              );
-            })}
-            {catalogComponents.length === 0 && <div className="design-library-empty"><p>{t("design.noResults")}</p><Button size="sm" variant="text" onClick={() => setQuery("")}>{t("design.clear")}</Button></div>}
-          </nav>
-          <footer className="design-library-footer">
-            <a href="#patterns">{t("design.contexts")}<CatalogIcon name="arrow-right" size="sm" /></a>
-            <a href="#flow-chat-mock">{t("design.conversation")}<CatalogIcon name="arrow-right" size="sm" /></a>
-          </footer>
-        </div>
-      </aside>
+      {/* The component directory is the rail's tree now, so this column is the preview alone:
+          one index for the whole section instead of a second one inside the page. */}
       {selectedComponent && (
         <div className="design-library-content">
           <ComponentDetailPage key={selectedComponent.name} embedded component={selectedComponent}
diff --git a/design-system/apps/design-lab/src/pages/FoundationSpecimens.css b/design-system/apps/design-lab/src/pages/FoundationSpecimens.css
index a330e61cea..4b91b7deb7 100644
--- a/design-system/apps/design-lab/src/pages/FoundationSpecimens.css
+++ b/design-system/apps/design-lab/src/pages/FoundationSpecimens.css
@@ -1,12 +1,12 @@
 .foundation-specimen-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--openbitfun-space-4); margin-bottom: var(--openbitfun-space-5); }
 .foundation-measure-toggle { display: flex; align-items: center; gap: var(--openbitfun-space-2); color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); cursor: pointer; }
 .foundation-specimen-eyebrow { color: var(--openbitfun-color-content-muted); font-size: var(--openbitfun-type-label-sm-font-size); }
-.foundation-specimen-note { color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); line-height: var(--openbitfun-type-body-lg-line-height); margin: var(--openbitfun-space-4) 0 0; }
+.foundation-specimen-note { color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); line-height: var(--openbitfun-type-body-sm-line-height); margin: var(--openbitfun-space-4) 0 0; }
 .foundation-space-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 244px; border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle); border-radius: var(--openbitfun-radius-lg); }
 .foundation-space-figure { min-width: 0; margin: 0; display: grid; grid-template-rows: 1fr auto; }
 .foundation-space-drawing { display: grid; place-items: center; min-height: 280px; padding: var(--openbitfun-space-8) var(--openbitfun-space-6); }
 .foundation-space-figure figcaption,
-.foundation-radius-figure figcaption { padding: 0 var(--openbitfun-space-5) var(--openbitfun-space-5); text-align: center; color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-xs-font-size); line-height: var(--openbitfun-type-body-lg-line-height); }
+.foundation-radius-figure figcaption { padding: 0 var(--openbitfun-space-5) var(--openbitfun-space-5); text-align: center; color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-xs-font-size); line-height: var(--openbitfun-type-body-xs-line-height); }
 .foundation-space-pair { position: relative; display: flex; align-items: center; gap: var(--_specimen-space); }
 .foundation-space-object { display: grid; place-items: center; flex: none; width: var(--openbitfun-space-16); height: var(--openbitfun-space-12); border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-strong); background: var(--openbitfun-color-surface-subtle); border-radius: var(--openbitfun-radius-md); color: var(--openbitfun-color-content-secondary); font-family: var(--openbitfun-type-code-sm-font-family); }
 .foundation-space-dimension { position: absolute; inset-inline-start: 50%; inset-block-start: 0; inline-size: var(--_specimen-space); block-size: 100%; transform: translateX(-50%); border-inline: var(--openbitfun-border-width-default) solid var(--openbitfun-color-accent-border); background: var(--openbitfun-color-accent-surface-subtle); pointer-events: none; }
@@ -25,7 +25,7 @@
 .foundation-space-figure[data-guides="false"] .foundation-inset-object { background: var(--openbitfun-color-surface-subtle); }
 .foundation-space-reading { min-width: 0; padding: var(--openbitfun-space-6); border-inline-start: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle); display: flex; flex-direction: column; align-items: flex-start; gap: var(--openbitfun-space-2); }
 .foundation-space-reading > strong { font-family: var(--openbitfun-type-display-md-font-family); font-size: var(--openbitfun-type-display-md-font-size); font-weight: var(--openbitfun-type-display-md-font-weight); line-height: var(--openbitfun-type-display-md-line-height); }
-.foundation-space-reading > p { margin: var(--openbitfun-space-2) 0; color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); line-height: var(--openbitfun-type-body-lg-line-height); }
+.foundation-space-reading > p { margin: var(--openbitfun-space-2) 0; color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); line-height: var(--openbitfun-type-body-sm-line-height); }
 .foundation-space-reading pre { margin: 0; max-width: 100%; white-space: pre-wrap; color: var(--openbitfun-color-content-muted); }
 .foundation-declaration-copy { font-family: var(--openbitfun-type-label-sm-font-family); font-size: var(--openbitfun-type-label-sm-font-size); }
 
@@ -69,7 +69,7 @@
 .foundation-surface-option { display: flex; align-items: center; gap: var(--openbitfun-space-2); min-height: var(--openbitfun-control-height-lg); padding: var(--openbitfun-space-2) var(--openbitfun-space-3); border: var(--openbitfun-border-width-default) solid transparent; border-radius: var(--openbitfun-radius-md); }
 .foundation-surface-option i { flex: none; width: var(--openbitfun-space-5); height: var(--openbitfun-space-5); border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-default); border-radius: var(--openbitfun-radius-xs); }
 .foundation-specimen-footnote { display: flex; align-items: center; justify-content: space-between; gap: var(--openbitfun-space-4); flex-wrap: wrap; margin-top: var(--openbitfun-space-4); color: var(--openbitfun-color-content-muted); }
-.foundation-specimen-footnote p { flex: 1; min-width: min(100%, 15rem); margin: 0; font-size: var(--openbitfun-type-body-xs-font-size); line-height: var(--openbitfun-type-body-lg-line-height); }
+.foundation-specimen-footnote p { flex: 1; min-width: min(100%, 15rem); margin: 0; font-size: var(--openbitfun-type-body-xs-font-size); line-height: var(--openbitfun-type-body-xs-line-height); }
 .foundation-specimen-footnote > span { display: grid; gap: var(--openbitfun-space-1); }
 
 .foundation-reading-specimen { display: grid; padding: var(--openbitfun-space-8); border-inline-start: var(--openbitfun-border-width-strong) solid var(--openbitfun-color-border-default); background: var(--openbitfun-color-surface-panel); }
diff --git a/design-system/apps/design-lab/src/pages/FoundationsPage.css b/design-system/apps/design-lab/src/pages/FoundationsPage.css
index 7079f265c6..bf8e3d6590 100644
--- a/design-system/apps/design-lab/src/pages/FoundationsPage.css
+++ b/design-system/apps/design-lab/src/pages/FoundationsPage.css
@@ -15,42 +15,18 @@
 .foundation-environment { display: grid; flex: none; gap: var(--openbitfun-space-3); }
 .foundation-environment > div { display: flex; gap: var(--openbitfun-space-3); }
 .foundation-environment label { display: grid; gap: var(--openbitfun-space-2); }
-.foundation-environment label > span:first-child { font-size: var(--openbitfun-type-body-xs-font-size); color: var(--openbitfun-color-content-secondary); }
+/* The label reads across, never one glyph per line: in the flex row the environment controls take
+   at narrower widths the label is a flex item, and CJK text would otherwise be squeezed to its
+   smallest possible column. */
+.foundation-environment label > span:first-child { font-size: var(--openbitfun-type-body-xs-font-size); color: var(--openbitfun-color-content-secondary); white-space: nowrap; }
 
-.foundation-layout { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: var(--openbitfun-space-8); align-items: start; }
-.foundation-sidebar {
-  position: sticky;
-  display: grid;
-  gap: var(--openbitfun-space-4);
-  padding-block: var(--openbitfun-space-8);
-  overflow-y: auto;
-}
-.foundation-index { display: grid; gap: var(--openbitfun-space-1); }
-.foundation-index a {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--openbitfun-space-3);
-  min-height: var(--openbitfun-control-height-lg);
-  padding: var(--openbitfun-space-3);
-  border-radius: var(--openbitfun-radius-md);
-  text-decoration: none;
-  color: var(--openbitfun-color-content-secondary);
-  font-size: var(--openbitfun-type-body-sm-font-size);
-  transition: background var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard), color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
-}
-.foundation-index a:hover { background: var(--openbitfun-color-action-neutral-surface-hover); color: var(--openbitfun-color-content-primary); }
-.foundation-index a[aria-current] { background: var(--openbitfun-color-surface-subtle); color: var(--openbitfun-color-content-primary); font-weight: var(--openbitfun-type-label-selected-font-weight); }
-.foundation-workbench-link { display: flex; justify-content: space-between; align-items: center; gap: var(--openbitfun-space-2); margin-top: var(--openbitfun-space-3); padding: var(--openbitfun-space-4) var(--openbitfun-space-3); color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); text-decoration: none; }
-.foundation-workbench-link:hover { color: var(--openbitfun-color-content-primary); }
-.foundation-content { min-width: 0; }
 .foundation-chapter { padding-block: var(--openbitfun-space-8) var(--openbitfun-space-10); }
 .foundation-chapter-heading { display: flex; align-items: flex-start; gap: var(--openbitfun-space-4); margin-bottom: var(--openbitfun-space-6); }
 .foundation-chapter-heading > div:not(.foundation-chapter-action) { flex: 1; min-width: 0; }
 .foundation-chapter h2,
 .foundation-next-step h2 { margin: 0; font-family: var(--openbitfun-type-heading-section-font-family); font-size: var(--openbitfun-type-heading-section-font-size); line-height: var(--openbitfun-type-heading-section-line-height); font-weight: var(--openbitfun-type-heading-section-font-weight); }
 .foundation-chapter-heading p,
-.foundation-next-step p { margin: var(--openbitfun-space-3) 0 0; max-width: 44rem; color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); line-height: var(--openbitfun-type-body-lg-line-height); }
+.foundation-next-step p { margin: var(--openbitfun-space-3) 0 0; max-width: 44rem; color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); line-height: var(--openbitfun-type-body-sm-line-height); }
 .foundation-chapter-action { flex: none; }
 .foundation-chapter h3 { margin: 0 0 var(--openbitfun-space-3); color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-label-md-font-size); font-weight: var(--openbitfun-type-label-md-font-weight); }
 .foundation-chapter .foundation-subheading:not(:first-of-type) { margin-top: var(--openbitfun-space-8); }
@@ -85,7 +61,8 @@
 .foundation-type-toolbar > label { flex: none; font-size: var(--openbitfun-type-label-sm-font-size); color: var(--openbitfun-color-content-secondary); }
 .foundation-type-toolbar > [data-openbitfun-component="input"] { flex: 1; min-width: 0; }
 .foundation-type-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: var(--openbitfun-space-6); padding-block: var(--openbitfun-space-5); }
-.foundation-type-row + .foundation-type-row { border-top: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle); }
+/* Rows are separated by space, not by a rule: the content column is not a table here. */
+.foundation-type-row + .foundation-type-row { padding-top: var(--openbitfun-space-8); }
 .foundation-type-meta { display: grid; justify-items: start; min-width: 0; }
 .foundation-type-meta > span { font-size: var(--openbitfun-type-label-md-font-size); }
 .foundation-type-meta dl { display: flex; gap: var(--openbitfun-space-4); margin: var(--openbitfun-space-2) 0 0; }
@@ -97,7 +74,7 @@
 .foundation-specimen-label { display: flex; align-items: center; justify-content: space-between; gap: var(--openbitfun-space-4); margin-bottom: var(--openbitfun-space-3); font-size: var(--openbitfun-type-body-xs-font-size); color: var(--openbitfun-color-content-muted); }
 .foundation-motion-list { border-block: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle); }
 .foundation-motion-row { display: grid; grid-template-columns: 230px minmax(0, 1fr) 48px; align-items: center; gap: var(--openbitfun-space-6); min-height: 52px; }
-.foundation-motion-row + .foundation-motion-row { border-top: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle); }
+.foundation-motion-row + .foundation-motion-row { padding-top: var(--openbitfun-space-6); }
 .foundation-motion-row > code { text-align: end; color: var(--openbitfun-color-content-muted); }
 .foundation-motion-track { padding: var(--openbitfun-space-1); background: var(--openbitfun-color-surface-subtle); border-radius: var(--openbitfun-radius-pill); }
 .foundation-motion-travel { display: block; width: calc(100% - var(--openbitfun-space-5)); transform: translateX(0); }
@@ -110,7 +87,7 @@
 .foundation-motion-reduced { display: none; color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); }
 
 .foundation-accessibility-example { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--openbitfun-space-8); padding: var(--openbitfun-space-6); border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle); border-radius: var(--openbitfun-radius-lg); }
-.foundation-accessibility-example p { margin: 0; max-width: 28rem; color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); line-height: var(--openbitfun-type-body-lg-line-height); }
+.foundation-accessibility-example p { margin: 0; max-width: 28rem; color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-sm-font-size); line-height: var(--openbitfun-type-body-sm-line-height); }
 .foundation-keyboard-keys { display: flex; align-items: center; gap: var(--openbitfun-space-3); margin-top: var(--openbitfun-space-4); color: var(--openbitfun-color-content-muted); }
 .foundation-switch-example { display: grid; grid-template-columns: auto auto; align-items: center; gap: var(--openbitfun-space-4); font-size: var(--openbitfun-type-label-md-font-size); }
 .foundation-switch-example > [role="status"] { justify-self: start; grid-column: 1 / -1; }
@@ -122,7 +99,6 @@
   .foundation-page-heading { align-items: flex-start; flex-direction: column; gap: var(--openbitfun-space-6); padding-bottom: var(--openbitfun-space-6); }
   .foundation-environment { display: flex; align-items: center; gap: var(--openbitfun-space-6); }
   .foundation-environment label { display: flex; align-items: center; }
-  .foundation-layout { grid-template-columns: 160px minmax(0, 1fr); gap: var(--openbitfun-space-8); }
   .foundation-type-row { grid-template-columns: 180px minmax(0, 1fr); gap: var(--openbitfun-space-4); }
   .foundation-motion-row { grid-template-columns: 210px minmax(0, 1fr) 44px; gap: var(--openbitfun-space-4); }
   .foundation-accessibility-example { grid-template-columns: minmax(0, 1fr); gap: var(--openbitfun-space-5); }
@@ -130,21 +106,11 @@
   .foundation-switch-example > [role="status"] { grid-column: auto; }
 }
 
-@media (max-width: 860px) {
-  .foundation-layout { display: block; gap: var(--openbitfun-space-8); }
-  .foundation-sidebar { z-index: 20; padding-block: var(--openbitfun-space-2); margin-inline: calc(-1 * var(--openbitfun-space-6)); background: var(--openbitfun-color-surface-canvas); max-height: none; overflow: visible; }
-  .foundation-workbench-link { display: none; }
-  .foundation-index { display: flex; overflow-x: auto; padding: var(--openbitfun-space-1) var(--openbitfun-space-6); gap: var(--openbitfun-space-2); scrollbar-width: thin; }
-  .foundation-index a { flex: none; min-height: 36px; gap: var(--openbitfun-space-2); padding: var(--openbitfun-space-2) var(--openbitfun-space-3); }
-}
-
 @media (max-width: 600px) {
   .foundation-page-heading { padding-bottom: var(--openbitfun-space-6); }
   .foundation-environment { display: grid; width: 100%; gap: var(--openbitfun-space-3); }
   .foundation-environment > div { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
   .foundation-environment label { display: grid; min-width: 0; }
-  .foundation-sidebar { margin-inline: calc(-1 * var(--openbitfun-space-4)); }
-  .foundation-index { padding-inline: var(--openbitfun-space-4); }
   .foundation-chapter { padding-block: var(--openbitfun-space-6) var(--openbitfun-space-8); }
   .foundation-chapter-heading { flex-wrap: wrap; gap: var(--openbitfun-space-3); }
   .foundation-chapter-action { width: 100%; }
@@ -162,7 +128,6 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .foundation-index a { transition: none; }
   .foundation-motion-travel[data-playing] { animation: none; }
   .foundation-motion-reduced { display: block; }
 }
diff --git a/design-system/apps/design-lab/src/pages/FoundationsPage.tsx b/design-system/apps/design-lab/src/pages/FoundationsPage.tsx
index 248b22d362..1f77990160 100644
--- a/design-system/apps/design-lab/src/pages/FoundationsPage.tsx
+++ b/design-system/apps/design-lab/src/pages/FoundationsPage.tsx
@@ -3,21 +3,19 @@ import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from
 import { Check, RotateCcw } from "lucide-react";
 import { Button, Icon, Input, StatusPill, Switch, type DensityMode } from "@openbitfun/ui";
 import type { ThemeDataName } from "@openbitfun/theme-openbitfun";
-import { useI18n, type MessageKey } from "../i18n";
+import { useI18n } from "../i18n";
 import { nonColorTokenCatalog } from "../token-editor/catalog";
+import {
+  focusFoundationSection,
+  foundationSections,
+  setActiveFoundationSection,
+  type FoundationSectionId,
+} from "../foundationNavigation";
 import { CopyValue, TokenCopy, cssToken, getToken, foundationTypeStyle } from "./FoundationTokens";
 import { ColorRelationships, SpacingExplorer, ShapeExplorer, TypographyComposition } from "./FoundationSpecimens";
 import "./FoundationsPage.css";
 
-const sections = [
-  { id: "colors", label: "nav.colors", note: "design.colorNote" },
-  { id: "type", label: "design.type", note: "design.typeNote" },
-  { id: "space", label: "design.space", note: "design.spaceNote" },
-  { id: "shape", label: "design.shape", note: "design.shapeNote" },
-  { id: "motion", label: "design.motion", note: "design.motionNote" },
-  { id: "accessibility", label: "design.accessibility", note: "design.accessibilityNote" },
-] as const satisfies readonly { id: string; label: MessageKey; note: MessageKey }[];
-type FoundationSection = typeof sections[number]["id"];
+const sections = foundationSections;
 
 const typeRoles = ["heading.page", "heading.section", "body.lg", "body.md", "label.md", "code.sm"] as const;
 const modes = ["light", "dark", "highContrastLight", "highContrastDark"] as const;
@@ -49,7 +47,7 @@ function MotionDurationSample({ name, value, replayVersion }: {
 }
 
 function Chapter({ id, children, action }: {
-  id: FoundationSection;
+  id: FoundationSectionId;
   children: ReactNode;
   action?: ReactNode;
 }) {
@@ -81,8 +79,6 @@ interface FoundationsPageProps {
 export function FoundationsPage({ density, mode, onDensityChange, onModeChange, onNavigate }: FoundationsPageProps) {
   const { t } = useI18n();
   const pageRef = useRef<HTMLElement>(null);
-  const indexRef = useRef<HTMLElement>(null);
-  const [activeSection, setActiveSection] = useState<FoundationSection>("colors");
   const [sampleText, setSampleText] = useState("");
   const [motionReplay, setMotionReplay] = useState(0);
   const [exampleEnabled, setExampleEnabled] = useState(false);
@@ -96,16 +92,18 @@ export function FoundationsPage({ density, mode, onDensityChange, onModeChange,
     let scrollFrame = 0;
     let navigationFrame = 0;
     const chapters = sections.map(section => pageRef.current?.querySelector<HTMLElement>(`#foundation-${section.id}`));
+    /* The page owns the reader's position — it is the only part that measures scroll geometry — and
+       publishes it to the one navigation tree in the rail. */
     function updatePosition() {
       scrollFrame = 0;
-      let current: FoundationSection = "colors";
+      let current: FoundationSectionId = "colors";
       chapters.forEach((chapter, index) => {
         if (chapter && chapter.getBoundingClientRect().top <= parseFloat(getComputedStyle(chapter).scrollMarginTop) + 24) {
           current = sections[index]!.id;
         }
       });
       if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2) current = "accessibility";
-      setActiveSection(current);
+      setActiveFoundationSection(current);
     }
     function onScroll() {
       if (!scrollFrame) scrollFrame = window.requestAnimationFrame(updatePosition);
@@ -118,13 +116,11 @@ export function FoundationsPage({ density, mode, onDensityChange, onModeChange,
         const section = sections.find(item => item.id === id);
         const behavior = initial || window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth";
         if (section) {
-          const element = pageRef.current?.querySelector<HTMLElement>(`#foundation-${section.id}`);
-          element?.querySelector<HTMLElement>("h2")?.focus({ preventScroll: true });
-          element?.scrollIntoView({ behavior, block: "start" });
-          setActiveSection(section.id);
+          focusFoundationSection(section.id, behavior);
+          setActiveFoundationSection(section.id);
         } else {
           window.scrollTo({ top: 0, behavior });
-          setActiveSection("colors");
+          setActiveFoundationSection("colors");
         }
       });
     }
@@ -142,20 +138,6 @@ export function FoundationsPage({ density, mode, onDensityChange, onModeChange,
     };
   }, []);
 
-  useEffect(() => {
-    const index = indexRef.current;
-    const current = index?.querySelector<HTMLElement>("[aria-current]");
-    if (!index || !current || index.scrollWidth <= index.clientWidth) return;
-    const left = current.getBoundingClientRect().left - index.getBoundingClientRect().left;
-    if (left < 0 || left + current.offsetWidth > index.clientWidth) {
-      // Move only the horizontal index; keep the reader's document position.
-      index.scrollTo({
-        left: index.scrollLeft + left - (index.clientWidth - current.offsetWidth) / 2,
-        behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth",
-      });
-    }
-  }, [activeSection]);
-
   return (
     <main className="lab-page design-foundations" id="foundations" ref={pageRef}>
       <header className="foundation-page-heading">
@@ -178,101 +160,81 @@ export function FoundationsPage({ density, mode, onDensityChange, onModeChange,
         </div>
       </header>
 
-      <div className="foundation-layout">
-        <aside className="foundation-sidebar">
-          <nav className="foundation-index" aria-label={t("foundations.contents")} ref={indexRef}>
-            {sections.map(section => (
-              <a key={section.id} href={`#foundations/${section.id}`} aria-current={activeSection === section.id ? "location" : undefined}
-                onClick={event => {
-                  if (window.location.hash !== `#foundations/${section.id}`) return;
-                  event.preventDefault();
-                  const element = pageRef.current?.querySelector<HTMLElement>(`#foundation-${section.id}`);
-                  element?.querySelector<HTMLElement>("h2")?.focus({ preventScroll: true });
-                  element?.scrollIntoView({ block: "start", behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth" });
-                }}>
-                {t(section.label)}
-              </a>
-            ))}
-          </nav>
-          <a className="foundation-workbench-link" href="#tokens" onClick={event => { event.preventDefault(); onNavigate("tokens"); }}>
-            {t("design.tokens")}<Icon name="arrow-up-right" size="sm" />
-          </a>
-        </aside>
-
-        <div className="foundation-content">
-          <Chapter id="colors" action={<Button variant="text" size="sm" onClick={() => onNavigate("colors")} trailingIcon={<Icon name="arrow-right" />}>{t("foundations.allColors")}</Button>}>
-            <ColorRelationships tokenValue={tokenValue} />
-          </Chapter>
-
-          <Chapter id="type">
-            <TypographyComposition />
-            <details className="foundation-type-details">
-              <summary>{t("foundations.type.inspect")}</summary>
-              <div className="foundation-type-toolbar">
-                <label htmlFor="foundation-type-input">{t("foundations.tryType")}</label>
-                <Input id="foundation-type-input" value={sampleText} onValueChange={setSampleText} placeholder={defaultSample} maxLength={160} />
-                <Button variant="text" size="sm" disabled={!sampleText} onClick={() => setSampleText("")}>{t("foundations.reset")}</Button>
-              </div>
-              <div className="foundation-type-specimens">
-                {typeRoles.map(role => {
-                  const name = `type.${role}`;
-                  const style = foundationTypeStyle(role);
-                  const declaration = Object.entries(style).map(([property, value]) => `${property.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)}: ${value};`).join("\n");
-                  return <div className="foundation-type-row" key={role}>
-                    <div className="foundation-type-meta">
-                      <span>{t(`foundations.type.${role}`)}</span>
-                      <CopyValue label={name} value={declaration} />
-                      <dl>
-                        <div><dt>{t("foundations.fontSize")}</dt><dd>{tokenValue(`${name}.fontSize`)}</dd></div>
-                        <div><dt>{t("foundations.lineHeight")}</dt><dd>{tokenValue(`${name}.lineHeight`)}</dd></div>
-                        <div><dt>{t("foundations.weight")}</dt><dd>{tokenValue(`${name}.fontWeight`)}</dd></div>
-                      </dl>
-                    </div>
-                    <div className="foundation-type-sample" style={style}>{sampleText || defaultSample}</div>
-                  </div>;
-                })}
-              </div>
-            </details>
-          </Chapter>
+      {/* The chapters are the page. Their index lives once, in the rail's tree, so this column is
+          the document alone instead of a second list beside the one the shell already draws. */}
+      <div className="foundation-content">
+        <Chapter id="colors" action={<Button variant="text" size="sm" onClick={() => onNavigate("colors")} trailingIcon={<Icon name="arrow-right" />}>{t("foundations.allColors")}</Button>}>
+          <ColorRelationships tokenValue={tokenValue} />
+        </Chapter>
+
+        <Chapter id="type">
+          <TypographyComposition />
+          <details className="foundation-type-details">
+            <summary>{t("foundations.type.inspect")}</summary>
+            <div className="foundation-type-toolbar">
+              <label htmlFor="foundation-type-input">{t("foundations.tryType")}</label>
+              <Input id="foundation-type-input" value={sampleText} onValueChange={setSampleText} placeholder={defaultSample} maxLength={160} />
+              <Button variant="text" size="sm" disabled={!sampleText} onClick={() => setSampleText("")}>{t("foundations.reset")}</Button>
+            </div>
+            <div className="foundation-type-specimens">
+              {typeRoles.map(role => {
+                const name = `type.${role}`;
+                const style = foundationTypeStyle(role);
+                const declaration = Object.entries(style).map(([property, value]) => `${property.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)}: ${value};`).join("\n");
+                return <div className="foundation-type-row" key={role}>
+                  <div className="foundation-type-meta">
+                    <span>{t(`foundations.type.${role}`)}</span>
+                    <CopyValue label={name} value={declaration} />
+                    <dl>
+                      <div><dt>{t("foundations.fontSize")}</dt><dd>{tokenValue(`${name}.fontSize`)}</dd></div>
+                      <div><dt>{t("foundations.lineHeight")}</dt><dd>{tokenValue(`${name}.lineHeight`)}</dd></div>
+                      <div><dt>{t("foundations.weight")}</dt><dd>{tokenValue(`${name}.fontWeight`)}</dd></div>
+                    </dl>
+                  </div>
+                  <div className="foundation-type-sample" style={style}>{sampleText || defaultSample}</div>
+                </div>;
+              })}
+            </div>
+          </details>
+        </Chapter>
 
-          <Chapter id="space">
-            <SpacingExplorer tokenValue={tokenValue} />
-          </Chapter>
+        <Chapter id="space">
+          <SpacingExplorer tokenValue={tokenValue} />
+        </Chapter>
 
-          <Chapter id="shape">
-            <ShapeExplorer tokenValue={tokenValue} />
-          </Chapter>
+        <Chapter id="shape">
+          <ShapeExplorer tokenValue={tokenValue} />
+        </Chapter>
 
-          <Chapter id="motion" action={<Button variant="outline" size="sm" aria-controls="foundation-motion-samples" onClick={() => setMotionReplay(current => current + 1)} leadingIcon={<Icon glyph={RotateCcw} size="sm" />}>{t("foundations.replay")}</Button>}>
-            <div className="foundation-specimen-label"><span>{t("foundations.duration")}</span><TokenCopy name="motion.easing.standard" /></div>
-            <div className="foundation-motion-list" id="foundation-motion-samples">
-              {durationTokens.map(token => <MotionDurationSample key={token.name} name={token.name} value={tokenValue(token.name)} replayVersion={motionReplay} />)}
+        <Chapter id="motion" action={<Button variant="outline" size="sm" aria-controls="foundation-motion-samples" onClick={() => setMotionReplay(current => current + 1)} leadingIcon={<Icon glyph={RotateCcw} size="sm" />}>{t("foundations.replay")}</Button>}>
+          <div className="foundation-specimen-label"><span>{t("foundations.duration")}</span><TokenCopy name="motion.easing.standard" /></div>
+          <div className="foundation-motion-list" id="foundation-motion-samples">
+            {durationTokens.map(token => <MotionDurationSample key={token.name} name={token.name} value={tokenValue(token.name)} replayVersion={motionReplay} />)}
+          </div>
+          <p className="foundation-specimen-note">{t("foundations.motion.compareHint")}</p>
+          <p className="foundation-motion-reduced" role="status">{t("foundations.reducedMotion")}</p>
+        </Chapter>
+
+        <Chapter id="accessibility">
+          <div className="foundation-accessibility-example">
+            <div>
+              <h3>{t("foundations.keyboard")}</h3>
+              <p>{t("foundations.keyboardHint")}</p>
+              <div className="foundation-keyboard-keys" aria-hidden="true"><KeyHint>Tab</KeyHint><Icon name="arrow-right" size="sm" /><KeyHint>Space</KeyHint></div>
             </div>
-            <p className="foundation-specimen-note">{t("foundations.motion.compareHint")}</p>
-            <p className="foundation-motion-reduced" role="status">{t("foundations.reducedMotion")}</p>
-          </Chapter>
-
-          <Chapter id="accessibility">
-            <div className="foundation-accessibility-example">
-              <div>
-                <h3>{t("foundations.keyboard")}</h3>
-                <p>{t("foundations.keyboardHint")}</p>
-                <div className="foundation-keyboard-keys" aria-hidden="true"><KeyHint>Tab</KeyHint><Icon name="arrow-right" size="sm" /><KeyHint>Space</KeyHint></div>
-              </div>
-              <div className="foundation-switch-example">
-                <label htmlFor="foundation-example-switch">{t("foundations.exampleControl")}</label>
-                <Switch id="foundation-example-switch" checked={exampleEnabled} onCheckedChange={setExampleEnabled} />
-                <StatusPill tone={exampleEnabled ? "success" : "neutral"} role="status" leading={<Icon glyph={exampleEnabled ? Check : RotateCcw} size="xs" />}>
-                  {t(exampleEnabled ? "foundations.enabled" : "foundations.disabled")}
-                </StatusPill>
-              </div>
+            <div className="foundation-switch-example">
+              <label htmlFor="foundation-example-switch">{t("foundations.exampleControl")}</label>
+              <Switch id="foundation-example-switch" checked={exampleEnabled} onCheckedChange={setExampleEnabled} />
+              <StatusPill tone={exampleEnabled ? "success" : "neutral"} role="status" leading={<Icon glyph={exampleEnabled ? Check : RotateCcw} size="xs" />}>
+                {t(exampleEnabled ? "foundations.enabled" : "foundations.disabled")}
+              </StatusPill>
             </div>
-          </Chapter>
+          </div>
+        </Chapter>
 
-          <footer className="foundation-next-step">
-            <Button onClick={() => onNavigate("tokens")} trailingIcon={<Icon name="arrow-right" />}>{t("foundations.openTokens")}</Button>
-          </footer>
-        </div>
+        <footer className="foundation-next-step">
+          <Button onClick={() => onNavigate("tokens")} trailingIcon={<Icon name="arrow-right" />}>{t("foundations.openTokens")}</Button>
+        </footer>
       </div>
     </main>
   );
diff --git a/design-system/apps/design-lab/src/pages/GettingStartedPage.tsx b/design-system/apps/design-lab/src/pages/GettingStartedPage.tsx
index 440b2c8d15..f5fe9168ac 100644
--- a/design-system/apps/design-lab/src/pages/GettingStartedPage.tsx
+++ b/design-system/apps/design-lab/src/pages/GettingStartedPage.tsx
@@ -1,33 +1,11 @@
-import { Button, Icon as CatalogIcon, type IconName } from "@openbitfun/ui";
-import { Blocks, FileCode2, Layers3 } from "lucide-react";
-import { useI18n, type MessageKey } from "../i18n";
+import { Button, Icon as CatalogIcon } from "@openbitfun/ui";
+import { GuideCodeCard, GuideStepList } from "../components/GuideContract";
+import { useI18n } from "../i18n";
 
 interface GettingStartedPageProps {
   onNavigate: (target: "components" | "resources" | "tokens") => void;
 }
 
-const steps: readonly {
-  description: MessageKey;
-  icon: typeof Layers3 | IconName;
-  title: MessageKey;
-}[] = [
-  {
-    description: "gettingStarted.stepContractDescription",
-    icon: Layers3,
-    title: "gettingStarted.stepContractTitle",
-  },
-  {
-    description: "gettingStarted.stepThemeDescription",
-    icon: "palette",
-    title: "gettingStarted.stepThemeTitle",
-  },
-  {
-    description: "gettingStarted.stepComponentDescription",
-    icon: Blocks,
-    title: "gettingStarted.stepComponentTitle",
-  },
-];
-
 export function GettingStartedPage({ onNavigate }: GettingStartedPageProps) {
   const { t } = useI18n();
 
@@ -37,30 +15,11 @@ export function GettingStartedPage({ onNavigate }: GettingStartedPageProps) {
         <h1>{t("gettingStarted.title")}</h1>
       </header>
 
+      {/* The block is shared with the homepage (see components/GuideContract): same steps, same
+          snippet, so the two pages cannot describe the contract differently. */}
       <div className="guide-setup-layout">
-        <ol className="guide-step-list" aria-label={t("gettingStarted.stepsLabel")}>
-          {steps.map(step => {
-            const Icon = step.icon;
-            return <li key={step.title}>
-              <span className="guide-step-icon">{typeof Icon === "string" ? <CatalogIcon name={Icon} /> : <CatalogIcon glyph={Icon} />}</span>
-              <div><h2>{t(step.title)}</h2><p>{t(step.description)}</p></div>
-            </li>;
-          })}
-        </ol>
-        <div className="guide-code-card">
-          <div><CatalogIcon glyph={FileCode2} size="sm" /><span>App.tsx</span></div>
-          <pre><code>{`import "@openbitfun/theme-openbitfun/default.css";
-import "@openbitfun/ui/styles.css";
-import { Button, ThemeRoot } from "@openbitfun/ui";
-
-export function App() {
-  return (
-    <ThemeRoot colorScheme="light" density="compact">
-      <Button variant="primary">Continue</Button>
-    </ThemeRoot>
-  );
-}`}</code></pre>
-        </div>
+        <GuideStepList />
+        <GuideCodeCard />
       </div>
 
       <div className="guide-next-action">
diff --git a/design-system/apps/design-lab/src/pages/OverviewPage.css b/design-system/apps/design-lab/src/pages/OverviewPage.css
index 1a4c010b9f..e8e9c08b54 100644
--- a/design-system/apps/design-lab/src/pages/OverviewPage.css
+++ b/design-system/apps/design-lab/src/pages/OverviewPage.css
@@ -1,69 +1,117 @@
+/* Editorial homepage: hero, an empty showcase stage, a component sample, then
+   the three destinations. Sections are separated by hairlines, never fills.
+
+   Vertical rhythm: every block padding, section gap and stack gap on this page runs through
+   --_lab-home-air, so the whole page loosens or tightens from one number instead of from a dozen
+   stops. 2 is the current setting — the page's air is twice the reference scale (it started at the
+   reference, went to 1.5, and was raised again on request: raise or lower this one number).
+   Horizontal gaps stay where the grid puts them: widening the columns' gutters would change the
+   composition, not the breathing room. Air is inherited, so the footer reads the same variable. */
 .lab-page.design-home {
-  padding-block: var(--openbitfun-space-6) var(--openbitfun-space-12);
+  --_lab-home-air: 2;
+
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--openbitfun-space-16) * var(--_lab-home-air));
+  /* No block-end padding: the closing band is full bleed and therefore ends the page itself — its own
+     padding is what keeps the last line off the bottom of the window.
+     The air above the hero is the one gap on this page that is not the page's own rhythm: it is set
+     so the hero and the picture below it land in the first screen together, which is the whole point
+     of a homepage that shows a moving picture — a reader who has to scroll to see the blocks change
+     never sees them change. */
+  padding-block: calc(var(--openbitfun-space-8) * var(--_lab-home-air)) 0;
 }
 
+/* Hero: one line of copy on the left, the brand mark as a standalone graphic top-right.
+   No rule underneath — the page separates its blocks with space alone.
+   The mark is the tall element, so the copy is centred against it rather than pinned to the
+   top: that is what balances the air above and below the headline. The hero adds no padding
+   of its own — the page's top padding is the single source of the air above it, so the nav
+   to mark gap equals the gap the page uses between its blocks, and the copy comes out with
+   the same distance above it (from the nav) as below it (to the showcase). */
 .design-home-hero {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 0.4fr);
   align-items: center;
   gap: var(--openbitfun-space-12);
-  min-height: 520px;
-  padding-block: var(--openbitfun-space-8) var(--openbitfun-space-12);
+  padding: 0;
 }
 
 .design-home-heading {
+  grid-column: 1;
+  grid-row: 1;
   min-width: 0;
 }
 
-.design-home-heading h1 {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--openbitfun-space-2);
-  margin: 0 0 var(--openbitfun-space-6);
-  font-family: var(--openbitfun-type-display-xxl-font-family);
-  font-size: var(--openbitfun-type-display-xxl-font-size);
-  font-weight: var(--openbitfun-type-display-xxl-font-weight);
-  line-height: var(--openbitfun-type-display-xxl-line-height);
-  letter-spacing: var(--openbitfun-type-display-xxl-letter-spacing);
-  text-wrap: balance;
-}
-
-.design-home-name {
-  font-family: var(--openbitfun-type-display-md-font-family);
-  font-size: var(--openbitfun-type-display-md-font-size);
-  font-weight: var(--openbitfun-type-display-md-font-weight);
-  line-height: var(--openbitfun-type-display-md-line-height);
-  letter-spacing: var(--openbitfun-type-display-md-letter-spacing);
+/* Typography: the homepage runs the product site's own face — IBM Plex Mono, regular weight,
+   tight leading, slightly negative tracking. The topbar follows on every route, because shell
+   chrome that changed font between pages would read as a bug. Component instances inside the
+   preview frame keep the design system's published type roles, so their text stays on the sans
+   stack. Every other page still renders in the design system's own sans. */
+.lab-shell .lab-page.design-home,
+.lab-topbar {
+  font-family: var(--_lab-font);
 }
 
-.design-home-title {
-  /* typography-audit: allow -- Scale the homepage brand heading to its hero slot; interface text retains the canonical display roles. */
-  font-size: clamp(var(--openbitfun-type-display-xxl-font-size), 9vw, calc(var(--openbitfun-type-display-xxl-font-size) * 2));
+/* The headline states the design stance and what it is a stance about: one sentence, no
+   subtitle. Weight is the real 600 cut (see the @font-face block in design-layout.css) — the
+   reference site has no 600, and a synthesised bold on a display-size mono headline looks
+   smeared. Size, leading and tracking are the published fluid hero role (display-fluid-title:
+   32px → 3.2vw → 48px, display leading 1.1, tight tracking), so the sentence grows with the window
+   and needs no phone override of its own. One role to change if the headline should grow or
+   breathe: swap display-fluid-title for another display role.
+   Note the shell's root font-size is 14px, so 60rem is 840px here. */
+.design-home-slogan {
+  max-width: 60rem;
+  margin: 0;
+  font-family: var(--_lab-font);
+  font-size: var(--openbitfun-type-display-fluid-title-font-size);
+  font-weight: var(--openbitfun-font-weight-semibold);
+  line-height: var(--openbitfun-type-display-fluid-title-line-height);
+  letter-spacing: var(--openbitfun-type-display-fluid-title-letter-spacing);
+  text-wrap: balance;
 }
 
 .design-home-emblem {
-  display: grid;
-  place-items: center;
-  justify-self: end;
-  width: min(100%, 460px);
+  grid-column: 2;
+  grid-row: 1;
+  display: block;
+  /* The mark carried its own optical padding, so it read as a graphic only when it was large and
+     pinned to the right edge of its column. The character keeps that box — same column, same square,
+     so the hero's balance is unchanged when the artwork swaps — but at 64% of it (400px box × 0.8,
+     then × 0.8 again on request): a figure standing beside the headline rather than a graphic
+     competing with it. One factor here, and both caps below follow it, so the artwork keeps its
+     ratio to the column at every width. */
+  --_lab-hero-art: 0.64;
+
+  justify-self: center;
+  width: min(calc(100% * var(--_lab-hero-art)), calc(400px * var(--_lab-hero-art)));
   min-width: 0;
   aspect-ratio: 1;
   color: var(--openbitfun-color-content-primary);
   pointer-events: none;
 }
 
-.design-home-mark {
-  width: 100%;
-  height: auto;
-  aspect-ratio: 1;
+/* The hatch owns the box, and the avatar fills whatever the box resolved to, so the character
+   scales with the column instead of pinning the artwork to a fixed size. */
+.design-home-character,
+.design-home-character-avatar {
+  inline-size: 100%;
+  block-size: 100%;
 }
 
-.design-home-description {
-  margin: 0;
+/* The support line under the brand line: the body-lg role (15px mono, 1.6 leading) with the
+   chrome's subtle 0.01em tracking, one step down from the headline and one step up from the nav, in the
+   secondary grey. It explains what the blocks are, so it stays on the headline's column and
+   never runs the full width of the page. */
+.design-home-support {
+  max-inline-size: 52rem;
+  margin: calc(var(--openbitfun-space-4) * var(--_lab-home-air)) 0 0;
   color: var(--openbitfun-color-content-secondary);
-  font-size: var(--openbitfun-type-body-md-font-size);
-  line-height: var(--openbitfun-type-body-md-line-height);
+  font-size: var(--openbitfun-type-body-lg-font-size);
+  line-height: var(--openbitfun-type-body-lg-line-height);
+  letter-spacing: var(--openbitfun-type-modifier-tracking-subtle-letter-spacing);
+  text-wrap: pretty;
 }
 
 .design-home-actions {
@@ -71,129 +119,408 @@
   flex-wrap: wrap;
   align-items: center;
   gap: var(--openbitfun-space-3);
-  margin-top: var(--openbitfun-space-6);
+  margin-top: calc(var(--openbitfun-space-8) * var(--_lab-home-air));
+}
+
+/* The showcase is a picture of the product rather than a screenshot: one frame holding the app's
+   sidebar and the welcome screen it opens on — brand mark, greeting, and the composer the user
+   types into. It is assembled from the same parts the product uses (NavigationPanel, SearchField,
+   SegmentedControl, ChatComposer), so the picture cannot drift from the system it depicts.
+   The markup below is the desktop surface of that picture; the frame it sits in — and the phone,
+   watch, and glasses it turns into — belong to preview/MultiSurfaceMorph. This block therefore only
+   sizes the stage the picture is shown on, and the surface's own layout.
+   Nothing inside it is reachable and it carries no heading of its own: the page is the slogan, the
+   picture, and the destinations. Products' own sample data stays English; the chrome labels are
+   locale-invariant too (see designMessages.ts), so the frame never translates half-way. */
+.design-home-preview {
+  /* The stage is the frame's largest state and it is what the first screen has left over: topbar,
+     the air above the hero, the hero itself, and the page's gap are fixed, so the picture takes the
+     rest of the window and the surfaces it morphs between are all visible without scrolling. Capped
+     so it never outgrows a tall window, floored so it stays a legible picture on a short one — the
+     morph's own geometries are clamped by the stage, so every surface follows this height. */
+  block-size: clamp(380px, calc(100dvh - 552px), 560px);
+  /* The frame is a picture of the product, not of the Lab: anything inside that inherits
+     its font goes back to the design system's own body role. */
+  font-family: var(--openbitfun-type-body-md-font-family);
 }
 
-.design-destination-grid {
+.design-home-preview-shell {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--openbitfun-space-6);
+  /* The sidebar takes the design system's own panel width, so the frame and the product agree. */
+  grid-template-columns: var(--openbitfun-layout-navigation-panel-inline-size) minmax(0, 1fr);
+  block-size: 100%;
+  min-block-size: 0;
 }
 
-.design-destination {
-  position: relative;
+/* Sidebar: the panel keeps its own surface and its block-fill selection. The footer loses its rule
+   — this frame separates its regions with fills and space, never with lines. */
+.design-home-preview-sidebar [data-openbitfun-part="footer"] {
+  border-block-start-color: transparent;
+}
+
+.design-home-preview-search {
+  display: flex;
+  align-items: center;
+  gap: var(--openbitfun-space-2);
+  padding-block: var(--openbitfun-space-2) 0;
+}
+
+.design-home-preview-search > [data-openbitfun-component="search-field"] {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+.design-home-preview-navigation {
   display: flex;
   flex-direction: column;
-  min-width: 0;
-  gap: var(--openbitfun-space-8);
-  padding: var(--openbitfun-space-6);
-  border-radius: var(--openbitfun-radius-lg);
-  background: var(--openbitfun-color-surface-subtle);
+  gap: calc(var(--openbitfun-space-1) / 2);
+}
+
+.design-home-preview-session {
+  color: var(--openbitfun-color-content-secondary);
+}
+
+.design-home-preview-session--child {
+  padding-inline-start: calc(var(--openbitfun-layout-navigation-panel-item-padding-inline) + var(--openbitfun-space-4));
+}
+
+.design-home-preview-device > span {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--openbitfun-space-2);
+  min-inline-size: 0;
+  color: var(--openbitfun-color-content-secondary);
+  font-size: var(--openbitfun-type-label-sm-font-size);
+}
+
+/* Pane: the window the product opens on. The greeting scales with the pane, not with the window,
+   so the frame stays a legible picture at every width the page allows. */
+.design-home-preview-pane {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  min-block-size: 0;
+  container-type: inline-size;
+  background: var(--openbitfun-color-surface-canvas);
+}
+
+.design-home-preview-pane-head {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--openbitfun-space-4);
+  padding: var(--openbitfun-space-3) var(--openbitfun-space-4);
+}
+
+.design-home-preview-stage {
+  display: grid;
+  flex: 1;
+  grid-template-rows: minmax(0, 1fr) auto;
+  min-block-size: 0;
+  gap: calc(var(--openbitfun-space-8) * var(--_lab-home-air));
+  padding: calc(var(--openbitfun-space-4) * var(--_lab-home-air)) var(--openbitfun-space-6) calc(var(--openbitfun-space-5) * var(--_lab-home-air));
+}
+
+.design-home-preview-welcome {
+  display: grid;
+  align-self: center;
+  justify-items: center;
+  gap: var(--openbitfun-space-3);
+  min-inline-size: 0;
+  text-align: center;
+}
+
+.design-home-preview-welcome-mark {
+  margin-block-end: var(--openbitfun-space-1);
+}
+
+/* The display PageHeader is sized in the page's own scale; inside the frame it follows the frame
+   instead, so the window stays a legible picture at every width the page allows. */
+.design-home-preview-welcome-header [data-openbitfun-part="heading"] {
+  font-size: clamp(var(--openbitfun-font-size-2xl), 4.6cqi, var(--openbitfun-type-heading-welcome-font-size));
+  text-wrap: balance;
+}
+
+.design-home-preview-welcome-header [data-openbitfun-part="description"] {
+  color: var(--openbitfun-color-content-secondary);
+  font-size: clamp(var(--openbitfun-font-size-sm), 2.2cqi, var(--openbitfun-type-page-intro-font-size));
+}
+
+.design-home-preview-composer {
+  justify-self: center;
+  inline-size: min(100%, 40rem);
+}
+
+.design-home-preview-placeholder {
+  color: var(--openbitfun-color-content-muted);
+}
+
+.design-home-preview-context {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--openbitfun-space-1);
+  color: var(--openbitfun-color-content-secondary);
+  font-size: var(--openbitfun-type-label-sm-font-size);
+  white-space: nowrap;
 }
 
-.design-destination h2 {
+/* ------------------------------------------------------------------ usage band
+   The guide's contract block, restated in the homepage's own language and set between the picture
+   and the closing band: the page explains how its blocks are consumed before it sends anyone
+   anywhere. The block itself is shared (components/GuideContract) — only the page's rhythm and face
+   are applied here. Air follows --_lab-home-air like every other vertical gap on this page. */
+.design-home-contract {
+  display: grid;
+  gap: calc(var(--openbitfun-space-10) * var(--_lab-home-air));
+  padding-block-start: calc(var(--openbitfun-space-4) * var(--_lab-home-air));
+}
+
+.design-home-contract-title {
+  max-inline-size: 60rem;
+  margin: 0;
+  /* One step under the hero's sentence and two over the steps: the band is a closing note, not a
+     second headline. Fluid so it grows with the window like the rest of the page's display type. */
+  font-size: clamp(var(--openbitfun-font-size-3xl), 2.4vw, var(--openbitfun-type-display-sm-font-size));
+  font-weight: var(--openbitfun-font-weight-semibold);
+  line-height: var(--openbitfun-type-display-sm-line-height);
+  letter-spacing: var(--openbitfun-type-display-sm-letter-spacing);
+  text-wrap: balance;
+}
+
+/* The steps take the homepage's face rather than the guide's sans: on this page the whole block
+   reads as page copy, and only the code card steps out into its own mono. */
+.design-home-contract .guide-step-list {
+  gap: calc(var(--openbitfun-space-6) * var(--_lab-home-air));
+}
+
+.design-home-contract .guide-step-list :is(h2, h3) {
+  font-family: inherit;
+  margin-block-end: calc(var(--openbitfun-space-2) * var(--_lab-home-air));
+}
+
+/* ------------------------------------------------------------------ closing band
+   The page's one filled region: black in either scheme, so the band closes the page by interrupting
+   the surface instead of drawing another hairline. Every colour inside it therefore comes from the
+   system's on-dark pair, not from the scheme's own content roles.
+   The fill borrows content-on-light — the published black. The theme has no surface-inverse token
+   yet, so this is the same move the brand gallery makes when it borrows content-on-dark for a white
+   tile; if a surface-inverse token is ever added, this is the line that should switch to it. */
+.design-home-footer {
+  --_lab-band-pad-block: calc(var(--openbitfun-space-12) * var(--_lab-home-air));
+  /* The band is the viewport, not the page's column, so it reproduces the column gutter in its own
+     padding: the shell's auto margin plus the page's 36px inner padding. Below the shell's width cap
+     that expression goes negative, which is what the max() floors. */
+  --_lab-column-gutter: max(var(--openbitfun-space-6), calc((100vw - var(--_lab-content-width)) / 2 + var(--openbitfun-space-6)));
+  --_lab-on-dark: var(--openbitfun-color-content-on-dark);
+  --_lab-on-dark-secondary: color-mix(in srgb, var(--openbitfun-color-content-on-dark) 72%, transparent);
+  --_lab-on-dark-muted: color-mix(in srgb, var(--openbitfun-color-content-on-dark) 50%, transparent);
+  --_lab-on-dark-rule: color-mix(in srgb, var(--openbitfun-color-content-on-dark) 22%, transparent);
+
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--openbitfun-space-12) * var(--_lab-home-air));
+  /* Full bleed: the band leaves the page's centred column and runs to both edges, so it carries no
+     radius and the page keeps no block-end padding under it. */
+  inline-size: 100vw;
+  margin-inline: calc(50% - 50vw);
+  /* The band opens on the page's full rhythm but closes on half of it: the small print is the last
+     line on the page, so the space under it only has to hold the band's edge rather than separate
+     it from anything. */
+  padding-block: var(--_lab-band-pad-block) calc(var(--openbitfun-space-6) * var(--_lab-home-air));
+  padding-inline: var(--_lab-column-gutter);
+  color: var(--_lab-on-dark);
+  background: var(--openbitfun-color-content-on-light);
+}
+
+.design-home-footer-top {
+  display: grid;
+  grid-template-columns: minmax(0, 1.1fr) minmax(0, 3fr);
+  gap: var(--openbitfun-space-12);
+}
+
+.design-home-footer-identity {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--openbitfun-space-3) * var(--_lab-home-air));
+  min-inline-size: 0;
+  padding-inline-end: var(--openbitfun-space-6);
+  border-inline-end: var(--openbitfun-border-width-default) solid var(--_lab-on-dark-rule);
+}
+
+/* Same lockup treatment as the topbar's wordmark (see .design-wordmark-link in
+   design-layout.css): the site's 25px/500 mono with -0.05em tracking, so the name reads as one
+   brand wherever it appears on the page. Only the prompt glyph in front of it is new.
+   Here it is also the band's one outbound link: the arrow is dim until the pointer or keyboard
+   reaches it, and the band's own colour pair keeps the name readable on black. */
+.design-home-footer-wordmark {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--openbitfun-space-2);
+  margin: 0;
+  color: var(--_lab-on-dark);
+  text-decoration: none;
+  font-size: var(--_lab-wordmark-size);
+  font-weight: var(--_lab-wordmark-weight);
+  letter-spacing: var(--_lab-wordmark-tracking);
+  line-height: var(--_lab-wordmark-leading);
+}
+
+.design-home-footer-wordmark-arrow {
+  color: var(--_lab-on-dark-muted);
+  transition: color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
+}
+
+.design-home-footer-wordmark:hover .design-home-footer-wordmark-arrow,
+.design-home-footer-wordmark:focus-visible .design-home-footer-wordmark-arrow {
+  color: var(--_lab-on-dark);
+}
+
+/* From here down the band speaks the homepage's own type language, not a set of one-off values:
+   the topbar nav's 13px mono at the chrome's 1.4 leading and 0.01em tracking (see
+   .design-primary-navigation a in design-layout.css), the wordmark's lockup above, and only the
+   headings and the small print step away from that one size. */
+.design-home-footer-tagline {
+  margin: 0;
+  max-inline-size: 34ch;
+  color: var(--_lab-on-dark-secondary);
+  font-size: var(--openbitfun-type-label-md-font-size);
+  line-height: var(--openbitfun-type-modifier-leading-ui-line-height);
+  letter-spacing: var(--openbitfun-type-modifier-tracking-subtle-letter-spacing);
+}
+
+/* The reference's step strip: eight small squares, the first one lit. Decorative, so it is a
+   picture rather than a control, and it ends the block on the same line the columns end on. */
+.design-home-footer-steps {
+  display: flex;
+  align-items: center;
+  gap: var(--openbitfun-space-2);
+  margin-block-start: auto;
+}
+
+.design-home-footer-steps i {
+  inline-size: var(--openbitfun-space-1);
+  block-size: var(--openbitfun-space-1);
+  background: var(--_lab-on-dark-muted);
+}
+
+.design-home-footer-steps i:first-child {
+  background: var(--openbitfun-color-accent-default);
+}
+
+.design-home-footer-paths {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--openbitfun-space-10);
+}
+
+.design-home-footer-path {
+  position: relative;
+  display: grid;
+  align-content: start;
+  gap: calc(var(--openbitfun-space-4) * var(--_lab-home-air));
+  min-inline-size: 0;
+}
+
+.design-home-footer-path-icon {
+  color: var(--_lab-on-dark);
+}
+
+.design-home-footer-path h2 {
   margin: 0;
-  font-family: var(--openbitfun-type-heading-section-font-family);
   font-size: var(--openbitfun-type-heading-section-font-size);
   font-weight: var(--openbitfun-type-heading-section-font-weight);
   line-height: var(--openbitfun-type-heading-section-line-height);
-  letter-spacing: var(--openbitfun-type-heading-section-letter-spacing);
+  letter-spacing: var(--openbitfun-letter-spacing-tight);
 }
 
-.design-destination h2 a {
-  display: flex;
+.design-home-footer-path h2 a {
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  gap: var(--openbitfun-space-3);
+  gap: var(--openbitfun-space-2);
   color: inherit;
   text-decoration: none;
 }
 
-.design-destination h2 a::after {
+/* The whole column is the link, so the arrow can sit on its own line the way the reference sets
+   it without shrinking the hit area to a word. */
+.design-home-footer-path h2 a::after {
   position: absolute;
   inset: 0;
-  border-radius: var(--openbitfun-radius-lg);
   content: "";
 }
 
-.design-destination h2 a:focus-visible {
+.design-home-footer-path h2 a:focus-visible {
   outline: none;
 }
 
-.design-destination:focus-within {
+.design-home-footer-path:focus-within {
   outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring);
   outline-offset: var(--openbitfun-focus-offset);
 }
 
-.design-destination-arrow {
-  flex: none;
-  color: var(--openbitfun-color-content-muted);
+.design-home-footer-path p {
+  margin: 0;
+  max-inline-size: 32ch;
+  color: var(--_lab-on-dark-secondary);
+  font-size: var(--openbitfun-type-label-md-font-size);
+  line-height: var(--openbitfun-type-modifier-leading-ui-line-height);
+  letter-spacing: var(--openbitfun-type-modifier-tracking-subtle-letter-spacing);
 }
 
-.design-destination:hover .design-destination-arrow,
-.design-destination:focus-within .design-destination-arrow {
-  color: var(--openbitfun-color-content-primary);
+.design-home-footer-path-arrow {
+  color: var(--_lab-on-dark-muted);
+  transition: color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
 }
 
-.design-destination p {
-  margin: var(--openbitfun-space-2) 0 0;
-  color: var(--openbitfun-color-content-secondary);
-  font-size: var(--openbitfun-type-body-sm-font-size);
-  line-height: var(--openbitfun-type-body-sm-line-height);
+.design-home-footer-path:hover .design-home-footer-path-arrow,
+.design-home-footer-path:focus-within .design-home-footer-path-arrow {
+  color: var(--_lab-on-dark);
 }
 
-.design-destination-specimen {
+.design-home-footer-meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--openbitfun-space-3);
-  min-height: var(--openbitfun-space-16);
-  margin-top: auto;
-  pointer-events: none;
+  justify-content: space-between;
+  gap: calc(var(--openbitfun-space-3) * var(--_lab-home-air)) var(--openbitfun-space-8);
+  color: var(--_lab-on-dark-secondary);
+  font-size: var(--openbitfun-type-label-sm-font-size);
+  line-height: var(--openbitfun-type-modifier-leading-ui-line-height);
+  letter-spacing: var(--openbitfun-type-modifier-tracking-subtle-letter-spacing);
 }
 
-.design-home-type-sample {
-  font-family: var(--openbitfun-type-display-md-font-family);
-  font-size: var(--openbitfun-type-display-md-font-size);
-  font-weight: var(--openbitfun-type-display-md-font-weight);
-  line-height: var(--openbitfun-type-display-md-line-height);
-  letter-spacing: var(--openbitfun-type-display-md-letter-spacing);
+.design-home-footer-meta p {
+  margin: 0;
 }
 
-.design-home-palette {
-  display: flex;
-  margin-inline-start: var(--openbitfun-space-2);
-  overflow: hidden;
-  border-radius: var(--openbitfun-radius-pill);
+.design-home-footer-meta a {
+  color: inherit;
+  text-decoration: none;
 }
 
-.design-home-palette i {
-  width: var(--openbitfun-space-6);
-  height: var(--openbitfun-space-8);
-  background: var(--openbitfun-color-content-primary);
+.design-home-footer-meta a:hover {
+  color: var(--_lab-on-dark);
+  text-decoration: underline;
 }
 
-.design-home-palette i:nth-child(2) { background: var(--openbitfun-color-content-secondary); }
-.design-home-palette i:nth-child(3) { background: var(--openbitfun-color-content-muted); }
-.design-home-palette i:nth-child(4) { background: var(--openbitfun-color-accent-default); }
-.design-destination-specimen--brand { gap: var(--openbitfun-space-4); }
-.design-destination-specimen--brand img { display: block; object-fit: contain; }
-
 @media (max-width: 860px) {
-  .design-home-hero { min-height: 400px; gap: var(--openbitfun-space-6); }
-  .design-destination-grid { grid-template-columns: minmax(0, 1fr); gap: var(--openbitfun-space-4); }
-  .design-destination { flex-direction: row; align-items: center; justify-content: space-between; }
-  .design-destination-specimen { flex: none; max-width: 50%; margin-top: 0; }
+  .lab-page.design-home { gap: calc(var(--openbitfun-space-12) * var(--_lab-home-air)); }
+  .design-home-hero { grid-template-columns: minmax(0, 1fr); gap: var(--openbitfun-space-6); padding-block: 0 calc(var(--openbitfun-space-12) * var(--_lab-home-air)); }
+  .design-home-emblem { grid-column: 1; grid-row: 2; justify-self: start; width: min(calc(40% * var(--_lab-hero-art)), calc(var(--openbitfun-space-16) * 3 * var(--_lab-hero-art))); }
+  .design-home-preview-shell { grid-template-columns: minmax(0, 1fr); }
+  .design-home-preview-sidebar { display: none; }
+  .design-home-preview-stage { gap: calc(var(--openbitfun-space-6) * var(--_lab-home-air)); padding-inline: var(--openbitfun-space-4); }
+  .design-home-footer { --_lab-band-pad-block: calc(var(--openbitfun-space-8) * var(--_lab-home-air)); }
+  .design-home-footer-top { grid-template-columns: minmax(0, 1fr); gap: calc(var(--openbitfun-space-8) * var(--_lab-home-air)); }
+  .design-home-footer-identity { padding-inline-end: 0; border-inline-end: 0; }
+  .design-home-footer-steps { margin-block-start: calc(var(--openbitfun-space-2) * var(--_lab-home-air)); }
 }
 
 @media (max-width: 600px) {
-  .lab-page.design-home { padding-block: var(--openbitfun-space-6); }
-  .design-home-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: var(--openbitfun-space-4) var(--openbitfun-space-8); }
-  .design-home-heading { text-align: center; }
-  .design-home-heading h1 { align-items: center; }
-  .design-home-title { font-size: var(--openbitfun-type-display-xxl-font-size); }
-  .design-home-emblem { grid-row: 1; justify-self: center; width: min(70%, 280px); }
-  .design-home-actions { justify-content: center; }
-  .design-destination { flex-direction: column; align-items: stretch; gap: var(--openbitfun-space-5); padding: var(--openbitfun-space-5); }
-  .design-destination-specimen { max-width: none; min-height: var(--openbitfun-space-12); }
+  .lab-page.design-home { gap: calc(var(--openbitfun-space-10) * var(--_lab-home-air)); padding-block: calc(var(--openbitfun-space-8) * var(--_lab-home-air)) 0; }
+  .design-home-hero { gap: var(--openbitfun-space-6); padding-block: 0 calc(var(--openbitfun-space-10) * var(--_lab-home-air)); }
+  .design-home-emblem { width: min(calc(35% * var(--_lab-hero-art)), calc(var(--openbitfun-space-16) * 2 * var(--_lab-hero-art))); }
+  .design-home-footer-paths { grid-template-columns: minmax(0, 1fr); gap: calc(var(--openbitfun-space-8) * var(--_lab-home-air)); }
+  .design-home-footer { --_lab-band-pad-block: calc(var(--openbitfun-space-6) * var(--_lab-home-air)); gap: calc(var(--openbitfun-space-8) * var(--_lab-home-air)); }
 }
diff --git a/design-system/apps/design-lab/src/pages/OverviewPage.tsx b/design-system/apps/design-lab/src/pages/OverviewPage.tsx
index adbe35143f..cbec78959a 100644
--- a/design-system/apps/design-lab/src/pages/OverviewPage.tsx
+++ b/design-system/apps/design-lab/src/pages/OverviewPage.tsx
@@ -1,69 +1,288 @@
-import { Button, Icon, StatusPill, Switch } from "@openbitfun/ui";
-import { OpenBitFunMark } from "@openbitfun/ui/brand";
-import { SUBAGENT_AVATAR_CATALOG } from "../assets/subagentAvatars";
+import type { ReactNode } from "react";
+import { useEffect, useState } from "react";
+import { Button, ComposerContextBar, ComposerDivider, Icon, IconButton, KeyHint, NavigationPanel, NavigationPanelBody, NavigationPanelContent, NavigationPanelFooter, NavigationPanelHeader, NavigationPanelItem, NavigationPanelSection, NumberBadge, PageHeader, SearchField, SegmentedControl, StatusPill, ThemeRoot, type IconName, type ThemeRootProps } from "@openbitfun/ui";
+import { ChatComposer, ChatComposerActionButton } from "@openbitfun/ui/flow-chat";
+import { OpenBitFunSolidMark, SubagentHatch, type SubagentHatchPhase } from "@openbitfun/ui/brand";
 import { useI18n } from "../i18n";
+import { SUBAGENT_AVATAR_CATALOG } from "../assets/subagentAvatars";
+import { GuideCodeCard, GuideStepList } from "../components/GuideContract";
+import { MultiSurfaceMorph } from "../preview/MultiSurfaceMorph";
 import "./OverviewPage.css";
 
-interface OverviewPageProps {
+type OverviewTheme = Pick<ThemeRootProps, "colorScheme" | "contrast" | "density" | "tokenOverrides">;
+
+interface OverviewPageProps extends OverviewTheme {
   onNavigate: (target: "components" | "foundations" | "brand" | "getting-started") => void;
 }
 
-export function OverviewPage({ onNavigate }: OverviewPageProps) {
+/* The hero plays the family's own hatch rather than the static mark: the character resources are the
+   part of the brand that moves, and the homepage is where a reader meets them first. It is the same
+   character the brand gallery's motion banner leads with, so the page and the gallery agree on who
+   the family's face is. */
+const heroCharacter = SUBAGENT_AVATAR_CATALOG.find(avatar => avatar.id === "robot-03") ?? SUBAGENT_AVATAR_CATALOG[0]!;
+
+/* The showcase frame is a picture of the product, so everything inside it is either a design system
+   part or product data. Session and repository names, the machine, the version, and the model are
+   data: they are literals here rather than copy in the message catalogs. */
+type PreviewNavigationKey = "design.homePreview.assistant" | "design.homePreview.taskBoard"
+  | "design.homePreview.miniApp" | "design.homePreview.extensions";
+
+const previewNavigation: readonly { id: string; icon: IconName; label: PreviewNavigationKey }[] = [
+  { id: "assistant", icon: "spark", label: "design.homePreview.assistant" },
+  { id: "task-board", icon: "list-todo", label: "design.homePreview.taskBoard" },
+  { id: "mini-app", icon: "mini-app", label: "design.homePreview.miniApp" },
+  { id: "extensions", icon: "extension", label: "design.homePreview.extensions" },
+];
+
+/* Closing band. The product site's footer puts its own three communities beside the wordmark; the
+   Lab has no community to send anyone to, so the three columns are the Lab's destinations — same
+   shape, the Lab's content. */
+const footerPathIcons: Record<"components" | "foundations" | "brand", IconName> = {
+  components: "layers",
+  foundations: "palette",
+  brand: "star",
+};
+
+interface PreviewSessionRow {
+  id: string;
+  name: string;
+  icon?: IconName;
+  /** Child rows sit one step in from their parent, the way the product indents a session. */
+  indent?: boolean;
+  metadata?: ReactNode;
+  selected?: boolean;
+}
+
+export function OverviewPage({ onNavigate, colorScheme, contrast, density, tokenOverrides }: OverviewPageProps) {
   const { t } = useI18n();
+  const theme = { colorScheme, contrast, density, tokenOverrides };
+  /* The hatch is a one-shot reveal, so the hero runs it as a loop: the egg incubates, the character
+     comes out, hold, then incubate again. Off-screen and hidden-tab cases are handled inside the
+     brand component's own motion hook, which suspends animation work it cannot show. */
+  const [hatch, setHatch] = useState<SubagentHatchPhase>("incubating");
+  const [hatchPlaying, setHatchPlaying] = useState(true);
+
+  useEffect(() => {
+    const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const sync = () => setHatchPlaying(!preference.matches);
+    sync();
+    preference.addEventListener("change", sync);
+    return () => preference.removeEventListener("change", sync);
+  }, []);
+
+  useEffect(() => {
+    if (!hatchPlaying) {
+      // Reduced motion settles on the character rather than freezing an unopened egg.
+      setHatch("ready");
+      return;
+    }
+    let timer = 0;
+    let incubating = true;
+    setHatch("incubating");
+    const step = () => {
+      incubating = !incubating;
+      setHatch(incubating ? "incubating" : "ready");
+      timer = window.setTimeout(step, incubating ? 1800 : 3600);
+    };
+    timer = window.setTimeout(step, 1800);
+    return () => window.clearTimeout(timer);
+  }, [hatchPlaying]);
+
+  const previewSessions: readonly PreviewSessionRow[] = [
+    { id: "claw", icon: "user", name: "Claw" },
+    { id: "claw-session", indent: true, name: "New Claw Session" },
+    { id: "bitfun", icon: "folder", name: "BitFun" },
+    { id: "bitfun-session", indent: true, name: "New Code Session" },
+    { id: "bitfun-welcome", indent: true, name: t("design.homePreview.welcome"), selected: true },
+    { id: "bitfun-more", name: t("design.homePreview.showMore"), metadata: <NumberBadge value="+14" /> },
+    { id: "root", icon: "session", name: "root", metadata: <StatusPill emphasis tone="success">38.47.103.247</StatusPill> },
+    { id: "root-session", indent: true, name: "New Code Session" },
+    { id: "root-relay", indent: true, name: "relay-server account" },
+    { id: "root-more", name: t("design.homePreview.showMore"), metadata: <NumberBadge value="+10" /> },
+  ];
 
   return (
     <main className="lab-page lab-page--overview design-home" id="overview">
       <section className="design-home-hero" aria-labelledby="design-home-title">
+        <div className="design-home-emblem" aria-hidden="true">
+          <SubagentHatch className="design-home-character" phase={hatch} active={hatchPlaying}>
+            <img className="design-home-character-avatar" src={heroCharacter.src} alt="" draggable={false} />
+          </SubagentHatch>
+        </div>
         <header className="design-home-heading">
-          <h1 id="design-home-title">
-            <span className="design-home-name">OpenBitFun</span>{" "}
-            <span className="design-home-title">Design</span>
-          </h1>
-          <p className="design-home-description">{t("design.intro")}</p>
+          <h1 id="design-home-title" className="design-home-slogan">{t("design.slogan")}</h1>
+          <p className="design-home-support">{t("design.sloganSupport")}</p>
           <div className="design-home-actions">
             <Button variant="primary" trailingIcon={<Icon name="arrow-right" />} onClick={() => onNavigate("components")}>{t("design.components")}</Button>
-            <Button variant="text" onClick={() => onNavigate("getting-started")}>{t("nav.gettingStarted")}</Button>
+            <Button variant="secondary" onClick={() => onNavigate("getting-started")}>{t("nav.gettingStarted")}</Button>
           </div>
         </header>
-        <div className="design-home-emblem" aria-hidden="true">
-          <OpenBitFunMark className="design-home-mark" motion="breathe" />
-        </div>
       </section>
-      <div className="design-destination-grid">
-        {(["components", "foundations", "brand"] as const).map(target => (
-          <article className="design-destination" key={target}>
-            <div className="design-destination-copy">
-              <h2>
-                <a href={`#${target}`} aria-describedby={`design-${target}-description`} onClick={event => {
-                  if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
-                  event.preventDefault();
-                  onNavigate(target);
-                }}>
-                  {t(`design.${target}`)}
-                  <Icon name="arrow-up-right" className="design-destination-arrow" />
-                </a>
-              </h2>
-              <p id={`design-${target}-description`}>{t(`design.${target}Intro`)}</p>
-            </div>
-            <div className={`design-destination-specimen design-destination-specimen--${target}`} aria-hidden="true" {...{ inert: "" }}>
-              {target === "components" ? (
-                <>
-                  <Button size="sm" variant="fill" tabIndex={-1}>OpenBitFun</Button>
-                  <Switch defaultChecked aria-label={t("components.preview.session")} tabIndex={-1} />
-                  <StatusPill tone="neutral">{t("components.preview.session")}</StatusPill>
-                </>
-              ) : target === "foundations" ? (
-                <>
-                  <span className="design-home-type-sample">Aa</span>
-                  <div className="design-home-palette"><i /><i /><i /><i /></div>
-                </>
-              ) : SUBAGENT_AVATAR_CATALOG.slice(0, 3).map(avatar => (
-                <img key={avatar.id} src={avatar.src} alt="" width={44} height={44} loading="lazy" />
-              ))}
+
+      <ThemeRoot className="design-home-preview" aria-hidden="true" {...{ inert: "" }} {...theme}>
+        <MultiSurfaceMorph>
+          <div className="design-home-preview-shell">
+            {/* Sidebar: the design system's own NavigationPanel, so the picture is assembled from the
+                same parts the product assembles it from. The panel keeps its block-fill selection and
+                drops its footer rule — this frame separates regions with fills and space, not lines. */}
+            <NavigationPanel className="design-home-preview-sidebar">
+              <NavigationPanelHeader className="design-home-preview-search">
+                <SearchField aria-label={t("design.homePreview.search")} leadingIcon={<Icon name="search" />}
+                  placeholder={t("design.homePreview.search")} readOnly size="sm" tabIndex={-1}
+                  shortcut={<KeyHint icon={<Icon name="command-mac" />}>K</KeyHint>} />
+                <IconButton aria-label={t("design.homePreview.newSession")} icon={<Icon name="plus" />}
+                  size="sm" tabIndex={-1} variant="fill" />
+              </NavigationPanelHeader>
+              <NavigationPanelBody scrollbarVisibility="hidden">
+                <NavigationPanelContent>
+                  <div className="design-home-preview-navigation">
+                    {previewNavigation.map(item => (
+                      <NavigationPanelItem key={item.id} className="design-home-preview-session"
+                        leading={<Icon name={item.icon} />} tabIndex={-1}>{t(item.label)}</NavigationPanelItem>
+                    ))}
+                  </div>
+                  <NavigationPanelSection title={t("design.homePreview.sessions")}>
+                    {previewSessions.map(row => (
+                      <NavigationPanelItem key={row.id} className={row.indent ? "design-home-preview-session design-home-preview-session--child" : "design-home-preview-session"}
+                        leading={row.icon ? <Icon name={row.icon} /> : undefined} metadata={row.metadata} selected={row.selected} tabIndex={-1}>
+                        {row.name}
+                      </NavigationPanelItem>
+                    ))}
+                  </NavigationPanelSection>
+                </NavigationPanelContent>
+              </NavigationPanelBody>
+              <NavigationPanelFooter className="design-home-preview-device">
+                <span><Icon name="device-mac" />MacBook-Air</span>
+                <IconButton aria-label={t("design.homePreview.settings")} icon={<Icon name="gear" />} size="sm" tabIndex={-1} variant="quiet" />
+              </NavigationPanelFooter>
+            </NavigationPanel>
+
+            {/* Pane: the window the product opens on — its session tabs, then the welcome screen. */}
+            <div className="design-home-preview-pane">
+              <div className="design-home-preview-pane-head">
+                <SegmentedControl aria-label={t("design.homePreview.sessions")} size="sm" tone="neutral" variant="pills"
+                  value="welcome" options={[
+                    { value: "welcome", label: t("design.homePreview.welcome") },
+                    { value: "settings", label: t("design.homePreview.settings") },
+                  ]} />
+              </div>
+              <div className="design-home-preview-stage">
+                <div className="design-home-preview-welcome">
+                  <OpenBitFunSolidMark className="design-app-mark design-home-preview-welcome-mark" size={48} />
+                  {/* The product's welcome screen is a display PageHeader; the picture uses the same
+                      part, so the greeting and its line keep the roles the product publishes. */}
+                  <PageHeader align="center" className="design-home-preview-welcome-header" level={2} size="display"
+                    title={t("design.homePreview.greeting")} description={t("design.homePreview.support")} />
+                </div>
+                <ChatComposer aria-label={t("components.preview.composerLabel")} className="design-home-preview-composer"
+                  layout="expanded"
+                  contextBar={(
+                    <ComposerContextBar
+                      leading={(
+                        <>
+                          <Button size="xs" tabIndex={-1} trailingIcon={<Icon name="chevron-down" />} variant="text">
+                            {t("design.homePreview.contextMachine")}
+                          </Button>
+                          <ComposerDivider />
+                          <Button size="xs" tabIndex={-1} trailingIcon={<Icon name="chevron-down" />} variant="text">BitFun</Button>
+                          <ComposerDivider />
+                          <span className="design-home-preview-context">1.0.0-explore</span>
+                          <ComposerDivider />
+                          <span className="design-home-preview-context">
+                            <Icon name="unselected" size="2xs" />
+                            {t("design.homePreview.contextWorkspace")}
+                          </span>
+                        </>
+                      )}
+                      trailing={<StatusPill emphasis tone="success">{t("design.homePreview.contextAsk")}</StatusPill>}
+                    />
+                  )}
+                  startActions={(
+                    <Button size="sm" leadingIcon={<Icon name="plus" />} tabIndex={-1} variant="text">
+                      {t("design.homePreview.mode")}
+                    </Button>
+                  )}
+                  endActions={(
+                    <>
+                      <Button size="sm" tabIndex={-1} trailingIcon={<Icon name="chevron-down" />} variant="text">deepseek-v4-pro high</Button>
+                      <ChatComposerActionButton aria-label={t("design.homePreview.composerVoice")} icon={<Icon name="mic" />}
+                        tabIndex={-1} variant="fill" />
+                      <ChatComposerActionButton aria-label={t("components.preview.composerSend")} icon={<Icon name="arrow-up" />}
+                        tabIndex={-1} variant="primary" />
+                    </>
+                  )}>
+                  <span className="design-home-preview-placeholder">{t("design.homePreview.composerPlaceholder")}</span>
+                </ChatComposer>
+              </div>
             </div>
-          </article>
-        ))}
-      </div>
+          </div>
+        </MultiSurfaceMorph>
+      </ThemeRoot>
+
+      {/* Usage: the guide's contract block, moved into the page's closing stretch so a reader who
+          has seen the picture is told how the blocks are actually consumed before the footer sends
+          them anywhere. Same steps and snippet as #getting-started (components/GuideContract). */}
+      <section className="design-home-contract" aria-labelledby="design-home-contract-title">
+        <h2 className="design-home-contract-title" id="design-home-contract-title">{t("gettingStarted.title")}</h2>
+        <div className="guide-setup-layout">
+          <GuideStepList headingLevel={3} />
+          <GuideCodeCard />
+        </div>
+      </section>
+
+      {/* Closing band: the product site's footer, adapted. It keeps that footer's shape — the
+          prompt wordmark over its tagline, the three columns beside it, then the small print — and
+          carries the Lab's own three destinations as the columns, because this is the page's last
+          chance to send a reader somewhere. The band is the page's one filled region: it closes the
+          page the way the reference closes its own, with the page's surface interrupted rather than
+          another hairline drawn. */}
+      <footer className="design-home-footer">
+        <div className="design-home-footer-top">
+          <div className="design-home-footer-identity">
+            {/* The lockup is the way out of the Lab: same mark-and-name treatment as the topbar's
+                own, now an outbound link to the product site. It leaves the Lab, so it opens in a
+                new tab and carries the arrow that says so. */}
+            <a className="design-home-footer-wordmark" href="https://openbitfun.com/" rel="noreferrer"
+              target="_blank" aria-label={t("design.homeFooter.siteLabel")}>
+              <span aria-hidden="true">&gt;_</span> OpenBitFun
+              <Icon className="design-home-footer-wordmark-arrow" aria-hidden="true" name="arrow-up-right" size="sm" />
+            </a>
+            <p className="design-home-footer-tagline">
+              {t("design.homeFooter.tagline")}<br />{t("design.homeFooter.taglineAccent")}
+            </p>
+            <span className="design-home-footer-steps" aria-hidden="true">
+              {Array.from({ length: 8 }, (_, index) => <i key={index} />)}
+            </span>
+          </div>
+          <nav className="design-home-footer-paths" aria-label={t("design.homeFooter.pathsLabel")}>
+            {(["components", "foundations", "brand"] as const).map(target => (
+              <article className="design-home-footer-path" key={target}>
+                <Icon className="design-home-footer-path-icon" name={footerPathIcons[target]} size="lg" />
+                <h2>
+                  <a href={`#${target}`} onClick={event => {
+                    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+                    event.preventDefault();
+                    onNavigate(target);
+                  }}>
+                    {t(`design.${target}`)}
+                  </a>
+                </h2>
+                <p>{t(`design.${target}Intro`)}</p>
+                {/* The reference sets the arrow on its own line under the paragraph; the column's
+                    link overlay still covers it, so pointing at the arrow reaches the same page. */}
+                <Icon aria-hidden="true" className="design-home-footer-path-arrow" name="arrow-right" />
+              </article>
+            ))}
+          </nav>
+        </div>
+        <div className="design-home-footer-meta">
+          <p>{t("design.homeFooter.copyright", { year: new Date().getFullYear() })}</p>
+          <a href="mailto:hello@openbitfun.com" aria-label={t("design.homeFooter.contactLabel")}>
+            {t("design.homeFooter.contact")}
+          </a>
+          <p>{t("design.homeFooter.openSource")}<span aria-hidden="true"> · </span>{t("design.homeFooter.license")}</p>
+        </div>
+      </footer>
     </main>
   );
 }
diff --git a/design-system/apps/design-lab/src/pages/SubagentIpPage.css b/design-system/apps/design-lab/src/pages/SubagentIpPage.css
index f1f7a967da..b4304e9273 100644
--- a/design-system/apps/design-lab/src/pages/SubagentIpPage.css
+++ b/design-system/apps/design-lab/src/pages/SubagentIpPage.css
@@ -34,10 +34,10 @@
   background: var(--openbitfun-color-action-quiet-hover);
 }
 
+/* Selected: the fill says it, not a heavier border. */
 .subagent-ip-card[aria-pressed="true"] {
-  border-color: var(--openbitfun-color-border-strong);
   color: var(--openbitfun-color-content-primary);
-  background: var(--openbitfun-color-action-quiet-pressed);
+  background: var(--openbitfun-color-selection-surface);
 }
 
 .subagent-ip-card:focus-visible {
diff --git a/design-system/apps/design-lab/src/preview/ComponentShowcase.css b/design-system/apps/design-lab/src/preview/ComponentShowcase.css
index 900211b557..b43b316be8 100644
--- a/design-system/apps/design-lab/src/preview/ComponentShowcase.css
+++ b/design-system/apps/design-lab/src/preview/ComponentShowcase.css
@@ -18,7 +18,7 @@
 .design-mobile-appearances span { color: var(--openbitfun-color-content-secondary); font-size: var(--openbitfun-type-body-xs-font-size); }
 .design-icon-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--openbitfun-space-2); margin-top: var(--openbitfun-space-4); max-height: 480px; overflow-y: auto; padding: var(--openbitfun-space-1); }
 .design-icon-directory button { display: flex; flex-direction: column; align-items: center; gap: var(--openbitfun-space-3); min-width: 0; padding: var(--openbitfun-space-4) var(--openbitfun-space-2); border: 0; border-radius: var(--openbitfun-radius-md); background: transparent; color: var(--openbitfun-color-content-secondary); cursor: pointer; }
-.design-icon-directory button:hover, .design-icon-directory button[aria-pressed="true"] { background: var(--openbitfun-color-action-neutral-surface-hover); color: var(--openbitfun-color-content-primary); }
+.design-icon-directory button:hover, .design-icon-directory button[aria-pressed="true"] { background: var(--openbitfun-color-selection-surface); color: var(--openbitfun-color-content-primary); }
 .design-icon-directory span { width: 100%; overflow-wrap: anywhere; text-align: center; font-size: var(--openbitfun-type-code-sm-font-size); }
 .design-selected-stage[data-presentation="composition"] .design-selected-component { display: block; max-width: 760px; }
 .design-selected-stage:is([data-component-name="Menu"], [data-component-name="Listbox"], [data-component-name="NavigationPanel"], [data-component-name="Select"], [data-component-name="Combobox"], [data-component-name="MultiSelect"]) .design-selected-component { display: block; max-width: 360px; }
diff --git a/design-system/apps/design-lab/src/preview/LiveComponentExamples.tsx b/design-system/apps/design-lab/src/preview/LiveComponentExamples.tsx
index b9f064a824..8863c8f881 100644
--- a/design-system/apps/design-lab/src/preview/LiveComponentExamples.tsx
+++ b/design-system/apps/design-lab/src/preview/LiveComponentExamples.tsx
@@ -29,7 +29,7 @@ export function NavigationExample({ name, state, size = "sm" }: { name: string;
 export function MobileDisclosureExample({ state }: { state: string }) {
   const { t } = useI18n();
   const [open, setOpen] = useState(state === "open");
-  return <MobileDisclosure disabled={state === "disabled"} onToggle={() => setOpen(value => !value)} open={open} title={t("components.preview.appearance")}>
+  return <MobileDisclosure data-openbitfun-preview-state={state === "hover" ? "hover" : undefined} disabled={state === "disabled"} onToggle={() => setOpen(value => !value)} open={open} title={t("components.preview.appearance")}>
     {t("components.preview.appearanceDescription")}
   </MobileDisclosure>;
 }
diff --git a/design-system/apps/design-lab/src/preview/MultiSurfaceMorph.css b/design-system/apps/design-lab/src/preview/MultiSurfaceMorph.css
new file mode 100644
index 0000000000..54a3b8b341
--- /dev/null
+++ b/design-system/apps/design-lab/src/preview/MultiSurfaceMorph.css
@@ -0,0 +1,222 @@
+/* One frame, four surfaces. Only the frame's box moves — its width, height and corner radius are
+   registered as lengths so the browser can animate a shape change instead of a class swap, and the
+   surfaces inside it cross-fade while the box travels. Registering the three properties is what makes
+   the difference: without them a length cannot be transitioned, and the frame would jump.
+   The durations and easings are the motion tokens, so the reduced-motion token block collapses the
+   whole morph to nothing on its own. */
+@property --_morph-w { syntax: "<length>"; inherits: false; initial-value: 1120px; }
+@property --_morph-h { syntax: "<length>"; inherits: false; initial-value: 560px; }
+@property --_morph-r { syntax: "<length>"; inherits: false; initial-value: 12px; }
+
+/* The stage: the area the page gives the picture. It keeps the page's rhythm — the height is the
+   frame's largest state — and it measures itself, because the desktop geometry has to be handed to
+   the frame as lengths and a length cannot be interpolated with a percentage. */
+.design-morph {
+  --_morph-stage-w: 1120px;
+  --_morph-stage-h: 560px;
+
+  position: relative;
+  display: grid;
+  place-items: center;
+  block-size: 100%;
+  min-block-size: 0;
+  font-family: var(--openbitfun-type-body-md-font-family);
+}
+
+.design-morph-frame {
+  position: relative;
+  inline-size: var(--_morph-w);
+  block-size: var(--_morph-h);
+  border: var(--_lab-rule);
+  border-radius: var(--_morph-r);
+  overflow: hidden;
+  background: var(--openbitfun-color-surface-canvas);
+  transition:
+    --_morph-w var(--openbitfun-motion-duration-lazy) var(--openbitfun-motion-easing-smooth),
+    --_morph-h var(--openbitfun-motion-duration-lazy) var(--openbitfun-motion-easing-smooth),
+    --_morph-r var(--openbitfun-motion-duration-lazy) var(--openbitfun-motion-easing-smooth);
+}
+
+/* The four geometries. The desktop window is the stage itself; the phone keeps the height and loses
+   the width; the watch is the only square one and becomes a circle; the glasses are the widest and
+   the shortest. Every one of them is clamped by the stage, so a narrow page shows the same devices
+   rather than four cropped ones. */
+.design-morph[data-surface="web"] .design-morph-frame {
+  --_morph-w: var(--_morph-stage-w);
+  --_morph-h: var(--_morph-stage-h);
+  --_morph-r: var(--openbitfun-radius-lg);
+}
+
+.design-morph[data-surface="phone"] .design-morph-frame {
+  --_morph-w: min(300px, var(--_morph-stage-w));
+  --_morph-h: var(--_morph-stage-h);
+  --_morph-r: var(--openbitfun-radius-4xl);
+}
+
+.design-morph[data-surface="watch"] .design-morph-frame {
+  --_morph-w: min(276px, var(--_morph-stage-w), var(--_morph-stage-h));
+  --_morph-h: min(276px, var(--_morph-stage-w), var(--_morph-stage-h));
+  --_morph-r: calc(min(276px, var(--_morph-stage-w), var(--_morph-stage-h)) / 2);
+}
+
+.design-morph[data-surface="glasses"] .design-morph-frame {
+  --_morph-w: min(780px, var(--_morph-stage-w));
+  /* A visor, not a window: the shallowest of the four, so the frame hugs the strip it carries. */
+  --_morph-h: min(168px, var(--_morph-stage-h));
+  --_morph-r: var(--openbitfun-radius-3xl);
+}
+
+/* A surface is a stage of its own, laid out at the size it will be read at and never stretched: the
+   one in play is visible, the other three are gone. The incoming surface settles a little as it
+   arrives and the outgoing one holds still, which is what makes the change read as one object
+   turning into another rather than as two pictures swapping. */
+.design-morph-surface {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(1.03);
+  transition:
+    opacity var(--openbitfun-motion-duration-slow) linear,
+    transform var(--openbitfun-motion-duration-lazy) var(--openbitfun-motion-easing-smooth);
+}
+
+.design-morph-surface[data-active="true"] {
+  opacity: 1;
+  transform: none;
+  /* Arrives after the box has mostly arrived, so the shape is read before the content is. */
+  transition:
+    opacity var(--openbitfun-motion-duration-slow) linear var(--openbitfun-motion-duration-slow),
+    transform var(--openbitfun-motion-duration-lazy) var(--openbitfun-motion-easing-smooth);
+}
+
+/* ------------------------------------------------------------------------------ phone surface
+   The mobile kit's own reading order: a page header, the transcript, the composer, then the bottom
+   navigation. Sample data is product data and stays English, like the desktop picture's. */
+.design-morph-phone {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto auto;
+  block-size: 100%;
+  min-block-size: 0;
+  /* The phone's frame has a phone's corners: the bottom bar has to clear them, the way the system
+     safe area would on the device. */
+  padding-block-end: var(--openbitfun-space-4);
+}
+
+.design-morph-phone-head {
+  border-block-end: var(--_lab-rule);
+}
+
+.design-morph-phone-thread {
+  display: grid;
+  align-content: start;
+  gap: var(--openbitfun-space-3);
+  padding: var(--openbitfun-space-4);
+  min-block-size: 0;
+  overflow: hidden;
+}
+
+.design-morph-phone-composer {
+  margin-inline: var(--openbitfun-space-3);
+}
+
+.design-morph-phone-tabs {
+  margin-block-start: var(--openbitfun-space-3);
+}
+
+/* ------------------------------------------------------------------------------ watch surface
+   Nothing from a window survives this size except the state, so the face is the mark, the signal,
+   and the one control the surface has room for. */
+.design-morph-watch {
+  display: grid;
+  place-items: center;
+  block-size: 100%;
+}
+
+.design-morph-watch-face {
+  position: relative;
+  display: grid;
+  place-items: center;
+  gap: var(--openbitfun-space-3);
+  inline-size: 100%;
+  block-size: 100%;
+  padding: var(--openbitfun-space-8);
+}
+
+/* The bezel: one hairline inside the frame's own edge, which is what says "device" at this size. */
+.design-morph-watch-face::before {
+  content: "";
+  position: absolute;
+  inset: var(--openbitfun-space-3);
+  border: var(--_lab-rule);
+  border-radius: var(--openbitfun-radius-pill);
+}
+
+.design-morph-watch-mark {
+  color: var(--openbitfun-color-content-secondary);
+}
+
+.design-morph-watch-wave {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--openbitfun-space-1) / 2);
+  block-size: var(--openbitfun-space-12);
+}
+
+.design-morph-watch-wave > i {
+  inline-size: 3px;
+  block-size: var(--_morph-wave, 40%);
+  border-radius: var(--openbitfun-radius-pill);
+  background: var(--openbitfun-color-accent-default);
+}
+
+/* ------------------------------------------------------------------------------ glasses surface
+   A heads-up display: not a screen to fill but a strip of glass to write on. The band behind the
+   panel is the lens, the panel is where the answer would appear. */
+.design-morph-glasses {
+  position: relative;
+  display: grid;
+  place-items: center;
+  block-size: 100%;
+}
+
+/* The lens: a soft band rather than a rectangle, so the glass has no visible edge of its own. */
+.design-morph-glasses-lens {
+  position: absolute;
+  inset-inline: 0;
+  block-size: 78%;
+  background: radial-gradient(58% 100% at 50% 50%, var(--openbitfun-color-surface-subtle), transparent);
+}
+
+.design-morph-glasses-hud {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--openbitfun-space-4);
+  inline-size: min(calc(100% - var(--openbitfun-space-16)), 640px);
+  padding: var(--openbitfun-space-3) var(--openbitfun-space-5);
+  border: var(--_lab-rule);
+  border-radius: var(--openbitfun-radius-2xl);
+  background: var(--openbitfun-color-surface-panel);
+  color: var(--openbitfun-color-content-primary);
+}
+
+.design-morph-glasses-line {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--openbitfun-color-content-secondary);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.design-morph-glasses-mic {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  inline-size: var(--openbitfun-space-8);
+  block-size: var(--openbitfun-space-8);
+  border-radius: var(--openbitfun-radius-pill);
+  background: var(--openbitfun-color-selection-surface);
+}
diff --git a/design-system/apps/design-lab/src/preview/MultiSurfaceMorph.tsx b/design-system/apps/design-lab/src/preview/MultiSurfaceMorph.tsx
new file mode 100644
index 0000000000..204107a233
--- /dev/null
+++ b/design-system/apps/design-lab/src/preview/MultiSurfaceMorph.tsx
@@ -0,0 +1,191 @@
+import { useEffect, useRef, useState, type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
+import { Icon, StatusPill } from "@openbitfun/ui";
+import { MobileComposer, MobileIconButton, MobileMessage, MobilePageHeader, MobileTabBar } from "@openbitfun/ui/mobile";
+import { OpenBitFunSolidMark } from "@openbitfun/ui/brand";
+import { useI18n } from "../i18n";
+import "./MultiSurfaceMorph.css";
+
+/* The design system is one system across four surfaces, and a homepage picture that shows only the
+   desktop window tells half the story. This frame is that picture with the rest of the story: the
+   same product — the same parts, the same welcome screen — shown as a desktop window, a phone, a
+   watch, and a pair of glasses, morphing between them.
+
+   How it is built, and why:
+   - One frame, four states. Only the frame's own box (inline-size, block-size, radius) changes
+     between surfaces, animated through `@property`-registered lengths, so the shape itself is what
+     moves. The surfaces inside it do not stretch or reflow: they are laid out at the size they are
+     meant to be read at and cross-fade while the box travels.
+   - The desktop surface is the caller's own picture (`children`), unchanged — it is the state the
+     page already shipped, and it is authored for the frame's widest state.
+   - The other three surfaces are assembled from the system's own mobile parts (MobilePageHeader,
+     MobileMessage, MobileComposer, MobileTabBar, MobileIconButton), so the phone/watch/glasses faces
+     cannot drift from the parts a product would actually use.
+   - Durations and easings come from the motion tokens, so a reduced-motion environment collapses the
+     morph to nothing without any per-sheet media query, and the loop itself stops for readers who ask
+     for reduced motion (the loop prefers a settled desktop window), for the tab being hidden, and for
+     the frame being off-screen. */
+export type ProductSurface = "web" | "phone" | "watch" | "glasses";
+
+/** The order the surfaces are shown in: the desktop window, then the smaller and stranger devices. */
+const SURFACES: readonly ProductSurface[] = ["web", "phone", "watch", "glasses"];
+
+/** How long each settled surface is held. The desktop window is the picture the page is about, so it
+    rests there; the three devices are shown long enough to be read. The morph itself takes the CSS
+    token's time (`lazy`, 1s) on top of these. */
+const HOLDS: Record<ProductSurface, number> = { web: 3800, phone: 2400, watch: 2200, glasses: 2600 };
+
+/** A voice waveform, written out rather than randomised so it reads as a signal, not as noise. */
+const WAVE = [26, 58, 40, 82, 100, 62, 36, 88, 54, 28];
+
+export interface MultiSurfaceMorphProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /** The desktop surface: the caller's own picture of the product, at the frame's widest state. */
+  children: ReactNode;
+}
+
+export function MultiSurfaceMorph({ children, className }: MultiSurfaceMorphProps) {
+  const stageRef = useRef<HTMLDivElement>(null);
+  const [stage, setStage] = useState({ width: 1120, height: 560 });
+  const [index, setIndex] = useState(0);
+  const [motionAllowed, setMotionAllowed] = useState(false);
+  const [onScreen, setOnScreen] = useState(true);
+  const [tabVisible, setTabVisible] = useState(true);
+
+  /* The four geometries are lengths, and they are given to the frame in px: a percentage can only
+     morph into another percentage, so the desktop state's own size is measured and handed down. */
+  useEffect(() => {
+    const element = stageRef.current;
+    if (!element) return;
+    const measure = () => {
+      const bounds = element.getBoundingClientRect();
+      setStage({ width: Math.round(bounds.width), height: Math.round(bounds.height) });
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const sync = () => setMotionAllowed(!preference.matches);
+    sync();
+    preference.addEventListener("change", sync);
+    return () => preference.removeEventListener("change", sync);
+  }, []);
+
+  useEffect(() => {
+    const element = stageRef.current;
+    if (!element || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(entries => setOnScreen(entries.some(entry => entry.isIntersecting)));
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const sync = () => setTabVisible(!document.hidden);
+    sync();
+    document.addEventListener("visibilitychange", sync);
+    return () => document.removeEventListener("visibilitychange", sync);
+  }, []);
+
+  const cycling = motionAllowed && onScreen && tabVisible;
+  const surface = SURFACES[index] ?? "web";
+
+  useEffect(() => {
+    if (!cycling) return;
+    const timer = window.setTimeout(() => setIndex(current => (current + 1) % SURFACES.length), HOLDS[surface]);
+    return () => window.clearTimeout(timer);
+  }, [cycling, surface]);
+
+  return (
+    <div ref={stageRef} className={className ? `design-morph ${className}` : "design-morph"} data-surface={surface}
+      style={{ "--_morph-stage-w": `${stage.width}px`, "--_morph-stage-h": `${stage.height}px` } as CSSProperties}>
+      <div className="design-morph-frame">
+        <Surface active={surface === "web"} name="web">{children}</Surface>
+        <Surface active={surface === "phone"} name="phone"><PhoneSurface /></Surface>
+        <Surface active={surface === "watch"} name="watch"><WatchSurface /></Surface>
+        <Surface active={surface === "glasses"} name="glasses"><GlassesSurface /></Surface>
+      </div>
+    </div>
+  );
+}
+
+/* A surface is a stage: it fills whatever the frame currently is, and only the one that matches the
+   current state is shown. The hidden three are out of the accessibility tree as well as out of sight
+   — the whole frame is a picture, and a picture of a phone is not a phone. */
+function Surface({ active, children, name }: { active: boolean; children: ReactNode; name: ProductSurface }) {
+  return (
+    <div className={`design-morph-surface design-morph-surface--${name}`} data-active={active} aria-hidden={!active}>
+      {children}
+    </div>
+  );
+}
+
+/* Phone: the same conversation as the desktop window, in the shape a phone gives it — a page header,
+   the transcript, the composer above the bottom navigation. */
+function PhoneSurface() {
+  const { t } = useI18n();
+  return (
+    <div className="design-morph-phone">
+      <MobilePageHeader className="design-morph-phone-head" leading={<OpenBitFunSolidMark size={22} />}
+        title={t("design.homePreview.assistant")} subtitle="Claw" />
+      <div className="design-morph-phone-thread">
+        <MobileMessage roleType="user">{t("design.homePreview.composerPlaceholder")}</MobileMessage>
+        <MobileMessage roleType="assistant">{t("design.homePreview.support")}</MobileMessage>
+      </div>
+      <MobileComposer className="design-morph-phone-composer" aria-label={t("components.preview.composerLabel")}
+        leading={<MobileIconButton appearance="plain" aria-label={t("components.preview.add")}
+          icon={<Icon name="plus" />} tabIndex={-1} />}
+        endActions={<MobileIconButton appearance="plain" aria-label={t("components.preview.composerSend")}
+          icon={<Icon name="arrow-up" />} tabIndex={-1} />}>
+        <span className="design-home-preview-placeholder">{t("design.homePreview.composerPlaceholder")}</span>
+      </MobileComposer>
+      <MobileTabBar className="design-morph-phone-tabs" label={t("design.homePreview.sessions")} value="assistant"
+        safeArea={false}
+        items={[
+          { icon: <Icon name="spark" />, label: t("design.homePreview.assistant"), value: "assistant" },
+          { icon: <Icon name="list-todo" />, label: t("design.homePreview.taskBoard"), value: "task-board" },
+          { icon: <Icon name="mini-app" />, label: t("design.homePreview.miniApp"), value: "mini-app" },
+        ]} />
+    </div>
+  );
+}
+
+/* Watch: the surface with no room for a window at all. What survives the shrink is the state — the
+   assistant listening — so the face is the mark, a live-looking waveform, and the one control that
+   matters at this size. */
+function WatchSurface() {
+  const { t } = useI18n();
+  return (
+    <div className="design-morph-watch">
+      <div className="design-morph-watch-face">
+        <OpenBitFunSolidMark className="design-morph-watch-mark" size={28} />
+        <span className="design-morph-watch-wave" aria-hidden="true">
+          {WAVE.map((height, index) => (
+            <i key={index} style={{ "--_morph-wave": `${height}%` } as CSSProperties} />
+          ))}
+        </span>
+        <MobileIconButton className="design-morph-watch-mic" appearance="floating" tabIndex={-1}
+          aria-label={t("design.homePreview.composerVoice")} icon={<Icon name="mic" />} />
+      </div>
+    </div>
+  );
+}
+
+/* Glasses: a heads-up display, not a screen. The same prompt and the same answer state as the other
+   surfaces, held in the one strip of glass the device has. */
+function GlassesSurface() {
+  const { t } = useI18n();
+  return (
+    <div className="design-morph-glasses">
+      <span className="design-morph-glasses-lens" aria-hidden="true" />
+      <div className="design-morph-glasses-hud">
+        <OpenBitFunSolidMark size={18} />
+        <span className="design-morph-glasses-line">{t("design.homePreview.composerPlaceholder")}</span>
+        <StatusPill emphasis tone="success">{t("design.homePreview.contextAsk")}</StatusPill>
+        <span className="design-morph-glasses-mic" aria-hidden="true"><Icon name="mic" /></span>
+      </div>
+    </div>
+  );
+}
diff --git a/design-system/apps/design-lab/src/preview/SubagentMotionPreview.css b/design-system/apps/design-lab/src/preview/SubagentMotionPreview.css
index 0c67ff47fd..d793756f6d 100644
--- a/design-system/apps/design-lab/src/preview/SubagentMotionPreview.css
+++ b/design-system/apps/design-lab/src/preview/SubagentMotionPreview.css
@@ -42,8 +42,7 @@
 }
 
 .subagent-motion-character[aria-pressed="true"] {
-  border-color: var(--openbitfun-color-border-strong);
-  background: var(--openbitfun-color-action-quiet-pressed);
+  background: var(--openbitfun-color-selection-surface);
   color: var(--openbitfun-color-content-primary);
 }
 
@@ -210,8 +209,7 @@
 }
 
 .subagent-motion-action[aria-pressed="true"] {
-  border-color: var(--openbitfun-color-border-strong);
-  background: var(--openbitfun-color-action-quiet-pressed);
+  background: var(--openbitfun-color-selection-surface);
 }
 
 .subagent-motion-action:disabled {
diff --git a/design-system/apps/design-lab/src/preview/componentPresentation.ts b/design-system/apps/design-lab/src/preview/componentPresentation.ts
index 55041f0071..d09a865863 100644
--- a/design-system/apps/design-lab/src/preview/componentPresentation.ts
+++ b/design-system/apps/design-lab/src/preview/componentPresentation.ts
@@ -23,13 +23,17 @@ const presentations: Record<string, ComponentPresentation> = {
   ThinkingIndicator: "motion",
   MobileBadge: "compact", MobileButton: "compact", MobileIconButton: "compact",
   MobileFileButton: "compact", MobileLink: "compact",
+  MobileAvatar: "compact", MobileCheckbox: "compact", MobileSwitch: "compact", MobileTag: "compact",
   MobileTextField: "fields", MobileTextarea: "fields",
+  MobileSelect: "fields", MobileStepper: "fields",
   MobileCard: "cards", MobileStatus: "cards",
   MobileBanner: "stack", MobilePageHeader: "stack", MobileSection: "stack", MobileListRow: "stack",
+  MobileRadioGroup: "stack", MobileToolbar: "stack",
   MobileActionSheet: "interactive", MobileChoiceSheet: "interactive",
   MobileConfirmSheet: "interactive", MobileSheet: "interactive",
   MobileDisclosure: "composition", MobileComposer: "composition", MobileFloatingActions: "composition",
   MobileMessage: "composition", MobileScrim: "composition", MobileSegmentedControl: "composition",
+  MobileTabBar: "composition",
 };
 
 const initialStates: Record<string, string> = {
diff --git a/design-system/apps/design-lab/src/styles.css b/design-system/apps/design-lab/src/styles.css
index 3b2946d725..e38337f20e 100644
--- a/design-system/apps/design-lab/src/styles.css
+++ b/design-system/apps/design-lab/src/styles.css
@@ -58,7 +58,7 @@ body,
   max-width: 680px;
   color: var(--openbitfun-color-content-secondary);
   font-size: var(--openbitfun-type-body-sm-font-size);
-  line-height: var(--openbitfun-type-body-lg-line-height);
+  line-height: var(--openbitfun-type-body-sm-line-height);
 }
 
 .component-card:focus-visible,
@@ -177,7 +177,7 @@ body,
   margin: 0;
   color: var(--openbitfun-color-content-secondary);
   font-size: var(--openbitfun-type-body-sm-font-size);
-  line-height: var(--openbitfun-type-body-md-line-height);
+  line-height: var(--openbitfun-type-body-sm-line-height);
 }
 
 .component-card {
@@ -298,7 +298,7 @@ body,
 .component-card__body > span:last-child {
   color: var(--openbitfun-color-content-secondary);
   font-size: var(--openbitfun-type-body-sm-font-size);
-  line-height: var(--openbitfun-type-body-md-line-height);
+  line-height: var(--openbitfun-type-body-sm-line-height);
 }
 
 .component-card__footer {
@@ -331,7 +331,7 @@ body,
 .primitive-note p {
   color: var(--openbitfun-color-content-secondary);
   font-size: var(--openbitfun-type-body-xs-font-size);
-  line-height: var(--openbitfun-type-modifier-leading-spacious-line-height);
+  line-height: var(--openbitfun-type-body-xs-line-height);
 }
 
 /* Component details */
@@ -520,9 +520,9 @@ body,
   overflow: auto;
   padding: var(--openbitfun-space-4);
   color: var(--openbitfun-color-content-secondary);
-  font-family: var(--openbitfun-type-code-md-font-family);
+  font-family: var(--openbitfun-type-code-sm-font-family);
   font-size: var(--openbitfun-type-code-sm-font-size);
-  line-height: var(--openbitfun-type-body-lg-line-height);
+  line-height: var(--openbitfun-type-code-sm-line-height);
 }
 
 .component-guidance-grid {
@@ -547,9 +547,11 @@ body,
 
 .component-guidance-grid h2,
 .component-reference-panel h2 {
-  font-size: var(--openbitfun-type-body-lg-font-size);
-  line-height: var(--openbitfun-type-flow-support-line-height);
-  letter-spacing: var(--openbitfun-type-flow-title-letter-spacing);
+  /* A heading is a heading: same 15px as the body beside it, but on the heading's own leading
+     rather than a paragraph's. */
+  font-size: var(--openbitfun-type-heading-section-font-size);
+  line-height: var(--openbitfun-type-heading-section-line-height);
+  letter-spacing: var(--openbitfun-type-heading-section-letter-spacing);
 }
 
 .component-guidance-grid ul {
@@ -566,7 +568,7 @@ body,
   gap: var(--openbitfun-space-2);
   color: var(--openbitfun-color-content-secondary);
   font-size: var(--openbitfun-type-micro-font-size);
-  line-height: var(--openbitfun-type-support-line-height);
+  line-height: var(--openbitfun-type-modifier-leading-ui-line-height);
 }
 
 .component-guidance-grid li :is(svg, [data-openbitfun-component="icon"]) {
@@ -703,7 +705,7 @@ body,
 .reference-color-palette__contract {
   color: var(--openbitfun-color-content-secondary);
   font-size: var(--openbitfun-type-micro-font-size);
-  line-height: var(--openbitfun-type-support-line-height);
+  line-height: var(--openbitfun-type-modifier-leading-ui-line-height);
 }
 
 .reference-color-palette__summary {
@@ -919,8 +921,7 @@ body,
 }
 
 .token-table__row[data-active] {
-  background: var(--openbitfun-color-action-quiet-pressed);
-  box-shadow: inset 2px 0 var(--openbitfun-color-content-primary);
+  background: var(--openbitfun-color-selection-surface);
 }
 
 .token-table__row[data-edited]::after {
@@ -1084,7 +1085,7 @@ body,
 .token-inspector p {
   color: var(--openbitfun-color-content-secondary);
   font-size: var(--openbitfun-type-body-xs-font-size);
-  line-height: var(--openbitfun-type-body-lg-line-height);
+  line-height: var(--openbitfun-type-body-xs-line-height);
 }
 
 .token-value-control {
@@ -1145,7 +1146,7 @@ body,
   padding: var(--openbitfun-space-8);
   color: var(--openbitfun-color-content-muted);
   font-size: var(--openbitfun-type-body-xs-font-size);
-  line-height: var(--openbitfun-type-body-lg-line-height);
+  line-height: var(--openbitfun-type-body-xs-line-height);
   text-align: center;
 }
 
@@ -1183,7 +1184,7 @@ body,
 
 .effect-preview-heading h2 {
   font-size: var(--openbitfun-type-flow-section-title-font-size);
-  line-height: var(--openbitfun-type-heading-page-line-height);
+  line-height: var(--openbitfun-type-flow-section-title-line-height);
 }
 
 .lab-eyebrow,
@@ -1306,7 +1307,7 @@ body,
 .type-sample-display {
   font-size: var(--openbitfun-type-heading-display-font-size);
   font-weight: var(--openbitfun-type-label-selected-font-weight);
-  line-height: var(--openbitfun-type-heading-page-line-height);
+  line-height: var(--openbitfun-type-heading-display-line-height);
 }
 
 .type-sample-title {
@@ -1608,7 +1609,7 @@ body,
   margin: 0;
   color: var(--openbitfun-color-content-secondary);
   font-size: var(--openbitfun-type-body-lg-font-size);
-  line-height: var(--openbitfun-type-modifier-leading-spacious-line-height);
+  line-height: var(--openbitfun-type-body-lg-line-height);
 }
 
 .guide-step-icon,
@@ -1641,9 +1642,16 @@ body,
   overflow: auto;
   padding: var(--openbitfun-space-5);
   color: var(--openbitfun-color-content-secondary);
-  font-family: var(--openbitfun-type-code-md-font-family);
-  font-size: var(--openbitfun-type-support-font-size);
-  line-height: var(--openbitfun-type-modifier-leading-loose-line-height);
+  font-family: var(--openbitfun-type-code-sm-font-family);
+  /* One code role for every snippet in the Lab: this card used to sit a step under the code panels
+     at 11px, which made two code sizes on one page. */
+  font-size: var(--openbitfun-type-code-sm-font-size);
+  line-height: var(--openbitfun-type-code-sm-line-height);
+}
+
+/* The UA sheet gives <code> the generic monospace; inherit the card's code role instead. */
+.guide-code-card pre > code {
+  font-family: inherit;
 }
 
 /* Resources */
@@ -1752,7 +1760,7 @@ body,
 .pattern-navigation-copy p {
   color: var(--openbitfun-color-content-secondary);
   font-size: var(--openbitfun-type-support-font-size);
-  line-height: var(--openbitfun-type-body-lg-line-height);
+  line-height: var(--openbitfun-type-support-line-height);
 }
 
 .pattern-settings {
@@ -2067,7 +2075,7 @@ body,
   max-width: 680px;
   color: var(--openbitfun-color-content-secondary);
   font-size: var(--openbitfun-type-body-md-font-size);
-  line-height: var(--openbitfun-type-support-line-height);
+  line-height: var(--openbitfun-type-body-md-line-height);
 }
 
 .component-meta-row {
@@ -2350,6 +2358,7 @@ body,
 .component-code-panel--standalone,
 .component-inspector {
   overflow: hidden;
+  border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
   border-radius: var(--openbitfun-radius-lg);
   background: var(--openbitfun-color-surface-panel);
 }
@@ -2365,17 +2374,19 @@ body,
 
 .component-panel-heading h2 {
   margin: 0;
+  font-family: var(--openbitfun-type-heading-section-font-family);
   font-size: var(--openbitfun-type-heading-section-font-size);
   letter-spacing: var(--openbitfun-type-heading-section-letter-spacing);
-  font-family: var(--openbitfun-type-heading-section-font-family);
   font-weight: var(--openbitfun-type-heading-section-font-weight);
-  line-height: var(--openbitfun-type-heading-section-line-height);
+  line-height: var(--openbitfun-type-modifier-leading-ui-line-height);
 }
 
 .component-panel-heading > span,
 .component-code-heading > div > span {
   color: var(--openbitfun-color-content-muted);
+  font-family: var(--openbitfun-type-meta-font-family);
   font-size: var(--openbitfun-type-micro-font-size);
+  letter-spacing: var(--openbitfun-type-meta-letter-spacing);
   text-transform: capitalize;
 }
 
@@ -2590,7 +2601,7 @@ body,
   margin: 0;
   color: var(--openbitfun-color-content-muted);
   font-size: var(--openbitfun-type-body-sm-font-size);
-  line-height: var(--openbitfun-type-body-md-line-height);
+  line-height: var(--openbitfun-type-body-sm-line-height);
 }
 
 .component-dialog-example__model-card {
@@ -2608,12 +2619,12 @@ body,
 .component-dialog-example__model-card > strong {
   color: var(--openbitfun-color-content-primary);
   font-size: var(--openbitfun-type-body-md-font-size);
-  line-height: var(--openbitfun-type-heading-page-line-height);
+  line-height: var(--openbitfun-type-body-md-line-height);
 }
 
 .component-dialog-example__model-card > span {
   font-size: var(--openbitfun-type-body-sm-font-size);
-  line-height: var(--openbitfun-type-body-md-line-height);
+  line-height: var(--openbitfun-type-body-sm-line-height);
 }
 
 .component-scroll-area-example {
@@ -2952,7 +2963,7 @@ body,
 }
 
 .component-preview-matrix__column-label[data-last] {
-  border-radius: 0;
+  border-radius: var(--openbitfun-radius-sm);
 }
 
 .component-preview-matrix__row-label {
@@ -2979,12 +2990,30 @@ body,
   box-shadow: none;
 }
 
+/* The state matrix reads as a table: a rule under the column heads, a rule beside the row heads. */
+.component-preview-matrix__corner,
+.component-preview-matrix__column-label {
+  border-bottom: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
+}
+
+.component-preview-matrix__row-label {
+  border-inline-end: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
+}
+
+.component-preview-matrix__column-label,
+.component-preview-matrix__row-label {
+  font-family: var(--openbitfun-type-code-sm-font-family);
+  font-size: var(--openbitfun-type-label-xs-font-size);
+  letter-spacing: var(--openbitfun-type-modifier-tracking-wide-letter-spacing);
+}
+
 .component-preview-matrix[data-component="button"] [data-openbitfun-component="button"] {
   min-width: 112px;
 }
 
 .button-state-surface {
   width: 100%;
+  border-radius: var(--openbitfun-radius-md);
   background: var(--openbitfun-color-surface-panel);
 }
 
@@ -2994,9 +3023,29 @@ body,
 
 .button-state-surface > h3 {
   margin: 0;
-  padding: var(--openbitfun-space-4);
-  color: var(--openbitfun-color-content-primary);
-  font-size: var(--openbitfun-type-body-sm-font-size);
+  padding: var(--openbitfun-space-4) var(--openbitfun-space-6);
+  border-bottom: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
+  color: var(--openbitfun-color-content-caption);
+  font-family: var(--openbitfun-type-label-xs-font-family);
+  font-size: var(--openbitfun-type-label-xs-font-size);
+  font-weight: var(--openbitfun-font-weight-regular);
+  letter-spacing: var(--openbitfun-type-label-xs-letter-spacing);
+}
+
+/* A specimen that sits below the state matrix reads as its own ruled row, not a trailing note. */
+.component-preview-row {
+  display: flex;
+  align-items: center;
+  gap: var(--openbitfun-space-4);
+  padding: var(--openbitfun-space-4) var(--openbitfun-space-6);
+  border-top: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
+}
+
+.component-preview-row > code {
+  color: var(--openbitfun-color-content-caption);
+  font-family: var(--openbitfun-type-code-sm-font-family);
+  font-size: var(--openbitfun-type-label-xs-font-size);
+  letter-spacing: var(--openbitfun-type-modifier-tracking-wide-letter-spacing);
 }
 
 .component-code-panel--standalone {
@@ -3015,8 +3064,8 @@ body,
   border: 0;
   color: var(--openbitfun-color-content-secondary);
   background: var(--openbitfun-color-surface-panel);
-  font-size: var(--openbitfun-type-body-xs-font-size);
-  line-height: var(--openbitfun-type-modifier-leading-loose-line-height);
+  font-size: var(--openbitfun-type-code-sm-font-size);
+  line-height: var(--openbitfun-type-code-sm-line-height);
 }
 
 .component-inspector {
@@ -3123,7 +3172,7 @@ body,
   place-items: center;
   padding: 0;
   border: 0;
-  border-radius: 0;
+  border-radius: var(--openbitfun-radius-md);
   color: var(--openbitfun-color-content-primary);
   background: transparent;
   min-inline-size: 0;
@@ -3355,7 +3404,7 @@ body,
 .colors-heading-copy p {
   color: var(--openbitfun-color-content-secondary);
   font-size: var(--openbitfun-type-body-md-font-size);
-  line-height: var(--openbitfun-type-support-line-height);
+  line-height: var(--openbitfun-type-body-md-line-height);
 }
 
 .colors-context-controls {
@@ -3478,7 +3527,7 @@ body,
 .semantic-color-table tbody td:last-child {
   color: var(--openbitfun-color-content-secondary);
   font-size: var(--openbitfun-type-support-font-size);
-  line-height: var(--openbitfun-type-body-md-line-height);
+  line-height: var(--openbitfun-type-support-line-height);
 }
 
 .semantic-color-table code,
diff --git a/design-system/apps/design-lab/vite.config.ts b/design-system/apps/design-lab/vite.config.ts
index aef8934f70..ccf2dfcd40 100644
--- a/design-system/apps/design-lab/vite.config.ts
+++ b/design-system/apps/design-lab/vite.config.ts
@@ -35,6 +35,10 @@ export default defineConfig(({ command }) => ({
               find: /^@openbitfun\/ui\/flow-chat$/,
               replacement: path.join(uiSourceDirectory, "flow-chat.ts"),
             },
+            {
+              find: /^@openbitfun\/ui\/mobile$/,
+              replacement: path.join(uiSourceDirectory, "mobile.ts"),
+            },
             {
               find: /^@openbitfun\/ui\/registry$/,
               replacement: path.join(uiSourceDirectory, "registry.ts"),
diff --git a/design-system/apps/design-lab/vite/component-detail-contract.test.mjs b/design-system/apps/design-lab/vite/component-detail-contract.test.mjs
index 062fc4b94c..c32677a087 100644
--- a/design-system/apps/design-lab/vite/component-detail-contract.test.mjs
+++ b/design-system/apps/design-lab/vite/component-detail-contract.test.mjs
@@ -5,6 +5,8 @@ import { componentRegistry } from "@openbitfun/ui/registry";
 
 const detailSource = new URL("../src/pages/ComponentDetailPage.tsx", import.meta.url);
 const catalogSource = new URL("../src/pages/ComponentsPage.tsx", import.meta.url);
+const componentIndexSource = new URL("../src/components/LabComponentIndex.tsx", import.meta.url);
+const componentNavigationSource = new URL("../src/componentNavigation.ts", import.meta.url);
 const appSource = new URL("../src/App.tsx", import.meta.url);
 const flowChatPreviewSource = new URL("../src/preview/FlowChatPreviewRegistry.tsx", import.meta.url);
 const flowChatGallerySource = new URL("../src/preview/FlowChatToolGallery.tsx", import.meta.url);
@@ -68,9 +70,10 @@ test("preview matrices define horizontal columns for every registered state coun
 });
 
 test("FlowChat component details are registry-driven and stack every state vertically", async () => {
-  const [detail, catalog, preview, styles] = await Promise.all([
+  const [detail, catalog, index, preview, styles] = await Promise.all([
     readFile(detailSource, "utf8"),
     readFile(catalogSource, "utf8"),
+    readFile(componentIndexSource, "utf8"),
     readFile(flowChatPreviewSource, "utf8"),
     readFile(stylesSource, "utf8"),
   ]);
@@ -80,7 +83,7 @@ test("FlowChat component details are registry-driven and stack every state verti
   assert.match(detail, /className="flow-chat-state-list__item"/);
   assert.match(detail, /data-component-name=\{component\.name\}/);
   assert.doesNotMatch(detail, /component-preview-matrix[^]*data-component="flow-chat-tool-card"/);
-  assert.match(catalog, /const catalogComponents = componentRegistry\.filter/);
+  assert.match(index, /const catalogComponents = componentRegistry\.filter/);
   assert.doesNotMatch(catalog, /definition\.section === "framework"/);
   assert.match(preview, /flowChatPreviewDefinitions/);
   assert.match(preview, /AmbientToolCard/);
@@ -100,9 +103,10 @@ test("FlowChat component details are registry-driven and stack every state verti
 });
 
 test("FlowChat gallery consumes the production inventory and shared lifecycle presenter", async () => {
-  const [app, catalog, gallery, preview, scenarios] = await Promise.all([
+  const [app, catalog, navigation, gallery, preview, scenarios] = await Promise.all([
     readFile(appSource, "utf8"),
     readFile(catalogSource, "utf8"),
+    readFile(componentNavigationSource, "utf8"),
     readFile(flowChatGallerySource, "utf8"),
     readFile(flowChatPreviewSource, "utf8"),
     readFile(new URL("../src/preview/FlowChatScenarios.tsx", import.meta.url), "utf8"),
@@ -111,7 +115,7 @@ test("FlowChat gallery consumes the production inventory and shared lifecycle pr
   assert.match(app, /const flowChatComponents = componentRegistry\.filter/);
   assert.match(app, /route === "flow-chat"/);
   assert.match(app, /\["components", "component", "mobile", "flow-chat"\]\.includes\(route\.page\)/);
-  assert.match(app, /route\.page === "flow-chat" \? "flow-chat" : undefined/);
+  assert.match(navigation, /page === "flow-chat" \? "flow-chat" : undefined/);
   assert.match(catalog, /category === "flow-chat"/);
   assert.match(catalog, /<FlowChatToolGallery onOpenComponent=\{onOpenComponent\} \/>/);
   assert.match(gallery, /<FlowChatComponentPreview/);
diff --git a/design-system/apps/design-lab/vite/component-preview-render.test.mjs b/design-system/apps/design-lab/vite/component-preview-render.test.mjs
index 578a9bffe3..b4837c4ab1 100644
--- a/design-system/apps/design-lab/vite/component-preview-render.test.mjs
+++ b/design-system/apps/design-lab/vite/component-preview-render.test.mjs
@@ -11,6 +11,7 @@ let server;
 let render;
 let presentation;
 let renderPage;
+let renderDirectory;
 
 before(async () => {
   // Load actual Lab modules without a browser, generated inspector, or mock components.
@@ -23,6 +24,7 @@ before(async () => {
     appType: "custom",
   });
   const { ComponentsPage } = await server.ssrLoadModule("/src/pages/ComponentsPage.tsx");
+  const { LabComponentIndex } = await server.ssrLoadModule("/src/components/LabComponentIndex.tsx");
   const { I18nContext } = await server.ssrLoadModule("/src/i18n/I18nProvider.tsx");
   const { messages } = await server.ssrLoadModule("/src/i18n/messages.ts");
   const { translateFromCatalog } = await server.ssrLoadModule("/src/i18n/core.mjs");
@@ -35,6 +37,10 @@ before(async () => {
     colorScheme: "light", contrast: "standard", density: "compact", mode: "light",
     tokenOverrides: {}, onModeChange() {}, onDensityChange() {},
   })));
+  // The directory is the rail's tree now, so it is rendered the way the rail renders it.
+  renderDirectory = (selected) => renderToStaticMarkup(createElement(I18nContext.Provider, {
+    value: { locale: "zh-CN", setLocale() {}, t: (key, params) => translateFromCatalog(messages, "zh-CN", key, params) },
+  }, createElement(LabComponentIndex, { selected })));
   render = (name) => {
     const component = componentRegistry.find(item => item.name === name) ?? { name, states: ["default"], props: [], tokens: [], category: "form", description: "", maturity: "stable" };
     const html = renderToStaticMarkup(createElement(I18nContext.Provider, {
@@ -48,7 +54,9 @@ before(async () => {
     assert.ok(preview, `Missing preview panel: ${name}`);
     assert.equal((html.match(/<main\b/g) ?? []).length, 1, "The preview must be embedded in the library page");
     if (componentRegistry.some(item => item.name === name)) {
-      assert.ok(html.includes(`href="#component/${name.toLowerCase()}" aria-current="page"`), `Missing selected navigation entry: ${name}`);
+      const directory = renderDirectory(component.name);
+      assert.ok(directory.includes(`href="#component/${name.toLowerCase()}" aria-current="page"`), `Missing selected navigation entry: ${name}`);
+      assert.ok(!html.includes('class="design-library-sidebar"'), "The directory must not be drawn twice");
     }
     return { html, preview };
   };
diff --git a/design-system/apps/design-lab/vite/icon-consumers.test.mjs b/design-system/apps/design-lab/vite/icon-consumers.test.mjs
index 7258c4b542..b04f34e81a 100644
--- a/design-system/apps/design-lab/vite/icon-consumers.test.mjs
+++ b/design-system/apps/design-lab/vite/icon-consumers.test.mjs
@@ -9,10 +9,19 @@ test("Lab navigation, theme resources and export actions consume the shared icon
   assert.match(app, /name="settings"/);
   assert.match(app, /icon: "palette"/);
   assert.doesNotMatch(app, /\b(?:Palette|Settings2)\b/);
-  for (const page of ["ResourcesPage", "GettingStartedPage"]) {
+  const resources = await source("pages/ResourcesPage.tsx");
+  assert.match(resources, /icon: "palette"/);
+  assert.match(resources, /<CatalogIcon name=\{Icon\}/);
+  assert.doesNotMatch(resources, /\bPalette\b/);
+  /* The guide's three steps are shared with the homepage (see components/GuideContract), so the
+     catalog icon they consume lives in the block; the pages only render the block. */
+  const guide = await source("components/GuideContract.tsx");
+  assert.match(guide, /icon: "palette"/);
+  assert.match(guide, /<CatalogIcon name=\{Icon\}/);
+  assert.doesNotMatch(guide, /\bPalette\b/);
+  for (const page of ["GettingStartedPage", "OverviewPage"]) {
     const markup = await source(`pages/${page}.tsx`);
-    assert.match(markup, /icon: "palette"/);
-    assert.match(markup, /<CatalogIcon name=\{Icon\}/);
+    assert.match(markup, /<GuideStepList/);
     assert.doesNotMatch(markup, /\bPalette\b/);
   }
   const workbench = await source("token-editor/TokenWorkbench.tsx");
@@ -22,11 +31,12 @@ test("Lab navigation, theme resources and export actions consume the shared icon
 
 test("the website has three primary destinations and a unified public catalog", async () => {
   const source = relative => readFile(new URL(`../src/${relative}`, import.meta.url), "utf8");
-  const [app, navigation, catalog] = await Promise.all([source("App.tsx"), source("components/LabNavigation.tsx"), source("pages/ComponentsPage.tsx")]);
+  const [app, navigation, catalog, index, directory] = await Promise.all([source("App.tsx"), source("components/LabNavigation.tsx"), source("pages/ComponentsPage.tsx"), source("components/LabComponentIndex.tsx"), source("componentNavigation.ts")]);
   assert.match(navigation, /\["components", "foundations", "brand"\]/);
-  assert.match(app, /category=\{route.page === "mobile" \? "mobile" : route.page === "flow-chat" \? "flow-chat" : undefined\}/);
-  assert.match(catalog, /const catalogComponents = componentRegistry\.filter/);
-  assert.match(catalog, /<nav className="design-library-list"/);
+  assert.match(app, /category=\{libraryCategory\(route\.page\)\}/);
+  assert.match(directory, /page === "mobile" \? "mobile" : page === "flow-chat" \? "flow-chat" : undefined/);
+  assert.match(index, /const catalogComponents = componentRegistry\.filter/);
+  assert.match(index, /<nav className="design-library-list"/);
   assert.match(catalog, /<ComponentDetailPage key=\{selectedComponent.name\} embedded/);
   assert.doesNotMatch(app, /expandedComponentGroups|lab-standard-component-links/);
 });

From 1db8b557e8a40fd8206b645e099523c6bec16b93 Mon Sep 17 00:00:00 2001
From: Cinnnnnnndy <wangxindi0126@outlook.com>
Date: Tue, 13 Oct 2026 17:33:16 +0800
Subject: [PATCH 3/6] fix(design-lab): Centre the hero figure on the copy text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The emblem was centred against the whole copy column, so the action row
under the support line pulled the artwork 50px below the middle of the
words it stands beside. Lift it by half that row's footprint — written
from the button's own control height and the margin above it, so the
figure keeps its relation to the text if either one changes.

The lift is a translate rather than a margin, so the hero keeps its height
and the first screen still fits the whole picture. Reset it where the
breakpoint stacks the mark under the copy.

Co-authored-by: OpenBitFun <318544290+bitfun-ai@users.noreply.github.com>
---
 .../apps/design-lab/src/pages/OverviewPage.css       | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/design-system/apps/design-lab/src/pages/OverviewPage.css b/design-system/apps/design-lab/src/pages/OverviewPage.css
index e8e9c08b54..2e8d9cede3 100644
--- a/design-system/apps/design-lab/src/pages/OverviewPage.css
+++ b/design-system/apps/design-lab/src/pages/OverviewPage.css
@@ -83,6 +83,15 @@
      competing with it. One factor here, and both caps below follow it, so the artwork keeps its
      ratio to the column at every width. */
   --_lab-hero-art: 0.64;
+  /* The figure is centred on the copy text, not on the whole copy column. The action row under
+     the support line would otherwise pull the artwork down by half its footprint, so the mark
+     ends up 50px below the middle of the words it stands beside — the gap the eye reads as a
+     misalignment. Half the footprint is written from the same two things that build that row
+     (the button's own control height and the margin above it), so the figure keeps its relation
+     to the text if either one changes. It is a translate rather than a margin or padding on
+     purpose: the lift must not add a single pixel of height to the hero, because the hero's
+     height is what the first screen has left over for the picture. */
+  --_lab-hero-lift: calc((var(--openbitfun-control-height-md) + var(--openbitfun-space-8) * var(--_lab-home-air)) / 2);
 
   justify-self: center;
   width: min(calc(100% * var(--_lab-hero-art)), calc(400px * var(--_lab-hero-art)));
@@ -90,6 +99,7 @@
   aspect-ratio: 1;
   color: var(--openbitfun-color-content-primary);
   pointer-events: none;
+  translate: 0 calc(-1 * var(--_lab-hero-lift));
 }
 
 /* The hatch owns the box, and the avatar fills whatever the box resolved to, so the character
@@ -507,7 +517,7 @@
 @media (max-width: 860px) {
   .lab-page.design-home { gap: calc(var(--openbitfun-space-12) * var(--_lab-home-air)); }
   .design-home-hero { grid-template-columns: minmax(0, 1fr); gap: var(--openbitfun-space-6); padding-block: 0 calc(var(--openbitfun-space-12) * var(--_lab-home-air)); }
-  .design-home-emblem { grid-column: 1; grid-row: 2; justify-self: start; width: min(calc(40% * var(--_lab-hero-art)), calc(var(--openbitfun-space-16) * 3 * var(--_lab-hero-art))); }
+  .design-home-emblem { grid-column: 1; grid-row: 2; justify-self: start; width: min(calc(40% * var(--_lab-hero-art)), calc(var(--openbitfun-space-16) * 3 * var(--_lab-hero-art))); translate: 0; }
   .design-home-preview-shell { grid-template-columns: minmax(0, 1fr); }
   .design-home-preview-sidebar { display: none; }
   .design-home-preview-stage { gap: calc(var(--openbitfun-space-6) * var(--_lab-home-air)); padding-inline: var(--openbitfun-space-4); }

From cc13e4ad1d02dd7b09378b20d764f8e76fb3c392 Mon Sep 17 00:00:00 2001
From: Cinnnnnnndy <wangxindi0126@outlook.com>
Date: Tue, 13 Oct 2026 17:34:42 +0800
Subject: [PATCH 4/6] fix(design-lab): Give the homepage back its top air
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The air above the hero had been halved to squeeze the whole picture into
the first screen, which left the headline with almost no top margin. Put
it back on the page's own rhythm — the same space-16 × air the page uses
between its blocks — and take the trade the other way round: the picture
starts on the first screen and finishes just under the fold, so about
seven eighths of it shows. Seeing the picture start is enough; the rest
is one scroll away.

Co-authored-by: OpenBitFun <318544290+bitfun-ai@users.noreply.github.com>
---
 .../design-lab/src/pages/OverviewPage.css     | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/design-system/apps/design-lab/src/pages/OverviewPage.css b/design-system/apps/design-lab/src/pages/OverviewPage.css
index 2e8d9cede3..2ffaead98b 100644
--- a/design-system/apps/design-lab/src/pages/OverviewPage.css
+++ b/design-system/apps/design-lab/src/pages/OverviewPage.css
@@ -15,11 +15,12 @@
   gap: calc(var(--openbitfun-space-16) * var(--_lab-home-air));
   /* No block-end padding: the closing band is full bleed and therefore ends the page itself — its own
      padding is what keeps the last line off the bottom of the window.
-     The air above the hero is the one gap on this page that is not the page's own rhythm: it is set
-     so the hero and the picture below it land in the first screen together, which is the whole point
-     of a homepage that shows a moving picture — a reader who has to scroll to see the blocks change
-     never sees them change. */
-  padding-block: calc(var(--openbitfun-space-8) * var(--_lab-home-air)) 0;
+     The air above the hero is the page's own rhythm (the same space-16 × air the page puts between
+     its blocks), so the nav sits over the headline the way every other block sits over the next.
+     It was briefly halved to squeeze the whole picture into the first screen; that read as a page
+     with no top margin, and the trade was the wrong way round — a reader only has to see the
+     picture start to know it is there, and the rest of it is one scroll away. */
+  padding-block: calc(var(--openbitfun-space-16) * var(--_lab-home-air)) 0;
 }
 
 /* Hero: one line of copy on the left, the brand mark as a standalone graphic top-right.
@@ -143,10 +144,11 @@
    picture, and the destinations. Products' own sample data stays English; the chrome labels are
    locale-invariant too (see designMessages.ts), so the frame never translates half-way. */
 .design-home-preview {
-  /* The stage is the frame's largest state and it is what the first screen has left over: topbar,
-     the air above the hero, the hero itself, and the page's gap are fixed, so the picture takes the
-     rest of the window and the surfaces it morphs between are all visible without scrolling. Capped
-     so it never outgrows a tall window, floored so it stays a legible picture on a short one — the
+  /* The stage is the frame's largest state. It is sized from the window, not from the space left
+     over: the page spends its top air on the hero, so the picture is a little taller than the gap
+     the first screen has for it and finishes just under the fold on a 1000px window — about seven
+     eighths of it shows, which is enough to see the picture and to see it start changing. Capped so
+     it never outgrows a tall window, floored so it stays a legible picture on a short one — the
      morph's own geometries are clamped by the stage, so every surface follows this height. */
   block-size: clamp(380px, calc(100dvh - 552px), 560px);
   /* The frame is a picture of the product, not of the Lab: anything inside that inherits

From d57cbf960aa215146dba7d97828240c668913e90 Mon Sep 17 00:00:00 2001
From: Cinnnnnnndy <wangxindi0126@outlook.com>
Date: Tue, 13 Oct 2026 17:42:35 +0800
Subject: [PATCH 5/6] feat(design-lab): Put the homepage picture on its own
 band
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The showcase picture was a window floating on the page's canvas. Give it a
full-bleed band — the same device as the closing band, the same gutter
expression, no radius and no hairline — so the frame reads as a picture
placed on a surface. Its fill is a mix toward the page's own content
primary rather than a surface token, because the tokens that read as a grey
in light mode (tertiary, workbench) collapse onto the canvas in dark and
would erase the band for readers who keep dark on.

The band's block padding runs through the page's air, so the plate around
the picture breathes with everything else, and both bands now take one
gutter expression from the page instead of carrying a copy each.

Co-authored-by: OpenBitFun <318544290+bitfun-ai@users.noreply.github.com>
---
 .../design-lab/src/pages/OverviewPage.css     |  31 ++-
 .../design-lab/src/pages/OverviewPage.tsx     | 192 +++++++++---------
 2 files changed, 122 insertions(+), 101 deletions(-)

diff --git a/design-system/apps/design-lab/src/pages/OverviewPage.css b/design-system/apps/design-lab/src/pages/OverviewPage.css
index 2ffaead98b..f756ce1c8d 100644
--- a/design-system/apps/design-lab/src/pages/OverviewPage.css
+++ b/design-system/apps/design-lab/src/pages/OverviewPage.css
@@ -1,5 +1,6 @@
-/* Editorial homepage: hero, an empty showcase stage, a component sample, then
-   the three destinations. Sections are separated by hairlines, never fills.
+/* Editorial homepage: the hero, the showcase picture on its own band, the guide's contract block,
+   then the closing band. Space separates the blocks that share the page's canvas; the two bands that
+   leave the column — the showcase and the footer — separate themselves with a fill.
 
    Vertical rhythm: every block padding, section gap and stack gap on this page runs through
    --_lab-home-air, so the whole page loosens or tightens from one number instead of from a dozen
@@ -9,6 +10,10 @@
    composition, not the breathing room. Air is inherited, so the footer reads the same variable. */
 .lab-page.design-home {
   --_lab-home-air: 2;
+  /* One gutter expression for both bands that leave the centred column (the showcase and the closing
+     band): the shell's auto margin plus the page's own inner padding. Below the shell's width cap
+     that expression goes negative, which is what the max() floors. */
+  --_lab-column-gutter: max(var(--openbitfun-space-6), calc((100vw - var(--_lab-content-width)) / 2 + var(--openbitfun-space-6)));
 
   display: flex;
   flex-direction: column;
@@ -133,6 +138,24 @@
   margin-top: calc(var(--openbitfun-space-8) * var(--_lab-home-air));
 }
 
+/* The picture sits on a band of its own: a full-bleed wash that runs past the page's column, so the
+   frame reads as a picture placed on a surface rather than a window floating on the page. It is the
+   same band device as the closing band — same gutter expression, no radius, no hairline — but it
+   takes a step of the ink scale instead of a fill of its own colour. A mix toward the page's own
+   content primary is the one wash that stays a band in both schemes: the surface tokens that read as
+   a grey in light mode (tertiary, workbench) collapse onto the canvas in dark, which would erase the
+   band exactly for the readers who keep dark on. Padding runs through the page's air, so the plate
+   around the picture breathes with everything else. */
+.design-home-showcase {
+  --_lab-band-pad-block: calc(var(--openbitfun-space-6) * var(--_lab-home-air));
+
+  inline-size: 100vw;
+  margin-inline: calc(50% - 50vw);
+  padding-block: var(--_lab-band-pad-block);
+  padding-inline: var(--_lab-column-gutter);
+  background: color-mix(in srgb, var(--openbitfun-color-content-primary) 8%, var(--openbitfun-color-surface-canvas));
+}
+
 /* The showcase is a picture of the product rather than a screenshot: one frame holding the app's
    sidebar and the welcome screen it opens on — brand mark, greeting, and the composer the user
    types into. It is assembled from the same parts the product uses (NavigationPanel, SearchField,
@@ -320,10 +343,6 @@
    tile; if a surface-inverse token is ever added, this is the line that should switch to it. */
 .design-home-footer {
   --_lab-band-pad-block: calc(var(--openbitfun-space-12) * var(--_lab-home-air));
-  /* The band is the viewport, not the page's column, so it reproduces the column gutter in its own
-     padding: the shell's auto margin plus the page's 36px inner padding. Below the shell's width cap
-     that expression goes negative, which is what the max() floors. */
-  --_lab-column-gutter: max(var(--openbitfun-space-6), calc((100vw - var(--_lab-content-width)) / 2 + var(--openbitfun-space-6)));
   --_lab-on-dark: var(--openbitfun-color-content-on-dark);
   --_lab-on-dark-secondary: color-mix(in srgb, var(--openbitfun-color-content-on-dark) 72%, transparent);
   --_lab-on-dark-muted: color-mix(in srgb, var(--openbitfun-color-content-on-dark) 50%, transparent);
diff --git a/design-system/apps/design-lab/src/pages/OverviewPage.tsx b/design-system/apps/design-lab/src/pages/OverviewPage.tsx
index cbec78959a..fbe0ea0440 100644
--- a/design-system/apps/design-lab/src/pages/OverviewPage.tsx
+++ b/design-system/apps/design-lab/src/pages/OverviewPage.tsx
@@ -119,105 +119,107 @@ export function OverviewPage({ onNavigate, colorScheme, contrast, density, token
         </header>
       </section>
 
-      <ThemeRoot className="design-home-preview" aria-hidden="true" {...{ inert: "" }} {...theme}>
-        <MultiSurfaceMorph>
-          <div className="design-home-preview-shell">
-            {/* Sidebar: the design system's own NavigationPanel, so the picture is assembled from the
-                same parts the product assembles it from. The panel keeps its block-fill selection and
-                drops its footer rule — this frame separates regions with fills and space, not lines. */}
-            <NavigationPanel className="design-home-preview-sidebar">
-              <NavigationPanelHeader className="design-home-preview-search">
-                <SearchField aria-label={t("design.homePreview.search")} leadingIcon={<Icon name="search" />}
-                  placeholder={t("design.homePreview.search")} readOnly size="sm" tabIndex={-1}
-                  shortcut={<KeyHint icon={<Icon name="command-mac" />}>K</KeyHint>} />
-                <IconButton aria-label={t("design.homePreview.newSession")} icon={<Icon name="plus" />}
-                  size="sm" tabIndex={-1} variant="fill" />
-              </NavigationPanelHeader>
-              <NavigationPanelBody scrollbarVisibility="hidden">
-                <NavigationPanelContent>
-                  <div className="design-home-preview-navigation">
-                    {previewNavigation.map(item => (
-                      <NavigationPanelItem key={item.id} className="design-home-preview-session"
-                        leading={<Icon name={item.icon} />} tabIndex={-1}>{t(item.label)}</NavigationPanelItem>
-                    ))}
-                  </div>
-                  <NavigationPanelSection title={t("design.homePreview.sessions")}>
-                    {previewSessions.map(row => (
-                      <NavigationPanelItem key={row.id} className={row.indent ? "design-home-preview-session design-home-preview-session--child" : "design-home-preview-session"}
-                        leading={row.icon ? <Icon name={row.icon} /> : undefined} metadata={row.metadata} selected={row.selected} tabIndex={-1}>
-                        {row.name}
-                      </NavigationPanelItem>
-                    ))}
-                  </NavigationPanelSection>
-                </NavigationPanelContent>
-              </NavigationPanelBody>
-              <NavigationPanelFooter className="design-home-preview-device">
-                <span><Icon name="device-mac" />MacBook-Air</span>
-                <IconButton aria-label={t("design.homePreview.settings")} icon={<Icon name="gear" />} size="sm" tabIndex={-1} variant="quiet" />
-              </NavigationPanelFooter>
-            </NavigationPanel>
+      <div className="design-home-showcase">
+        <ThemeRoot className="design-home-preview" aria-hidden="true" {...{ inert: "" }} {...theme}>
+          <MultiSurfaceMorph>
+            <div className="design-home-preview-shell">
+              {/* Sidebar: the design system's own NavigationPanel, so the picture is assembled from the
+                  same parts the product assembles it from. The panel keeps its block-fill selection and
+                  drops its footer rule — this frame separates regions with fills and space, not lines. */}
+              <NavigationPanel className="design-home-preview-sidebar">
+                <NavigationPanelHeader className="design-home-preview-search">
+                  <SearchField aria-label={t("design.homePreview.search")} leadingIcon={<Icon name="search" />}
+                    placeholder={t("design.homePreview.search")} readOnly size="sm" tabIndex={-1}
+                    shortcut={<KeyHint icon={<Icon name="command-mac" />}>K</KeyHint>} />
+                  <IconButton aria-label={t("design.homePreview.newSession")} icon={<Icon name="plus" />}
+                    size="sm" tabIndex={-1} variant="fill" />
+                </NavigationPanelHeader>
+                <NavigationPanelBody scrollbarVisibility="hidden">
+                  <NavigationPanelContent>
+                    <div className="design-home-preview-navigation">
+                      {previewNavigation.map(item => (
+                        <NavigationPanelItem key={item.id} className="design-home-preview-session"
+                          leading={<Icon name={item.icon} />} tabIndex={-1}>{t(item.label)}</NavigationPanelItem>
+                      ))}
+                    </div>
+                    <NavigationPanelSection title={t("design.homePreview.sessions")}>
+                      {previewSessions.map(row => (
+                        <NavigationPanelItem key={row.id} className={row.indent ? "design-home-preview-session design-home-preview-session--child" : "design-home-preview-session"}
+                          leading={row.icon ? <Icon name={row.icon} /> : undefined} metadata={row.metadata} selected={row.selected} tabIndex={-1}>
+                          {row.name}
+                        </NavigationPanelItem>
+                      ))}
+                    </NavigationPanelSection>
+                  </NavigationPanelContent>
+                </NavigationPanelBody>
+                <NavigationPanelFooter className="design-home-preview-device">
+                  <span><Icon name="device-mac" />MacBook-Air</span>
+                  <IconButton aria-label={t("design.homePreview.settings")} icon={<Icon name="gear" />} size="sm" tabIndex={-1} variant="quiet" />
+                </NavigationPanelFooter>
+              </NavigationPanel>
 
-            {/* Pane: the window the product opens on — its session tabs, then the welcome screen. */}
-            <div className="design-home-preview-pane">
-              <div className="design-home-preview-pane-head">
-                <SegmentedControl aria-label={t("design.homePreview.sessions")} size="sm" tone="neutral" variant="pills"
-                  value="welcome" options={[
-                    { value: "welcome", label: t("design.homePreview.welcome") },
-                    { value: "settings", label: t("design.homePreview.settings") },
-                  ]} />
-              </div>
-              <div className="design-home-preview-stage">
-                <div className="design-home-preview-welcome">
-                  <OpenBitFunSolidMark className="design-app-mark design-home-preview-welcome-mark" size={48} />
-                  {/* The product's welcome screen is a display PageHeader; the picture uses the same
-                      part, so the greeting and its line keep the roles the product publishes. */}
-                  <PageHeader align="center" className="design-home-preview-welcome-header" level={2} size="display"
-                    title={t("design.homePreview.greeting")} description={t("design.homePreview.support")} />
+              {/* Pane: the window the product opens on — its session tabs, then the welcome screen. */}
+              <div className="design-home-preview-pane">
+                <div className="design-home-preview-pane-head">
+                  <SegmentedControl aria-label={t("design.homePreview.sessions")} size="sm" tone="neutral" variant="pills"
+                    value="welcome" options={[
+                      { value: "welcome", label: t("design.homePreview.welcome") },
+                      { value: "settings", label: t("design.homePreview.settings") },
+                    ]} />
+                </div>
+                <div className="design-home-preview-stage">
+                  <div className="design-home-preview-welcome">
+                    <OpenBitFunSolidMark className="design-app-mark design-home-preview-welcome-mark" size={48} />
+                    {/* The product's welcome screen is a display PageHeader; the picture uses the same
+                        part, so the greeting and its line keep the roles the product publishes. */}
+                    <PageHeader align="center" className="design-home-preview-welcome-header" level={2} size="display"
+                      title={t("design.homePreview.greeting")} description={t("design.homePreview.support")} />
+                  </div>
+                  <ChatComposer aria-label={t("components.preview.composerLabel")} className="design-home-preview-composer"
+                    layout="expanded"
+                    contextBar={(
+                      <ComposerContextBar
+                        leading={(
+                          <>
+                            <Button size="xs" tabIndex={-1} trailingIcon={<Icon name="chevron-down" />} variant="text">
+                              {t("design.homePreview.contextMachine")}
+                            </Button>
+                            <ComposerDivider />
+                            <Button size="xs" tabIndex={-1} trailingIcon={<Icon name="chevron-down" />} variant="text">BitFun</Button>
+                            <ComposerDivider />
+                            <span className="design-home-preview-context">1.0.0-explore</span>
+                            <ComposerDivider />
+                            <span className="design-home-preview-context">
+                              <Icon name="unselected" size="2xs" />
+                              {t("design.homePreview.contextWorkspace")}
+                            </span>
+                          </>
+                        )}
+                        trailing={<StatusPill emphasis tone="success">{t("design.homePreview.contextAsk")}</StatusPill>}
+                      />
+                    )}
+                    startActions={(
+                      <Button size="sm" leadingIcon={<Icon name="plus" />} tabIndex={-1} variant="text">
+                        {t("design.homePreview.mode")}
+                      </Button>
+                    )}
+                    endActions={(
+                      <>
+                        <Button size="sm" tabIndex={-1} trailingIcon={<Icon name="chevron-down" />} variant="text">deepseek-v4-pro high</Button>
+                        <ChatComposerActionButton aria-label={t("design.homePreview.composerVoice")} icon={<Icon name="mic" />}
+                          tabIndex={-1} variant="fill" />
+                        <ChatComposerActionButton aria-label={t("components.preview.composerSend")} icon={<Icon name="arrow-up" />}
+                          tabIndex={-1} variant="primary" />
+                      </>
+                    )}>
+                    <span className="design-home-preview-placeholder">{t("design.homePreview.composerPlaceholder")}</span>
+                  </ChatComposer>
                 </div>
-                <ChatComposer aria-label={t("components.preview.composerLabel")} className="design-home-preview-composer"
-                  layout="expanded"
-                  contextBar={(
-                    <ComposerContextBar
-                      leading={(
-                        <>
-                          <Button size="xs" tabIndex={-1} trailingIcon={<Icon name="chevron-down" />} variant="text">
-                            {t("design.homePreview.contextMachine")}
-                          </Button>
-                          <ComposerDivider />
-                          <Button size="xs" tabIndex={-1} trailingIcon={<Icon name="chevron-down" />} variant="text">BitFun</Button>
-                          <ComposerDivider />
-                          <span className="design-home-preview-context">1.0.0-explore</span>
-                          <ComposerDivider />
-                          <span className="design-home-preview-context">
-                            <Icon name="unselected" size="2xs" />
-                            {t("design.homePreview.contextWorkspace")}
-                          </span>
-                        </>
-                      )}
-                      trailing={<StatusPill emphasis tone="success">{t("design.homePreview.contextAsk")}</StatusPill>}
-                    />
-                  )}
-                  startActions={(
-                    <Button size="sm" leadingIcon={<Icon name="plus" />} tabIndex={-1} variant="text">
-                      {t("design.homePreview.mode")}
-                    </Button>
-                  )}
-                  endActions={(
-                    <>
-                      <Button size="sm" tabIndex={-1} trailingIcon={<Icon name="chevron-down" />} variant="text">deepseek-v4-pro high</Button>
-                      <ChatComposerActionButton aria-label={t("design.homePreview.composerVoice")} icon={<Icon name="mic" />}
-                        tabIndex={-1} variant="fill" />
-                      <ChatComposerActionButton aria-label={t("components.preview.composerSend")} icon={<Icon name="arrow-up" />}
-                        tabIndex={-1} variant="primary" />
-                    </>
-                  )}>
-                  <span className="design-home-preview-placeholder">{t("design.homePreview.composerPlaceholder")}</span>
-                </ChatComposer>
               </div>
             </div>
-          </div>
-        </MultiSurfaceMorph>
-      </ThemeRoot>
+          </MultiSurfaceMorph>
+        </ThemeRoot>
+      </div>
 
       {/* Usage: the guide's contract block, moved into the page's closing stretch so a reader who
           has seen the picture is told how the blocks are actually consumed before the footer sends

From 020dc295f24cf3422b0008af350e3256bca24b05 Mon Sep 17 00:00:00 2001
From: Cinnnnnnndy <wangxindi0126@outlook.com>
Date: Tue, 13 Oct 2026 17:43:12 +0800
Subject: [PATCH 6/6] revert(design-lab): Take the showcase band back off the
 homepage

The grey band under the picture read worse than the picture sitting
directly on the page's canvas, so the picture goes back to floating on the
canvas and the homepage keeps space-only separation between its blocks.
Reverts d57cbf9.

Co-authored-by: OpenBitFun <318544290+bitfun-ai@users.noreply.github.com>
---
 .../design-lab/src/pages/OverviewPage.css     |  31 +--
 .../design-lab/src/pages/OverviewPage.tsx     | 192 +++++++++---------
 2 files changed, 101 insertions(+), 122 deletions(-)

diff --git a/design-system/apps/design-lab/src/pages/OverviewPage.css b/design-system/apps/design-lab/src/pages/OverviewPage.css
index f756ce1c8d..2ffaead98b 100644
--- a/design-system/apps/design-lab/src/pages/OverviewPage.css
+++ b/design-system/apps/design-lab/src/pages/OverviewPage.css
@@ -1,6 +1,5 @@
-/* Editorial homepage: the hero, the showcase picture on its own band, the guide's contract block,
-   then the closing band. Space separates the blocks that share the page's canvas; the two bands that
-   leave the column — the showcase and the footer — separate themselves with a fill.
+/* Editorial homepage: hero, an empty showcase stage, a component sample, then
+   the three destinations. Sections are separated by hairlines, never fills.
 
    Vertical rhythm: every block padding, section gap and stack gap on this page runs through
    --_lab-home-air, so the whole page loosens or tightens from one number instead of from a dozen
@@ -10,10 +9,6 @@
    composition, not the breathing room. Air is inherited, so the footer reads the same variable. */
 .lab-page.design-home {
   --_lab-home-air: 2;
-  /* One gutter expression for both bands that leave the centred column (the showcase and the closing
-     band): the shell's auto margin plus the page's own inner padding. Below the shell's width cap
-     that expression goes negative, which is what the max() floors. */
-  --_lab-column-gutter: max(var(--openbitfun-space-6), calc((100vw - var(--_lab-content-width)) / 2 + var(--openbitfun-space-6)));
 
   display: flex;
   flex-direction: column;
@@ -138,24 +133,6 @@
   margin-top: calc(var(--openbitfun-space-8) * var(--_lab-home-air));
 }
 
-/* The picture sits on a band of its own: a full-bleed wash that runs past the page's column, so the
-   frame reads as a picture placed on a surface rather than a window floating on the page. It is the
-   same band device as the closing band — same gutter expression, no radius, no hairline — but it
-   takes a step of the ink scale instead of a fill of its own colour. A mix toward the page's own
-   content primary is the one wash that stays a band in both schemes: the surface tokens that read as
-   a grey in light mode (tertiary, workbench) collapse onto the canvas in dark, which would erase the
-   band exactly for the readers who keep dark on. Padding runs through the page's air, so the plate
-   around the picture breathes with everything else. */
-.design-home-showcase {
-  --_lab-band-pad-block: calc(var(--openbitfun-space-6) * var(--_lab-home-air));
-
-  inline-size: 100vw;
-  margin-inline: calc(50% - 50vw);
-  padding-block: var(--_lab-band-pad-block);
-  padding-inline: var(--_lab-column-gutter);
-  background: color-mix(in srgb, var(--openbitfun-color-content-primary) 8%, var(--openbitfun-color-surface-canvas));
-}
-
 /* The showcase is a picture of the product rather than a screenshot: one frame holding the app's
    sidebar and the welcome screen it opens on — brand mark, greeting, and the composer the user
    types into. It is assembled from the same parts the product uses (NavigationPanel, SearchField,
@@ -343,6 +320,10 @@
    tile; if a surface-inverse token is ever added, this is the line that should switch to it. */
 .design-home-footer {
   --_lab-band-pad-block: calc(var(--openbitfun-space-12) * var(--_lab-home-air));
+  /* The band is the viewport, not the page's column, so it reproduces the column gutter in its own
+     padding: the shell's auto margin plus the page's 36px inner padding. Below the shell's width cap
+     that expression goes negative, which is what the max() floors. */
+  --_lab-column-gutter: max(var(--openbitfun-space-6), calc((100vw - var(--_lab-content-width)) / 2 + var(--openbitfun-space-6)));
   --_lab-on-dark: var(--openbitfun-color-content-on-dark);
   --_lab-on-dark-secondary: color-mix(in srgb, var(--openbitfun-color-content-on-dark) 72%, transparent);
   --_lab-on-dark-muted: color-mix(in srgb, var(--openbitfun-color-content-on-dark) 50%, transparent);
diff --git a/design-system/apps/design-lab/src/pages/OverviewPage.tsx b/design-system/apps/design-lab/src/pages/OverviewPage.tsx
index fbe0ea0440..cbec78959a 100644
--- a/design-system/apps/design-lab/src/pages/OverviewPage.tsx
+++ b/design-system/apps/design-lab/src/pages/OverviewPage.tsx
@@ -119,107 +119,105 @@ export function OverviewPage({ onNavigate, colorScheme, contrast, density, token
         </header>
       </section>
 
-      <div className="design-home-showcase">
-        <ThemeRoot className="design-home-preview" aria-hidden="true" {...{ inert: "" }} {...theme}>
-          <MultiSurfaceMorph>
-            <div className="design-home-preview-shell">
-              {/* Sidebar: the design system's own NavigationPanel, so the picture is assembled from the
-                  same parts the product assembles it from. The panel keeps its block-fill selection and
-                  drops its footer rule — this frame separates regions with fills and space, not lines. */}
-              <NavigationPanel className="design-home-preview-sidebar">
-                <NavigationPanelHeader className="design-home-preview-search">
-                  <SearchField aria-label={t("design.homePreview.search")} leadingIcon={<Icon name="search" />}
-                    placeholder={t("design.homePreview.search")} readOnly size="sm" tabIndex={-1}
-                    shortcut={<KeyHint icon={<Icon name="command-mac" />}>K</KeyHint>} />
-                  <IconButton aria-label={t("design.homePreview.newSession")} icon={<Icon name="plus" />}
-                    size="sm" tabIndex={-1} variant="fill" />
-                </NavigationPanelHeader>
-                <NavigationPanelBody scrollbarVisibility="hidden">
-                  <NavigationPanelContent>
-                    <div className="design-home-preview-navigation">
-                      {previewNavigation.map(item => (
-                        <NavigationPanelItem key={item.id} className="design-home-preview-session"
-                          leading={<Icon name={item.icon} />} tabIndex={-1}>{t(item.label)}</NavigationPanelItem>
-                      ))}
-                    </div>
-                    <NavigationPanelSection title={t("design.homePreview.sessions")}>
-                      {previewSessions.map(row => (
-                        <NavigationPanelItem key={row.id} className={row.indent ? "design-home-preview-session design-home-preview-session--child" : "design-home-preview-session"}
-                          leading={row.icon ? <Icon name={row.icon} /> : undefined} metadata={row.metadata} selected={row.selected} tabIndex={-1}>
-                          {row.name}
-                        </NavigationPanelItem>
-                      ))}
-                    </NavigationPanelSection>
-                  </NavigationPanelContent>
-                </NavigationPanelBody>
-                <NavigationPanelFooter className="design-home-preview-device">
-                  <span><Icon name="device-mac" />MacBook-Air</span>
-                  <IconButton aria-label={t("design.homePreview.settings")} icon={<Icon name="gear" />} size="sm" tabIndex={-1} variant="quiet" />
-                </NavigationPanelFooter>
-              </NavigationPanel>
-
-              {/* Pane: the window the product opens on — its session tabs, then the welcome screen. */}
-              <div className="design-home-preview-pane">
-                <div className="design-home-preview-pane-head">
-                  <SegmentedControl aria-label={t("design.homePreview.sessions")} size="sm" tone="neutral" variant="pills"
-                    value="welcome" options={[
-                      { value: "welcome", label: t("design.homePreview.welcome") },
-                      { value: "settings", label: t("design.homePreview.settings") },
-                    ]} />
-                </div>
-                <div className="design-home-preview-stage">
-                  <div className="design-home-preview-welcome">
-                    <OpenBitFunSolidMark className="design-app-mark design-home-preview-welcome-mark" size={48} />
-                    {/* The product's welcome screen is a display PageHeader; the picture uses the same
-                        part, so the greeting and its line keep the roles the product publishes. */}
-                    <PageHeader align="center" className="design-home-preview-welcome-header" level={2} size="display"
-                      title={t("design.homePreview.greeting")} description={t("design.homePreview.support")} />
+      <ThemeRoot className="design-home-preview" aria-hidden="true" {...{ inert: "" }} {...theme}>
+        <MultiSurfaceMorph>
+          <div className="design-home-preview-shell">
+            {/* Sidebar: the design system's own NavigationPanel, so the picture is assembled from the
+                same parts the product assembles it from. The panel keeps its block-fill selection and
+                drops its footer rule — this frame separates regions with fills and space, not lines. */}
+            <NavigationPanel className="design-home-preview-sidebar">
+              <NavigationPanelHeader className="design-home-preview-search">
+                <SearchField aria-label={t("design.homePreview.search")} leadingIcon={<Icon name="search" />}
+                  placeholder={t("design.homePreview.search")} readOnly size="sm" tabIndex={-1}
+                  shortcut={<KeyHint icon={<Icon name="command-mac" />}>K</KeyHint>} />
+                <IconButton aria-label={t("design.homePreview.newSession")} icon={<Icon name="plus" />}
+                  size="sm" tabIndex={-1} variant="fill" />
+              </NavigationPanelHeader>
+              <NavigationPanelBody scrollbarVisibility="hidden">
+                <NavigationPanelContent>
+                  <div className="design-home-preview-navigation">
+                    {previewNavigation.map(item => (
+                      <NavigationPanelItem key={item.id} className="design-home-preview-session"
+                        leading={<Icon name={item.icon} />} tabIndex={-1}>{t(item.label)}</NavigationPanelItem>
+                    ))}
                   </div>
-                  <ChatComposer aria-label={t("components.preview.composerLabel")} className="design-home-preview-composer"
-                    layout="expanded"
-                    contextBar={(
-                      <ComposerContextBar
-                        leading={(
-                          <>
-                            <Button size="xs" tabIndex={-1} trailingIcon={<Icon name="chevron-down" />} variant="text">
-                              {t("design.homePreview.contextMachine")}
-                            </Button>
-                            <ComposerDivider />
-                            <Button size="xs" tabIndex={-1} trailingIcon={<Icon name="chevron-down" />} variant="text">BitFun</Button>
-                            <ComposerDivider />
-                            <span className="design-home-preview-context">1.0.0-explore</span>
-                            <ComposerDivider />
-                            <span className="design-home-preview-context">
-                              <Icon name="unselected" size="2xs" />
-                              {t("design.homePreview.contextWorkspace")}
-                            </span>
-                          </>
-                        )}
-                        trailing={<StatusPill emphasis tone="success">{t("design.homePreview.contextAsk")}</StatusPill>}
-                      />
-                    )}
-                    startActions={(
-                      <Button size="sm" leadingIcon={<Icon name="plus" />} tabIndex={-1} variant="text">
-                        {t("design.homePreview.mode")}
-                      </Button>
-                    )}
-                    endActions={(
-                      <>
-                        <Button size="sm" tabIndex={-1} trailingIcon={<Icon name="chevron-down" />} variant="text">deepseek-v4-pro high</Button>
-                        <ChatComposerActionButton aria-label={t("design.homePreview.composerVoice")} icon={<Icon name="mic" />}
-                          tabIndex={-1} variant="fill" />
-                        <ChatComposerActionButton aria-label={t("components.preview.composerSend")} icon={<Icon name="arrow-up" />}
-                          tabIndex={-1} variant="primary" />
-                      </>
-                    )}>
-                    <span className="design-home-preview-placeholder">{t("design.homePreview.composerPlaceholder")}</span>
-                  </ChatComposer>
+                  <NavigationPanelSection title={t("design.homePreview.sessions")}>
+                    {previewSessions.map(row => (
+                      <NavigationPanelItem key={row.id} className={row.indent ? "design-home-preview-session design-home-preview-session--child" : "design-home-preview-session"}
+                        leading={row.icon ? <Icon name={row.icon} /> : undefined} metadata={row.metadata} selected={row.selected} tabIndex={-1}>
+                        {row.name}
+                      </NavigationPanelItem>
+                    ))}
+                  </NavigationPanelSection>
+                </NavigationPanelContent>
+              </NavigationPanelBody>
+              <NavigationPanelFooter className="design-home-preview-device">
+                <span><Icon name="device-mac" />MacBook-Air</span>
+                <IconButton aria-label={t("design.homePreview.settings")} icon={<Icon name="gear" />} size="sm" tabIndex={-1} variant="quiet" />
+              </NavigationPanelFooter>
+            </NavigationPanel>
+
+            {/* Pane: the window the product opens on — its session tabs, then the welcome screen. */}
+            <div className="design-home-preview-pane">
+              <div className="design-home-preview-pane-head">
+                <SegmentedControl aria-label={t("design.homePreview.sessions")} size="sm" tone="neutral" variant="pills"
+                  value="welcome" options={[
+                    { value: "welcome", label: t("design.homePreview.welcome") },
+                    { value: "settings", label: t("design.homePreview.settings") },
+                  ]} />
+              </div>
+              <div className="design-home-preview-stage">
+                <div className="design-home-preview-welcome">
+                  <OpenBitFunSolidMark className="design-app-mark design-home-preview-welcome-mark" size={48} />
+                  {/* The product's welcome screen is a display PageHeader; the picture uses the same
+                      part, so the greeting and its line keep the roles the product publishes. */}
+                  <PageHeader align="center" className="design-home-preview-welcome-header" level={2} size="display"
+                    title={t("design.homePreview.greeting")} description={t("design.homePreview.support")} />
                 </div>
+                <ChatComposer aria-label={t("components.preview.composerLabel")} className="design-home-preview-composer"
+                  layout="expanded"
+                  contextBar={(
+                    <ComposerContextBar
+                      leading={(
+                        <>
+                          <Button size="xs" tabIndex={-1} trailingIcon={<Icon name="chevron-down" />} variant="text">
+                            {t("design.homePreview.contextMachine")}
+                          </Button>
+                          <ComposerDivider />
+                          <Button size="xs" tabIndex={-1} trailingIcon={<Icon name="chevron-down" />} variant="text">BitFun</Button>
+                          <ComposerDivider />
+                          <span className="design-home-preview-context">1.0.0-explore</span>
+                          <ComposerDivider />
+                          <span className="design-home-preview-context">
+                            <Icon name="unselected" size="2xs" />
+                            {t("design.homePreview.contextWorkspace")}
+                          </span>
+                        </>
+                      )}
+                      trailing={<StatusPill emphasis tone="success">{t("design.homePreview.contextAsk")}</StatusPill>}
+                    />
+                  )}
+                  startActions={(
+                    <Button size="sm" leadingIcon={<Icon name="plus" />} tabIndex={-1} variant="text">
+                      {t("design.homePreview.mode")}
+                    </Button>
+                  )}
+                  endActions={(
+                    <>
+                      <Button size="sm" tabIndex={-1} trailingIcon={<Icon name="chevron-down" />} variant="text">deepseek-v4-pro high</Button>
+                      <ChatComposerActionButton aria-label={t("design.homePreview.composerVoice")} icon={<Icon name="mic" />}
+                        tabIndex={-1} variant="fill" />
+                      <ChatComposerActionButton aria-label={t("components.preview.composerSend")} icon={<Icon name="arrow-up" />}
+                        tabIndex={-1} variant="primary" />
+                    </>
+                  )}>
+                  <span className="design-home-preview-placeholder">{t("design.homePreview.composerPlaceholder")}</span>
+                </ChatComposer>
               </div>
             </div>
-          </MultiSurfaceMorph>
-        </ThemeRoot>
-      </div>
+          </div>
+        </MultiSurfaceMorph>
+      </ThemeRoot>
 
       {/* Usage: the guide's contract block, moved into the page's closing stretch so a reader who
           has seen the picture is told how the blocks are actually consumed before the footer sends