---
version: alpha
name: sweetgreen
website: "https://www.sweetgreen.com"
description: >-
  A warm fast-casual restaurant flagship anchored on a cream canvas ("#f4f3e7") instead of pure white, with a deep forest green ("#00473c") carrying every primary CTA and an electric chartreuse ("#e6ff55") locked to the CTA label rather than spread across the page. Type runs SweetSans Display at 80px / 400 for hero moments paired with a Grenette serif italic at 48px / 200 for in-button editorial flourishes; supporting copy switches to SweetSansText in a 16px uppercase voice for nav, headings, and food-card titles. Buttons sit on a 1000px full-pill radius; cards take a 20px rounded-rectangle (used 18 times across the page) and the system pairs a near-black ink ("#0e150e") with a sage paper tint ("#d8e5d6") for em-color and an oxblood ("#a72700") locked to footer chrome only.

seo:
  title: "sweetgreen Design System for React — Cream canvas, forest green, electric chartreuse"
  metaDescription: "sweetgreen design system as a DESIGN.md file. Cream #f4f3e7, forest #00473c, chartreuse #e6ff55, SweetSans, 18 components. For React, Next.js, and AI tools."
  highlights:
    - "Cream paper canvas (`#f4f3e7`) — the brand never uses pure white as the page floor, even on product cards"
    - "Two-token CTA — forest green ("#00473c") fill with electric chartreuse ("#e6ff55") label, the only chartreuse moment on the page"
    - "Universal 1000px full-pill buttons paired with 20px rounded-rectangle food cards — appearing 18 times in the radii table"
    - "Two-typeface split — SweetSans handles 14 of 15 type tiers; Grenette serif italic at weight 200 surfaces only inside the wraps-CTA button"
    - "Oxblood ("#a72700") scoped to footer surface only — never a CTA, never a section header"
  tags:
    - "Food & Delivery"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    sweetgreen's web flagship reads like a printed café menu translated to the screen — a cream paper canvas ("#f4f3e7") instead of pure white, near-black ink ("#0e150e") for body, a single forest voltage ("#00473c") on the order button, and one electric chartreuse note ("#e6ff55") locked to that button's label. The hero word "Wraps" renders at 80px / 400 in SweetSans Display over a wrap-on-cutting-board photograph; a tiny Grenette italic serif at weight 200 hides inside the in-image CTA — the single editorial flourish in an otherwise photographic, uppercase, sans-only page.

    This DESIGN.md packages the system into a single machine-readable spec. Inside: 18 color tokens grouped into canvas, forest, chartreuse, ink, oxblood-footer, and sage-em roles; 15 SweetSans typography tiers running from 12px footer fine print to an 80px hero display plus the lone 48px Grenette italic CTA face; 4 spacing tokens anchored on an 8px / 24px rhythm; 4 radii tokens dominated by 20px food cards (18 occurrences) and 1000px pill buttons (5 occurrences); and 18 components covering the photo-hero, food card grid, day-part tabs ("Salads / Warm Bowls / Sides"), workplace order rail, kitchen tutorial split, newsletter input, and footer surface.

    Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces sweetgreen's restraint — the cream canvas, the forest-green pill with chartreuse label, the uppercase 16px nav voice, the photo-first food cards — rather than a generic shadcn theme. Where most quick-service-restaurant brands stack a tomato-red CTA over a white canvas with a bold sans-serif marquee, sweetgreen inverts every default: cream over white, forest over red, photography over typography, lowercase wordmark over an all-caps logotype. The lesson worth studying is the two-token CTA discipline — most brands ship one accent and tint it for the label; sweetgreen ships two non-overlapping voltages and pairs them only inside the one shape they want you to tap.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.sweetgreen.com"
      title: "sweetgreen — official site"
      description: "The cream-canvas fast-casual flagship this DESIGN.md was extracted from."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files."
  questions:
    - id: "primary-color"
      title: "What is sweetgreen's primary brand color?"
      answer: "sweetgreen runs a two-token brand voltage. Forest Green (`#00473c`) is the deep CTA fill — used as the background of the Order pill button and the small surface chrome around the order rail. Electric Chartreuse (`#e6ff55`) is the label color that sits on top of that fill — bright lime-yellow, the only chartreuse moment on the page, count 5 in the extracted palette. The pairing is deliberate: forest carries authority, chartreuse carries the produce-fresh signal. Neither is used independently as a section accent."
    - id: "canvas-color"
      title: "Why is the page canvas cream instead of white?"
      answer: "The page canvas is `#f4f3e7` — a warm paper cream that referenes café menu boards, parchment, and the brown-paper bag the salads are packed in. The CSS variable `--body-color` is set to this value, not `#ffffff`. Pure white only appears inside three small surface fills (the input field, the icon-button background, a single contrast block). Body text never goes pure black either — it sits at `#0e150e`, a very dark green-tinted ink rather than pure `#000000`, which is reserved for the workplace-feature h2 (the food card titles like Kale Caesar)."
    - id: "typography"
      title: "What typography does sweetgreen use, and what should I substitute?"
      answer: "Two families. SweetSans (and SweetSansText for body) handles 14 of 15 type tiers — display at 80px / 400, h2 at 24px / 400 uppercase with 0.72px tracking, body at 16–18px / 400, footer fine print at 12px / 400. Grenette, a serif italic at weight 200 with `-2.25px` letter-spacing, surfaces in exactly one place: the in-image CTA button on the hero photograph at 48px / capitalize. Reasonable open-source substitutes are Inter or Manrope for SweetSans and Italiana or Cormorant Garamond Light Italic for Grenette."
    - id: "buttons-and-radii"
      title: "Why are the buttons fully pill-shaped?"
      answer: "Every interactive button in the system uses a 1000px full-pill radius (`{rounded.full}`) — five occurrences in the extracted radii table. The standard Order CTA renders at 30px height with `7px 16px 5px` padding, forest fill, chartreuse label, 16px SweetSansText. Food cards sit at 20px rounded-rectangle (`{rounded.lg}` — 18 occurrences, the dominant radius). The newsletter input takes a softer 10px (`{rounded.md}`). Hard 0px corners only exist on the hero photo crop and the full-bleed footer band — every other surface is rounded."
    - id: "chartreuse-usage"
      title: "Where can I use the chartreuse color?"
      answer: "Chartreuse (`#e6ff55`) is scoped to the Order CTA label and nothing else on the marketing page. Total page occurrence is 5, all as text or small fill. It is not a section accent, not a badge, not a hover wash, not an inline link. Using it on a secondary surface flattens the voltage — the whole reason it reads as a brand voltage is the contrast against the forest fill it sits on. If you need a softer brand accent, reach for the sage paper tint Em Color (`#d8e5d6`) instead, which is the system's intended emphasis token."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "The extracted page is the marketing homepage only — the order-flow product surfaces (menu detail, customization sheet, cart, account dashboard) are not captured, so the spec is missing the bowl-builder interaction patterns, the size selector, the ingredient swap chips, and the loyalty / SG Rewards status surfaces. Mobile responsive behavior is documented from CSS tokens (`--nav-height` 72px, `--maxwidth` 90rem) but the actual mobile sheet and tap-target tuning isn't visible in the capture. Dark mode is absent — the system ships light-only."

