## 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/maybloc/1877ee03-3cf3-49f7-b006-226ca2ea42de-1792217040-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/maybloc/1877ee03-3cf3-49f7-b006-226ca2ea42de-1792216974687-full.webp
- Component on Kage: https://kage.design/component/maybloc-navigation

## Before you start
Ask what the user's product is, who it serves, and what brand voice and visual identity it should use. Apply the principles below to that product rather than reproducing the reference.

Build a slim desktop-first navigation bar with a restrained editorial feel. Keep the brand mark aligned to the left edge of the main container, center a small set of text links with generous gaps, and place a theme/control icon plus one dark pill-shaped primary action on the right. Use a white or near-white background, a subtle bottom border, muted gray link text, near-black #111111 for the primary button, and 999px button radius. Use a compact sans-serif for navigation at roughly 12–14px, medium weight, with a slightly larger wordmark that can be supplied by the user. Keep the bar around 44–56px tall, vertically centered, and make links and buttons keyboard accessible with visible focus states. Collapse links into an accessible menu on small screens.

Never: use the reference's logo, product name, copy, illustrations, imagery, or exact navigation labels.