Kage Design logo kage
airjelly.ai
AirJelly navigation component

Design analysis

A compact top bar pairs a tiny brand mark with centered utility links and right-aligned language and download actions. The generous white space makes the interface feel calm and premium.

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/airjelly/990a635f-6745-4f3e-9b4f-9fb8b62b8b48-1792044309-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/airjelly/990a635f-6745-4f3e-9b4f-9fb8b62b8b48-1792044207019-full.webp
- Component on Kage: https://kage.design/component/airjelly-navigation

## Before you start
Ask what the user's product, brand, audience, and primary conversion goal are, then apply the principles below to that product rather than copying the reference.

Build a responsive navigation bar for a calm, premium software landing page. Use a full-width white background, a thin accent rule at the top, and a centered max-width content row around 680–720px wide. Put a small abstract brand mark at left, sparse text links in the middle, and language plus a dark pill-shaped primary action at right. Use 12–13px neutral sans-serif text, generous horizontal spacing, 20–24px vertical padding, and a sticky or static layout depending on the product context. Keep the brand mark simple and original. Links should have subtle hover colour transitions; the primary button should darken slightly on hover and remain keyboard accessible. Collapse links into a compact menu on narrow screens.

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

More components