Design System · Layer 1 · Atom
Avatar
Compact visual identifier. 4 types × 5 sizes × 2 shapes × 6 colors.
Non-interactive atom — parallel exploration to inform the final
DsAvatar extraction.
All Types — md · circle
initials
image
icon
flag
All Sizes — initials · brand · circle
xs · 20px
sm · 24px
md · 32px
lg · 40px
xl · 56px
Image Shapes — circle vs square at md and lg
md · circle
md · square
lg · circle
lg · square
Initials Colors — all 6 · md · circle
neutral
brand
success
warning
danger
info
Icon Type — Phosphor icons, mixed colors · md
user · neutral
gear · brand
bell · warning
briefcase · info
chat · success
Flag Type — 6 countries · md · circle
MX
US
DE
JP
BR
ES
Image Fallback — valid · broken+name · broken+no-name
valid src
broken + name
broken + no name
All Shapes & Sizes — image · 5 sizes × 2 shapes
xs
sm
md
lg
xl
circle
xs · sm
sm · sm
md · md
lg · md
xl · lg
square (radius scales)