colors:
  primary: "#00473c"
  primary-on: "#e6ff55"
  canvas: "#f4f3e7"
  ink: "#0e150e"
  ink-pure: "#000000"
  surface-white: "#ffffff"
  surface-sage: "#d8e5d6"
  surface-paper: "#e8dcc6"
  hairline: "#0e150e"
  muted: "#8c8c82"
  muted-mid: "#555555"
  placeholder: "#b2b2b2"
  footer-bg: "#a72700"
  footer-ink: "#f4f3e7"
  em-color: "#d8e5d6"
  focus-ring: "#e59700"
  tap-highlight: "rgba(0, 0, 0, 0.35)"
  on-dark: "#f4f3e7"

typography:
  display-hero:
    fontFamily: "SweetSans, SweetSansText, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: 0
  display-lg:
    fontFamily: "SweetSans, SweetSansText, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 70px
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: 0
  display-md:
    fontFamily: "SweetSans, SweetSansText, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0
  cta-serif:
    fontFamily: "Grenette, Georgia, Cambria, Palatino, 'Times New Roman', Times, serif"
    fontSize: 48px
    fontWeight: 200
    lineHeight: 1
    letterSpacing: "-2.25px"
    textTransform: capitalize
  heading-uppercase:
    fontFamily: "SweetSansText, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: "0.72px"
    textTransform: uppercase
  heading-emphasis:
    fontFamily: "SweetSansText, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0
  body-lg:
    fontFamily: "SweetSansText, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0
  body-md:
    fontFamily: "SweetSansText, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0
  body-sm:
    fontFamily: "SweetSansText, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.375
    letterSpacing: 0
  eyebrow:
    fontFamily: "SweetSansText, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: "0.8px"
    textTransform: uppercase
  nav-link:
    fontFamily: "SweetSansText, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0
    textTransform: uppercase
  button-md:
    fontFamily: "SweetSansText, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0
  input-md:
    fontFamily: "SweetSansText, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0
  caption:
    fontFamily: "SweetSansText-Regular, SweetSansText, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: "0.2px"
  footer-link:
    fontFamily: "SweetSansText-Regular, SweetSansText, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "4px"
  md: "10px"
  lg: "20px"
  xl: "24px"
  full: "1000px"

