## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Screenshot: https://kage-design-assets.t3.tigrisfiles.io/screenshots/chathop/94c3e4dc-05cc-4eef-9ada-ae64f25dbfd1-1789192973622.webp
- Design on Kage: https://kage.design/designs/chathop-og-image

## Before you start
Ask the user what product this social card is for, who it is aimed at, and what brand assets they already have (brand name, one accent colour, an existing mascot or logo, a typeface). Wait for the answers before producing anything. Everything below is applied to *their* product and brand, not to the reference.

## Canvas & composition (1200×630)
Produce a single 1200×630 image (an SVG, or an HTML/CSS file sized exactly 1200×630 that can be rendered to PNG with a headless browser or screenshot tool).

- **Background:** full-bleed solid near-black `#0A0A0A`. No gradient, no texture, no border, no card frame — the background is a void.
- **Safe zone:** keep all content inside an ~80px margin so platform UI and cropping don't clip the subject.
- **Focal element:** one hero illustration (the user's mascot, or a simplified product object rendered as a plump rounded shape) placed just left of centre, filling roughly 55–60% of the canvas height. Any face or key detail sits near the vertical centre of the card.
- **Motion element:** directly beneath the hero, a thick accent-coloured arrow curving from lower-left to upper-right, tapering to a pointed head. It should underlap the hero so the character appears to ride it. This diagonal is the card's only compositional line.
- **Secondary props:** two small accent-coloured bubble shapes in the upper-left and upper-right corners, each with minimal inner detail (three small dots works), sized at ~10–12% of canvas width. They balance the diagonal and suggest conversation.
- **Brand lockup:** a small wordmark in white at bottom-left (or top-left), no more than 10% of canvas width, with an optional one-line tagline beneath at ~40% of the wordmark size. Total text must stay under ~15% of the canvas — the image, not the copy, is the message.
- One scene, one focal point. No additional sections, panels or stats.

## Design language
- **Colour:** the card is essentially two values — near-black `#0A0A0A` and one saturated accent (the reference uses chartreuse ≈ `#C6F432`; substitute the user's accent). Pure white `#FFFFFF` appears only in small details (gloves, eyes, wordmark). Never introduce a second saturated hue.
- **Hierarchy through saturation, not lightness:** the accent is the brightest, most saturated thing on the canvas; everything else recedes into black or small white accents.
- **Form language:** everything plump and rounded — generous border-radius on every shape, no sharp corners except the arrowhead. If drawing a character: near-1:1 head-to-body proportion, oversized eyes with simple dot pupils, limbs as plain tubes ending in simple white hands.
- **Shading:** soft matte 3D feel — one gentle top-left key light, darker core shadows on the lower right of each shape, a faint rim highlight. No glossy reflections, and no cast shadows onto the background (objects float in the void).
- **Type:** one geometric rounded sans. Wordmark in semibold with slightly tight letter-spacing; tagline in regular weight, ~40% the wordmark's size, slightly generous letter-spacing, both pure white.
- **Energy without animation:** motion is implied — the arrow's diagonal, an off-axis dynamic pose for the hero, and floating props at two different scales.
- **Thumbnail test:** at 200px wide the hero silhouette and accent colour must still be unmistakable. If not, raise hero scale or accent saturation rather than adding elements.

## Never
- Never copy the reference mascot (the lime blob with cartoon gloves and buck-tooth grin), its exact pose, the ChatHop name, or the tagline "Take your conversation anywhere." Build an original character or use the user's own mascot/logo with their copy.
- No gradients, patterns, outlines or frames on the background; no second accent colour; no dense text blocks; no photographic or stock-3D elements pasted in verbatim.
- Never present the result as ChatHop or reference the product in the card copy.