## 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/chathop/788ba903-59f3-47ff-b1c8-618bf4f4ae3c-1789193009-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/chathop/788ba903-59f3-47ff-b1c8-618bf4f4ae3c-1789192974293-full.webp
- Component on Kage: https://kage.design/component/chathop-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and primary action should be. Apply the principles below to that product rather than reproducing the reference.

Build a responsive top navigation for a playful modern software landing page. Use a centered floating pill rather than a full-width bar: brand mark and name on the left, 3–4 short links in the middle, and one high-contrast primary action on the right. Keep the navigation narrow enough to float with generous page margins on desktop, and make it become a full-width or stacked mobile header.

Design language: use a rounded capsule with a very light lime/white translucent surface, subtle green glow or shadow, and near-black text. Use a geometric sans-serif, 12–14px medium labels, compact horizontal spacing, and a black pill button with white text. Radius should be 999px for the shell and button; maintain a 1px low-contrast border. Align all items vertically and keep the header around 56–64px tall. Add visible hover/focus states, and collapse links behind a menu button on small screens.

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