spacing:
  xxs: "4px"
  xs: "8px"
  sm: "16px"
  md: "24px"
  base: "40px"
  lg: "60px"
  xl: "100px"
  gutter: "24px"
  nav-height: "72px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-on}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "7px 16px 5px"
    height: "30px"
    border: "0"
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    rounded: "{rounded.full}"
    border: "0"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "7px 16px 5px"
    height: "30px"
    border: "1px solid {colors.hairline}"
  button-hero-photo:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.cta-serif}"
    rounded: "{rounded.full}"
    padding: "15px 60px 13px"
    border: "0"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    height: "72px"
    padding: "0px 40px"
    border: "0"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "5px"
  hero-photo-block:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.canvas}"
    rounded: "{rounded.lg}"
    padding: "0"
    border: "0"
  hero-headline:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-hero}"
    padding: "0"
  hero-eyebrow:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.eyebrow}"
    padding: "0"
  day-part-tab-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.full}"
    padding: "5px 30px 40px"
  day-part-tab-inactive:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.full}"
    padding: "5px 30px 40px"
  food-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-uppercase}"
    rounded: "{rounded.lg}"
    padding: "0"
    border: "0"
  food-card-title:
    backgroundColor: "transparent"
    textColor: "{colors.ink-pure}"
    typography: "{typography.heading-uppercase}"
    padding: "16px 0 8px"
  food-card-meta:
    backgroundColor: "transparent"
    textColor: "{colors.muted}"
    typography: "{typography.body-sm}"
  feature-band-workplace:
    backgroundColor: "{colors.surface-sage}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: "60px 0px"
    border: "0"
  feature-band-kitchen:
    backgroundColor: "{colors.surface-paper}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: "60px 0px"
    border: "0"
  feature-headline:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
  text-input:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.ink}"
    typography: "{typography.input-md}"
    rounded: "{rounded.md}"
    padding: "12px 50px 12px 16px"
    height: "50px"
    border: "1px solid {colors.hairline}"
  newsletter-submit:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "7px 16px 5px"
    height: "30px"
  footer:
    backgroundColor: "{colors.footer-bg}"
    textColor: "{colors.footer-ink}"
    typography: "{typography.footer-link}"
    padding: "60px 40px"
    border: "0"
  footer-link:
    backgroundColor: "transparent"
    textColor: "{colors.footer-ink}"
    typography: "{typography.footer-link}"
  social-icon:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    rounded: "{rounded.full}"
    height: "24px"
---

## Overview

sweetgreen's web flagship reads like printed café signage put on a screen — a warm paper cream (`{colors.canvas}` — `#f4f3e7`) replaces the default white canvas, near-black ink (`{colors.ink}` — `#0e150e`) carries body and nav, a deep forest (`{colors.primary}` — `#00473c`) fills the single primary CTA pill, and an electric chartreuse (`{colors.primary-on}` — `#e6ff55`) sits on top of that fill as the button's label. The chartreuse appears nowhere else on the page; total occurrence in the extracted palette is 5, all bound to the Order pill. Where most quick-service restaurant brands stack a tomato-red CTA over a white canvas and shout in 700-weight headings, sweetgreen inverts every default: cream over white, forest over red, weight 400 across nearly the entire type system, photography over typographic muscle.

