01
Avatar: circle (user) / squircle (app)
Avatar
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