Kage Design logo kage
polylane.com
Polylane Impact Analysis navigation component

Design analysis

A compact white navigation bar anchors the page with brand at left, grouped product links in the center, and a high-contrast sign-up action at 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/polylane-impact-analysis/878f0a8a-6be5-46ae-8786-d3cb31a469c0-1792130545-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/polylane-impact-analysis/878f0a8a-6be5-46ae-8786-d3cb31a469c0-1792130477581-full.webp
- Component on Kage: https://kage.design/component/polylane-impact-analysis-navigation

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to create an original navigation for that product.

Build a compact desktop-first top navigation on a white background. Keep the brand mark and wordmark aligned on the left, use a restrained row of grouped links with small chevrons in the middle, and place a small utility control plus one bright primary CTA on the right. Use a 44–52px bar, a centered max-width container, 14px horizontal padding on mobile, 20–32px desktop side padding, near-black text (#171717), muted secondary text (#5f6363), and a vivid green CTA around #20d55b with a 7–9px radius. Use a thin bottom border (#eeeeeb), medium-weight sans-serif labels, and generous horizontal gaps. Collapse links into a menu button below tablet width; keep the CTA visible when possible.

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

More components