Tier 1Web (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
01 Task dock Tasks
Jobs the user waits on: zip, download links, extract, copy to your disk, uploads. Each is a 300px card stacked in a dock fixed bottom-right. A spinner leads the title while it runs; the title turns green when done, red on error. The x cancels or dismisses.
running16px spinner in text colour, no bar: the server sends no percent
uploadsone card, a row per file, a 20px green donut per row; hover swaps in Pause
completedtitle green; zip and download links become a link with copy
failedtitle red, reason in the message; failed uploads get Retry
footer"Clear completed" once anything is done
Creating Package...

Preparing the package

Uploading...
The.Wire.S03E04.Back.Burners.1080p.BluRay.x264-DEMAND.mkv
3 GB
document-scan-march-2026.pdf
2 MB
IMG_4392.HEIC
Upload failed, please try again.
document-scan-march-2026.pdf and 4 other files2.1 GB

Please use a download manager, browsers are terrible at resuming broken downloads.

Couldn't Create Download Links for IMG_4392.HEIC and 2 other files

Sorry. We could not get download links for these files.

Clear completed
02 Progress primitives
bar6px --yellow-solid on --border, radius 4: the storage bar
row filltransfers fill their row background, see Transfer states
donut20px, --green-solid; --solid while paused
spinnertheme-ui spinner: 16px in tasks, 32px page loading
6px bar
donut · running / paused spinners 16 · 32
2px and 8px bars, a sliding indeterminate bar, and a yellow spinner arc proposed: not in app.put.io. Its icons come from the flaticon font.