## 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/ai-sandboxes-by-buddy/f0e6e8b3-2b0a-4e1e-b3c7-06d5e5447056-1792130828-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ai-sandboxes-by-buddy/f0e6e8b3-2b0a-4e1e-b3c7-06d5e5447056-1792130620611-full.webp
- Component on Kage: https://kage.design/component/ai-sandboxes-by-buddy-navigation

## Before you start
Ask what the user's product is, who it is for, and what brand personality and primary action they need. Then apply the principles below to that product rather than reproducing the reference.

Build a compact SaaS navigation bar. Use a white background, a thin dark or accent top rule, a left-aligned wordmark placeholder with a small geometric mark, centered or right-aligned text links, and one high-contrast pill-shaped primary button. Keep the header about 48–56px tall, with generous horizontal padding and a clear baseline alignment. Use near-black text such as #11131A, a pale surface such as #FFFFFF, and a vivid lime accent around #B9FF4A for the CTA. Typography should be a clean grotesk: 13–14px links, medium weight, and 15px semibold button text. Use a 1–2px black border, a 999px radius for the button, and a subtle shadow only if needed. On mobile, collapse secondary links behind a menu while preserving the primary action.

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