meetup.com
Design analysis
A compact header combines brand, location-aware event search, language, authentication links, and a dark signup button. The wide central search control keeps discovery prominent without competing with the hero.
Prompt preview
## 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-1789146455-0.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-navigation ## 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. Build a responsive global navigation bar. Use a single horizontal row with the brand at left, a wide rounded search field with an optional location selector in the middle, and language, login, and primary signup actions at right. Keep the header visually quiet: white background, subtle bottom separation, generous horizontal padding, and a dark pill-shaped primary button. Use a friendly geometric sans-serif, medium-weight utility text, and a clear 24–32px brand mark area. Approximate colours: #FFFFFF background, #242424 text, #6B6B6B secondary text, #F4F4F4 search fill, #222222 primary button, and a small accent such as #F6588A. Use 12–16px gaps, 44px minimum control height, 999px button radius, and accessible focus states. Collapse secondary links into a menu on small screens while preserving search and the main action. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage