## 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/base-code/bec5af88-964e-4f0a-90b9-76aa2444b6f5-1791871470-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/base-code/bec5af88-964e-4f0a-90b9-76aa2444b6f5-1791871315791-full.webp
- Component on Kage: https://kage.design/component/base-code-navigation

## Before you start
Ask what the user's product is, who it is for, and what their brand voice and visual identity are. Apply the principles below to that product rather than reproducing the reference.

Build a compact, full-width product navigation bar. Keep the left side reserved for a simple text-based brand mark, and align a primary action plus a menu trigger on the right. Use generous horizontal padding, a shallow header height, strong contrast for the primary button, and a quiet background that lets the hero dominate. Use a modern grotesk sans-serif, medium-weight navigation text, a near-black button around `#252525`, warm off-white background around `#f7f7f5`, subtle or no border, and a small radius around 7px. Make the action and menu keyboard accessible; on small screens preserve the same hierarchy and collapse links into the menu.

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