## 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/audimate/f5eee044-0aa0-46f8-a989-58039412e614-1792130729-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/audimate/f5eee044-0aa0-46f8-a989-58039412e614-1792130546049-full.webp
- Component on Kage: https://kage.design/component/audimate-navigation

## Before you start
Ask what the user's product and brand are, then apply the principles below to that product rather than reproducing the reference.

Build a compact floating navigation for a dark software landing page. Use a centered pill container with a near-black surface (#111113), a subtle gray border (#242428), 999px radius, and approximately 10–16px horizontal padding. Align a small brand mark and wordmark on the left, understated navigation links in the middle, and one white rounded primary button on the right. Use a clean geometric sans-serif: 11–12px links, medium weight, muted gray (#a0a0a8), with a white button and black text. Keep the bar around 36–40px tall and give it generous breathing room from the viewport edges. On hover, brighten links and slightly lift the button; preserve keyboard focus rings.

Never: use the reference's logo, product name, copy, illustrations, imagery, or exact visual identity.