## 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/image-to-ascii/536947f7-3504-43cd-9692-a327ad82583f-1789452197-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/image-to-ascii/536947f7-3504-43cd-9692-a327ad82583f-1789452107158-full.webp
- Component on Kage: https://kage.design/component/image-to-ascii-navigation

## Before you start
Ask what the user's product is, who it serves, and what brand personality it should express. Then apply the following principles to that product rather than copying this reference.

Build a compact responsive navigation bar for a dark, technical web product. Use a full-width near-black background (#070a09), a small brand mark area on the left, and horizontally aligned utility links on the right. Keep the header around 64px tall with 28px horizontal padding on desktop and 16px on mobile. Use a small monospaced or condensed sans-serif typeface, muted gray text (#a7aaa8), generous 20–28px gaps, and a single understated active underline. Add a small lavender accent (#b9a0ff) only for the brand or key active state. Use subtle bottom separation rather than a heavy border. Collapse links into a menu on narrow screens and preserve keyboard focus states.

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