Type runs **SweetSans** (display) and **SweetSansText** (body and chrome) — a single in-house family carrying 14 of 15 type tiers. Display tucks at 80px / 400 over the hero photo; supporting headings render at 24px / 400 uppercase with a tight 0.72px tracking. The lone exception is the in-photo CTA button, which switches to **Grenette** — a serif italic at weight 200 with `-2.25px` letter-spacing — for exactly one editorial flourish. The button-level type contrast (sans-uppercase 16px voice everywhere, serif-italic 48px voice once) is the system's signature typographic moment.

The shape language is consistent. Buttons sit on a 1000px full-pill radius (`{rounded.full}`, five extracted occurrences), food cards take a 20px rounded-rectangle (`{rounded.lg}`, 18 extracted occurrences — the dominant radius on the page), the newsletter input softens to 10px (`{rounded.md}`), and there are essentially no hard 0px corners except the full-bleed footer band and the hero photo crop. Section feature bands (workplace, kitchen) use sage paper (`{colors.surface-sage}` — `#d8e5d6`) and a wheat paper tint (`{colors.surface-paper}` — `#e8dcc6`) to break the cream canvas without introducing a new chromatic voltage.

**Key Characteristics:**
- **Two-token CTA discipline**: forest fill plus chartreuse label, never used apart. The page has exactly one repeating button voltage — the Order pill at 30px height with `7px 16px 5px` padding. Where most brands ship one accent and tint it for the label, sweetgreen ships two non-overlapping voltages and pairs them inside one shape.
- **Cream as canvas**: `--body-color` is `#f4f3e7` in CSS, not `#ffffff`. Pure white only appears inside the newsletter input and a few tiny icon backgrounds.
- **Uppercase 16px nav voice**: nav links, day-part tabs ("Salads / Warm Bowls / Sides"), food-card titles, and footer column heads all render at 16px / 400 uppercase. The page reads as a printed menu board.
- **80px hero, 24px everything else**: a single dramatic display tier (80px / 400) at the top of the page; every other heading drops to 24px. The system has no mid-tier display weight — it is hero or it is chrome.
- **Photo-first food cards**: 20px-rounded photo with the dish name beneath in uppercase, no card surface, no shadow, no hairline. The photograph IS the card.
- **Sage paper feature bands**: long horizontal bands use `{colors.surface-sage}` (`#d8e5d6`) or `{colors.surface-paper}` (`#e8dcc6`) instead of color washes — neutral paper tints rather than chromatic backgrounds keep the cream-page temperature consistent.
- **Oxblood scoped to footer**: `{colors.footer-bg}` (`#a72700`) reverses the entire footer band against cream chrome above — the only red surface on the page, never used as a CTA.

**Menu-as-page**: sweetgreen's homepage treats every heading like a printed menu board — uppercase, weight 400, 0.72px tracking, sans-serif — and lets photography carry every visual claim. This is not a marketing site that happens to sell food; it is a digital menu that happens to be a marketing site.

## Colors

### Brand & Accent
- **Forest Green** (`{colors.primary}` — `#00473c`) — frequency 15. Used as text (8), border (6), background (1). The CTA fill for the Order pill and the small forest chrome around the order rail. The system's load-bearing brand voltage.
- **Electric Chartreuse** (`{colors.primary-on}` — `#e6ff55`) — frequency 5. Used as background (4), text (1). The Order pill label color and nothing else — the brightest single moment on the page, paired only with `{colors.primary}` and never used independently.

### Canvas & Surfaces
- **Cream Canvas** (`{colors.canvas}` — `#f4f3e7`) — frequency 41. Used as text-on-dark (19), border (19), background (3). Defined in CSS as `--body-color`. The page floor and the footer text color when reversed.
- **Surface Sage** (`{colors.surface-sage}` — `#d8e5d6`) — frequency 3. Used as background (3). Long horizontal feature band background for "All the ways we keep your workplace working" — paper-toned, not chromatic. Also wired into `--em-color`.
- **Surface Paper** (`{colors.surface-paper}` — `#e8dcc6`) — frequency 1. Used as background (1). Second-tier feature band tint for "Step inside the sweetgreen kitchen" — a wheat-paper warm.
- **White** (`{colors.surface-white}` — `#ffffff`) — frequency 3. Used as background (3). Scoped to the newsletter input field, social-icon plates, and a few tight surface fills. Never the page floor.

