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.--component-bg · --line · --yellow-solid · --red-solid
01Toast: the Notification chromeinfo · success · warning · danger
A toast is the Alert's Notification, fixed to the screen: --component-bg on --line, radius 4, only the icon tinted. Always dismissible. One optional action, an sm button in the toast's own variant; it also dismisses. Info is the default type.
Your transfers have been started.
We couldn't add some of your transfers.
Moved them all to Trash!
We couldn't add your transfers.
02Placement: one toast, bottom center
One toast at a time; a new one replaces it. 16px from the bottom, 400px wide (90% on phones), 3s by default, 5s for multi-transfer results. In fullscreen video it renders inside the player.
No internet connection
03Inline banner: top of viewproposed
app.put.io puts page-level state in an Alert (see Alert). This tinted banner, with a 3px accent edge, is not built.
Payment is processing. We're processing your payment at the moment and your account will be activated as soon as it completes.
04Badge & dot
Nav badges sit inline after the label: --component-bg, radius 4, a count or a word. List rows use the small yellow badge. The avatar dot flags an account-menu item.
Transfers2
Sharing1
ExtensionsUpdated!
3
app.put.io: the avatar dot's color is misspelled (yellow-wolid), so it ships without a fill. Drawn here as intended.