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

Design analysis

A sparse black navigation bar uses a small wordmark at left and a hamburger control at right, preserving maximum space for the product message.

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/bunq-com/4420c8b4-fa9d-40bf-a5d3-de95f2febdf1-1789146828-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bunq-com/4420c8b4-fa9d-40bf-a5d3-de95f2febdf1-1789146743583-full.webp
- Component on Kage: https://kage.design/component/bunq-navigation

## Before you start
Ask what the user's product, audience, and brand are, then apply the following principles to that context.

Build a compact, full-width navigation bar for a dark mobile-first product page. Use a black background (#000000), a small brand mark or text lockup aligned near the left edge, and a simple three-line menu button aligned near the right edge. Keep the bar around 64–72px tall with 12px horizontal padding. Use a clean sans-serif typeface, high-contrast white text, and no visible border. Make the menu button accessible, with a generous hit area and a subtle hover/focus state. Keep alignment consistent with every later section.

### Never
- Never use the reference logo, product name, copy, illustrations, or imagery.
- Never reproduce the exact navigation styling as a brand identity.
- Never add unnecessary links that weaken the compact mobile composition.

More components