Avatar

A letter-in-circle marker that identifies a person in the app. Single uppercase initial, Bricolage Grotesque 600, on a colored circle. Each person in a group gets a consistent color from the avatar palette — the "You" variant always uses ink background so the current user is instantly recognisable.

Variants

A P R K G

You (ink) — always assigned to the current user. Dark background makes the logged-in person visually distinct at a glance. Text is --s-paper.

Coral — one of four peer colors from the avatar palette. Assigned deterministically by user ID, not randomly, so a person always has the same color within a session.

Teal — the settled/positive accent. Only used as an avatar color, never to indicate settlement status (use Badge for that).

Butter — warm amber. The fourth peer color.

Mute — for guests, unnamed payees, or when a 5th distinct person joins. Falls back gracefully.

Sizes

R R R R R

Size	Class	Diameter	Font size	Use case
Extra large	`.avatar-xl`	48px	20px	Profile header, settle confirmation
Large	`.avatar-lg`	40px	16px	Group member list, contact picker
Medium	`.avatar-md`	32px	13px	Expense card, ledger row — default
Small	`.avatar-sm`	24px	10px	Inline mentions, dense lists
Extra small	`.avatar-xs`	20px	9px	Avatar group overflow circles

States

P P A

State	Visual change	When
Default	Resting appearance	—
Inactive / dimmed	40% opacity	Person has no activity in this expense
Selected	2px teal outline, 2px offset	Used in person picker when avatar is tappable

On dark surfaces

A P R K G

Avatar colors are all dark-surface compatible — coral, teal, butter, and mute all have sufficient contrast against --dark-canvas. The "You" avatar reads even more clearly on dark, since the ink background now has visible separation from the surface. No overrides needed.

Anatomy

Container (50% radius)

Initial (uppercase)

Part	Element	Notes
Container	`<span>` or `<div>`	Always `border-radius: 50%`. Width and height equal (square before rounding).
Initial	Text node	Single uppercase letter. First character of display name. Never truncate to initials — one letter only.
Color	Background	Assigned from the 5-color palette by hashing the user ID. Same person = same color everywhere in the app.

Usage

Do Assign colors deterministically (hash of user ID mod 5). The current user always gets .avatar-you. Use aria-label with the full name, not the initial.

Don't Don't randomise colors on each render — a person's color must be stable across the session and across devices. Don't use avatar colors to convey status (use Badge for that).

Do Use the -md size (32px) as the default in expense cards and ledger rows. Upsize to -lg or -xl when the avatar is the primary focus (profile screen, settle confirmation).

Don't Don't mix sizes within the same row or group — pick one size and stick to it. Don't show avatars smaller than 20px (-xs) in isolation; that size is for avatar-group only.

Accessibility

Screen readers Always add aria-label="Priya" (full name) to the avatar element. The initial alone is not useful to a screen reader. If the avatar is purely decorative inside a larger interactive element that already announces the name, use aria-hidden="true" instead.

Code

HTML

<!-- Default (peer, coral) -->
<span class="avatar avatar-md avatar-coral" aria-label="Priya">P</span>

<!-- Current user -->
<span class="avatar avatar-md avatar-you" aria-label="Aarav (you)">A</span>

<!-- Large, teal -->
<span class="avatar avatar-lg avatar-teal" aria-label="Rohan">R</span>

<!-- Dimmed / inactive -->
<span class="avatar avatar-md avatar-butter" aria-label="Kabir" style="opacity:.4">K</span>

CSS classes

Class	Purpose
`.avatar`	Base — flex, circle, font, user-select: none
`.avatar-xl` / `-lg` / `-md` / `-sm` / `-xs`	Size modifiers (48 / 40 / 32 / 24 / 20px)
`.avatar-you`	Ink background — current user only
`.avatar-coral`	Coral background — peer color 1
`.avatar-teal`	Teal background — peer color 2
`.avatar-butter`	Butter/amber background — peer color 3
`.avatar-mute`	Muted gray-brown — peer color 4 / fallback

Design tokens used

Token	Value	Role
`--av-you`	#171513	"You" background
`--av-coral`	#E76F51	Peer color 1
`--av-teal`	#0E7C66	Peer color 2
`--av-butter`	#D4940A	Peer color 3
`--av-mute`	#8A8276	Peer color 4 / fallback
`--s-paper`	#FBF8F0	"You" text color
`--font-display`	Bricolage Grotesque	Initial letter