## 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/peerspace-com/2a6d29c3-21bf-4d34-8c1e-93824205de9d-1789146239-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/peerspace-com/2a6d29c3-21bf-4d34-8c1e-93824205de9d-1789146208431-full.webp
- Component on Kage: https://kage.design/component/peerspace-navigation

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

Build a responsive over-hero navigation bar. Keep the brand mark on the left, group browse/discovery and host-oriented links on the right, and use one high-contrast account CTA. Make the bar transparent or image-aware when placed over a hero, with enough contrast through color, subtle shadow, or an adaptive background. Use a clean sans-serif type system, compact 14–16px utility labels, generous horizontal padding, and a clear 8px-ish control radius. Add a mobile menu that preserves the primary discovery action. Use near-black text on light surfaces or white text over imagery, with a white filled CTA and dark label where appropriate.

Never: use the reference logo, product name, exact copy, illustrations, imagery, or distinctive brand assets.