## 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/the-brains/a35aca56-f802-48ab-9290-e49eab0cde25-1792648933-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/the-brains/a35aca56-f802-48ab-9290-e49eab0cde25-1792648871849-full.webp
- Component on Kage: https://kage.design/component/the-brains-navigation

## Before you start
Ask the user what their product is, who it serves, and what brand personality and colours to use. Then apply the principles below to that product rather than reproducing the reference.

Build a slim, responsive top navigation for a modern editorial software product. Keep the layout centered within a max-width container, with a compact brand mark and wordmark on the left and low-emphasis utility links/actions on the right. Use a white background, near-black text around #292526, a vivid pink accent around #e8327d, and a 1px accent rule along the top. Use an understated sans-serif for controls, 12–14px sizing, generous horizontal breathing room, and a subtle icon/button treatment with small radius. On mobile, preserve the brand and collapse secondary actions into a compact menu.

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