---
version: alpha
name: "sweetgreen.com"
description: "Design system extracted from https://www.sweetgreen.com/ on 2026-09-29"
colors:
  background: "#f4f3e7"
  surface: "#d8e5d6"
  foreground: "#0e150e"
  muted-foreground: "#8c8c82"
  border: "#0e150e"
typography:
  headline-display:
    fontFamily: "SweetSansText"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1"
  headline-lg:
    fontFamily: "SweetSansText"
    fontSize: "24px"
    fontWeight: 400
    lineHeight: "28.8px"
    letterSpacing: "0.72px"
  headline-md:
    fontFamily: "SweetSansText"
    fontSize: "24px"
    fontWeight: 400
    lineHeight: "1.4"
  body-md:
    fontFamily: "SweetSansText"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "22.5px"
  label-md:
    fontFamily: "SweetSansText"
    fontSize: "24px"
    fontWeight: 400
    lineHeight: "28.8px"
  button:
    fontFamily: "Grenette"
    fontSize: "48px"
    fontWeight: 200
    lineHeight: "48px"
    letterSpacing: "-2.25px"
rounded:
  none: "0px"
  full: "9999px"
  lg: "10px"
  xl: "20px"
  sm: "4px"
  md: "8px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "32px"
  8: "40px"
  9: "44px"
  10: "60px"
components:
  button-primary:
    backgroundColor: "#00473c"
    textColor: "#e6ff55"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "30px"
    padding: "7px 16px"
  button-secondary:
    backgroundColor: "#e6ff55"
    textColor: "#00473c"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "46px"
    padding: "15px 60px"
  button-ghost:
    backgroundColor: "#f4f3e7"
    textColor: "#0e150e"
    typography: "{typography.button}"
    rounded: "4px"
    height: "48px"
    padding: "0px 0px"
  input:
    backgroundColor: "transparent"
    rounded: "10px"
    height: "50px"
---

# sweetgreen.com

## Overview

sweetgreen | Inspiring healthier communities: healthy salads, hearty wraps, grain bowls, and warm plates made in-house from scratch, using whole produce delivered that morning.

Pill-shaped controls, flat surfaces separated by hairlines, restrained display type at 16px / 400, a monochrome palette. The site ships in light mode by default. Measured from 589 rendered elements at 1440px wide on 2026-09-29.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/brand-logo.png`: primary logo lockup
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r3-context.jpg`: r3 context: page context
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page
- `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces
- `screenshots/c-button-1--rest.png`: Button 1 ("Warm Bowls"), rest
- `screenshots/c-button-1--hover.png`: Button 1 ("Warm Bowls"), hover
- `screenshots/c-button-1--focus.png`: Button 1 ("Warm Bowls"), focus
- `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest
- `screenshots/c-icon-button-1--hover.png`: Icon button 1, hover
- `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus
- `screenshots/c-icon-button-1--disabled.png`: Icon button 1, disabled
- `screenshots/c-link-1--rest.png`: Text link 1 ("Order now →"), rest
- `screenshots/c-link-1--hover.png`: Text link 1 ("Order now →"), hover
- `screenshots/c-link-1--focus.png`: Text link 1 ("Order now →"), focus
- `screenshots/c-link-1--active.png`: Text link 1 ("Order now →"), active
- `screenshots/c-text-input-1--rest.png`: Text input 1, rest
- `screenshots/c-text-input-1--focus.png`: Text input 1, focus
- `screenshots/c-text-input-1--disabled.png`: Text input 1, disabled
- `screenshots/c-text-input-1--filled.png`: Text input 1, filled
- `screenshots/c-label-1--rest.png`: Field label 1 ("Email Address"), rest
- `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Our Menu"), rest
- `screenshots/c-nav-link-1--hover.png`: Navigation link 1 ("Our Menu"), hover
- `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Our Menu"), focus
- `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Careers"), rest
- `screenshots/c-footer-link-1--hover.png`: Footer link 1 ("Careers"), hover
- `screenshots/c-card-1--rest.png`: Card 1 ("Sign up for exclusive pr"), rest
- `screenshots/c-newsletter-form-1--rest.png`: Newsletter / signup form 1 ("Email Address → Hm, ther"), rest
- `screenshots/c-button-2--rest.png`: Button 2 ("Order"), rest
- `screenshots/c-button-2--hover.png`: Button 2 ("Order"), hover
- `screenshots/c-button-2--focus.png`: Button 2 ("Order"), focus
- `screenshots/c-button-2--disabled.png`: Button 2 ("Order"), disabled
- `screenshots/c-link-2--rest.png`: Text link 2 ("Catering"), rest
- `screenshots/c-link-2--focus.png`: Text link 2 ("Catering"), focus
- `screenshots/c-nav-link-2--rest.png`: Navigation link 2 ("sweetgreen"), rest
- `screenshots/c-nav-link-2--hover.png`: Navigation link 2 ("sweetgreen"), hover
- `screenshots/c-nav-link-2--focus.png`: Navigation link 2 ("sweetgreen"), focus
- `screenshots/c-card-2--rest.png`: Card 2 ("Join Our Newsletter Sign"), rest
- `screenshots/c-image-2--rest.png`: Image / figure 2, rest

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#f4f3e7` | Page background |
| surface | `#d8e5d6` | Cards, panels, raised or recessed surfaces |
| foreground | `#0e150e` | Primary text |
| muted-foreground | `#8c8c82` | Secondary text, captions |
| border | `#0e150e` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#d8e5d6`, `#f4f3e7`, `#e6ff55`, `#00473c`.

