Kage Design logo kage
getpolyglot.io
Polyglot navigation component

Design analysis

A restrained black header balances compact branding on the left with sparse navigation and a high-contrast lavender download action on the right.

Prompt preview
## 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/polyglot/16feff4e-ce5f-4860-8cf6-49c37e8ed17f-1790402682-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/polyglot/16feff4e-ce5f-4860-8cf6-49c37e8ed17f-1790402570740-full.webp
- Component on Kage: https://kage.design/component/polyglot-navigation

## Before you start
Ask what the user's product is, who it serves, and what brand personality and visual identity it should use. Apply the following principles to that product rather than copying the reference.

Build a full-width dark desktop navigation bar. Use a nearly black background (#080808), a constrained content row with generous side padding, a small brand mark and wordmark at left, low-contrast text links in the middle/right, and one rounded lavender primary action (#ad8cff) at the far right. Keep the header around 72–84px tall, align every item vertically, use a clean sans-serif with 13–15px navigation text, and provide generous gaps rather than dividers. The button should have a pill radius, dark text, and a subtle hover lift or brightness change; collapse the links behind an accessible menu on narrow screens.

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

More components