Avatar
CuteAvatar
With image
With color
A member with no photo picks one of twenty colors for the default smile in Settings > Profile. color takes a key of AVATAR_COLORS; the smile turns dark on it. A photo always wins over the color.
System avatar
Group avatar
Username badges
Username with avatar
Username with full info
Notification count
The header's profile trigger rides a NotchBadge: the count floats over the top-end corner and a matching notch is masked out of the avatar, so the gap is see-through instead of painted. See Buttons for the icon button version.
Across avatar sizes
Step the badge up with the avatar via size (it defaults to sm, tuned for the 48px icon buttons in the header) or the count turns into a speck on the portrait sizes: sm through md keep sm, lg takes default, then lg, xl, 2xl. Placement follows on its own: the count is the real number, capped at 99, a circle for a single digit and one wide pill past 9, with the notch widening to match, all from the digit count in CSS, nothing measured. Both are parked by pure CSS on the surface's 45° point rather than its bounding-box corner, which pulls the badge tighter to the rim the bigger the avatar gets. Round surfaces only.
The parts: NotchBadge holds the count, size and variant and stamps data-state="visible|hidden"; NotchBadgeSurface wraps the avatar or button and masks the notch out of it; NotchBadgeCount draws the capped number.