Context
The gamification layer gives every user an avatar: today these are 18 generic
black animal silhouettes (curated from SVGRepo), recolored in-app. We explored
making the avatar set elephant-/brand-themed to match the Zeeguu mascot. After
investigation + prototyping, the direction below was settled — but it needs a
designer to produce the actual art. Filing so a kind-hearted designer can pick
it up. 🐘
Post-study product change: do not change the username generator / adjective+animal
word lists, and do not alter any thesis figures.
How the current system works (technical constraints for the art)
- Assets:
public/static/avatars/*.svg — single-fill black silhouettes.
- Rendered via CSS
mask-image + background-color (the user's character_color)
on a background_color circle — see src/profile/UserProfile.sc.js. The colour
inside the SVG is irrelevant; only the silhouette shape + cut-outs matter.
- Whitelist/options:
src/profile/avatarOptions.js. Picker:
src/pages/Settings/ProfileDetails.js. Model (API): user_avatar
(image_name, character_color, background_color).
- Brand references already in the repo:
public/static/images/zeeguuLogo.svg — the minimal amber elephant; the
abstraction target for the animals.public/static/badges/*.svg — full-colour flat elephant mascots already doing
activities; the hand to match for the activity illustrations.
Direction (decided)
Two avatar families:
- Single-colour ANIMALS (tintable). Keep species variety, but redraw each animal
abstract, in the logo's minimal language — one flat fill, no outline, optional
eye cut-out. Export SVG. Drops into the existing colour-tint system unchanged.
- Multicolour ACTIVITY illustrations (badge style). "Elephant doing X", full
colour, in the existing badge hand. These can't be tinted (full colour) → shown
as-is. Front-end will get a small dual-mode change to support both families;
activity avatars could be always-available or badge-unlockable (earn the badge
to use it) — product decision, not blocking the art.
Why the split: activities cannot be reduced to abstract single-colour silhouettes
and stay legible (a monochrome elephant + headphones just reads as a blob).
Deliverables
- Animal set (~12–18) — single-fill SVGs, legible at 32px (leaderboard / friend
rows).
- Activity set (~12) — multicolour illustrations (PNG or SVG), centered with
margin so they crop cleanly into a circular avatar.
Animal list (front-facing heads, minimal)
elephant · owl · rabbit · fox · bear · wolf · deer · moose · eagle · lion · lynx ·
otter · beaver · badger · panther · tiger · leopard · cheetah
⚠️ panther / tiger / leopard / cheetah look near-identical as single-colour heads
(stripes/spots disappear). Drop/merge 2–3 or differentiate by pose. Lion (mane),
lynx (tufts), and the non-cats are distinct. (Today's set has the same issue.)
Activity list (badge-style elephant)
reading a book · listening with headphones · writing with a pencil · holding
flashcards · thumbs-up by a checkmark (exercises) · hugging a calendar with a flame
(streak) · on the phone (friends) · between two flag speech-bubbles (translating) ·
graduation cap + diploma · holding a trophy · lightbulb idea · asleep with a nightcap.
Appendix — Recraft starting recipe (optional)
If using Recraft, create two custom styles, then prompt per asset:
"Zeeguu Mark" — base Vector Illustration, reference = the logo; export SVG.
Stem: “Minimal flat vector icon of a {ANIMAL} head, extremely simple and abstract,
one solid black silhouette, single flat fill, no outline / gradient / shading, smooth
rounded shapes, one small round cut-out eye, friendly mascot logo, centered, white
background.” + a signature cue per animal (big ears + trunk; long ears; tufted ears; etc.).
"Zeeguu Badge" — base Digital Illustration, reference = the 7 badge SVGs; export
PNG. Stem: “A friendly cartoon elephant {ACTIVITY}, flat 2D vector illustration,
thick clean dark-red outlines, body one flat warm colour, cream accessories, minimal
shading, rounded playful shapes, single character centered with generous margin, plain
white background.”
Hand-off
When the assets exist, the front-end wiring (dual-mode picker, image_name value set,
data migration repointing existing users, new-signup default) is well understood and
quick to add — it was intentionally deferred until the art is ready.
Context
The gamification layer gives every user an avatar: today these are 18 generic
black animal silhouettes (curated from SVGRepo), recolored in-app. We explored
making the avatar set elephant-/brand-themed to match the Zeeguu mascot. After
investigation + prototyping, the direction below was settled — but it needs a
designer to produce the actual art. Filing so a kind-hearted designer can pick
it up. 🐘
Post-study product change: do not change the username generator / adjective+animal
word lists, and do not alter any thesis figures.
How the current system works (technical constraints for the art)
public/static/avatars/*.svg— single-fill black silhouettes.mask-image+background-color(the user'scharacter_color)on a
background_colorcircle — seesrc/profile/UserProfile.sc.js. The colourinside the SVG is irrelevant; only the silhouette shape + cut-outs matter.
src/profile/avatarOptions.js. Picker:src/pages/Settings/ProfileDetails.js. Model (API):user_avatar(
image_name,character_color,background_color).public/static/images/zeeguuLogo.svg— the minimal amber elephant; theabstraction target for the animals.
public/static/badges/*.svg— full-colour flat elephant mascots already doingactivities; the hand to match for the activity illustrations.
Direction (decided)
Two avatar families:
abstract, in the logo's minimal language — one flat fill, no outline, optional
eye cut-out. Export SVG. Drops into the existing colour-tint system unchanged.
colour, in the existing badge hand. These can't be tinted (full colour) → shown
as-is. Front-end will get a small dual-mode change to support both families;
activity avatars could be always-available or badge-unlockable (earn the badge
to use it) — product decision, not blocking the art.
Why the split: activities cannot be reduced to abstract single-colour silhouettes
and stay legible (a monochrome elephant + headphones just reads as a blob).
Deliverables
rows).
margin so they crop cleanly into a circular avatar.
Animal list (front-facing heads, minimal)
elephant · owl · rabbit · fox · bear · wolf · deer · moose · eagle · lion · lynx ·
otter · beaver · badger · panther · tiger · leopard · cheetah
Activity list (badge-style elephant)
reading a book · listening with headphones · writing with a pencil · holding
flashcards · thumbs-up by a checkmark (exercises) · hugging a calendar with a flame
(streak) · on the phone (friends) · between two flag speech-bubbles (translating) ·
graduation cap + diploma · holding a trophy · lightbulb idea · asleep with a nightcap.
Appendix — Recraft starting recipe (optional)
If using Recraft, create two custom styles, then prompt per asset:
"Zeeguu Mark" — base Vector Illustration, reference = the logo; export SVG.
Stem: “Minimal flat vector icon of a {ANIMAL} head, extremely simple and abstract,
one solid black silhouette, single flat fill, no outline / gradient / shading, smooth
rounded shapes, one small round cut-out eye, friendly mascot logo, centered, white
background.” + a signature cue per animal (big ears + trunk; long ears; tufted ears; etc.).
"Zeeguu Badge" — base Digital Illustration, reference = the 7 badge SVGs; export
PNG. Stem: “A friendly cartoon elephant {ACTIVITY}, flat 2D vector illustration,
thick clean dark-red outlines, body one flat warm colour, cream accessories, minimal
shading, rounded playful shapes, single character centered with generous margin, plain
white background.”
Hand-off
When the assets exist, the front-end wiring (dual-mode picker,
image_namevalue set,data migration repointing existing users, new-signup default) is well understood and
quick to add — it was intentionally deferred until the art is ready.