## 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/koi/1f2fb87d-9243-4e92-a42a-66c20077da12-1792649016-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/koi/1f2fb87d-9243-4e92-a42a-66c20077da12-1792648920300-full.webp
- Component on Kage: https://kage.design/component/koi-navigation

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

Build a compact responsive navigation bar for a premium desktop utility. Keep the brand lockup at the left, a short centered or right-aligned set of secondary links, and one high-contrast primary action at the far right. Use a near-black or deeply tinted transparent background over the hero, 16–20px horizontal padding, and a max-width container. Make the brand small but legible, links subdued, and the action pill-shaped with a light fill. Typography should use a clean grotesk: 11–13px links, medium-weight brand, and a 12px action label. Use subtle opacity changes on hover, preserve keyboard focus, and collapse links into a menu on small screens.

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