## 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/cadenya/d064e83b-00ab-4d52-aab7-77367964ea32-1789192866-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cadenya/d064e83b-00ab-4d52-aab7-77367964ea32-1789192832645-full.webp
- Component on Kage: https://kage.design/component/cadenya-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and primary action should be. Apply the following principles to that product rather than reproducing the reference.

Build a compact desktop-first navigation bar for a technical product. Use a white or warm-white background, a 1px pale gray border, and a strict horizontal grid. Place the brand mark/name at the far left, primary text links in individually bounded cells or clearly separated groups, and account actions at the far right. Keep the bar about 48–56px tall, align everything to a shared vertical center, and use generous horizontal padding. Use a restrained mono or grotesk font for 10–12px uppercase navigation labels with slight letter spacing; make the brand larger and more distinctive. Use near-black text (#172021), pale gray rules (#e4e7e2), and one muted accent for the primary action. Keep corners square or nearly square, with buttons at 3–6px radius. Add visible hover/focus states, and collapse into a menu on narrow screens without losing the primary CTA.

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