Kage Design logo kage
hanomi.ai
hanomi.ai navigation component

Design analysis

A very restrained header places the wordmark at the upper left and a compact hamburger control at the upper right, leaving generous whitespace for a premium technical feel.

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/hanomi-ai/e6570335-e597-4dea-b51d-b53895fecbf1-1790500614-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hanomi-ai/e6570335-e597-4dea-b51d-b53895fecbf1-1790500563313-full.webp
- Component on Kage: https://kage.design/component/hanomi-navigation

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

Build a full-width, minimal navigation header for a technical B2B software product. Keep the header around 72–96px tall with a small brand mark or wordmark aligned to a consistent left content inset and a compact menu button aligned to the right inset. Use a white or near-white background, near-black text, and a single warm accent for any icon detail. Keep the navigation intentionally sparse; on small screens, use a simple hamburger button with an accessible label and visible focus state. Use a clean grotesk/system sans-serif, medium-weight wordmark, subtle 1px dividers only if needed, and no heavy card treatment.

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

More components