## 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/ravio/21fc8fab-2ae9-4a70-87c8-10ebee6c9a8e-1789142158-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ravio/21fc8fab-2ae9-4a70-87c8-10ebee6c9a8e-1789141806972-full.webp
- Component on Kage: https://kage.design/component/ravio-navigation

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

Build a full-width desktop navigation bar with a restrained enterprise-SaaS feel. Use a centered max-width content row, a wordmark area on the left, grouped navigation links with subtle chevrons, and utility/sign-in plus one dark filled primary action on the right. Keep the header around 60–72px tall, align everything vertically, and preserve generous horizontal padding. Use a warm near-white background (#f7f8f4), dark charcoal text (#151515), muted gray secondary text (#5f625f), and a thin low-contrast border (#e5e7e2). Use a clean sans-serif at 13–14px; make the primary button 12–14px semibold with 8px radius and compact padding. Add hover states that darken links and slightly lift or tint the button; on smaller screens collapse links into a menu.

Never: copy the reference's logo, product name, navigation labels, copy, illustrations, imagery, or exact branding.