## 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/raycast-2-0/585c4674-841f-40bf-a211-e6fd2d8f71e9-1789192910-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/raycast-2-0/585c4674-841f-40bf-a211-e6fd2d8f71e9-1789192849096-full.webp
- Component on Kage: https://kage.design/component/raycast-2-0-navigation

## Before you start
Ask what the user's product, brand, navigation items, and primary conversion action are. Apply the following principles to that product rather than reproducing the reference.

Build a responsive floating navigation bar for a dark software landing page. Use a near-black page background (#000000) and a slightly lighter translucent bar (#111214) with a subtle 1px border in #242629, a 14px radius, and a soft shadow. Keep the content in a centered max-width container with 24px horizontal padding. Align the brand mark and wordmark left, navigation links in the middle, and utility/login plus a bright primary button on the right. Use a restrained sans-serif hierarchy: 13px medium links in #9b9b9f, brighter #f4f4f5 on hover, and a 14px semibold button label. Give the bar roughly 12px vertical padding and 16–20px gaps between links. The primary button should be light gray/white (#f2f2f2) with black text, 8px radius, and a subtle hover lift. On smaller screens collapse links into a menu while preserving the brand and CTA.

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