The five authored tokens, each as one live, replayable demo. Every demo is driven through MOTION.[name].resolve(reduce) (or emphasize), so the name you read maps to the motion you feel — and to exactly what ships.

Buttons

Primary actions are neutral ink — near-white on dark, never blue. Hover and press states shift within the neutral ramp; disabled recedes without changing hue.

Focus

Keyboard focus is one of the few places brand blue appears as system affordance: a single 2px ring, no glow, no offset shadow. Tab through the controls above to see it.

Inspect on demand

AnchoredPopover is a top-layer panel the browser positions and dismisses — native popover semantics plus CSS anchor positioning, no JavaScript measurement. Overflow counts, field annotations, and cell details use it; menus with selection state stay on DropdownMenu.

Kbd

A static mono micro-chip for keyboard hints — hairline, 11px, tabular-nums, tertiary ink. A single string is one chip (a combo like ⌘K); an array becomes a sequence joined by a quiet connector (“N then W”). It never receives focus and never animates; it only labels the shortcut that fires the same action elsewhere.

Command menu

A ⌘K palette built on cmdk: dark, hairline, fully keyboard-navigable, calm fade-and-settle motion (no scale bounce). It carries two row kinds — jump (go to X, via an onJump navigator the host supplies) and act (run an action) — and renders a Kbd hint per row. The rows above are a preset for this page; the primitive hardcodes no routes. Press ⌘K / Ctrl+K to open it, type to filter (try “send” or a non-match to see the empty state), and ↑↓ + Enter to run a row.

Row engine · calm register

Calm (Read.cv): a dated entry, whitespace as the separator, no card or border. The title leads, metadata sits right.

Row engine · dense register

Dense (Linear): leading glyph + mono id + title + inline chips + trailing meta, flush, with a hover band. Both registers are the same engine — only the recipe variant changes.

RowGroup · collapsible dense list

A label + count + chevron header that folds a stack of Rows open and shut. Calm open/close, keyboard-accessible, instant under reduced-motion. Distinct from Section, which is a page band.

Presets · proof workspace

Presets · activity, actions, milestones, opportunities

tones · panel · raised · dark · media · bare

Depth comes from a soft layered shadow plus an inset top highlight (the object register), never a hairline border. The dark tile is the bold inverted object — the page's visual signature — built from the system's own inversion tokens so it stays a bold ink slab in both themes. Color comes from contrast, never a gradient.

spans + tall · rhythm from columns, not masonry

