## 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/fastrouter-ai/218f3f00-5cca-4309-9765-d0ad1151c96f-1791266478-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fastrouter-ai/218f3f00-5cca-4309-9765-d0ad1151c96f-1791266439499-full.webp
- Component on Kage: https://kage.design/component/fastrouter-navigation

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

Build a minimal SaaS navigation bar. Use a centered max-width container, a small product mark or wordmark on the left, and one compact primary action plus a simple menu affordance on the right. Keep the header visually quiet so the hero owns attention. Use a clean sans-serif hierarchy: 14px navigation text, medium weight, and a slightly stronger button label. Use white or near-white background `#ffffff`, charcoal text `#15171a`, muted text `#6b7078`, and a blue accent near `#3157d8`. Give the header 24–32px horizontal padding, 20–24px vertical padding, and a 1px transparent or very subtle border. Buttons may use 8px radius and 10–14px horizontal padding. On small screens collapse secondary navigation into the menu control. Make focus states visible and keyboard navigation logical.

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