Avatar
The identity mark for a person: a user menu, a collaborator list, a comment row. Circle only, static, and never focusable.
Not interactive
The avatar takes no focus and no tab stop. Wrap it in a button or a link when a click is needed — the wrapper owns the focus ring and the keyboard path. There is no status dot and no avatar stack yet.
Sizes
Two sizes: default at 32px with 12px initials, and sm at 24px with 10px initials. Use sm in dense rows such as comment lists.
ALALALALFallback chain
Three steps, in order. The image wins when it loads. Otherwise two uppercase initials from the first and last word of the name, one letter for a one-word name. With no name, a plain circle. While the image loads, the avatar draws nothing and holds its layout box, so the row never shifts.
GHPGHPColor
Eight hues at step 400, closed as a union: orange amber green teal sky indigo purple pink. The default is indigo. Red is excluded because it carries the destructive meaning. The color drives the fallback circle only; an avatar showing an image never uses it. Pick the hue from a stable key such as a user id, so the same person keeps the same color.
Motion
None. The image swaps in at once with no fade, and the fallback has no enter animation. An identity mark that fades in reads as a change of person.
Contrast
Initials are always neutral-950. The worst pair is indigo-400 at 6.3:1, so all eight hues pass WCAG AA. The values are the same in light and dark mode. White initials fail on every step 400 and are banned here.
Accessibility
alt defaults to name. The image uses it as its alt text; the initials fallback carries role="img" with the same label, so a screen reader reads the person either way. Pass alt="" when the name sits next to the avatar as text — the avatar then leaves the accessibility tree and the name is read once.