Kage Design logo kage
venmo.com
venmo.com navigation component

Design analysis

A compact white utility header places the blue wordmark at left, primary product links in the middle, and support, authentication, and menu controls 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/venmo-com/e421e2ca-b11c-49c9-b106-d3994196da77-1789146507-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/venmo-com/e421e2ca-b11c-49c9-b106-d3994196da77-1789146468321-full.webp
- Component on Kage: https://kage.design/component/venmo-navigation

## Before you start
Ask what the user's product, audience, and brand are, then apply these principles to that product rather than reproducing the reference.

Build a responsive primary navigation with a white background and a thin bottom divider. Use a max-width content row with a brand mark on the left, three concise product links with small chevrons, and utility actions on the right: help, a low-emphasis login action, a black pill-shaped sign-up button, and a menu icon. Use a clean sans-serif hierarchy, 14–16px nav text, generous horizontal spacing, black text, and a bright blue brand accent. Keep the header around 64px tall, with 24px side padding on desktop and a collapsed menu on mobile. Use subtle hover states and preserve keyboard focus visibility.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never clone the exact navigation labels or brand identity.

More components