## 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/humalike-x-gta-rp/6ac3c297-ddf9-47c3-9f0d-e872104f2707-1790575367-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/humalike-x-gta-rp/6ac3c297-ddf9-47c3-9f0d-e872104f2707-1790575278727-full.webp
- Component on Kage: https://kage.design/component/humalike-x-gta-rp-navigation

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

Build a floating desktop navigation bar over the top of a cinematic landing-page hero. Use a centered max-width container, a translucent dark surface with subtle blur, a thin low-contrast border, and a medium pill radius. Keep the brand mark left-aligned, place compact utility links and social icons toward the right, and end with one light, rounded primary action button. Use generous horizontal padding, a restrained sans-serif hierarchy, and enough contrast for the bar to remain readable over imagery. On small screens, collapse secondary links into a menu while preserving the primary action.

Use near-black translucent charcoal such as #20201fdd, warm white #f7f5f0, muted gray #b9b6b0, and an off-white button around #f4f1ea. Keep borders around #ffffff26 and use a 10–14px radius. Add only subtle hover brightening and focus-visible outlines.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never hard-code the reference brand or GTA-related language.