### Text & Ink
- **Ink** (`{colors.ink}` — `#0e150e`) — frequency 185. Used as text (92), border (91), shadow (2). The dominant text color and hairline tone. Wired to `--text-color`, `--border-color`, `--button-hover-color`, `--button-hover-border-color`. Not pure black — a very dark green-tinted ink.
- **Pure Black** (`{colors.ink-pure}` — `#000000`) — frequency 440. Used as text (220), border (220). Scoped to food card titles like "Kale Caesar", "Shroomami", "Buffalo Chicken" and the tap-highlight color — the highest-contrast text tier reserved for product names only.
- **Muted** (`{colors.muted}` — `#8c8c82`) — frequency 4. Used as text (2), border (2). Caption color for fine print and inline metadata.
- **Muted Mid** (`{colors.muted-mid}` — `#555555`) — frequency 2. Used as text (1), border (1). A secondary muted tone for legal small caps.
- **Placeholder** (`{colors.placeholder}` — `#b2b2b2`). Used as text (placeholder only). Wired to `--placeholder-txt` — newsletter input placeholder color.

### Footer & Scoped Chrome
- **Oxblood** (`{colors.footer-bg}` — `#a72700`). Used as background (footer band only). Wired to `--footer-color`. Reverses the entire footer against the cream chrome above — the only red surface on the page. Never a CTA, never a section header.
- **Tap Highlight** (`{colors.tap-highlight}` — `rgba(0, 0, 0, 0.35)`) — the touch ripple color wired to `--tap-highlight-color`.
- **Focus Ring** (`{colors.focus-ring}` — `#e59700`) — an amber outline wired to `--outline-color`. Appears only on keyboard focus, scoped to a11y states.

## Typography

### Font Families
The system runs **SweetSans** (display) and **SweetSansText** (body, nav, chrome) — a single in-house family covering 14 of 15 tokens. Fallbacks walk `system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`.

