Kage Design logo kage
illusions.app
illusions navigation component

Design analysis

A restrained top bar overlays the photographic hero, using small centered links and a compact outlined account action so the visual remains dominant.

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/illusions/1ba887fc-c00e-45d6-baad-b5fdc0d1f7c3-1789797654-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/illusions/1ba887fc-c00e-45d6-baad-b5fdc0d1f7c3-1789797632145-full.webp
- Component on Kage: https://kage.design/component/illusions-navigation

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

Build a slim, transparent navigation bar for a dark editorial product site. Keep the header about 52–64px tall with a centered max-width content row, subtle low-contrast links, and one compact outlined utility/account action aligned to the right. Use generous horizontal breathing room, a near-black translucent background, warm-white text, and a very thin muted border or divider. Typography should be small and calm, with slightly increased letter spacing; the active or primary action may use a soft pill radius around 999px. On mobile, collapse secondary links into a simple menu control while keeping the primary action visible.

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

More components