## Typography

- **SweetSansText** for h1, h2, body, label, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.
- **Grenette** for button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | SweetSansText | 16px | 400 | 1 | normal |
| headline-lg | SweetSansText | 24px | 400 | 28.8px | 0.72px |
| headline-md | SweetSansText | 24px | 400 | 1.4 | normal |
| body-md | SweetSansText | 18px | 400 | 22.5px | normal |
| label-md | SweetSansText | 24px | 400 | 28.8px | normal |
| button | Grenette | 48px | 200 | 48px | -2.25px |
- headline-md: fallback (source h3); inferred fields: fontSize, fontFamily, fontWeight, lineHeight.

Type scale in use: 16px, 18px, 24px, 48px, 70px. Base body size 18px.

The hero heading (h1) renders at 16px / 400, start aligned, up to 162px wide. Sample: "sweetgreen".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32, 40, 44, 60 (px).
- Flex and grid gaps: 4, 8, 12, 24, 36, 40, 44 px.
- Content max width: 1360px, centred.
- Breakpoints: 481px, 769px, 1024px, 1279px, 1280px.
- Header: 72px tall, sticky, background `rgb(244, 243, 231)`; 9 nav links at 16px / 400 (Our Menu · Our Mission · Fundraising · The Market · sweetgreen · Outpost · Catering · Locations).

## Elevation & Depth

No box shadows in use; depth comes from hairline borders and surface tints (flat design).

## Shapes

- Buttons: 9999px
- Inputs: 10px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, full 9999px, lg 10px, xl 20px, sm 4px, md 8px

## Components

### Button, primary

Background `#00473c`, text `#e6ff55`, border 1px solid transparent, radius 9999px, height 30px, padding 7px 16px, 16px / 400, uppercase. Sample label: "Order".

### Button, secondary

Background `#e6ff55`, text `#00473c`, border 1px solid transparent, radius 9999px, height 46px, padding 15px 60px, 16px / 400, uppercase. Sample label: "Order now".

### Button, ghost

Background transparent (it sits on `#f4f3e7`, so place it on that colour), text `#0e150e`, border none, radius 4px, height 48px, padding 0px 0px, 48px / 200, capitalize. Sample label: "Salads".

### Input

Height 50px, background `transparent`, border 1px solid #0e150e, radius 10px, 20px text, padding 12px 50px.

