## 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/loqui/a3dfb9eb-3572-4db1-a73a-a6d0266fe180-1793081139-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/loqui/a3dfb9eb-3572-4db1-a73a-a6d0266fe180-1793080985787-full.webp
- Component on Kage: https://kage.design/component/loqui-navigation

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

Build a responsive top navigation for a modern desktop-first software landing page. Use a clean white or warm-white background, a small product wordmark at the left, three to five concise product links in the middle, and low-friction account/download actions on the right. Keep the nav around 52–64px tall with generous horizontal padding and a thin accent rule at the very top.

Design rules:
- Use a max-width content container and align every item to the same vertical centerline.
- Keep the wordmark visually stronger than the navigation links, but smaller than the hero.
- Use a near-black primary text colour such as #111111, muted text around #5f5f5f, and one saturated action blue around #3158f5.
- Primary action should be a compact pill with 14–18px horizontal padding, a 999px radius, and no heavy border.
- Use a neutral sans-serif at 12–14px for links and a slightly heavier weight for the action.
- On small screens, collapse links into a menu while preserving the wordmark and primary action.
- Add subtle hover colour changes and a visible keyboard focus ring.

Never:
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never make the navigation visually dense, overly shadowed, or taller than the hero needs.