## 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/harmony/a96ec10f-a650-47bb-acaa-8bed3696d9f4-1790575328-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/harmony/a96ec10f-a650-47bb-acaa-8bed3696d9f4-1790575269319-full.webp
- Component on Kage: https://kage.design/component/harmony-navigation

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

Build a slim full-width SaaS navigation bar. Use a dark indigo-to-violet horizontal gradient, generous horizontal padding, a compact brand mark at left, evenly spaced text links in the middle, and one high-contrast primary action at right. Keep the bar visually light: approximately 44–56px tall, 14–16px medium sans-serif text, subtle white opacity for secondary links, and a small radius or pill treatment on the primary action. Align everything to one centered max-width container and make the navigation collapse cleanly on mobile. Add hover states that brighten links and slightly lift the CTA.

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