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.--radius-lg · --component-bg-hover · --shadow-md · --red-text-secondary
01 Tooltip: inverse contrast, four placements 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.
dark modenear-white pill, dark text
light modenear-black pill, white text
tokens--hi-contrast / --lo-contrast, shared with dropdown menus
Cast to TV
Open Chromecast picker
Refresh⌘R
API token
Generated tokens can't be edited.
Move to trash⌫
Bg / fg
hi-contrast / lo-contrast
inverse of current theme
Padding · radius
5×10 px · 4px
small, tight, never wraps
Font
12px · 400
sentence case, no period
Delay
[500, 0] ms
slow in, instant out