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.--app-bg · --overlay-full · --radius-sm · --component-bg-hover
01 Overlays: modal · confirm · sheet · bottom sheet overlay-full scrim
app.put.io ships one modal: centered, 88px from the top, on the --overlay-full scrim. Surface is the page color (lo-contrast = --app-bg), no border or shadow, radius 4. Esc and the close it; a backdrop click does too, except on confirmations.
Modal · normal 640 · small 480 · large 1024
Confirmation · xsmall 340

Do you really want to delete The.Wire.S03E04.Back.Burners.1080p.BluRay.x264-DEMAND.mkv?

Side sheet proposed
New transfer
Paste links
Download folder
Bottom sheet proposed
The.Wire.S03E04.Back.Burners.1080p.BluRay.x264-DEMAND.mkv
3.42 GB
Rename
Move
Zip & download
Delete
Surface
lo-contrast
= --app-bg, no border or shadow
Scrim
--overlay-full
hsla(0,0%,0%,0.565) dark
Footer
row-reverse, gap 12
confirm right; full width at 340
Delete
trash on: no dialog
many files: "Delete 4 files?" with the name list