## 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/duolingo-com/3a8c78c9-bd82-49c8-8251-8e9f7b022530-1789146267-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/duolingo-com/3a8c78c9-bd82-49c8-8251-8e9f7b022530-1789146240317-full.webp
- Component on Kage: https://kage.design/component/duolingo-navigation

## Before you start
Ask what the user's product, brand, navigation items, and primary conversion goal are, then apply the principles below to that product rather than copying the reference.

Build a responsive global navigation bar. Use a clean white background, a compact brand mark or wordmark on the left, and a restrained language or utility control on the right. Keep the header around 56–72px tall, align content to a centered max-width container, and use generous horizontal padding. Use dark gray text (#777777), a bright product accent for the brand (approximately #58CC02), a 1px pale divider (#E5E5E5), and small uppercase utility typography with comfortable letter spacing. Make the language control keyboard accessible and add a subtle hover state without adding visual clutter.

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