---
version: alpha
name: Sweetgreen
description: A warm farm-table canvas where deep forest green anchors a cream-and-earth palette, an electric lime pops against it like a fresh herb, oversized SweetSans display type crashes its lines together at 0.85 leading, and full-bleed food photography makes the produce itself the brightest thing on the page.

colors:
  # Surface / canvas
  background: "#f4f3e7"        # warm cream canvas, the default backdrop
  surface: "#ffffff"           # clean white cards and panels
  surface-dark: "#0e150e"      # near-black forest surface, footer / dark sections

  # Ink / text
  ink: "#0e150e"               # near-black forest, headings and body
  ink-forest: "#00473c"        # deep forest green — brand ink, logotype
  ink-secondary: "#555555"     # supporting copy, metadata
  ink-muted: "#8c8c82"         # warm taupe captions, disabled
  on-dark: "#f4f3e7"           # cream text on dark/green surfaces

  # Brand accent — deep forest green + electric lime
  primary: "#00473c"           # the forest-green workhorse — primary buttons, brand
  primary-hover: "#0e150e"     # darkened forest on hover
  on-primary: "#e6ff55"        # electric lime text on the green button
  accent: "#e6ff55"            # electric lime — fresh-herb pop, highlights
  on-accent: "#00473c"         # forest text on lime

  # Borders
  border: "#deded6"            # warm hairline dividers, card edges
  border-strong: "#00473c"     # forest outline on secondary buttons

  # Semantic
  warning: "#e59700"           # amber outline / focus, harvest gold
  error: "#a72700"             # footer / alert red-brown

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#0e150e"       # was rgba(14,21,14,0.4) 3px 3px 32px -10px — Google format requires hex
  shadow-ambient: "#999999"    # was rgb(153,153,153) 0px 2px 10px -3px — Google format requires hex

typography:
  display-hero:
    fontFamily: "SweetSans, SweetSansText, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: -0.5px
  display:
    fontFamily: "SweetSans, SweetSansText, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 70px
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: -0.4px
  display-serif:
    fontFamily: "Grenette, Georgia, Cambria, Times New Roman, serif"
    fontSize: 48px
    fontWeight: 200
    lineHeight: 1.0
    letterSpacing: -2.25px
  heading:
    fontFamily: "SweetSans, SweetSansText, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  heading-sub:
    fontFamily: "SweetSansText, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.72px
  body-large:
    fontFamily: "SweetSansText, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "SweetSansText, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "SweetSansText, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  nav-link:
    fontFamily: "SweetSansText, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "SweetSansText, system-ui, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 7px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-forest}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 8px 16px
  button-secondary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-forest}"

  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 7px 16px
  button-accent-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.accent}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-forest}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  link:
    textColor: "{colors.ink-forest}"
    typography: "{typography.nav-link}"
    padding: 0px

  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Sweetgreen Design System

## Overview

Sweetgreen's site feels like a farm table at golden hour. The canvas is warm cream (`{colors.background}`), not the cold white of most food-tech brands, and that single decision sets the whole temperature: this is a place about real produce, soil, and sunlight, not a sterile delivery app. Anchoring it is deep forest green (`{colors.ink-forest}`) — the brand's logotype color and the fill of its primary button — a green so dark it reads almost black, grounding the warm backdrop the way a cast-iron pan grounds a bright salad. The pairing of cream and forest is the brand's entire mood: earthy, grown, and quietly premium.

The signature move is the typography crashing into itself. SweetSans display type runs enormous (`{typography.display-hero}` at 80px) with line-height pulled all the way down to **0.85**, so multi-line headlines stack tight and overlap, like hand-lettered produce-stand signage compressed into a poster. It is loud and confident without raising its voice. Underneath, SweetSansText handles body and navigation in calm sentence case, and for the occasional editorial flourish the brand reaches for Grenette (`{typography.display-serif}`) — a light, high-contrast serif at weight 200 — to add a whisper of restaurant-menu elegance.

