## 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/web-search-agents-by-nimble/b9f88c51-9261-49a4-af5a-25ccd481000c-1789452127-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/web-search-agents-by-nimble/b9f88c51-9261-49a4-af5a-25ccd481000c-1789452077081-full.webp
- Component on Kage: https://kage.design/component/web-search-agents-by-nimble-navigation

## Before you start
Ask what the user's product, audience, and brand identity are, then apply the principles below to that product rather than reproducing the reference.

Build a responsive top navigation that sits as a rounded white pill over a dark page background. Use a wide max-width container with generous horizontal padding, a compact brand area on the left, low-emphasis navigation links with small chevrons for dropdowns in the center, and login plus one bright primary action on the right. Keep the bar around 48–56px tall, use a 999px radius, and add a very subtle shadow or border. Use near-black #080808 for the surrounding background, white #FFFFFF for the pill, charcoal #171717 for text, and an accent yellow around #FFF500 for the primary button. Typography should be a clean modern sans-serif: 13–14px navigation text, medium weight, with slightly stronger emphasis on the CTA. Preserve clear focus states, keyboard accessibility, and collapse links into a mobile menu below tablet width.

Never use the reference logo, product name, exact labels, copy, icons, or imagery.