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-pill · --component-bg-active · --yellow-solid · --red-text-secondary
01Task listTasks
Server-side jobs the user waits on: zip creation, remote upload, bulk move. States ride data-state="pending | loading | active | completed | failed".
determinate4px --yellow-solid on --component-bg-active
unknownsliding indeterminate bar, paused under reduced motion
completedglyph goes green
failedglyph red, inline reason, quiet Retry. Never a red-filled row
Creating zip · backup-photos-2025.zip
64% · 41.1 of 64.2 GB
Uploading to remote storage
preparing…
Moving 214 items to /archive
queued
Zip ready · concert-recordings.zip
2.1 GB · link expires in 7 days
Remote upload failed
Destination out of space (needs 12.1 GB, 3.4 GB free)
02Progress primitives
2pxhairline, inside rows and under toolbars
4pxdefault, tasks and transfers
8pxemphasis, storage bar
fill--yellow-solid on --component-bg-active. Green and red are terminal states only, never in-flight
spinneryellow arc on --component-bg-active, 16 / 20 / 28px