## Reference images

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

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/meetup-com/38f9f6c4-75f1-46e9-b1c3-f8b44b19e777-1789146456-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/meetup-com/38f9f6c4-75f1-46e9-b1c3-f8b44b19e777-1789146409864-full.webp
- Component on Kage: https://kage.design/component/meetup-hero

## Before you start
Ask what the user's product does, who it serves, and what its brand personality and visual identity are. Then apply the principles below to that product rather than reproducing the reference.

Create a spacious hero directly below the navigation. Center a three-line display headline, a concise supporting paragraph, and one prominent pill CTA; keep the copy column narrow enough to scan quickly. Place diverse, irregularly cropped community or product-supporting visuals around the outer edges so the center remains clear, and add small decorative accents only if they reinforce the brand. Use a bold rounded sans-serif display face, approximately 42–52px desktop headline size with 1.0–1.08 line height, 15–17px body text, and a strong contrast hierarchy. Approximate colours: #FFFFFF canvas, #202020 text, #F45B89 pink accent, #8B73E8 purple accent, with warm yellow and cyan supporting accents. Use a 64–96px vertical rhythm, a 160–220px maximum text width, soft or organic image masks, and a 999px CTA radius. On mobile, stack the text first and move decorative imagery below or hide it.

Never: use logos, product names, copy, illustrations, or imagery from the reference.