Skip to content

role presentation

Avatar draft v0.1.0

Represents a person or an entity with a picture, or their initials when there is none.

An avatar shows who or what something belongs to: the author of a comment, the members of a project, a workspace. It displays a picture when there is one and the initials of the name otherwise, in a circle or a rounded square. Assistive technology reads it as an image named by the person, unless the name is written right next to it, in which case the avatar is decoration.

Decisions

From decisions in packages/components/specs/components/avatar.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.

Color

  • Without a picture the avatar is the subtle brand fill with initials in the on-subtle brand text color, the same for everyone; a hairline in the level 1 edge color outlines every avatar.

    The Figma library has no per-person palette; one tint avoids meaning by color.

    initials-on-brand-tint · 2026-10-03 · v0.1.0

    avatar.container.backgroundavatar.initials.coloravatar.container.border-coloravatar.container.border-width

Size

  • Three sizes from the size scale, 24, 32 and 40 px (small, medium, large), with initials at 10, 12 and 14 px medium; two shapes, circle (default) and square with 4 px corners.

    sizes-and-shapes · 2026-10-03 · v0.1.0

    avatar.container.size.*avatar.initials.typography.*avatar.container.border-radius.*

Accessibility