---
title: "sweetgreen design system"
variant: extended
source: https://www.sweetgreen.com/
captured_at: 2026-10-12
theme: light
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/sweetgreen-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# sweetgreen · Design System

> Fresh food, framed with calm editorial clarity

**Theme:** light · **Industry:** food-beverage · **Source:** https://www.sweetgreen.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

sweetgreen pairs oversized, appetite-led food photography with a restrained palette of warm cream, leafy green, and ink-dark text. Its homepage moves from a full-bleed featured dish to menu cards and spacious, image-led brand stories.

## North star

Let vivid, close-up food photography lead, and keep its surroundings calm, warm, and easy to scan.

## Overview

The page balances appetite appeal with a calm, natural visual identity. Gallery White (#f4f3e7) is the main canvas, while pale Sage (#d8e5d6) and Oatmeal (#e8dcc6) mark distinct editorial sections. Deep Ink (#0e150e) keeps navigation, headings, and descriptive copy legible; Forest Green (#00473c) accents the wordmark and compact order control, while Citrus Glow (#e6ff55) makes the primary order CTA unmistakable. SweetSans and SweetSansText carry the page’s clean, direct voice, with Grenette used for expressive display and button typography where measured. Layout shifts between a full-bleed hero, a three-column menu presentation, and two-column image-and-copy features. Food photography is large and richly detailed, providing most of the visual complexity against otherwise flat, quiet surfaces. Compact navigation and close-set menu details contrast with generously composed feature bands, giving the long page a clear, varied rhythm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Ink | `#0e150e` | `--color-deep-ink` | neutral | Primary navigation, headings, body copy, links, and thin outlines. |
| Gallery White | `#f4f3e7` | `--color-gallery-white` | brand | Main page canvas, menu area, header, and newsletter band. |
| Garden Sage | `#d8e5d6` | `--color-garden-sage` | surface | Workplace feature band and footer background. |
| Warm Oat | `#e8dcc6` | `--color-warm-oat` | surface | Kitchen story feature band behind editorial copy and photography. |
| Citrus Glow | `#e6ff55` | `--color-citrus-glow` | accent | Primary hero order button and small menu availability label. |
| Forest Green | `#00473c` | `--color-forest-green` | brand | Wordmark and compact header order control; also the text color on the bright CTA. |

### Semantic aliases

`--color-canvas` → `#f4f3e7` (Gallery White) · `--color-surface` → `#d8e5d6` (Garden Sage) · `--color-surface-2` → `#e8dcc6` (Warm Oat) · `--color-text` → `#0e150e` (Deep Ink) · `--color-border` → `#0e150e` (Deep Ink) · `--color-accent` → `#00473c` (Forest Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0e150e` | `#f4f3e7` | 16.62:1 | AAA |
| `#0e150e` | `#d8e5d6` | 14.22:1 | AAA |
| `#0e150e` | `#e8dcc6` | 13.67:1 | AAA |
| `#00473c` | `#f4f3e7` | 9.57:1 | AAA |
| `#00473c` | `#d8e5d6` | 8.19:1 | AAA |
| `#00473c` | `#e8dcc6` | 7.87:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SweetSansText | `--font-body` | webfont | 400, 700 | Navigation, body copy, captions, links, labels, and most page text. | Inter |
| SweetSans | `--font-display` | webfont | 400 | Large display and main hero heading. | DM Sans |

- **SweetSansText:** Use regular and bold weights; navigation is uppercase, while body and links remain sentence case.
- **SweetSans:** Measured in regular weight for display; retain a clean, light sans-serif character.

### Type scale — Perfect Fourth (ratio ≈ 1.348, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 0.85 | 0 | — | SweetSans | Oversized hero or campaign display copy. |
| h1 | 70px | 400 | 0.85 | 0 | — | SweetSans | Primary hero headline. |
| h2 | 48px | 200 | 1 | -0.047em | capitalize | Grenette | Expressive section headline, including kitchen feature. |
| h3 | 40px | 400 | 1 | 0 | — | SweetSans | Menu item names or prominent feature headings. |
| h4 | 24px | 400 | 1.2 | 0 | — | SweetSansText | Secondary feature and content headings. |
| body | 18px | 400 | 1.25 | 0 | — | SweetSansText | Menu descriptions and supporting editorial copy. |
| caption | 16px | 400 | 1.38 | 0 | — | SweetSansText | Small labels, dietary notes, and image captions. |
| button | 48px | 200 | 1 | -0.047em | capitalize | Grenette | Large editorial-style button labels where used. |
| nav | 16px | 400 | 1 | 0 | uppercase | SweetSansText | Uppercase primary navigation labels. |
| link | 18px | 400 | 1.25 | 0 | — | SweetSansText | Inline actions such as menu ordering and follow-along. |
| eyebrow | 24px | 400 | 1.2 | 0.03em | uppercase | SweetSansText | Uppercase section labels above feature headings. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 3, 4, 5, 8, 10, 12, 13, 15, 16, 20, 24, 30, 35, 40, 43, 60 px.
- Section rhythm 40px · element gap 8px · card padding — · max content width 1360px.

The page uses a broad desktop canvas measured to a 1360px maximum width, with a compact horizontal navigation row and mostly left-aligned content. The hero spans the viewport; the menu becomes a three-column product grid, while workplace and kitchen stories use two-column image-and-copy splits. Sections alternate warm neutral, sage, and oat backgrounds for clear pacing. Spacing feels compact around navigation and menu details, but more open around editorial feature content.

## Shape & elevation

- Radius: button `9999px` · input `10px` · media `20px` · link `4px` · xs `4px` · sm `20px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

The visual system is predominantly flat: section backgrounds and photography create hierarchy instead of shadows. Thin dark outlines appear on simple controls, and menu images sit directly on the canvas without prominent card framing. Use rounded pill shapes for order actions and restrained corner rounding for media; avoid decorative layering.

## Imagery

Photography is the defining visual asset: overhead and close-framed bowls, fresh produce, ingredients, and kitchen scenes. The opening salad image runs full bleed and fills most of the first viewport; menu imagery is repeated in aligned cards. Feature photography sits beside copy within split sections. Keep images natural, richly detailed, and unornamented; no illustration or 3D treatment defines the page.

## Components

### Primary navigation

A compact horizontal row on Gallery White, with uppercase SweetSansText links, centered green wordmark, and a dark green order pill.

### Hero order CTA

Bright Citrus Glow pill with Forest Green uppercase text, placed over the lower-left area of the full-bleed hero image.

### Menu category and product grid

Category labels above three aligned food cards; each card pairs a food photograph with a bold name, concise ingredients, dietary notes, and an order link.

### Editorial feature split

Two-column feature band with short copy and a supporting photograph; workplace content uses Garden Sage, kitchen content uses Warm Oat.

### Newsletter signup

Two-column content area with an email field, thin Deep Ink outline, and a simple arrow action beside app download links.

### Footer link columns

Multi-column navigation on Garden Sage with compact uppercase group headings, small links, and minimal visual decoration.

### Measured component styles

- **Primary button** (“ORDER NOW”): background #e6ff55 · text #00473c · border 1px solid · radius 1000px · padding 15px 60px 13px 60px · 400 16px SweetSansText · uppercase
- **Secondary button** (“ORDER”): background #00473c · text #e6ff55 · border 1px solid · radius 1000px · padding 7px 16px 5px 16px · 400 16px SweetSansText · uppercase
- **Link** (“Order now →”): transparent background · text #0e150e · radius 0px · padding 0px · 400 18px SweetSansText
- **Input**: transparent background · text #0e150e · border 1px solid #0e150e · radius 10px · padding 12px 50px 12px 16px · 400 20px SweetSansText
- **Navigation item** (“OUR MENU OUR MISSION FUNDRAISING THE MAR”): transparent background · text #0e150e · radius 0px · padding 0px · 400 16px SweetSansText

## Do

- Use Gallery White (#f4f3e7) as the dominant page canvas.
- Let large, natural food photography anchor hero and menu sections.
- Use Garden Sage (#d8e5d6) and Warm Oat (#e8dcc6) for editorial section bands.
- Keep navigation uppercase, compact, and set in a clean sans-serif.
- Make the primary order action highly visible in Citrus Glow (#e6ff55).
- Use Deep Ink (#0e150e) for readable copy and restrained outlines.

## Don't

- Do not introduce gradients or decorative shadows.
- Do not add colors outside the measured palette without evidence.
- Do not crowd feature imagery with extra labels or ornaments.
- Do not turn food cards into heavily elevated or bordered panels.
- Do not use tiny, low-contrast text for important actions.
- Do not make every section the same layout or background.

## Agent prompt

Build a new restaurant page in sweetgreen’s calm, food-led visual style. Use Gallery White (#f4f3e7) as the main canvas, Deep Ink (#0e150e) for copy and navigation, Forest Green (#00473c) for brand accents, and Citrus Glow (#e6ff55) for the primary order action. Use Garden Sage (#d8e5d6) and Warm Oat (#e8dcc6) as alternating editorial section surfaces. Set a compact uppercase sans-serif navigation above a dominant, full-bleed food photograph. Follow with a scannable product grid and varied two-column feature bands pairing concise copy with natural, richly detailed photography. Use SweetSansText-like sans-serif typography for utility and body text, with a softer editorial display face for major headings. Keep surfaces flat, spacing purposeful, and controls simple and rounded.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed featured salad photograph with headline and CTA overlaid near the lower left. | Featured menu item, Prominent order CTA, Hero food photography | Full-bleed image, Large light headline, Citrus pill button |
| 2 | product-grid | Category selector above three side-by-side menu product cards. | Menu category tabs, Direct item ordering, Dietary information | Three-column grid, Food photography, Compact ingredient copy |
| 3 | feature-split | Two-column sage band with workplace copy on the left and produce image on the right. | Business service overview, Linked service options | Sage background, Text-and-image split, Left-aligned copy |
| 4 | feature-split | Two-column oat band with kitchen headline and text beside an ingredient photograph. | Editorial brand story, Social follow-through | Oat background, Kitchen photography, Underlined text link |
| 5 | newsletter | Two-column neutral band separating email signup from app download links. | Email signup, App download links | Outlined email field, Arrow submit action, Simple text links |
| 6 | footer | Sage footer with multiple compact link columns and a small brand/legal area. | Grouped site navigation, Social links, Legal links | Multi-column link lists, Small uppercase headings, Flat background |

## Source CSS custom properties (selected)

```css
--body-color: #F4F3E7;
--text-color: #0E150E;
--color-body: #F4F3E7;
--color-text: #0E150E;
--color-tap-highlight: rgba(0, 0, 0, 0.35);
--em-color: #D8E5D6;
--border-color: #0E150E;
--footer-color: #A72700;
--footer-text-color: #F4F3E7;
--button-color: transparent;
--button-text-color: inherit;
--button-hover-color: #0E150E;
--button-hover-text-color: #F4F3E7;
--button-hover-border-color: #0E150E;
--tap-highlight-color: rgba(0, 0, 0, 0.35);
--outline-color: rgb(229, 151, 0);
--font-size-h1: 5rem;
--font-size-h2: 4.375rem;
--font-size-h3: 3rem;
--font-size-h4: 2.5rem;
--font-size-h5: 1.5rem;
--font-size-h6: 1.125rem;
--font-size-b1: 1.25rem;
--font-size-body: 1rem;
--font-size-card: 2rem;
--font-size-btn: 1rem;
--h-spacing: 2.5rem;
--spacing-xxs: 0.4375rem;
--spacing-s: 1.25rem;
--spacing-m: 1.875rem;
--spacing: 2.6875rem;
--spacing-l: 4.375rem;
--spacing-xl: 6.25rem;
--hero-spacing: 3.75rem;
--stack-spacing: 2.6875rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/sweetgreen-com