Voter avatar initials and color coding #10

New Issue

TopherMayor · 2026-04-29T03:55:19Z

TopherMayor commented

2026-04-29 03:55:19 +00:00

Problem

Votes are shown as names only — when many people vote, names get repetitive and hard to scan.

Proposed Solution

Generate a consistent color from a voter's name (hash to one of 8 brand colors)
Show a 24px circle with the voter's initials (first letter of first/last word) in that color next to their name
In the voters row on each option, show stacked avatar circles (max 5, then "+N more")
Avatar colors are deterministic (same voter = same color every time)

Acceptance Criteria

Each voter gets a unique color from their name
Avatar shows first letter of first and last name (e.g., "Chris M" → "CM")
Voters row shows stacked avatars on option cards
Colors contrast well against both dark and light backgrounds

## Problem Votes are shown as names only — when many people vote, names get repetitive and hard to scan. ## Proposed Solution - Generate a consistent color from a voter's name (hash to one of 8 brand colors) - Show a 24px circle with the voter's initials (first letter of first/last word) in that color next to their name - In the voters row on each option, show stacked avatar circles (max 5, then "+N more") - Avatar colors are deterministic (same voter = same color every time) ## Acceptance Criteria - [ ] Each voter gets a unique color from their name - [ ] Avatar shows first letter of first and last name (e.g., "Chris M" → "CM") - [ ] Voters row shows stacked avatars on option cards - [ ] Colors contrast well against both dark and light backgrounds

TopherMayor added the ui/ux frontend priority/low labels 2026-04-29 03:55:19 +00:00

TopherMayor added this to the UI/UX Overhaul v1.0 milestone 2026-04-29 03:56:15 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: TopherMayor/cabo-voting-app#10