Layout

The flex layout primitive that keeps spacing on the system scale, from the 3px mosaic gutter to the viewport-relative section rhythm tiers. It spaces children and does nothing else.

Chaptered sections that pin and stack as you scroll. Each sticky panel slides over the last at an escalating z-index, with a hairline top rule. Pure CSS positioning — no script.

A pinned panel synced to scrolling steps. The steps column scrolls past while one panel stays fixed, crossfading its media as each step’s band reaches viewport centre. Scroll this section to drive it. Below md the panel unpins and each step’s media renders inline. The active step is derived from scroll position, so it stays correct under reduced motion — a content swap, not an animation.

A page-scale split with a persistent lead rail and a longer detail column. The lead pins at lg, then returns to ordinary source order on smaller screens. It owns only the split, seam, and sticky geometry; the host supplies headings, navigation, actions, and supporting content.

A single-select accordion of titled rows with a synced media panel. Exactly one row is open at a time, and the panel shows that row’s media. It follows the disclosure-set keyboard model: Tab reaches every header, Up/Down/Home/End move focus, and Enter/Space activate. The panel media is illustrative only; below md it renders inline in the open row instead. Disclosure contents settle in 300ms and retreat in 180ms; the pinned media crossfades more slowly.

The foundational band: a full-bleed register wrapping a centered measure. Vertical space rides the rhythm tokens; the horizontal gutter follows --gutter-fluid and the display safe area. invert flips the band to the dark register edge to edge — a static swap, not the scroll-driven SectionInvert.

The house section heading: a mono eyebrow, a fluid title, an optional lede dek, and a trailing action. When start-aligned, the action baselines against the title from md up and stacks below on mobile; when centered, it stacks along the same axis.

Editorial feature grid on paper. divided (default) lets cells draw shared 1px top/left rules while an overflow clip removes the perimeter, so ragged rows keep no empty painted tracks. Feed items for the data API or compose your own cells as children; an item with href makes the whole cell a self-dimming link.

A numbered feature matrix that pairs each claim with a compact example, diagram, metric, or interface fragment. Linked cells dim the full-ink title and settle their proof by one pixel; body and proof copy keep their specified contrast. Reduced motion keeps the proof still.

A squared viewport for showing working product UI at useful scale. The frame provides compact title chrome, an optional navigation rail, a content slot, and a status footer. It does not invent browser dots, shadows, or product behavior; all controls and data remain host-owned.

Alternating split feature row: a copy column beside a media column, two-up at md+ and stacked (media after copy) below. reverse swaps the columns at md+ for zig-zag layouts while source order stays copy-first, so the reading order holds regardless of the flip. Squared media frame, hairline edge, no shadow.

Asymmetric mosaic on paper, composed with BentoCell. Column count rides a CSS variable so the grid holds at one column below md (spans suppressed) and opens to columns equal tracks at md+. Standalone cells own a hairline frame; flush and hairline grids suppress those frames so each shared seam is drawn once. Add href to make one a self-dimming link.

A labelled navigation landmark for product rails. It accepts a flat list followed by optional named groups, plus fixed header and footer slots. Rows render as links when given href and buttons otherwise; every row keeps a 44px target and self-dims to /60. Collapsed mode hides labels only when an icon remains visible.

The product frame: a fixed left rail with a layout-safe, instant expanded ↔ icon-only width swap; its contents recede and settle through opacity and a four-pixel translation. A sticky topbar sits over the scrolling content region. Below md the rail folds into an off-canvas paper dialog with a labelled close control, background inertness, scroll-lock, Escape, focus containment, and trigger restoration. Pair it with SidebarNav, which takes flat items and grouped sections of rows carrying icon, badge and active state — the shell injects collapsed for you.

A page masthead for the content region: an optional breadcrumb rung, the title carrying an action cluster on the same baseline (md+; it drops below on phones), a dimmed lede, and an optional tab row seated on a hairline. Presentational — slots only.

Scroll-driven inversion with an instant threshold swap. The previous scrubbed color interpolation animated non-compositor properties and passed through low-contrast midpoint colors; both retained mode values now use the same discrete, motion-safe change. Scroll events are captured, so nested overflow containers drive it too. Interior rules should use currentColor so they invert in step.