Skeletons
Placeholder blocks shown while content loads. Mirror the shape of what is coming so the layout does not shift when the real content arrives.
Skeleton
Size it with w-/h- utilities and change the corner with rounded-*. The tint comes from the component, so pass only layout classes.
Source: src/components/ds/ui/index.tsx.
On any surface
The tint is an alpha overlay, not an opaque color, so it always reads lighter than whatever is behind it in dark mode and darker in light. An opaque surface token cannot do that: in dark mode it is lighter than the page but darker than a raised card, so it inverts as it moves between surfaces.
Grouping and accessibility
Each block is aria-hidden, so a lone skeleton announces nothing. Wrap a loading region in SkeletonGroup to give screen readers one message for the whole area. The pulse is wrapped in motion-safe:, so it holds still under prefers-reduced-motion.
Match the real layout
Reuse the same grid, gap, and block heights as the content it stands in for. A skeleton that does not match the loaded UI trades a blank screen for a layout shift.