canon-avatars

CANON · Avatars

Avatars identify a person or entity at a glance. They fail when users can't distinguish them from each other or from generic placeholders.

Sizing

Avatars have a small, fixed scale. Random sizes break visual rhythm.

Size	Use
XS — 16–20px	Inline with text (comment attribution)
SM — 24px	Dense lists, table rows
MD — 32px	Default (nav bars, lists)
LG — 40–48px	Profile cards, user headers
XL — 64–80px	Profile pages, detail views
XXL — 128px+	Hero profile view

Pick 3–4 sizes for your system. Avoid one-off in-between values.

Shape — circle by default

Shape	When
Circle	People (default)
Rounded square (6–8px radius)	Organizations, teams, workspaces
Square	Product/brand logos, less common for people

Circle avatars differentiate user identity from brand identity — worth preserving.

Initials fallback

When no image exists, show initials.

┌────────┐
│   AB   │
└────────┘

• One or two letters max. "JJ" (John Jacobson) not "JAJ".
• Logic: first letter of first name + first letter of last name. Single name → one letter.
• Font size: avatar diameter × 0.4 (rough rule). 32px avatar → 13px initials.
• Font weight: 500–600 (semibold).
• Center-aligned both axes.

Background color — deterministic, not random

Each user gets a consistent color across the app. Random colors per render = visual identity breaks every refresh.

function avatarColor(id) {
  const hash = id.split('').reduce((acc, c) => c.charCodeAt(0) + acc, 0);
  const hue = hash % 360;
  return `oklch(55% 0.15 ${hue})`;
}

• Hash the user ID (stable, unique) to pick a hue.
• Keep lightness and chroma constrained so all colors feel unified (same lightness, similar chroma).
• 12–20 hues max in the rotation — prevents near-identical variants.

Text contrast on initials

White text on colored background: minimum 4.5:1 contrast. With medium-lightness backgrounds (L ≈ 50–60%), use:

• Lightness 40–55% → white text
• Lightness 60–80% → dark text (near-black tinted with the background hue)