## 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/cortex/48e48c32-4544-4e71-94d3-849a84be1bb9-1789279408-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cortex/48e48c32-4544-4e71-94d3-849a84be1bb9-1789279340596-full.webp
- Component on Kage: https://kage.design/component/cortex-navigation

## Before you start
Ask what the user's product is, who it is for, and what brand personality and visual identity it should use. Apply the principles below to that product rather than reproducing the reference.

Build a compact full-width navigation bar for a developer-facing product. Use a nearly black background (#080909), a thin low-contrast bottom border (#242526), and a centered max-width content row with generous horizontal padding. Place a small geometric brand mark and product name on the left, followed by an understated uppercase status badge. Keep the main links centered or slightly right of center, using 11–12px muted gray text (#8d8f92), with restrained hover brightness. Put one high-contrast outlined or filled action button on the far right, with a small arrow icon.

Use a 52–56px height, 1px borders, 8px button radius, and a compact sans-serif type scale. Keep alignment crisp and avoid visual clutter. On small screens collapse links into a menu while preserving the primary action.

Never: use the reference's logos, product names, copy, illustrations, imagery, or exact navigation labels.