CityChat · conversation & community
Start with the conversation you want to open. Choose one motif, try its surface and rhythm, and take it into your next piece.
3 stories + 1 original conversation
citychat.voice-home
A new neighbour joins the circle. Give stories from home a warm beginning.
Hop, stretch, nod — then a yellow newcomer peeks in.
One motif per scene. Leave at least 10% clear space and keep essential copy outside the artwork.
Link to this motifSVG is static · PNG uses the selected surface · code plays once on entry
citychat.live-visit-trade
Home, camera, shop: three ways to see the same neighbourhood.
Turn 2 / 3 / 1 times, then settle to reveal the picture inside.
One motif per scene. Leave at least 10% clear space and keep essential copy outside the artwork.
Link to this motifSVG is static · PNG uses the selected surface · code plays once on entry
citychat.our-voice-here
Place a story where it matters, surrounded by neighbours’ voices.
Neighbours appear, the main voice grows from the map, and one ripple spreads.
One motif per scene. Leave at least 10% clear space and keep essential copy outside the artwork.
Link to this motifSVG is static · PNG uses the selected surface · code plays once on entry
citychat.conversation
Two voices lean towards each other. A conversation begins.
Two bubbles arrive and lean towards each other in alternating beats.
One motif per scene. Leave at least 10% clear space and keep essential copy outside the artwork.
The still is the owner’s original file; preview uses the supplied motion companion. The original has one rendition and is shown on a light surface.
Link to this motifSVG is static · PNG uses the selected surface · code plays once on entry
Use light artwork on a light surface and dark artwork on a dark surface. Choose by the placement area, rather than the page theme; keep the supplied colours.
Still ≥24 px, visible smile ≥88 px, motion ≥120 px. Keep the full artwork and its proportions; place text beside it.
Use the motif as an invitation or a story beat. Buttons, status, evidence and map data retain their own clear labels.
3d · Lockup direction in the handoff — The handoff proposes aligning the logo bubbles with this family. This library retains the current logo; a new logo export and Design System migration remain separate work.