## 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/mylens/1ccd9fd0-0589-4047-afdb-6c3bf2f362f8-1792389751-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mylens/1ccd9fd0-0589-4047-afdb-6c3bf2f362f8-1792389647544-full.webp
- Component on Kage: https://kage.design/component/mylens-navigation

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

Build a compact full-width website navigation. Use a generous horizontal container, a small brand mark on the left, a sparse group of text links near the center, and secondary/primary account actions on the right. Keep the header visually quiet: warm off-white background, near-black text, tiny muted labels, and one dark navy filled button with a modest radius. Use a thin bottom rule if helpful, preserve generous side padding, and make the layout collapse into a menu on narrow screens. The primary action should be short and visually distinct; links should have subtle hover underlines or colour changes.

Design rules:
- Use an off-white background around `#f4f4f1`, charcoal text around `#202120`, and deep navy button around `#20334a`.
- Keep the header around 56–72px tall with a centered max-width content row.
- Use a restrained sans-serif at 11–13px for navigation and a compact 12–14px button label.
- Avoid heavy shadows; use a 1px border around `#dedfda` only where separation is needed.
- Use 6–8px button radius and consistent 20–28px horizontal gaps.

Never:
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never make the header visually louder than the hero.
- Never add an unrelated mega-menu or decorative navigation artwork.