sweetgreen Design System

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

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.