## 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/navige/e3ee1ee4-7855-4062-a956-cf327122240e-1792130698-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/navige/e3ee1ee4-7855-4062-a956-cf327122240e-1792130598253-full.webp
- Component on Kage: https://kage.design/component/navige-navigation

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

Build a floating desktop navigation bar for a modern software product. Use a centered max-width container with a softly off-white translucent pill, generous horizontal padding, and a subtle shadow or border. Keep the brand mark on the left, a small set of evenly spaced links in the middle, and one high-contrast rounded CTA on the right. Use a clean grotesk sans-serif at roughly 12–14px, medium weight; make the CTA slightly bolder. Use near-black #111217 text, warm white #f5f4f0, and a black #111217 CTA with white text. Keep the height around 48–56px, radius 999px, and align everything vertically.

On scroll, the bar may remain sticky and gain a stronger backdrop blur. Make links keyboard accessible and provide visible hover/focus states.

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