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.--yellow-solid · --radius-lg · --dur-fast · --ease-out
01Inline dropzone: three statesDropzone · react-dropzone
Dashed-border dropzone for embedded upload contexts (settings → upload avatar, new transfer modal). Idle → neutral. Drag accept → yellow border + tinted bg.
Drag reject → red border + tinted bg. Always shows the "or select" link as a click target.
Files larger than 100 GB aren't supported. Try a magnet link instead.
Paste a magnet or URL
Drag a torrent file, or paste a link with ⌘V.
02Full-screen overlay: drag-anywhere
Triggered when the user drags files anywhere in the app, not just over a dropzone. Yellow-tinted scrim with a 3px dashed border, big cloud glyph centered.
The underlying UI dims but stays visible through the backdrop blur.
Drop anywhere to upload
Files land in /Films/2024/Q1
03Upload progress: after drop
Once the upload starts, the dropzone collapses into a list of rows. Each row shows file glyph, name, progress bar, percent / rate, and a cancel button.
Completed rows turn green; failed turn red and keep their cancel as a "remove" affordance.