**Grenette** (a serif italic at weight 200 with `-2.25px` letter-spacing) surfaces in exactly one place: the in-photo CTA button on the hero block. Fallbacks walk `Georgia, Cambria, Palatino, "Times New Roman", Times, serif`.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-hero}` | 80px | 400 | 0.85 | 0 | Hero word ("Wraps") over the food photograph |
| `{typography.display-lg}` | 70px | 400 | 0.85 | 0 | Feature-band headlines ("All the ways we keep your workplace working") |
| `{typography.display-md}` | 40px | 400 | 1 | 0 | Secondary feature headings |
| `{typography.cta-serif}` | 48px | 200 | 1 | -2.25px | Grenette serif italic, used only inside the in-photo CTA button — "Wraps are here" |
| `{typography.heading-uppercase}` | 24px | 400 | 1.2 | 0.72px (UC) | Food-card titles inside the day-part grid; uppercase nav-style |
| `{typography.heading-emphasis}` | 24px | 700 | 1.2 | 0 | A single weight-700 emphasis variant — used on emphasized inline anchor text |
| `{typography.body-lg}` | 24px | 400 | 1.2 | 0 | Large running body inside feature bands |
| `{typography.body-md}` | 18px | 400 | 1.25 | 0 | Default body paragraph copy |
| `{typography.body-sm}` | 16px | 400 | 1.375 | 0 | Card meta lines and short descriptive copy |
| `{typography.eyebrow}` | 16px | 400 | 1 | 0.8px (UC) | Small uppercase eyebrow labels above hero headings |
| `{typography.nav-link}` | 16px | 400 | 1 | 0 (UC) | Top-nav links and day-part tabs |
| `{typography.button-md}` | 16px | 400 | 1 | 0 | Standard CTA pill label |
| `{typography.input-md}` | 20px | 400 | 1.2 | 0 | Newsletter input typed value |
| `{typography.caption}` | 12px | 400 | 1.33 | 0.2px | Fine print, legal, footer micro-copy |
| `{typography.footer-link}` | 14px | 400 | 1.3 | 0 | Footer column link rows |

### Principles
Weight 400 carries the entire system. Display does not lean on bold weight to assert hierarchy — it scales up (24 → 70 → 80px) instead. The only weight-700 token is a single emphasis variant used inline on anchors; there is no h1 / h2 / h3 weight ladder in the traditional sense.

The single typographic flourish is the **48px Grenette serif italic** at weight 200, used inside one button on the hero photo. That contrast — the entire page in confident sans-uppercase, one button in whisper-light serif italic — is the system's signature moment. **Whisper-as-signature**: the loudest CTA on the page also carries the lightest font weight.

### Note on Font Substitutes
If SweetSans / SweetSansText are unavailable, **Inter** or **Manrope** are reasonable open-source substitutes; both sit at similar x-height and stroke weight at 400. For **Grenette**, the closest open-source matches are **Italiana** or **Cormorant Garamond** at Light Italic — both share the high-contrast serif-italic feel at weight 200.

## Layout

### Spacing System
- **Base unit:** 8px (with 4px micro-step).
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 16px · `{spacing.md}` 24px · `{spacing.base}` 40px · `{spacing.lg}` 60px · `{spacing.xl}` 100px.
- **Extracted dominant spacings:** `8px` appears 24 times (the workhorse), `24px` appears 11 times (gutter), `4px` 10 times (micro), `0px 40px` 8 times (top-nav horizontal padding shorthand).
- **Top nav padding:** `0px 40px` (left/right). Nav height `--nav-height` is locked to 72px.
- **Feature band padding:** `60px 0px` vertical. Wide horizontal bands sit at `60px` of stacked breathing room — wider than a typical SaaS marketing page.
- **Hero CTA button padding:** `15px 60px 13px` — generous horizontal stretch so the serif italic word reads as a typographic moment, not a button.

### Grid & Container
- **Max content width:** `--maxwidth` 90rem (1440px).
- **Narrow content cap:** `--maxwidth-narrow` 40.5625rem (650px) — used inside long-form editorial paragraphs.
- **Grid:** `--grid` is `repeat(12, minmax(10px, 1fr))` — a 12-column system with 24px gutters (`--gutter`).
- **Day-part grid:** 3-column food card stack at desktop ("Kale Caesar / Shroomami / Buffalo Chicken"), collapsing to 1-column at mobile.
- **Feature bands:** 2-column at desktop (text left, photograph right) — bands stack to 1-column at narrow widths.

### Whitespace Philosophy
The page reads as a printed menu — generous vertical air between bands (60px), tight rhythm within cards (8px / 16px), and a 1440px content cap that lets the cream canvas breathe at the page edges. Food cards sit tight to one another in the day-part grid (24px gutter) so the menu reads as a single composition rather than three isolated dishes.

## Elevation

The system has **no shadow tier** in the extracted page. Surfaces separate via tonal contrast and corner rounding rather than layered shadows.

- **Flat (no shadow):** every band, every card, every button, the footer. The system either has no elevation cue or relies on color separation.
- **Cards float on photography**: food cards have no card surface — the photograph itself is the elevation cue, clipped at `{rounded.lg}` (20px). The cream page beneath shows through where the photo ends.
- **Feature bands use tonal steps**: workplace band sits on `{colors.surface-sage}` paper, kitchen band on `{colors.surface-paper}` wheat — these are color-contrast surfaces, not shadow-elevated ones.
- **Focus ring**: the single elevated state is the keyboard focus outline at `{colors.focus-ring}` (`#e59700`). Reserved for a11y only.

**Photo-as-elevation**: where most consumer brands ship a shadow definition and apply it everywhere, sweetgreen ships zero shadows and relies on the food photograph against the cream page floor to do the elevation work. The shape sits on the page; the page does not lift.

## Shapes

- **`{rounded.full}` (1000px) — 5 occurrences**: every CTA button, the social icon plates, and the in-photo serif CTA. The full pill is the universal button shape.
- **`{rounded.lg}` (20px) — 18 occurrences**: the dominant page radius. Used on food cards, hero photo block, feature-band photographs, and the workplace / kitchen split images.
- **`{rounded.xl}` (24px) — 1 occurrence**: a single oversized card on the workplace feature band.
- **`{rounded.md}` (10px) — 1 occurrence**: the newsletter input field.
- **`{rounded.sm}` (4px) — 4 occurrences**: small micro-radii on inline chips and footer locator components.
- **`{rounded.none}` (0px)**: the hero photo crop edge and the full-bleed oxblood footer band.

