## 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/mermaidonline-live/7b9ecc63-d7b9-4b92-a5d2-b69508fba7f2-1792152743-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mermaidonline-live/7b9ecc63-d7b9-4b92-a5d2-b69508fba7f2-1792152710959-full.webp
- Component on Kage: https://kage.design/component/mermaidonline-live-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and primary navigation destinations are. Apply the principles below to that product rather than reproducing the reference.

Build a responsive SaaS navigation bar with a compact horizontal layout. Keep the brand lockup on the left, a small set of icon-assisted product links in the center, and language/account actions on the right; collapse links into a menu on narrow screens. Use a white background, subtle bottom border, charcoal text around #303238, muted gray secondary text around #73777d, a vivid pink brand accent around #ed4b7e, and a blue primary action around #4285df. Use 14px navigation text, semibold brand text, 40px-high controls, 8px radius, and generous horizontal padding. Keep alignment vertically centered and preserve a clear focus state and keyboard access.

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