## 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/salience/db9244f7-ec48-4516-9a93-11a957a9eab9-1792303418-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/salience/db9244f7-ec48-4516-9a93-11a957a9eab9-1792303314589-full.webp
- Component on Kage: https://kage.design/component/salience-navigation

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

Build a compact desktop-first SaaS navigation bar. Use a max-width content row with the brand lockup on the left, 4–6 restrained text links in the centre, and a small secondary login link plus a high-contrast primary button on the right. Keep the header around 64–72px tall, align everything vertically, and preserve generous horizontal padding. Use a clean sans-serif, 12–14px navigation text, near-black text (#111111), a very pale green or neutral background (#f5fff2), and a vivid accent green (#8bea72) only for the brand mark or active action. Make the primary button black with white text, 8px radius, and a subtle split-arrow affordance if useful. Add a thin bottom border only if needed for separation. On smaller screens collapse links into a menu button while keeping the CTA visible.

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