Sweetgreen
A warm, food-forward restaurant marketing surface built on cream and sage tonal bands, deep-green sweetgreen brand type, and full-bleed bowl photography. The system reads as fresh, earthy, and confidently minimal — near-square edges on primary buttons and cards, bright chartreuse-lime CTAs punctuating the muted natural palette, and generous editorial section bands (sage, tan, cream) that pace a long-scroll landing page. Brand voltage comes from the SweetSansText grotesque wordmark and the lime \"ORDER NOW\" pill rather than from heavy ornament.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
heading
24px · 400 · 1.2
The quick brown fox jumps
label
16px · 400 · 1.0
The quick brown fox jumps
body
16px · 400 · 1.0
The quick brown fox jumps
button
16px · 400 · 1.0
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 20px | |
| xl | 24px | |
| xxl | 32px | |
| section | 40px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| none | 0px | |
| sm | 4px | |
| md | 8px | |
| lg | 10px | |
| xl | 20px | |
| xxl | 24px | |
| pill | 1000px |
FAQ
- What colors does Sweetgreen use?
- Sweetgreen's core palette includes #00473c, #2d6b52, #000000, #0e150e, #ffffff. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Sweetgreen DESIGN.md.
- What font does Sweetgreen use?
- Sweetgreen's primary typeface is SweetSansText. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Sweetgreen design system?
- A warm, food-forward restaurant marketing surface built on cream and sage tonal bands, deep-green sweetgreen brand type, and full-bleed bowl photography. The system reads as fresh, earthy, and confid…