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-lg · --component-bg-hover · --shadow-md · --red-text-secondary
01 Tooltip: inverse contrast, top by default Tooltip · @tippyjs/react
The highest-contrast surface in the system. Foreground swaps to the opposite mode, so a tooltip stands out against anything it anchors to. app.put.io never sets a placement: Tippy opens on top and flips when it runs out of room. A hotkey tooltip reads label then key, or key then label. The specimen keeps the raw name; app.put.io shows transfer names with dots as spaces.
dark modenear-white pill, dark text
light modenear-black pill, white text
tokens--hi-contrast / --lo-contrast, shared with dropdown menus
Thumbnails
The.Wire.S03E04.Back.Burners.1080p.BluRay.x264-DEMAND.mkv
This file has been deleted.
Show new transfer dialogT
Add transfers
⌘+Enterto add transfers
Bg / fg
hi-contrast / lo-contrast
inverse of current theme
Padding · radius
5×9 px · 4px
Tippy defaults; wraps past 350px
Font
0.875rem · 400
sentence case; hotkeys as mono kbd
Delay
[500, 0] ms
slow in, instant out