01
Avatar — circle (user) / squircle (app)
product implementation · Avatar.tsx
Avatars come in two shapes: circle for users, squircle for apps (OAuth integrations, ecosystem). Initials are the fallback — derive a stable background from the username hash so the same user always lands on the same color.
Sizes — sm 24 · md 32 · lg 48 · xl 72
Palette — derived from user hash, stable per identity
App avatars — squircle
02
Presence — online / away / offline
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.
03
Stack — group / shared with
Overlapping avatars with a 2px ring to separate them from the background. Past 4 visible faces, collapse the remainder into a +N chip.
04
User chip — share recipients
Compact representation of a tagged user — used in share fields and audit logs. Clickable × removes them. Always preceded by the avatar.
05
Friend / member rows
kaiSharing files with you
★ pinned
irisYou're sharing 4 folders
manage
junoNo active shares
unfollow