What is sweetgreen's primary brand color?

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.

Why is the page canvas cream instead of white?

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

What typography does sweetgreen use, and what should I substitute?

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.

Why are the buttons fully pill-shaped?

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.

Where can I use the chartreuse color?

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.

What's missing from this DESIGN.md spec?

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.

sweetgreen Design System

sweetgreen design system as a DESIGN.md file.

About sweetgreen DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source sweetgreen.com

Food & Delivery

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.

What makes it distinct

Cream paper canvas (`#f4f3e7`)the brand never uses pure white as the page floor, even on product cards
Two-token CTAforest green (
Universal 1000px full-pill buttons paired with 20px rounded-rectangle food cardsappearing 18 times in the radii table
Two-typeface splitSweetSans handles 14 of 15 type tiers; Grenette serif italic at weight 200 surfaces only inside the wraps-CTA button
Oxblood (

Live at sweetgreen.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

sweetgreen.com

Explore sweetgreen

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

sweetgreen design system FAQ

Common questions about sweetgreen's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

sweetgreen — official site

The cream-canvas fast-casual flagship this DESIGN.md was extracted from.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use sweetgreen in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→