Contentstable

Avatar

A person as a warm-filtered photo or Fraunces initials; digital tone uses monospace for bots and systems. Groups overlap.

Examples

Sizes and tones

AL ID RC AI

HTML for “Sizes and tones”

<div class="mp-cluster">
  <span class="mp-avatar" data-size="sm" role="img" aria-label="Ana Lima">AL</span>
  <span class="mp-avatar" role="img" aria-label="Isaac D'Césares">ID</span>
  <span class="mp-avatar" data-size="lg" role="img" aria-label="Rafael Costa">RC</span>
  <span class="mp-avatar" data-size="xl" data-tone="digital" role="img" aria-label="Course assistant (AI)">AI</span>
</div>

Group

AL BR AI

HTML for “Group”

<div class="mp-avatar-group" role="group" aria-label="Facilitators">
  <span class="mp-avatar" role="img" aria-label="Ana Lima">AL</span>
  <span class="mp-avatar" role="img" aria-label="Bruno Reis">BR</span>
  <span class="mp-avatar" data-tone="digital" role="img" aria-label="Course assistant (AI)">AI</span>
</div>

Guidance

Photos get the brand's --photo-warmth filter automatically. Without a photo, initials sit on a human-register wash; agents, bots and services use data-tone="digital" (teal, monospace) so people and systems are visibly different.

Accessibility

Photo: <span class="mp-avatar"><img src="…" alt="Isaac D'Césares"></span>. If the name is printed right next to it, use alt="".
Initials: give the wrapper role="img" and an aria-label with the full name.

API

Avatar classes
Class	Kind
`.mp-avatar`	root
`.mp-avatar-group`	root

Avatar attributes
Attribute	Values
`data-size`	`sm` · `lg` · `xl`
`data-tone`	`digital`

Avatar component tokens
Token	Default	Light · dark
`--mp-avatar-size`	`2.5rem`	—

Design tokens consumed: --border-width-medium --color-bg-primary --color-digital-bg --color-digital-text --color-human-bg --color-human-text --font-mono --font-serif --photo-warmth --radius-full --weight-semibold

Source

README on GitHub CSS on GitHub Manifest (JSON)