## 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/framefields/70450159-6614-49a5-a5e2-7c6c30c81571-1792476187-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/framefields/70450159-6614-49a5-a5e2-7c6c30c81571-1792476110643-full.webp
- Component on Kage: https://kage.design/component/framefields-navigation

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

Build a compact desktop-first navigation bar for a developer product. Use a pale cool-gray background near `#eef1ef`, a small monochrome mark and bold wordmark on the left, and a tight row of text links aligned to the right. Keep the container full width with roughly 16px horizontal padding and 18–24px vertical breathing room. Use a neutral sans-serif, 14–16px text, medium weight for links, and a heavier weight for the brand. Avoid decorative borders; rely on spacing and strong alignment. Links should have clear hover/focus underlines or a subtle color shift and remain keyboard accessible.

Never: use logos, product names, copy, illustrations, or imagery from the reference.