# 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.