ds
Components
Avatar

Avatar

Initials or a photo, in four sizes, stacked in groups.

RM PK AS JD NV

Code

<span class="avatar xs">RM</span>
<span class="avatar sm t-teal">PK</span>
<span class="avatar">AS</span>
<span class="avatar lg t-amber">JD</span>
<span class="avatar xl t-blue">NV</span>

Initials on a tone wash, in the tone's own line colour. Two letters at most, sized to a third of the circle. Pick the tone from a hash of the user id, not the name, so it survives a rename and two Priyas still look different.

Tones, photos and presence

RM SK AT MJ LO PK DV ? PK SK RM

Code

<span class="avatar">RM</span>
<span class="avatar t-amber">SK</span>
<span class="avatar t-green">AT</span>
<span class="avatar t-blue">MJ</span>
<span class="avatar t-red">LO</span>
<span class="avatar t-teal">PK</span>
<span class="avatar t-pink">DV</span>
<span class="avatar ghost">?</span>
<span class="avatar lg t-teal">PK<span class="status-dot" aria-label="Online"></span></span>
<span class="avatar lg t-amber">SK<span class="status-dot warn" aria-label="Away"></span></span>
<span class="avatar lg">RM<span class="status-dot idle" aria-label="Offline"></span></span>

The seven tones are the diagram tones, so a person and their team zone can share one. .ghost is for someone without a name yet: an invite, a deleted account, an API token. A presence dot is a .status-dot inside the avatar, ringed in the page colour.

Squares for things

AC DW IN

Code

<span class="avatar sq">AC</span>
<span class="avatar sq t-amber">DW</span>
<span class="avatar sq lg t-teal">IN</span>

People are circles. Workspaces, projects and organisations are rounded squares, so the two never get confused in a switcher or a member list.

Groups

PK SK RM +2

MJ AT DV

Code

<div class="avatars" aria-label="5 reviewers">
  <span class="avatar t-teal">PK</span>
  <span class="avatar t-amber">SK</span>
  <span class="avatar">RM</span>
  <span class="avatar ghost">+2</span>
</div>
<div class="avatars" aria-label="3 people on call">
  <span class="avatar sm t-blue">MJ</span>
  <span class="avatar sm t-green">AT</span>
  <span class="avatar sm t-pink">DV</span>
</div>

Each avatar in a stack rings itself in --ring, the page background by default. On a surface or a card, set --ring: var(--surface) on the group. Show three or four and count the rest.

With a name

PKPriya Kulkarnipriya@acme.dev SKSameer KhanData platform · Owner

Code

<span class="who"><span class="avatar t-teal">PK</span><span><b>Priya Kulkarni</b><small>priya@acme.dev</small></span></span>
<span class="who"><span class="avatar sm t-amber">SK</span><span><b>Sameer Khan</b><small>Data platform · Owner</small></span></span>

API

Class	On	What it does
`.avatar`	span	Initials or an <img>. 2rem by default.
`.xs / .sm / .lg / .xl`	.avatar	1.25, 1.625, 2.75 and 4rem. Or set `--size`.
`.t-amber … .t-pink`	.avatar	The tone. Purple is the default.
`.ghost`	.avatar	Grey and mono, for unknown people and counts.
`.sq`	.avatar	Rounded square, for workspaces and projects.
`.status-dot`	.avatar > span	Presence in the corner. Ok, warn, down or idle.
`.avatars`	div	An overlapping stack. Set `--ring` to the colour behind it.
`.who`	span	Avatar, then a name in <b> and a second line in <small>.

Alt text on photos, and an aria-label on a stack that says how many.
Initials from the first and last name.
A tone from the user id.

Don't

Status colours as avatar tones: red says something is wrong.
Avatars as the only way to tell who did something. Put the name next to it.
Stacks of more than five.

Accessibility

Initials are read out letter by letter. Where the name is next to the avatar, hide the avatar with aria-hidden="true".
Presence needs words too: label the dot, or say "Online" in the second line.