## 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/638c7112-70a9-484e-b85d-ab255c3ac21a-1790920979-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/polylane/638c7112-70a9-484e-b85d-ab255c3ac21a-1790920937285-full.webp
- Component on Kage: https://kage.design/component/polylane-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and primary conversion action are. Apply the principles below to that product rather than copying the reference.

Build a restrained SaaS navigation bar. Use a full-width white surface with a thin accent rule at the top, a max-width centered inner row, product mark and wordmark on the left, simple grouped links in the middle, and a compact utility control plus filled primary CTA on the right. Keep the row around 40–56px tall, align every item vertically, and use generous horizontal spacing rather than heavy separators.

Use near-black text around #171717, muted gray for secondary links around #555555, white background, and a fresh green action around #71AA2B with a darker hover state around #5C8F21. Use a neutral sans-serif, 12–14px navigation text, medium weight for the brand and CTA, 8–10px radius on the button, and a very subtle bottom border around #EEEEEE. Make links and the CTA keyboard accessible; add a compact mobile menu below the desktop breakpoint.

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