Then there's the lime (`{colors.accent}`). Against all that forest and cream, `#e6ff55` reads like a fresh herb dropped on a dark plate — electric, alive, unmistakably a vegetable color. Sweetgreen uses it as the text *inside* its green button rather than as a fill, so the primary CTA is forest-green with lime lettering: a tiny inversion that makes the button feel like the brand's logo in motion. Corners are soft but not childish — pill buttons (`{rounded.pill}`) and gently-rounded cards (`{rounded.md}`–`{rounded.lg}`) — and the real visual heat comes from full-bleed food photography, shot warm and close, where the produce is always the brightest thing on the screen.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) instead of cold white — sets an earthy, farm-table temperature
- Deep forest green (`{colors.ink-forest}`) as brand ink and primary-button fill — grounds the warmth
- Electric lime (`{colors.accent}`) as the fresh-herb pop, used as *text inside* the green button, not as a fill
- Oversized SweetSans display crashed to **0.85 line-height** (`{typography.display-hero}`) — tight, overlapping, poster-like
- SweetSansText for calm sentence-case body and nav; Grenette light serif (`{typography.display-serif}`) for editorial flourishes
- Pill-shaped primary buttons (`{rounded.pill}`); gently rounded cards (`{rounded.md}`–`{rounded.lg}`)
- Full-bleed, warm, close-up food photography — the produce is the brightest element on every screen
- Forest-green button with lime lettering — the CTA is the logo in motion
- Soft warm hairlines (`{colors.border}`) and near-shadowless flat surfaces
- Near-black forest (`{colors.surface-dark}`) reserved for the footer and dark editorial sections

## Colors

### Surface & Canvas
- **Cream** (`{colors.background}`): The dominant warm canvas — the brand's signature backdrop.
- **White** (`{colors.surface}`): Clean panels and cards that sit on the cream.
- **Forest Near-Black** (`{colors.surface-dark}`): The footer and dark editorial sections.

### Ink / Text
- **Forest Near-Black** (`{colors.ink}`): Headings and body — a green so deep it reads near-black.
- **Forest Green** (`{colors.ink-forest}`): The brand logotype color and primary-button fill.
- **Gray** (`{colors.ink-secondary}`): Supporting paragraph copy and metadata.
- **Warm Taupe** (`{colors.ink-muted}`): Captions and disabled states.

### Brand Accent
- **Forest Green** (`{colors.primary}`): The workhorse accent — primary buttons, brand marks. Hover deepens to `{colors.primary-hover}`.
- **Electric Lime** (`{colors.accent}`): The fresh-herb pop. Used as button lettering (`{colors.on-primary}`) and as highlight fills. Paired with forest text (`{colors.on-accent}`).

### Semantic & Borders
- **Harvest Gold** (`{colors.warning}`): The amber focus/outline color.
- **Alert Red-Brown** (`{colors.error}`): Footer and alert accents.
- **Hairline** (`{colors.border}`): Warm card edges and dividers.
- **Forest Outline** (`{colors.border-strong}`): The outline on secondary buttons.
- **Soft / Ambient** (`{colors.shadow-soft}`, `{colors.shadow-ambient}`): Opaque stand-ins for the rare drop shadow (originals were rgba/rgb — flattened for the Google spec).

## Typography

### Font Family
- **Display**: `SweetSans`, fallbacks `SweetSansText, system-ui, Helvetica Neue, Arial, sans-serif` — the bold poster face for oversized headlines.
- **Text**: `SweetSansText` — the calm companion for body, navigation, and labels.
- **Serif**: `Grenette` (fallbacks `Georgia, Cambria, serif`) — a light, high-contrast editorial serif used sparingly.
- **Tracking & leading**: display crashes to 0.85 line-height; uppercase sub-headings carry positive 0.72px tracking; Grenette runs very tight at -2.25px.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 80px / 400 / lh 0.85 — the marquee crashing headline |
| `display` | 70px / 400 / lh 0.85 — large section headlines |
| `display-serif` | 48px / 200 / -2.25px — Grenette editorial flourish |
| `heading` | 40px / 400 — feature headings |
| `heading-sub` | 24px / 400 / uppercase / 0.72px — section sub-labels |
| `body-large` | 18px / 400 — lead paragraphs |
| `body` | 16px / 400 — standard body and inputs |
| `label` | 14px / 700 — bold UI labels |
| `nav-link` | 14px / 400 / 0.5px — navigation |
| `button-ui` | 16px / 700 — button text |

