Sweetgreen
Sage green ground, cream cards and neon lime pills for ordering.
Overview
Sweetgreen grounds the page on #d8e5d6 sage with #f4f3e7 cream panels and #0e150e near-black ink. Order buttons are #e6ff55 neon lime pills with #00473c deep green labels. Its own Sweet Sans runs an 80px display at a 0.85 line height and 18px body, with uppercase tracked labels and 20px rounded product cards.
Do
- Use a soft green ground instead of white and cream for content panels.
- Make order buttons neon lime pills with dark green labels.
- Show dishes as overhead photos on rounded cards with uppercase names.
Avoid
- Set text in the lime: it is a fill only, at 1.2:1 on sage.
- Use pure black or pure white for the page.
- Square off the cards.
Colors
Color roles
Background
#d8e5d6The page ground
Surface
#f4f3e7Raised panels, bands and cards
Text
#0e150ePrimary ink, 14.2:1 on the background
Muted text
#8c8c82Supporting copy, 2.6:1 on the background
Accent
#e6ff55Primary actions
Border
#0e150eHairlines and dividers
Typography
Type
SweetSansTextdisplay and body, 93.7% of the text
Use Jost. Sweet Sans is a paid typeface. Jost is a free stand-in, not a match.
SweetSansdisplay, 5.4% of the text
Use Jost. The display cut of Sweet Sans, a paid typeface. Jost is a free stand-in.
Systems that ship
Hierarchy at a glance
A quieter supporting head
Body copy carries the explanation, so it has to stay readable at length on every screen.
Labels, captions and metadata
Sizes in use: 80px / 70px / 48px / 24px / 18px / 16px / 12px
Spacing
Spacing
No single base unit: these are the values the page repeats.
Shape
Corners and depth
Components
Buttons and cards
Rebuilt here from the measured values, not copied from the site's code.
ORDER NOWORDER
DESIGN.md
Hand this to your AI coding tool
Drop it in your repo as DESIGN.md and point Claude Code, Cursor or Codex at it before you ask for a page.
# Sweetgreen design system
> Captured from https://www.sweetgreen.com/ on 2026-10-06 by Brooks New Media (https://design.brooksnewmedia.com/styles/sweetgreen/). An independent analysis for reference: Sweetgreen and its marks belong to their owner. Learn from the system; don't copy the brand.
## Overview
Sweetgreen grounds the page on #d8e5d6 sage with #f4f3e7 cream panels and #0e150e near-black ink. Order buttons are #e6ff55 neon lime pills with #00473c deep green labels. Its own Sweet Sans runs an 80px display at a 0.85 line height and 18px body, with uppercase tracked labels and 20px rounded product cards.
- Theme: light
- Mood: sage, lime, pill buttons, fresh, fast casual
- Category: Restaurant
## Colors
| Role | Hex | Use |
|---|---|---|
| Background | `#d8e5d6` | The page ground |
| Surface | `#f4f3e7` | Raised panels, bands and cards |
| Text | `#0e150e` | Primary ink, 14.2:1 on the background |
| Muted text | `#8c8c82` | Supporting copy, 2.6:1 on the background |
| Accent | `#e6ff55` | Primary actions |
| Border | `#0e150e` | Hairlines and dividers |
Full palette, most used first: `#0e150e`, `#f4f3e7`, `#d8e5d6`, `#e6ff55`, `#00473c`, `#8c8c82`.
## Typography
- **SweetSansText**: display and body, 93.7% of the text. Use Jost. Sweet Sans is a paid typeface. Jost is a free stand-in, not a match.
- **SweetSans**: display, 5.4% of the text. Use Jost. The display cut of Sweet Sans, a paid typeface. Jost is a free stand-in.
| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | SweetSans | 80px | 400 | 0.85 | 0 |
| Heading | SweetSansText | 24px | 400 | 1.2 | 0.03em |
| Subheading | SweetSansText | 18px | 400 | 1.25 | 0 |
| Body | SweetSansText | 18px | 400 | 1.25 | 0 |
| Small | SweetSansText | 16px | 400 | 1 | 0 |
Sizes in use, largest first: 80px, 70px, 48px, 24px, 18px, 16px, 12px.
## Spacing
No single base unit: the values below are what the page repeats.
Values in use: 3px, 13px, 15px, 18px, 30px, 35px, 40px, 43px, 60px.
## Shape
Corner radii, smallest first: 4px, 20px, pill (9999px).
No shadows: depth comes from color and borders.
## Components
### Primary button ("ORDER NOW")
- Fill: #e6ff55
- Text: #00473c, 16px at weight 400
- Border: none
- Corner: pill (9999px)
- Height: 46px, padding 15px 60px
### Secondary button ("ORDER")
- Fill: #00473c
- Text: #e6ff55, 16px at weight 400
- Border: none
- Corner: pill (9999px)
- Height: 30px, padding 7px 16px
## Do
- Use a soft green ground instead of white and cream for content panels.
- Make order buttons neon lime pills with dark green labels.
- Show dishes as overhead photos on rounded cards with uppercase names.
## Don't
- Set text in the lime: it is a fill only, at 1.2:1 on sage.
- Use pure black or pure white for the page.
- Square off the cards.
## CSS variables
```css
:root {
--color-background: #d8e5d6;
--color-surface: #f4f3e7;
--color-text: #0e150e;
--color-text-muted: #8c8c82;
--color-accent: #e6ff55;
--color-border: #0e150e;
--font-display: "SweetSans", system-ui, sans-serif;
--text-display: 80px;
--weight-display: 400;
--font-heading: "SweetSansText", system-ui, sans-serif;
--text-heading: 24px;
--weight-heading: 400;
--font-subheading: "SweetSansText", system-ui, sans-serif;
--text-subheading: 18px;
--weight-subheading: 400;
--font-body: "SweetSansText", system-ui, sans-serif;
--text-body: 18px;
--weight-body: 400;
--font-small: "SweetSansText", system-ui, sans-serif;
--text-small: 16px;
--weight-small: 400;
--space-1: 3px;
--space-2: 13px;
--space-3: 15px;
--space-4: 18px;
--space-5: 30px;
--space-6: 35px;
--space-7: 40px;
--space-8: 43px;
--space-9: 60px;
--radius-1: 4px;
--radius-2: 20px;
--radius-3: 9999px;
}
```
## Notes for AI coding tools
- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-06.
Sweetgreen and its marks belong to their owner. This page is an independent analysis of the public website, measured on 2026-10-06. We're not affiliated with or endorsed by Sweetgreen.