sweetgreen.com
Design analysis
A full-width, image-led seasonal hero creates strong emotional impact with a dark berry gradient, oversized editorial headline, and a bright order button anchored in the lower-left content area.
Prompt preview
## 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-1789146472-1.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-hero ## Before you start Ask what the user's product is, what campaign or message matters most, and what brand colours and imagery are available. Apply the following structure to that product and brand. Create a full-bleed hero directly below the navigation, approximately 450px tall on desktop. Use an original art-directed food, product, or lifestyle image as the background with a rich dark-to-saturated gradient overlay so text remains readable. Place a small eyebrow, a very large two-line editorial headline, and one rounded primary CTA in a left-aligned content block with about 28–32px inset. Keep the headline tight, lightweight, and high contrast; use an organic display face only if it fits the user's identity, paired with a restrained sans-serif for labels. Let the image crop dynamically with object-fit cover and provide a mobile crop that keeps the focal subject visible. Add subtle hover/focus feedback to the CTA. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage