MyBazaar · brand · illustration system
MyBazaar Prop Library
The companion's approved poses, a forty-two piece prop set covering all seven wedges, and a scene-scale illustration — all bound to the same six token colours. Everything here is either generated in-house or permissively licensed.
The character
Fixed construction: rounded teal body, pale belly patch, dot eyes, two stubby arms, no legs, floating above a soft shadow. Only pose, expression and one prop change between states. Each pose is a separate file — cut from its sheet, background removed, and padded to one 409×370 frame so every state shares a canvas and a ground line. Backgrounds are transparent and the drop shadows are true alpha over the ink token, so each pose composites onto any surface in either colour mode. The panel below is pinned to peacock.10 #EAF6F3 in both colour modes — the landing page's light ground, which is what the art is drawn against.
Twelve states
One file per poseposes/
The prop set
Six props per wedge, sourced from Tabler Icons. They arrive drawn in currentColor at a 2px stroke on a 24px grid — which is exactly what 07-imagery-direction.md already specifies for iconography — so binding them to the palette is one CSS declaration, and dark mode works for free.
Retail store
Kirana, garments, pharmacy, electronicsstoreFood & delivery
Restaurants, cloud kitchens, home chefsrestaurantsEvent ticketing
Concerts, workshops, exhibitionseventsTransport ticketing
Buses, shuttles, tour operatorstravelServices & bookings
Salon, repair, clinicservicesEducation & training
Coaching, courses, batcheseducationSomething else
The businesses no template fitsothersTabler or Phosphor
Tabler covered all 42 slots with no fallback needed. Phosphor covered 41 — only a spotlight was missing. The real difference is register: Tabler is stroked and airy, Phosphor is filled and solid. Stroke on the left, fill on the right.
Scene scale
Icons carry the small end. For a hero or an empty state that needs a full scene, unDraw recolours cleanly into the same palette — shown here with the accent on pine, ink on peacock, and skin on pine.20 rather than a skin tone.
Provenance and licence
| Asset | Source | Licence | Attribution in UI |
|---|---|---|---|
| 42 wedge props | Tabler Icons | MIT | Not required |
| Alternate prop set | Phosphor Icons | MIT | Not required |
| Scene illustration | unDraw | unDraw open licence | Not required |
| Companion, 20 poses | Generated (Gemini 3.1 Flash Image via agy) | In-house | Logged as AI-generated |
All three third-party sources permit commercial use without attribution in the interface. Retain the licence files in the repo.
How this binds to tokens
- IconsShip as-is. They inherit
color, so set it from a semantic token and both colour modes resolve automatically. No per-icon editing, ever. - ScenesunDraw hard-codes hex, so it needs the recolour pass. Map by tonal role, not nearest colour — unDraw's greys sit within 6% of each other because they assume a white page, and a naive map collapses cards into the ground.
- CharacterRaster today. Anything shipping into the app should be traced to SVG in
currentColor, the wayWedgeHero.tsxalready draws. - NeverOn a money surface — checkout, payouts, settlement, invoices, GST. Learning and idle surfaces only.