General

Avatar

Round headshot or monogram identity slot, small on cards and large in bio modals.

.avatar--photo · .bio-photo · .bio-id

<div class="bio-id">
  <span class="avatar" style="width:var(--space-8);height:var(--space-8);border-radius:var(--radius-pill);background:var(--accent-subtle);color:var(--accent-text);display:flex;align-items:center;justify-content:center;font-weight:var(--weight-bold)">RK</span>
  <div><b>Ricardos Khoury</b><br><small>President &amp; CEO · Founder</small></div>
</div>

Usage

• Photos are round on a white ground with a thin grey ring, .bio-photo (64px in modals) or .avatar--photo.
• The monogram avatar is the fallback when no headshot exists: accent-subtle ground, accent-text initials.
• Same round slot at both sizes: small on cards, large in the bio dialog.