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.--avatar-fg · --avatar-fg-warm · --radius-lg · --avatar-yellow
01Avatar: circle (user) / rounded square (app)Avatar
Two shapes: circle for users, 4px radius for apps (OAuth apps, extensions). app.put.io always shows the image from avatars.put.io; while it loads, a skeleton stands in. Initials below are placeholders for the image.
Sizes in use, 20 · 30 · 32 (default) · 48 · 60, plus a loading skeleton
A
AT
AT
AT
AT
Initials palette, derived from user hash proposed
AT
EN
M
CK
SD
JK
PT
App avatars, 4px radius
P
V
P
N
02Presence: online / away / offlineproposed
The dot in the bottom-right reads at any size. Reserve green for active session, yellow for idle, gray for offline.
Never red, that's reserved for destructive / failed states.
AT
EN
M
CK
03Stack: group / shared withproposed
Overlapping avatars with a 2px ring to separate them from the background. Past 4 visible faces, collapse the remainder into a +N chip.
AT
EN
M
CK
SD
04User chip: share recipients
The share modal's friend picker: a 20px avatar, the name, an xs × that removes the friend.