## 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/s-roll/31ce67c8-e756-4d99-81ee-7a5fcf910ca7-1789711385-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/s-roll/31ce67c8-e756-4d99-81ee-7a5fcf910ca7-1789711333877-full.webp
- Component on Kage: https://kage.design/component/s-roll-navigation

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

Build a floating dark navigation bar for a premium software landing page. Use a nearly black translucent surface around #111114 with a subtle #3a3a40 border, 1px radius, and a soft shadow. Align the brand mark and wordmark horizontally at the left with 16–20px side padding; place one compact primary action at the right. Keep the bar max-width around 880px on desktop, centered, and make it responsive with tighter padding on mobile. Use a refined serif or display face for the brand and a small neutral sans-serif for the button. The button should have a muted gray fill, pill radius, and a clear hover transition to a lighter surface. Keep the navigation visually quiet so the hero remains dominant.

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