## 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/codeaf/74fffb9e-aea6-4193-af2d-c8a5b19c270c-1791007527-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/codeaf/74fffb9e-aea6-4193-af2d-c8a5b19c270c-1791007420738-full.webp
- Component on Kage: https://kage.design/component/codeaf-navigation

## Before you start
Ask what the user's product is, what its brand personality is, and which destinations belong in the primary navigation. Apply the principles below to that product rather than reproducing the reference.

Build a dark product navigation bar with a restrained, technical feel. Use a centered max-width content row with a small brand/breadcrumb cluster on the left, the current product and sibling product links in the middle, and documentation, status/community, and a compact utility control on the right. Keep the bar around 56–64px tall, align every item to one baseline, and use generous horizontal padding.

Design language: near-black background #08090a, slightly lighter lower border #202224, muted gray text #777b7d, primary text #d9dcda, and a tiny warm amber accent #c49a45 for the active state. Use a small monospaced or technical label style for breadcrumbs and compact sans-serif navigation text at 12–13px. Separate clusters with subtle gaps rather than heavy dividers; active links can use a faint outlined pill or brighter text. Add hover/focus states with brighter text and a thin amber underline or border. Ensure keyboard focus is visible.

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