## 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/helo/c47b31ce-de8b-413b-ab53-bd3bf69ea219-1790921005-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/helo/c47b31ce-de8b-413b-ab53-bd3bf69ea219-1790920903911-full.webp
- Component on Kage: https://kage.design/component/helo-navigation

## Before you start
Ask what the user's product is, who it serves, and what brand personality and colors it uses. Then apply the following principles to create an original navigation for that product.

Build a desktop-first navigation bar in a warm off-white page shell. Use a wide rounded rectangle with a thin near-black border, a subtle offset dark shadow beneath it, and generous horizontal padding. Align the brand mark and wordmark left, four concise product links in the center-left, and a text login action plus a coral filled signup button on the right. Use a friendly grotesk/body font for navigation labels, medium weight, compact 14–16px sizing, and a high-contrast near-black text color. Keep the bar approximately 64px tall with a 14–16px radius; the primary action should be pill-like with a smaller radius and coral-orange fill around #f2674f.

Make the layout responsive: collapse links behind a menu button on small screens while preserving the right-side primary action when possible. Add clear hover/focus states, but avoid excessive animation.

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