Tier 1Tier 1 · Web (www / app / auth). The full design system: our component library and the components.css recipe. This is the one tier where the recipe is the contract, native tiers take the tokens and nothing else.--radius-sm · --component-bg-hover · --ease-in-out · --radius-lg
01 File-list skeleton Skeleton
Skeletons stand in for data with a known layout: the file list, the transfers table. The skeleton mirrors the real row grid so nothing jumps when content lands.
grid44px rows, same columns as the real list
base--component-bg
shimmer--component-bg-hover, only under prefers-reduced-motion: no-preference
fallbackstatic two-tone. Designed, not an afterthought
widthsvary the name bars so the list is not stamped
02 Which loading state, when
skeleton Layout known, data pending. Lists, tables, the storage card. Show immediately, no delay-then-skeleton double flash. spinner Layout unknown or action-scoped. Button loading (.is-loading), modal submit, player buffering. Sizes 16 / 20 / 28, see Tasks. progress bar Measurable work. Transfers, zips, uploads. Yellow fill; never a spinner when you know the percent. empty state Loaded, and there is nothing. Never render an empty state while loading, that reads as data loss. See Brand · Empty state.
One screen's worth of rows, maximum. Below the fold just loads. Under 150ms typical arrival, skip the skeleton: a flash of placeholder is worse than nothing.