Sweetgreen restaurant homepage by sweetgreen.com

sweetgreen.com · Landing page · Editorial · Retro screenshot

Design analysis

The page builds identity through full-width colour blocks that shift from a deep berry gradient hero through cream, sage and tan bands, each change of ground resetting the rhythm. A high-contrast serif carries every display headline while an uppercase grotesk handles eyebrows, nav and buttons, with a single acid-lime accent reserved almost exclusively for the primary CTA. Menu exploration is a clean three-column grid of top-down bowl photography with serif category tabs, and the lower page alternates split editorial sections (text left, warm photography right) before settling into a utilitarian newsletter strip and link-column footer.

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.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/sweetgreen-com/33a74ca8-f609-4778-a60f-a45f3e4cc9aa-1789146430759-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/sweetgreen-com/33a74ca8-f609-4778-a60f-a45f3e4cc9aa-1789146424113.webp
- Design on Kage: https://kage.design/designs/sweetgreen-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, typefaces, logo, photography). Wait for the answers before writing any code — everything below is applied to their product, not to the reference site.

## Page structure
1. **Utility bar** — a hairline-topped strip with a single small pill button (