Kage Design logo kage
aibridge.sh
AI Bridge navigation component

Design analysis

A compact navigation overlays the atmospheric hero, pairing a small brand mark with sparse anchor links and two low-friction account/download actions.

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/ai-bridge/b251bcbf-eae9-4af6-9324-2c0c35690cf2-1793080969-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ai-bridge/b251bcbf-eae9-4af6-9324-2c0c35690cf2-1793080894182-full.webp
- Component on Kage: https://kage.design/component/ai-bridge-navigation

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

Build a full-width desktop-first navigation over a dark photographic or gradient hero. Use a restrained horizontal layout: brand at the left, a small set of anchor links centered or slightly left of center, and sign-in plus one high-contrast primary action at the right. Keep the bar around 64px tall with 32–40px horizontal padding. Use a near-white brand and link treatment on a deep navy background or translucent overlay (`#0B1028`, with about 70% opacity); links should be 12–13px, medium weight, and muted (`#A7AEC5`). The primary button should be white (`#FFFFFF`) with dark text (`#101326`), 14px radius, compact horizontal padding, and a subtle hover lift. Use a small abstract brand mark instead of a literal logo. Align all items to one baseline and collapse links into a menu on narrow screens.

Never use the reference's logo, product name, copy, illustrations, imagery, or exact navigation labels.

More components