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.--yellow-solid · --radius-md · --radius-sm · --dur-fast
L · 01 Settings row · list item Settings · Account: icon, title, description, control on the right
Appearance
Theme
Choose your interface color scheme.
Transfers
Choose your default download folder
Unsorted
Use current folder for drag and drop and paste links
If you turn this on, we will download to the folder you're currently browsing.
Configure Pushover token
"Pushover" is a service that can send push notifications to your devices.
L · 02 Modal · stacked form New transfer · press T anywhere
New transfer
Saving to your default download folder.
Unsorted
Paste torrent links, magnet links, direct links or links to video pages from popular video sites.
Make put.io the default application when you click on a magnet link.
L · 03 Two-column grid proposed Not in app.put.io: Account fields are list rows to their own pages
First name
Last name
Email *
Country
Time zone
L · 04 Inline composer · one-row action proposed Not in app.put.io: links pasted outside a field start a transfer
/Movies/Unsorted
app.put.io: T opens New transfer Paste links anywhere outside a field
L · 05 Form callouts · block and inline states Form-level notices · field feedback
Block callouts
We’ll email you when the transfer finishes.
Your settings have been saved.
That folder is no longer available.
Inline callouts proposed
Use the email address linked to your account.
This email address is available.
Enter a valid email address.
Layout rules.
L · 01 settings save per row on change; a busy row disables its control and shows an indicator
L · 02 description sits above the field, the error below it in red caption text that eases in through .form-reveal; one primary bottom-right
L · 03 two-column grids for personal info, collapsing to one column under 640px
L · 04 the composer is a one-row exception, paste-and-go, no labels
L · 05 block callouts are app.put.io's notification: info, success, warning, danger. Field errors carry no icon
app.put.io draws these with theme-ui, radius 4 and flaticon icons; the Phosphor here is the system's.