Precise enough for data. Human enough for decisions.

Stagger · first paint only

20ms per item, capped at six, and only the first time a list paints. Never on reorder, never on filter — a list that re-staggers on every keystroke reads as slow, not as alive.

Ongoing animations

Shimmer says a placeholder is waiting. Breathe says one thing is thinking — one dot, at the deliberate cadence, never a row of bouncing dots. The glow decays over 1.2s so the eye finds what changed in a 10,000-row grid.

List rows

SkeletonListRow reads the same --density-row as ListRow, so a list of placeholders is exactly as tall as the list that replaces it. Media, description and meta are opt-in per surface.

Key–value pairs

The term line is short and lighter, the value line is long. A panel of these reads as a record before a single value has arrived.

Table rows

DataTableSkeleton takes one width per column, so the header never jumps sideways when the body fills. The header, toolbar and footer stay live the whole time — a full-page skeleton for a shell the user already saw is a failure.

Toolbars

Controls hold their height so the surface below never slides up. The search field, the filter chips and the trailing action each keep their own footprint.

Cards and panels

A card skeleton mirrors its own anatomy: identity header, body copy, footer actions. It is built from the same slots as the card it replaces, which is why the two line up.

Charts and long copy

Bar heights are fixed, never random, so the placeholder never implies a shape the data does not have — and so the server and the client render the same thing. Paragraph skeletons end on a short line, the way real text does.

Variants

Petrol is the one primary. Brand blue carries progressive actions, soft and ghost carry utilities. Two primaries in one region is a review failure.

Sizes

24 / 28 / 32 / 40px, from inside a cell to a hero action. Icons scale with the control: 14 / 16 / 16 / 20px.

States

Loading swaps the leading icon for a spinner, keeps the label and the width, sets aria-busy and blocks re-entry. It never shrinks to a bare spinner.

Icon-only and groups

An IconButton always carries a label: it becomes the aria-label and the tooltip. ButtonGroup attaches related actions; the split button is a group whose second child opens a menu.

Links

Standalone links look like actions, inline links stay underlined inside a sentence, and external links carry the arrow plus rel=noreferrer.

Keyboard hints

Shortcuts are visible where the action is: in menus, in icon-button tooltips, and in the ? dialog. The modifier glyph resolves per platform at render, never hard-coded.

Input · sizes and states

Placeholder text never replaces a label. Read-only is muted but selectable; disabled is not. The loading spinner sits in the trailing slot so the field keeps its width.

Search and numbers

Search echoes the keystroke immediately and reports the value 150ms later; Esc clears. Number fields format on blur, and arrows step — Shift steps by ten.

Field anatomy

Label, description, control, error. The error replaces nothing — it is added below, so the layout does not jump when validation runs.

Selection

Select-all is a parent checkbox with a real indeterminate bar, not a dimmed check. Radio cards carry a description, so a choice is made once.

Text and Heading

Visual level is decoupled from the semantic tag: a card title can be an h3 that looks 14px. Numbers get tabular figures so columns of them align.

Badge · variant × tone

Soft is the default in dense surfaces, solid is for a single emphatic state, outline is for a badge sitting on a tinted background. Counts cap at 99+ so a badge never resizes its parent.

Chip

Filter chips read field · operator · value and open their editor on click. Backspace removes from the keyboard; the × removes from the pointer. Long values truncate rather than wrap the bar to a third line.

Identity

AMAmelia Morgan

JLJonas Lee

SOSarah Okaforonline

NCNils Carlsenoffline

NNorthwind

AMAmelia Morgan

JLJonas Lee

SOSarah Okafor

NCNils Carlsen

+2

Loading

People are round, companies are square — the shape is the type. The tint is derived from the record id, so the same person keeps the same colour on every surface. A failed logo falls back to a monogram without shifting the row.

Status, progress and credit pools

A meter changes tone at 20% and again at empty, so a low balance is seen before it is read. Progress only ever moves forward.

Loading and iconography

Skeletons match the final layout exactly and shimmer rather than pulse. Spinners belong on controls, never in place of a region skeleton. Icons come through Icon at 14/16/20/24 with stroke 1.75.

Empty · page

The wave motif appears only here and at milestones: brand gradient at low opacity, never a character.

Empty · panel and cell

The no-results variant offers the action that would widen the search, not a shrug. In a cell there is no illustration and no button.

Error · retryable and terminal

Three sentences maximum. The correlation id is there for a support conversation, small and out of the way.

Inline alert

Only the danger tone announces itself to assistive tech. Dismissal is the user’s call — an alert never times out on its own.

Dialog · a decision

Backdrop dims to 40% and blurs slightly; the page behind is inert and cannot scroll. Focus starts on the first field and returns to the trigger on close. A dialog never opens another dialog.

Alert dialog · the irreversible

Confirmation is reserved for what undo cannot fix. Initial focus is on Cancel, and above 50 rows the confirm needs the list name typed. Everything reversible skips this and gets an undo toast instead.

Sheet · work, not a decision

A sheet that holds work is non-modal and does not dim the page; one that holds a decision is modal. Both slide from their own edge over 240ms and leave over 160ms.

Menus

Destructive items sit last, after a separator, and take the danger tone only on hover and focus. Shortcuts are visible in the menu, not learned elsewhere.

Tooltip, popover, preview card

A tooltip waits 400ms, then siblings open instantly. A preview card waits 300ms and is never modal. A popover closes on outside click, on Esc, and when its trigger scrolls away.

Command palette

The palette is always one chord away, and it never animates: it is the most frequent action in the product, so it shows and filters instantly.

Sidebar and rail

Both render the same NavItem. In rail mode the label becomes the aria-label and the tooltip, and the count badge is dropped rather than squeezed.

Breadcrumb and pagination

The last crumb is the current page, not a link. Cursor pagination comes first because a server-shaped list rarely knows its page count; the row range is always spelled out.

Action hierarchy

Utility controls