## 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/vibeide/07b340e8-2f64-4d74-b3e0-eba165a9aca9-1793080887-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/vibeide/07b340e8-2f64-4d74-b3e0-eba165a9aca9-1793080830929-full.webp
- Component on Kage: https://kage.design/component/vibeide-navigation

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

Build a compact desktop-first navigation bar. Use a white background, a small wordmark area on the left, centered product/resource links with restrained dropdown chevrons, and sign-in/register actions plus one mint-green primary button on the right. Keep the bar about 36–44px tall with 32–36px horizontal padding, 12–13px neutral sans-serif type, and a very thin pale-pink top accent. Use #ffffff, #111111, #82e0ae, and #f0a0ba; use subtle hover underlines or background tints, and collapse links into a menu on small screens.

Never use the reference logo, product name, copy, icons, or exact navigation labels.