The shape system is bimodal: buttons are fully round, cards are softly rounded at 20px, and a tiny 4px / 10px tail covers inputs and small chips. There are no mid-tier radii between 10px and 20px.

## Components

### Buttons

**`button-primary`** — Forest fill (`{colors.primary}` — `#00473c`), chartreuse label (`{colors.primary-on}` — `#e6ff55`), 1000px pill (`{rounded.full}`), `7px 16px 5px` padding (note the asymmetric vertical), 30px height, 16px SweetSansText label, weight 400. The single most identifiable component — the "Order" CTA.

**`button-primary-hover`** — On hover the fill flips to `{colors.ink}` and the label flips to `{colors.canvas}` — wired via CSS variables `--button-hover-color` and `--button-hover-text-color`. The chartreuse voltage drops out on hover, which preserves it as a rest-state-only signal.

**`button-secondary`** — Transparent fill, ink text, 1px hairline border at `{colors.hairline}`, same 30px / 1000px geometry as the primary.

**`button-hero-photo`** — The single Grenette serif italic CTA. Cream fill (`{colors.canvas}`), ink label in `{typography.cta-serif}` (48px / 200, `-2.25px` tracking, capitalize), `15px 60px 13px` padding. Sits on top of the hero food photograph — the system's signature typographic moment.

### Top Navigation

**`top-nav`** — Cream surface (`{colors.canvas}` — matches the page canvas), 72px height (`--nav-height`), `0px 40px` horizontal padding, no bottom hairline. The lowercase wordmark sits flush left, primary nav links sit centered ("Menu", "Locations", "Careers", "Values"), the Order pill sits flush right.

**`nav-link`** — Ink text in `{typography.nav-link}` (16px / 400 uppercase). No underline, no chip background, no active rule.

### Hero

**`hero-photo-block`** — A full-width photograph of food in a 20px-clipped rectangle (`{rounded.lg}`), occupying the full width above the day-part grid. No overlay, no scrim — the photograph carries the entire hero.

**`hero-eyebrow`** — Cream uppercase eyebrow text in `{typography.eyebrow}` (16px / 400, 0.8px tracking, uppercase), placed over the photograph above the hero word.

**`hero-headline`** — Cream display text in `{typography.display-hero}` (80px / 400). One word per hero ("Wraps"), letting the photograph beneath dominate.

### Day-Part Section

**`day-part-tab-active`** — Ink fill, cream text, 1000px pill, `5px 30px 40px` padding (the asymmetric vertical creates a generous below-button area where the active state breathes against the cream page). Carries the day-part name in `{typography.nav-link}` (16px / 400 uppercase).

**`day-part-tab-inactive`** — Transparent fill, ink text. Becomes active on click.

**`food-card`** — A photo-first card. 20px-clipped photograph (`{rounded.lg}`), uppercase product name in `{typography.heading-uppercase}` beneath at 24px / 400 with 0.72px tracking. No card surface, no shadow, no border — the photograph is the card.

**`food-card-title`** — Pure-black text (`{colors.ink-pure}` — `#000000`), the highest-contrast tier in the system, scoped to product names only.

**`food-card-meta`** — Muted text (`{colors.muted}` — `#8c8c82`) for kcal / price / "Order now" type metadata.

### Feature Bands

**`feature-band-workplace`** — Sage paper surface (`{colors.surface-sage}` — `#d8e5d6`), 20px rounded outer (`{rounded.lg}`), `60px 0px` vertical padding. Holds the "All the ways we keep your workplace working" headline and a paired photograph of food on a counter.

**`feature-band-kitchen`** — Wheat paper surface (`{colors.surface-paper}` — `#e8dcc6`), same geometry as workplace. Holds the "Step inside the sweetgreen kitchen" headline and a tutorial photograph.

**`feature-headline`** — Ink text in `{typography.display-lg}` (70px / 400). The largest typographic moment outside the hero word.

### Forms

