Sweetgreen
www.sweetgreen.coma fast-casual salad chain whose site is a confident, appetite-led order funnel, a bold cream/green/acid-lime brand with big custom-sans headlines, full-bleed food photography, and an "Order" path that is never more than a tap away.
Design tokens
- display
- SweetSans (bespoke sans)
- body
- SweetSansText (bespoke sans)
- sans
- SweetSansText
- mono
Do / Don't
Reference it for
- Order-first navigation: Menu, Locations, Catering, Order, App, the exact primary actions a takeaway/QSR needs, ordered by intent, with Order as the high-contrast CTA.
- Appetite-led, full-bleed food photography as the hero and through the menu, with short copy and a persistent order path.
- A warm brand-led palette: a single loud accent (acid lime) plus a deep brand green on a cream base, instead of clinical white.
- Big, confident custom-sans headlines (80px h1) and friendly pill / 20px-radius shapes for an approachable, tap-friendly feel.
- CSS-native restraint: calm 0.3s transitions doing all the motion, proof a fast, app-like food site needs no animation library.
Do not copy
- The SweetSans / SweetSansText bespoke type and the exact cream/green/acid-lime palette are sweetgreen's identity. Build the client's own mark and colourway, borrow the structure not the skin.
- The acid lime #E6FF55 is brand-owned and polarising; a local venue should pick its own single accent rather than imitate it.
- sweetgreen's scale (national locations, an app, catering operations) justifies the nav. A single-shopfront takeaway should trim to Menu / Order / Locations and not fake an app it does not have.
Signature moves
order-first intent-ordered nav
nav items run Menu, Locations, Catering, Order, App in order of intent with Order as the single high-contrast CTA
full-bleed appetite-led photography
full-bleed food photography drives the hero and runs through the menu with short copy and a persistent order path
warm cream base with single loud accent
a deep brand green and a single loud accent sit on a cream base (not clinical white), with friendly pill and 20px-radius shapes
Related references
Antara Spa
strongBeauty
a Malaysian day spa that sells calm with one oversized Fraunces wordmark on a sun-warmed photographic hero, an earthy sand-brown-sage palette, and slow GSAP-and-Lenis scroll, the whole page tuned to feel like exhaling.
Bright Horizons
strongChildcare Education
a large early-education and childcare provider whose site leads with a warm deep-teal and sunshine-yellow palette over happy children's photography, the rounded Mulish sans throughout, a tabbed audience-routing hero, and a clear, trust-led grid of pathways for parents and employers.
Caliber
strongTrades
a collision and auto-service chain whose site is a clean, trust-first conversion funnel, with "Online Estimate" and "Book an Appointment" front and centre, a confident dark-on-white system, and a single bold accent.
Fabrique Bakery
strongOther
A Swedish artisan bakery whose home page is a single warm photograph of hands shaping dough, over which three cities (Stockholm, London, New York) sit as a quiet gateway - belonging and craft conveyed before a word of selling.