## 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/descript-com/c210b18a-1678-4bef-91b5-c444a8589f04-1789146910-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/descript-com/c210b18a-1678-4bef-91b5-c444a8589f04-1789146857587-full.webp
- Component on Kage: https://kage.design/component/descript-navigation

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

Build a responsive SaaS navigation bar with a light, slightly warm background and rounded lower corners. Keep the content in a centered max-width row: brand mark and name on the left, a small set of dropdown-capable product links in the middle, and sales/contact plus authentication actions on the right. Use a high-contrast filled primary button for the main conversion and a quiet text link for sign-in. Use a display serif only if it fits the user's brand; otherwise use a clean sans-serif. Approximate colors: #fff8fa background, #1d1014 text, #ff4d4d primary, #5c1835 accent. Use 16–24px horizontal padding, 12–16px gaps, 8–12px button radius, and a subtle shadow or border. Collapse into a menu button on small screens while preserving the primary CTA. Add visible hover/focus states and dropdown chevrons where relevant.

### Never
- Never copy logos, product names, copy, illustrations, or imagery from the reference.
- Never make the nav overcrowded or hide keyboard focus states.