runnova.ai
Design analysis
A compact navigation bar sits over the hero inside the rounded image frame, combining brand, primary links, a launch badge, theme control, and sign-in action.
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/nova-cli-v1-0/f9d737a9-3081-4768-944e-79473fdb1d08-1791525756-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/nova-cli-v1-0/f9d737a9-3081-4768-944e-79473fdb1d08-1791525679651-full.webp - Component on Kage: https://kage.design/component/nova-cli-v1-0-navigation ## Before you start Ask what the user's product is, who it is for, and what brand personality, logo, and navigation destinations they want. Apply the principles below to that product rather than reproducing this reference. Build a floating desktop navigation bar over a large hero. Use a centered max-width container with a small brand pill on the left, a white or lightly tinted rounded capsule for primary links in the middle, and compact utility actions on the right. Keep the navigation visually quiet so the hero remains dominant. Use 13–14px sans-serif text, medium weight, generous horizontal padding, and 9999px pill radii. Use translucent white surfaces around rgba(255,255,255,.9), near-black text #17191b, subtle border #e5e7e8, and a dark filled sign-in button #111417 with white text. Align everything on one baseline and provide clear hover, focus, and keyboard states. Never use logos, product names, copy, illustrations, or imagery from the reference.
kage