## 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/figma-agent/07db1d51-fc5a-42e3-8555-5aed12aa6731-1791439425-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/figma-agent/07db1d51-fc5a-42e3-8555-5aed12aa6731-1791439335233-full.webp
- Component on Kage: https://kage.design/component/figma-agent-navigation

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to that product rather than reproducing the reference.

Build a responsive global navigation bar for a modern software product. Use a white background, a thin light-gray bottom border, and a compact horizontal layout with the brand mark at the far left, primary product/category links beside it, and utility plus primary actions at the far right. Keep the content aligned to a centered max-width container with approximately 28px horizontal padding. Use a neutral sans-serif typeface, 13–14px navigation text, and slightly stronger weight for the primary action. Use small chevrons for menu items with submenus. Style secondary actions as plain or white outlined buttons and the primary action as a black filled button with white text, approximately 8px radius and 12px/18px padding. On mobile, collapse links into a menu button while retaining the main CTA.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- clone the exact navigation labels or arrangement
- use an unresponsive desktop-only layout