**`text-input`** — White surface (`{colors.surface-white}`), 1px hairline outline at `{colors.hairline}` (`#0e150e`), 10px radius (`{rounded.md}`), 50px height, `12px 50px 12px 16px` padding (the asymmetric right padding leaves room for the inline submit button). Typed value in `{typography.input-md}` (20px / 400 SweetSansText).

**`newsletter-submit`** — Ink fill, cream text — sits inline-right inside the input field; same 1000px pill geometry as `{component.button-primary}` but uses the ink/cream voltage instead of forest/chartreuse, because it's a secondary action that shouldn't compete with the Order CTA.

### Footer

**`footer`** — Oxblood surface (`{colors.footer-bg}` — `#a72700`), cream text (`{colors.footer-ink}` — `#f4f3e7`), `60px 40px` padding. The only red surface on the page; reverses the entire footer band against the cream chrome above.

**`footer-link`** — Cream text in `{typography.footer-link}` (14px / 400). No underline at rest.

**`social-icon`** — A 24px circular ink icon. Sits flush-right inside the footer band.

## Do's and Don'ts

### Do
- Use `{colors.canvas}` (`#f4f3e7`) as the page floor, never `#ffffff`. Pure white is reserved for the newsletter input and small icon plates.
- Pair `{colors.primary}` (`#00473c`) and `{colors.primary-on}` (`#e6ff55`) only inside the Order pill. The two voltages are one CTA token, not two color tokens.
- Render food card titles in `{colors.ink-pure}` (`#000000`) — the only place pure black should appear as text.
- Use `{rounded.lg}` (20px) on every card, hero photo, and feature-band image. It's the dominant radius (18 of 30 extracted occurrences).
- Keep the 16px uppercase voice on nav links, day-part tabs, food-card titles, and footer column heads — the page reads as a printed menu board.
- Use `{colors.surface-sage}` and `{colors.surface-paper}` to break the cream canvas — they are paper tints, not color washes.

### Don't
- Don't use `{colors.primary-on}` (`#e6ff55`) anywhere outside the Order pill label. Chartreuse total page occurrence is 5; spreading it across badges or hover washes flattens the only true brand voltage on the page.
- Don't use `{colors.footer-bg}` (`#a72700`) as a CTA fill — oxblood is wired to `--footer-color` and is the only red surface on the page; reusing it elsewhere fights the menu-board palette discipline.
- Don't render product names like "Kale Caesar" in `{colors.ink}` (`#0e150e`) — they specifically use pure black `#000000` at 220 / 220 text/border occurrences. The single-step contrast jump from ink to pure black is the system's product-emphasis cue.
- Don't reach for a weight-700 display heading. The system caps display at weight 400 and scales for hierarchy. Bold display weights read as a different brand.
- Don't ship a 12px or 16px radius on cards — the system jumps from 10px (input only) straight to 20px. Mid-tier radii read off-brand.
- Don't add a shadow tier. The extracted system has zero shadow definitions; food cards float on the cream page floor via 20px corner clipping and tonal contrast alone.
- Don't substitute Grenette with a standard text serif at weight 400. The whole point is the weight-200 italic whisper at `-2.25px` tracking — a Georgia regular kills the effect.

## Known Gaps

- **Order flow surfaces:** the extracted page is the marketing homepage only — menu detail, customization sheet, bowl builder, cart, and account dashboard are not captured. The bowl-builder interaction patterns, size selector, and ingredient swap chips are missing from this spec.
- **Loyalty / SG Rewards:** status surfaces and the rewards dashboard are not included; gold or rewards-tier ceremony colors are not present in the extracted palette.
- **Mobile breakpoint tuning:** CSS tokens (`--nav-height` 72px, `--maxwidth` 90rem, `--gutter` 1.5rem) describe the system, but actual mobile sheet behavior and tap-target padding aren't visible in the desktop capture.
- **Dark mode:** the system ships light-only; no dark palette is declared in `:root` CSS variables.
- **Hover and focus state coverage:** the primary button hover flip (`--button-hover-color` to ink) is captured, but full input focus state combinations, link hover treatments, and tab focus-visible patterns are partially documented from CSS variables.
- **Sub-brand and partnership palettes:** any co-branded or sub-brand surfaces (corporate catering, Outpost, etc.) live on separate paths and are not captured here.