Kage Design logo kage
axari.ai
Axari navigation component

Design analysis

A slim white header establishes the brand, keeps navigation sparse, and places two conversion links on the 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/axari/3e8824e7-9cff-44d5-8739-31a0e173005a-1789538686-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/axari/3e8824e7-9cff-44d5-8739-31a0e173005a-1789538612563-full.webp
- Component on Kage: https://kage.design/component/axari-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and primary CTA are. Apply the principles below to that product rather than reproducing the reference.

Build a slim desktop-first navigation bar: place a compact brand mark at the left, a small centered or right-weighted set of primary links, and one visually emphasized action plus one quieter action at the far right. Use a white background, approximately `#ffffff`, dark text around `#20202a`, muted secondary text around `#77747d`, and one brand accent such as violet `#4f35a8` or cyan `#54c6e6`. Keep the bar 56–68px tall with generous horizontal padding, 1px light-gray separation only if needed, 14px link text, and a restrained sans-serif typeface. Add clear hover/focus states and a mobile menu breakpoint.

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

More components