Kage Design logo kage
cloudknife.com
CloudKnife navigation component

Design analysis

A translucent rounded navigation bar floats over the dark hero, balancing a small wordmark, centered product links, and two compact 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/cloudknife/9dafaa08-16c6-4721-8c78-296bafbb7abc-1793081088-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cloudknife/9dafaa08-16c6-4721-8c78-296bafbb7abc-1793080968695-full.webp
- Component on Kage: https://kage.design/component/cloudknife-navigation

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

Build a compact desktop navigation bar that sits over a dark, atmospheric hero. Use a centered max-width container with a small brand mark on the left, short navigation links in the middle, and two differentiated calls to action on the right. Keep the bar translucent with a deep indigo fill around #252044 at roughly 75% opacity, a subtle white border at 12% opacity, and a 999px radius. Use a small neutral sans-serif wordmark, 11–12px links, and one filled accent button plus one darker secondary button. Keep horizontal padding generous, align everything vertically, and make the nav sticky or fixed only if that suits the product. Add visible hover/focus states with a modest lift or brightness change.

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

More components