## 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/portfolio-frame/48220de1-a18c-43ab-aca5-f2ed5e4c7799-1789538572-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/portfolio-frame/48220de1-a18c-43ab-aca5-f2ed5e4c7799-1789538513158-full.webp
- Component on Kage: https://kage.design/component/portfolio-frame-navigation

## Before you start
Ask what the user's product and brand are, then apply the principles below to that product rather than reproducing the reference.

Build a compact dark navigation bar for a desktop-first product landing page. Use a nearly black green-tinted background around #08100f, a 1px bottom border around #26302e, and a restrained mono uppercase treatment for small navigation labels. Align the brand mark and name on the left inside a centered content rail about 820px wide; place section links in the middle with generous 18–22px gaps; place a small language control and bright blue primary button on the right. Keep the bar about 54px tall, with 16px horizontal padding on small screens and responsive collapse into a menu. Use a blue accent around #52afe1 for the main action, 4–6px radius, and subtle hover brightness. Ensure keyboard-visible focus states and anchor links that scroll to sections.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- reproduce the exact navigation labels or branding
- make the header visually louder than the page content