Rhythm comes from column spans, not row-span masonry (which tears the moment one tile's real content runs taller than its neighbour). A tall tile earns real vertical room for the monumental focal.

interactive · hover-lift, one rationed-blue ring, active press

When the whole tile is a target it gains the shared response: it rises and its shadow deepens on hover, lands the one rationed-blue focus-visible ring with an offset on keyboard focus, and depresses on press — then settles on a clean ease (no bounce, no loop, reduced-motion-guarded). Tab through these to see the ring.

standard · compact-row · embedded

state matrix · rest / interactive / disabled / loading / empty / error

Hover and tab the interactive tile to see the lift, the rationed-blue focus ring, and the momentary active press — all settling, never looping, all reduced-motion-guarded. Disabled recedes without changing hue; loading reserves the shape; empty and error are honest, never broken boxes.

populated · identity + counter strip + actions

graduating from empty · one project, still substantial

MatchCard · one routed opportunity

A matched opportunity built around one hero action — apply with your record. Beta-framed, freshness-stamped, and the gap is shown honestly (neutral, never red).

ProvenanceReadiness · how much is backed

Not a profile-completion percentage and not a quality score — warm recognition of provenance (sourced, dated, witnessed). No meter, no fill bar. A single rationed blue check appears only once every entry is sourced, an earned state.

VelocityGraph · work cadence over time

A flat contribution heatmap — time is the spine. Gated on a real cadence (≥5 active days) so a sparse record never leads with empty squares. No glow, no motion; hover/focus is a quiet ring, never a scale bounce.

SendKit · prepared to share

The share surface — strongest link, a ready snippet, and the one signal worth watching. Assembled from the record, never invented.

TrustGapCard · one honest gap to repair

Names a real gap and why it matters — never a judgment of the work itself, never a score. One thing to fix, stated plainly.

PublicProofTimeline · the inspectable path

The reviewer-facing path — strongest artifact, milestones, sources, and answered questions in one inspectable order.

OwnerVouchPanel · the builder's private view

Closes the vouch loop for the builder: pending requests and completed vouches (who, how they know you, what they witnessed). Owner-only, so one honest next step on empty is allowed.

Input

Textarea

Select

Switch

DropField

One field that takes a pasted link/description, a dragged-in file, and a file picker — the join DROP front door. It reuses Input's field chrome, so the focus ring and tokens are identical. The source marker beneath is an honest client-side text read (never fake activity); Enter submits, Shift+Enter keeps a newline. Type a URL to watch the marker resolve and the Add button go primary.

Toaster · success / error / info

Bottom-right, hairline card, auto-dismiss (~4s). The surface stays neutral; only the leading icon tints — blue for done, red for error, neutral for info. No pulse, no loop: it marks one event, then leaves.

Skeleton · single sweep, static under reduced motion

One sheen sweep that runs once and rests — not an ambient loop. Under `prefers-reduced-motion` the sweep is omitted entirely and the placeholder is a flat, tinted block. Tints come from `--skeleton-base` / `--skeleton-sheen`.

EmptyState · one honest next step / error

Owner surfaces get exactly one honest next step (a link or an action), never filler prose. Public surfaces render nothing instead — the no-filler rule lives at the call site. `error` re-tints the frame to the destructive channel without changing the layout.

Section · page band (distinct from RowGroup)

A layout band: reading-width wrapper + page rhythm, separated by whitespace, no border or fill. Intentionally not a `RowGroup` (which groups list rows) and not a `Card` (a single inspectable object).

Filter · selection chips (calm, no scale)

Selection routes through an interactive chip: a real button with `aria-pressed`, color-only motion (no hover/press scale — §1). Selected = neutral-ink fill; the quiet tone keeps a hairline instead.

Rail · persistent side context

A flat hairline aside that stacks `RailSection` groups of `RailItem` rows. The active item carries a single blue (success-channel) border — blue means selected/active, rationed. Calm color transitions only.

AnchoredPopover · inspect on demand

A top-layer panel the browser positions and dismisses — native popover semantics (light dismiss + Esc) plus CSS anchor positioning, zero JS measurement. For overflow counts and field details; menus with selection state stay on DropdownMenu.

Drawer · mobile sheet

The mobile sheet: hairline top edge, named `rounded-shell` corner, safe-area padding, swipe-to-dismiss. vaul owns the focus trap and scroll lock; the global reduced-motion rule clamps the slide to instant.

Chip · interactive token (selectable / removable)

The interactive half of the Badge/Chip boundary. Selection is the primary state — a single rationed blue fill (`selected`), rendered as a real button with `aria-pressed`. Removable tags keep a nested dismiss target. Motion is color-only; the old scale entrance is gone.

StatusTag · calm (default) vs pill emphasis

Default is `calm` — the dot carries the tone color, the label stays neutral (the Vercel/Linear deploy-list idiom). `emphasis="pill"` is the louder bordered/tinted form, reserved for places status must shout. Static dot only; no pulse.

Surface · flat base, border-stepped elevation

Surfaces separate by hairline, never by box-shadow, and never by glass. Elevation is a border step. Glass is reserved for floating chrome (below).

Card · the inspectable object + its parts

Card is a Surface preset for a single object (project, work entry, vouch). No glass, no card-in-card. Motion stays calm — color, border, opacity only.

MetricTile · true-value stat, tabular

PageHeader · eyebrow + title + actions

PageShell · Rail + PageHeader + content, responsive switch built in

One canonical frame. Pass nav and the rail shows on md+ with the content beside it; omit it and PageShell keeps its legacy centered gutter for a layout-owned sidebar.

Material · floating chrome (the only glass)

Glass — backdrop-blur on a translucent fill — lives only here, on chrome that floats over content (the owner toolbar, the auth nav pill, the docks below). Never on a Card or a record surface.

SourceStatusDock · honest source state

MobileActionDock · thumb zone, ≥44px, safe-area inset (mobile only)

The real dock is fixed + md:hidden; here it renders inline (non-fixed) at full width so its composition is visible on desktop. On a phone it sits in the thumb zone, lifted clear of the home indicator.

Desktop rail · flat Surface, persistent, neutral-ink + rationed-blue active

The persistent left rail is a flat Surface — a hairline border-border on the content background, never glass and never a shadow. Each item is a real Link with aria-current="page" on the active route. Active reads as neutral ink plus a single blue mark (the success token), not a green readiness ring and not a filled tab. Focus is the one blue ring; motion is a 150ms color settle, no hover scale or pulse.

Mobile dock · floating glass Material, md:hidden, thumb zone, bottom-20

The per-screen action dock is the only glass in the shell: MaterialLayer tone="strong", floating chrome, md:hidden, ≥44px targets in the thumb zone. The real dock is fixed at bottom-20 (5rem) so it floats 12px ABOVE the z-50 command bar instead of colliding behind it; the command bar below owns the home-indicator safe-area inset. Here the composition renders inline so it is visible on desktop.