## 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/agentscore/bf3a39fb-f256-40cb-bcdd-3b9ee37cde16-1790229736-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/agentscore/bf3a39fb-f256-40cb-bcdd-3b9ee37cde16-1790229689528-full.webp
- Component on Kage: https://kage.design/component/agentscore-navigation

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

Build a slim full-width dark navigation bar for a serious developer-facing product. Use a left-aligned brand mark rendered as text or a product-neutral placeholder, a small product-area label beside it, and right-aligned secondary links followed by one white primary button. Keep the content in a centered max-width container with about 50px side padding on desktop and stack or collapse it on mobile. Use a near-black background (#080808), white primary text (#f5f5f5), muted gray links (#999), and a very subtle bottom border (#242424). Use a clean grotesk or system sans-serif, with a 15–16px brand wordmark and 12–13px utility links. Keep the bar about 56px tall, align everything vertically, use 8px corner radius on the button, and provide hover color/opacity transitions. Do not make the navigation compete with the hero.

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