### Principles
- **Crash the display**: oversized SweetSans at 0.85 line-height — headlines stack and overlap like produce-stand signage.
- **Sentence case for calm**: body and nav stay sentence case and unhurried; the loudness lives only in the display.
- **Serif as seasoning**: Grenette appears rarely, for an editorial or menu-like moment — never as the workhorse.
- **Weight is binary**: 400 for almost everything, 700 only for bold labels and buttons.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. Generous and breathing — large vertical gaps (`{spacing.5xl}` = 96px) between sections give the food photography room, while card internals stay comfortable (`{spacing.xl}`).

### Grid & Container
- Full-bleed photographic hero sections that run edge to edge
- Common pattern: large warm food photo paired with a crashing SweetSans headline overlay
- Product and menu grids of rounded white cards on the cream canvas

### Whitespace Philosophy
- **Warm air, not cold void**: the cream canvas makes whitespace feel inviting rather than clinical
- **Photography breathes**: generous margins let close-up food shots dominate
- **Rounded, soft rhythm**: gentle radii and roomy padding keep the layout approachable

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; warm hairline `{colors.border}` only | The default — most surfaces |
| Hairline (Level 1) | `1px` edge at `{colors.border}` | Card and panel edges |
| Soft (Level 2) | `0 2px 10px -3px` at `{colors.shadow-ambient}` | Lifted menu cards, floating controls |
| Ambient (Level 3) | `3px 3px 32px -10px` at `{colors.shadow-soft}` | Modals and overlays — used sparingly |

**Shadow Philosophy**: Sweetgreen is mostly flat and warm. Separation comes from the cream-on-white contrast and gentle hairlines, not heavy elevation. The few shadows are soft, low-opacity, and tinted toward the dark forest near-black, so a lifted card reads like a plate resting on a table rather than a UI panel floating in space.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed photo sections |
| `sm` | 4px | Small chips, tags |
| `md` | 8px | Cards, inputs — the default container radius |
| `lg` | 20px | Elevated cards, secondary buttons |
| `pill` | 9999px | Primary / accent buttons, badges — the signature |

The system is soft but disciplined: pill buttons (`{rounded.pill}`) are the signature interactive shape, cards round gently at 8–20px, and only full-bleed photography goes square. Roundness signals approachability and freshness — never childishness.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Forest-green (`{colors.primary}`) fill with electric-lime (`{colors.on-primary}`) lettering, pill-shaped. The signature CTA — the logo in motion. Hover deepens to `{colors.primary-hover}`.
- **`button-secondary`** — White fill, forest-green text, `{colors.border-strong}` outline, `{rounded.lg}`. The quieter action.
- **`button-accent`** — Electric-lime (`{colors.accent}`) fill, forest text, pill-shaped. The high-energy attention button. Hover inverts to forest fill with lime text.

### Cards
- **`card`** / **`card-elevated`** — White surface on cream, 8–20px radius. The elevated variant carries the soft forest-tinted shadow and rounds more generously.

### Inputs
- **`input`** — White fill, warm hairline, 8px radius. **`input-focus`** keeps the fill calm; the amber harvest-gold (`{colors.warning}`) carries the focus outline.

### Navigation
- **`nav-bar`** — Cream backdrop, forest-green nav links, hairline base. Calm and flush.

### Accent & Labels
- **`link`** — Forest-green nav-link type, underline on hover.
- **`badge`** — Electric-lime fill, bold forest label, pill-shaped — the fresh tag.

## Do's and Don'ts

### Do
- Use the warm cream canvas (`{colors.background}`) as the default backdrop, not cold white
- Anchor the page with deep forest green (`{colors.ink-forest}`) — logotype, primary button, headings
- Make the primary button forest-green with **lime lettering** (`{colors.on-primary}`) — the brand's signature inversion
- Crash oversized SweetSans display to 0.85 line-height (`{typography.display-hero}`) for tight, overlapping headlines
- Keep body and navigation in calm sentence case (`{typography.body}`, `{typography.nav-link}`)
- Reach for Grenette (`{typography.display-serif}`) only for rare editorial or menu-like flourishes
- Use pill shapes (`{rounded.pill}`) for buttons and badges; gentle radii (`{rounded.md}`–`{rounded.lg}`) for cards
- Let full-bleed, warm, close-up food photography be the brightest element on the screen

