## 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/clarity/18084f24-bf00-4b1e-9761-c33f370871f3-1790921029-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/clarity/18084f24-bf00-4b1e-9761-c33f370871f3-1790920906751-full.webp
- Component on Kage: https://kage.design/component/clarity-navigation

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

Build a compact floating navigation for a dark, premium software landing page. Use a centered max-width pill with a near-black translucent background, subtle 1px border, generous horizontal padding, and a soft 24–32px radius. Align the brand mark and name on the left, a small set of navigation links in the middle, and one high-contrast rounded primary action on the right. Use a restrained sans-serif hierarchy: 13–14px links, medium-weight brand label, and a slightly brighter button label. Use approximately #080909 for the page, #17191c for the nav surface, #dfe2e5 for primary text, #92979d for secondary text, and #59606a for the button gradient/border. Keep the nav around 56–64px tall, centered with 12–24px top margin, and make it responsive by collapsing links behind a menu on small screens. Add hover/focus states that brighten text and lift the button subtly.

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