## 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/fifi/65f510a7-1d11-431a-a427-6e570df25f2f-1789538466-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fifi/65f510a7-1d11-431a-a427-6e570df25f2f-1789538432367-full.webp
- Component on Kage: https://kage.design/component/fifi-navigation

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

Build a floating desktop-first navigation bar. Use a centered max-width container with a capsule-shaped surface, generous horizontal padding, a small brand mark on the left, evenly spaced low-emphasis links in the middle, and one dark or contrasting rounded action button on the right. Keep the nav visually lighter than the hero background while preserving strong contrast. Use a clean sans-serif hierarchy: compact brand label, 13–14px navigation links, and a 13px semibold CTA. Use approximately 24px outer top spacing, 12–16px internal vertical padding, a 999px radius, and a subtle translucent border. On smaller screens, collapse links into a menu while keeping the primary action visible. Make links and the CTA keyboard accessible.

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