## 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/loqua/e5cf041a-edc7-487a-b4b8-8f4d563da4de-1789192871-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/loqua/e5cf041a-edc7-487a-b4b8-8f4d563da4de-1789192838731-full.webp
- Component on Kage: https://kage.design/component/loqua-navigation

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

Build a slim full-width navigation bar for a polished SaaS landing page. Use a warm off-white background around `#faf8ee`, a small wordmark area on the left, compact text links centered or grouped toward the right, and one black rounded primary-action pill at the far right. Keep the bar around 32–40px tall on desktop, align everything to a consistent horizontal container, use an understated sans-serif at 9–12px, and give the action button generous horizontal padding with a 999px radius. Add a subtle bottom border or shadow only if needed for separation. On small screens, collapse secondary links into a menu while keeping the primary action visible.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- make the navigation tall or visually dominant
- add links that the user's product does not need