## 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/moji/682da163-2f11-4698-8415-78d5458fc05f-1789193059-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/moji/682da163-2f11-4698-8415-78d5458fc05f-1789192951631-full.webp
- Component on Kage: https://kage.design/component/moji-navigation

## Before you start
Ask what the user's product is, who it is for, and what their brand voice and visual identity are. Then apply the following principles to that product rather than reproducing the reference.

Build a slim responsive product navigation bar. Use a warm off-white background, a small left-aligned product mark and name, and a right-aligned row of 3–5 section links plus one compact utility control and a circular account/GitHub-like action. Keep the navigation around 56–64px tall, with a centered max-width container and generous horizontal padding. Use a high-contrast serif or display face for the wordmark and a compact sans-serif for links. Approximate colours: background #f7f6f1, text #202124, muted text #66645f, accent red #b52b25. Use subtle bottom separation rather than a heavy border, 8–18px corner radii for controls, and a small hover underline or colour shift. Collapse links into a menu on mobile.

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