Four text heights and four icon squares. The icon sizes tighten their radius with their box so a 24px square does not read as a circle.

A label on a thing. Not a status — a status is a StatusPill, because a status has a tone and a badge has a variant.

solid owns its box, its size and its ink, for a key advertised on a surface. bare carries none of the three, for a key named inside someone else's line — including a dark one, which it must not repaint grey.

The shadcn recipe, on ring-1 ring-foreground/10. Reach for Panel on a product surface; this is here because the primitive exists and because CardAction has no Panel equivalent.

TabsList variant: default is a filled track, line is a bare row for a page-level switch that must not read as a control.

Accordion when the items are a set and one at a time is the point; Collapsible when one block simply folds.

A Separator is a drawn line inside one card. Between sections of a page, use a dotted rule instead — see Lines below.

The gap between pressing Enter and the first token is the whole first impression of the surface, and it used to be blank. A grid of cells lighting in sequence reads as work without pretending to know how much is left; the counter answers the only question a person actually has.

A stroke tracing the mark's own route, clipped to the mark. Three sizes; LogoLoadingScreen is the same loader centred with a label.

Shape first. A skeleton that does not match the row it stands in is a second layout the reader has to learn and then unlearn.

A dashed box, never a bare sentence: the surface has to look like it is waiting rather than broken. The icon is drawn large and faint.

A tooltip names a thing in a handful of words. A hover card is for a preview with structure in it — and neither may hold something a person needs, because a pointer is not a promise.

Initials, not a coloured hash. AvatarGroup overlaps and AvatarGroupCount closes the row; AvatarBadge carries presence.

A decision that has to be answered before anything else continues. Header, body, footer — and the footer runs cancel then confirm, so the confirm sits under the thumb.

A drawer for detail beside the thing it belongs to. side takes top, right, bottom or left; right is the default and the one the product uses.

Actions on a row. Items, checkbox items, sub-menus and shortcut hints; a destructive item comes last, under a separator, so it is never the one you hit by momentum.

A small surface anchored to what opened it, for a fact or a two-field form. Not for a decision — that is a Dialog.

Mounted once by PlatformShell and called as toast(…) from anywhere. theme is stated, not asked — see docs/design.md §12.

Two paths — the loop and the two nodes it joins — exported as BIRD_LOGO_PATHS so a clipPath, a satori card or a blog cover draws the same mark. It used to be pasted into four files, which is how a mark drifts.

Absolutely positioned, so it needs a positioned parent. Both axes, a pitch, and a fade at whichever ends it runs to. A solid 1px border reads as a box; this reads as a drafting guide.

The hatch sits behind a panel's content, above its background, and takes its density from --pattern-fg. The dotted rule is the horizontal companion to the page rails.

The only two components in the package that animate in JS, so the only two that call useReducedMotion() — the CSS guard in tokens.css cannot reach a motion/react transform.

max-w-7xl, px-4 sm:px-6 lg:px-8, pt-8 pb-16. A list page wraps itself in this because the Agents-mode shell deliberately does not pad its content — the agent workspace wants every pixel.

Not in the package: it knows about the app. It owns the .site-app scope, the pinned viewport — h-svh plus overflow-hidden, which is what keeps the rail still while only content moves — and two variants: card for Gateway, where the content floats as a card on the tint, and flush for Agents, where pages wrap themselves.