Avatar
A person, a place, or a workspace, in a circle. Initials when there's no photo. Five sizes from 20 to 56 px.
Sizes
Five sizes. 28 is the default row size, 32 sits in topbars, 40 in detail headers.
FM
FM
FM
FM
FM
FM
Group
Overlapping circles for "many people". Cap at four; overflow becomes a +N tile.
FM
AC
SN
+4
With identity
The canonical row-leading pattern. 32 px avatar + name + sub.
FM
Faith Moyo
Cashier · Till 02
AC
Alex Chiwanza
Cashier · Till 01
SK
Stanford Kuda
Plant manager · Mazowe
Workspace
A square-rounded avatar for workspaces and organisations. Slightly bigger inside the org switcher.
Mukamba Group
5 sites
Anatomy
| Property | Value | Notes |
|---|---|---|
| shape | circle for people | rounded-square for workspaces |
| initials | First letter of first + last | Two characters max |
| font-weight | 600 | Tabular at all sizes |
| background | Tonal soft color | Hashed to a tone if not given |
Do & don't
Do
Use initials when there is no photo. Hash to a stable tonal colour per person.
Don't
Use random colours each render. The same person should always look the same.
Do
Keep avatars 28+ px when paired with a name; 24 only inside a tag.
Don't
Use generic silhouette placeholders. Initials are warmer.
Code
<span class="avatar">FM</span>