## 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/sweetgreen-com/33a74ca8-f609-4778-a60f-a45f3e4cc9aa-1789146471-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/sweetgreen-com/33a74ca8-f609-4778-a60f-a45f3e4cc9aa-1789146430759-full.webp
- Component on Kage: https://kage.design/component/sweetgreen-navigation

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

Build a responsive desktop-first site header with a warm off-white background. Use a three-part layout: compact navigation links aligned left, a centered brand wordmark supplied by the user's brand system, and secondary links plus one filled primary action aligned right. Keep the header around 72–80px tall, vertically center every item, and preserve generous horizontal padding. Use a clean grotesk sans-serif, small uppercase or compact labels for navigation, dark green-black text, subtle bottom separation, and a rounded pill for the primary action in a deep green with a bright accent hover state. On smaller screens, collapse links into a menu trigger while keeping the brand and primary action visible.

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