Kage Design logo kage
lu.ma
lu.ma navigation component

Design analysis

A nearly blank header keeps attention on the product promise, with a small brand mark at the upper left and a restrained sign-in action at the upper 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/lu-ma/a4be0bf4-46ad-4066-8582-e9890f24d9e0-1789146184-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lu-ma/a4be0bf4-46ad-4066-8582-e9890f24d9e0-1789146157883-full.webp
- Component on Kage: https://kage.design/component/lu-ma-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand voice and visual identity are. Then adapt the principles below to that product rather than reproducing the reference.

Build a minimal, full-width desktop navigation bar. Keep the header visually quiet: place a compact brand mark or wordmark on the left, leave generous empty space, and place one low-emphasis account or utility action on the right. Use a white background, near-black text (#171717), muted secondary text (#777777), and a very subtle bottom divider (#f2f2f2) only if needed. Set the header height around 48–64px, with horizontal padding aligned to the main content container below. Use a clean sans-serif, 12–14px utility text, and a small radius (6–8px) for any hover surface. On hover, gently darken the utility action or add a barely visible gray background.

Never: use the reference's logo, product name, copy, illustrations, imagery, or exact brand treatment.

More components