Skip to content

role presentation

Skeleton draft v0.1.0

A placeholder shape that stands in for content while it loads.

A skeleton draws the outline of content that is not there yet: a line of text, an avatar, a card. Several skeletons laid out like the content they stand for tell people what is coming and where, with less jump than a spinner followed by the real content. A skeleton is invisible to assistive technology; the region that loads says so itself.

Decisions

From decisions in packages/components/specs/components/skeleton.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.

Color

  • A skeleton is filled with the Figma library's skeleton state color (global.bg.state.skeleton.default, translucent) and pulses between fully opaque and the 50 % opacity step, six times the normal duration per half cycle.

    skeleton-fill · 2026-10-03 · v0.1.0

    skeleton.container.backgroundskeleton.container.opacityskeleton.container.animation.*

Variant

  • Three shapes with default sizes from the space scale: text (16 px high, 2 px corners), circle (40 px, fully round) and rectangle (96 px high, 8 px corners); width and height are the consumer's.

    shapes · 2026-10-03 · v0.1.0

    skeleton.container.height.*skeleton.container.border-radius.*

Accessibility