### Don't
- Don't switch the canvas to cold pure white — the warm cream is the brand's temperature
- Don't fill the primary button with lime — lime is the *lettering*, forest is the *fill*
- Don't loosen the display line-height past ~0.9 — the crash is the signature
- Don't set body copy in all caps or oversized weights — the loudness belongs to the display only
- Don't make Grenette the workhorse — it's seasoning, not the main course
- Don't square off the buttons — pill (`{rounded.pill}`) is the interactive signature
- Don't pile on heavy drop shadows — surfaces stay flat and warm, separation comes from cream-on-white

---

## Responsive Behavior

### Breakpoints
*(16 breakpoints surfaced in extraction; the values below are the practical stops the site behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; display type scales 80px → ~44px while holding tight leading; nav collapses to a menu; full-bleed photos stack |
| Tablet | 640–1023px | Two-column card grids; headline overlays scale down |
| Desktop | 1024–1279px | Full layout; photo-left / copy-right hero patterns |
| Large | ≥1280px | Wide container, generous section padding (`{spacing.5xl}`), edge-to-edge photography |

### Touch Targets
- Pill buttons run ~40px tall with `7px 16px` padding — comfortable for thumbs
- Nav links carry generous vertical padding; labels stay legible at 14px

### Collapsing Strategy
- **Navigation**: full horizontal nav → menu toggle on mobile; the green "Order" pill persists
- **Hero**: photo and crashing headline stack; type scales while keeping 0.85 leading
- **Grid**: card columns reduce from three to one
- **Spacing**: section padding compresses from 96px toward ~48px

### Image Behavior
- Full-bleed warm food photography reflows as edge-to-edge sections; close-up produce stays the focal point at every size

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Cream (`{colors.background}`)
- Text: Forest Near-Black (`{colors.ink}`)
- Brand accent: Forest Green (`{colors.primary}`)
- Pop accent: Electric Lime (`{colors.accent}`)
- Secondary text: Gray (`{colors.ink-secondary}`)
- Border: Warm Hairline (`{colors.border}`)
- Primary CTA: Forest-green fill with **lime lettering** (`{colors.primary}` + `{colors.on-primary}`)

### Example Component Prompts

- "Create a hero on warm cream (`{colors.background}`) with an 80px SweetSans headline in forest near-black (`{colors.ink}`), line-height 0.85 so the lines crash together, and a pill primary button below: forest-green (`{colors.primary}`) fill with electric-lime (`{colors.on-primary}`) lettering, `{rounded.pill}`"
- "Build a menu card: white (`{colors.surface}`) on the cream canvas, `{rounded.md}` radius, warm food photo on top, forest-green title, `{spacing.xl}` padding, soft shadow tinted with `{colors.shadow-soft}`"
- "Render a primary button: forest-green (`{colors.primary}`) fill, electric-lime (`{colors.on-primary}`) bold text (`{typography.button-ui}`), pill-shaped (`{rounded.pill}`), 7px 16px padding — hover deepens to `{colors.primary-hover}`"
- "Create navigation: cream (`{colors.background}`) backdrop, forest-green nav links (`{typography.nav-link}`) at 0.5px tracking, hairline base (`{colors.border}`), with the green Order pill anchored right"
- "Design a fresh-tag badge: electric-lime (`{colors.accent}`) fill, bold forest (`{colors.on-accent}`) label (`{typography.label}`), pill-shaped (`{rounded.pill}`), 4px 12px padding"

### Iteration Guide

1. Start on warm cream (`{colors.background}`), not white. If your backdrop is cold white, warm it — cream is the brand temperature.
2. Anchor with forest green (`{colors.ink-forest}`): logotype, headings, primary button.
3. The primary button is forest fill + lime lettering. If lime is your fill, you've inverted the signature — swap them.
4. Crash the display type to 0.85 line-height (`{typography.display-hero}`). If lines aren't overlapping tight, pull leading down.
5. Keep body and nav calm sentence case; reserve Grenette serif (`{typography.display-serif}`) for one editorial flourish.
6. Round generously: pill (`{rounded.pill}`) on buttons, `{rounded.md}`–`{rounded.lg}` on cards. Only photography goes square.
7. Let full-bleed warm food photography be the brightest thing on screen — the produce is the hero.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Sweetgreen. Brand names and trademarks belong to their respective owners.