### Link

Colour `#0e150e`, underline, weight 400.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (14 of 87 in the checklist, 28 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 20 state changes, 0 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | ghost, success sm, success, ghost, ghost, ghost sm, ghost sm | hover, focus, disabled | "Warm Bowls" |
| Icon button | success | hover, focus, disabled |  |
| Text link | plain, underlined, underlined, underlined | hover, focus, active | "Order now →" |
| Text input | outlined-icon-right | focus, disabled, filled |  |
| Field label | above | rest only | "Email Address" |
| Header / navbar | default | rest only | "Toggle Main Navigation Our Men" |
| Navigation link | plain, underlined | hover, focus | "Our Menu" |
| Footer | default | rest only | "<link rel="stylesheet" href="/" |
| Footer link | plain | hover | "Careers" |
| Card | flat, flat | rest only | "Sign up for exclusive promos, " |
| Image / figure | aspect-1.74, aspect-1, aspect-1-rounded | rest only |  |
| Carousel / slider | default | rest only | "MOLLY BAZ X SWEETGREEN Things " |
| Newsletter / signup form | default | rest only | "Email Address → Hm, there was " |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Close / dismiss button, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Help / hint text, Validation error text, Fieldset / form section, Menu / dropdown trigger, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dropdown menu, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, Styled list, List row / menu row, Table, Table row, Accordion / disclosure, Avatar, Avatar stack, Divider, Code block / inline code, Keyboard key, Blockquote, Video / media embed, Logo strip, Icon, Eyebrow / kicker, FAQ block, Call-to-action band, Search results / listing row, Hero, Content container, Grid of items, Sticky bar.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 437px | 40px | 16px | 16px, 2 lines, start | 72px, 9 links, 1 CTA | media behind/overlapping text | 3→3 col; 2→2 col; 2→2 col | content-width |
| laptop 1024px | 944px | 40px | 16px | 16px, 2 lines, start | 72px, 2 links | media behind/overlapping text | 3→3 col; 2→1 col; 2→2 col | content-width |
| tablet 768px | 688px | 40px | 16px | 16px, 2 lines, start | 48px, 2 links | media behind/overlapping text | 3→3 col; 2→1 col; 2→1 col | content-width |
| phone 390px | 358px | 16px | 16px | 16px, 2 lines, start | 48px, 2 links | media behind/overlapping text | 5→1 col | content-width |

- H1 goes 16px → 16px (100%), 2 → 2 lines.
- No hamburger observed at 390px; 2 navigation links remain visible.
- Body text is 16px at the sampled desktop and phone widths.
- Phone side gutter 16px.
- Section top padding 60px → 16px.

## Interaction & Motion

112 elements carry transitions; typical 0.3s with ease-in-out, mostly on color, all, transform. 1 running keyframe animations (onetrust-fade-in 0.4s 1).

- Hover on button-primary ("Order"): background #00473c → transparent, text #e6ff55 → #0e150e, border transparent → #0e150e; cursor pointer; transition all | 0.3s | ease-in-out.
- Hover on button-secondary ("Order now"): background #e6ff55 → #00473c, text #00473c → #f4f3e7, border transparent → #00473c, icon/inner colour → #f4f3e7; cursor pointer; transition all | 0.3s | ease-in-out.
- Hover on nav-link ("Our Menu"): underline appears; cursor pointer; transition color | 0.3s | ease-in-out.
- Focus on button-primary: border → #0e150e50.
- Tooltip triggers exist (6 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- 3 aria-haspopup triggers exist; none opened on hover (click-to-open menus).
- No scroll-reveal: content is visible without scrolling into view.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Do keep body text at 18px in SweetSansText.
- Do match corner radii per element class (buttons 9999px, cards 0px); do not pick one radius for everything.
- No global shadow was sampled. Inspect regional/component recipes and screenshots before treating a local surface as flat.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from body; large surface colors remain in the palette.