What font does sweetgreen use?

sweetgreen’s website uses three typefaces: Grenette (headings), self-hosted; SweetSans, self-hosted; SweetSansText (body text), self-hosted.

What are sweetgreen’s brand colours?

The main colours on sweetgreen.com are Dark Slate Grey (#00473C), Sea Green (#2D6B52), Yellow (#E6FF55), Antique White (#E8DCC6), Dark Sea Green (#A9C1A9) and Orange (#E59700).

What colour is sweetgreen’s text and background?

Body text is #0E150E on a #F4F3E7 background.

Where is sweetgreen’s logo from?

The logo shown in this guide was found on sweetgreen.com’s homepage. For official logo files and usage rules, check sweetgreen’s own brand or press page.

Is this sweetgreen’s official style guide?

No. SiteStyleGuide made it from sweetgreen.com’s public web pages on 27 October 2026, and isn’t affiliated with sweetgreen. Members can refresh a guide after 90 days to pick up changes.

sweetgreen Style Guide: Colours, Fonts & Logo

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: sweetgreen | Inspiring healthier communities; ● 44 / 60 characters
Meta description: healthy salads, hearty wraps, grain bowls, and warm plates made in-house from scratch, using whole produce delivered that morning.; ● 130 / 160 characters
Site name: sweetgreen
og:title: sweetgreen | Inspiring healthier communities
og:description: healthy salads, hearty wraps, grain bowls, and warm plates made in-house from scratch, using whole produce delivered that morning.
Language: en-US

In search results

sweetgreenhttps://www.sweetgreen.com/

sweetgreen | Inspiring healthier communities

healthy salads, hearty wraps, grain bowls, and warm plates made in-house from scratch, using whole produce delivered that morning.

When shared

No og:image, so no picture

sweetgreen.com

sweetgreen | Inspiring healthier communities

healthy salads, hearty wraps, grain bowls, and warm plates made in-house from scratch, using whole produce de…

Back to top ↑

Logo & favicons

Found as: schema.org logo. PNG, 1024 × 149.

Logo

On white

On black

On Dark Slate Grey

Favicons

5 found

512 px · SVG icon
512 px · PNG manifest
192 px · PNG manifest
180 px · PNG apple-touch-icon
32 px · ICO icon

sweetgreen | Inspiring healthier communities

Light browser tab

sweetgreen | Inspiring healthier communities

Dark browser tab

Back to top ↑

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#0E150E) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

Warm Near Black 26.4%
Light Warm Off White 20.4%
Dark Slate Grey 13.1%
Deep Warm Off White 7.4%
Sea Green 7.3%
Yellow 6.6%
White 5.9%
Antique White 4.1%
Dark Sea Green 2.6%
Orange 1.5%
Brown 1.3%
Fire Brick 1.1%
Peach Puff 1.1%
Dark Slate Blue 1.1%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

Warm Near Black

HEX

RGB

HSL

OKLCH

CMYK
33 0 33 92

On text
—

On white
18.55:1 AAA

Text, background, border · button.is-active, body
Light Warm Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 5 4

On text
16.62:1 AAA

On white
1.12:1 Fail

Background, text, border · --button-hover-text-color, html
Deep Warm Off White

HEX

RGB

HSL

OKLCH

CMYK
6 0 7 10

On text
14.22:1 AAA

On white
1.30:1 Fail

Background, text · .form__upload-label, .collection--cucumber
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
18.55:1 AAA

On white
—

Background, text · .menu-item__badge, --button-color

Colours

Brand colours and accents, most used first

Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
100 0 15 72

On text
1.74:1 Fail

On white
10.68:1 AAA

Text, background, graphic · --button-text-color, --button-color
Sea Green

HEX

RGB

HSL

OKLCH

CMYK
58 0 23 58

On text
2.95:1 Fail

On white
6.29:1 AA

Text · --button-hover-color, .card-v2 .card-v2__heading-disclaimer
Yellow

HEX

RGB

HSL

OKLCH

CMYK
10 0 67 0

On text
16.60:1 AAA

On white
1.12:1 Fail

Background, text, graphic · .menu-item__badge--online-exclusive, .menu-item__badge--popular
Antique White

HEX

RGB

HSL

OKLCH

CMYK
0 5 15 9

On text
13.67:1 AAA

On white
1.36:1 Fail

Background · .press, .form__submit:disabled
Dark Sea Green

HEX

RGB

HSL

OKLCH

CMYK
12 0 12 24

On text
9.62:1 AAA

On white
1.93:1 Fail

Background · .collection, .bg--avocado
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 34 100 10

On text
7.74:1 AAA

On white
2.40:1 Fail

Border · --outline-color, .menu-carousel__main:focus-visible
Brown

HEX

RGB

HSL

OKLCH

CMYK
0 86 58 35

On text
2.51:1 Fail

On white
7.39:1 AAA

Text, border · .form__msg--error, .bg--peach
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 77 100 35

On text
2.59:1 Fail

On white
7.16:1 AAA

Background · .site-footer__inner, --footer-color
Peach Puff

HEX

RGB

HSL

OKLCH

CMYK
0 10 17 2

On text
14.55:1 AAA

On white
1.27:1 Fail

Background · .bg--peach, --footer-color
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
71 45 0 56

On text
1.75:1 Fail

On white
10.58:1 AAA

Text · .bg--sky, .column--square.bg--cucumber

Gradients

linear-gradient(184.52deg, rgba(0, 0, 0, 0.35) 32.14%, rgba(0, 0, 0, 0) 95.72%),linear-gradient(119.7deg, rgba(0, 0, 0, 0.3) 45.7%, rgba(0, 0, 0, 0) 59.42%)

Back to top ↑

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Grenette

Aa 200 Aa 400

Grenette

Self-hosted · weights 200, 400 · headings · shown in a stand-in if you don’t have it

Aa 400 Aa 700

SweetSans

Self-hosted · weights 400, 700 · headings · shown in a stand-in if you don’t have it

Aa 400 Aa 700

SweetSansText

Self-hosted · weights 400, 700 · headings, buttons, body · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Heading 1 1.25rem · 20 px / 1.2 weight 200 · uppercase · Grenette

sweetgreen

Heading 2 1.25rem · 20 px / 1.2 weight 700 · uppercase

sweetgreen | Inspiring healthier communities

Body — / 1 weight 400 · SweetSansText

healthy salads, hearty wraps, grain bowls, and warm plates made in-house from scratch, using whole produce delivered that morning.

Button 1rem · 16 px / 1 weight 400 · uppercase · SweetSansText

Get started

Sizes in use

Most common across the site

40pxline 1 · 8 rules
32pxline 36px · 2 rules
24pxline 1 · 6 rules
20pxline 1.2 · 13 rules
18pxline 24px · 3 rules
16pxline 1.1667 · 29 rules
14pxline 18px · 5 rules
12pxline 16px · 6 rules

Back to top ↑

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Button

Get started

button.is-active · #0E150E

Corner radius

1.25rem · 11×
100% · 6×
4px · 5×
50% · 2×
unset · 2×

Shadows

0 0 4px 0 rgba(14,21,14,.25)
0 0 3px rgba(0,0,0,.4)
0 2px 4px -1px
0 0 0 rgba(14,21,14,0)

Back to top ↑

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

481

590

768

769

1023

1024

1279

1280

On a scale of 0 to 1440 px.

Content widths (max-width)

900 px

580 px

500 px

480 px

340 px

300 px

Back to top ↑

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 44 characters, short enough to show in full in search results.
▲ CheckThere is no og:image, so links shared on social media show no picture.

Back to top ↑

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does sweetgreen use?: sweetgreen’s website uses three typefaces: Grenette (headings), self-hosted; SweetSans, self-hosted; SweetSansText (body text), self-hosted.
What are sweetgreen’s brand colours?: The main colours on sweetgreen.com are Dark Slate Grey (#00473C), Sea Green (#2D6B52), Yellow (#E6FF55), Antique White (#E8DCC6), Dark Sea Green (#A9C1A9) and Orange (#E59700).
What colour is sweetgreen’s text and background?: Body text is #0E150E on a #F4F3E7 background.
Where is sweetgreen’s logo from?: The logo shown in this guide was found on sweetgreen.com’s homepage. For official logo files and usage rules, check sweetgreen’s own brand or press page.
Is this sweetgreen’s official style guide?: No. SiteStyleGuide made it from sweetgreen.com’s public web pages on 27 October 2026, and isn’t affiliated with sweetgreen. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

sweetgreen-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* sweetgreen.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/sweetgreen.com) */
:root {
  /* Colours */
  --text: #0E150E;
  --background: #F4F3E7;
  --colour-warm-near-black: #0E150E;
  --colour-light-warm-off-white: #F4F3E7;
  --colour-deep-warm-off-white: #D8E5D6;
  --colour-white: #FFFFFF;
  --colour-dark-slate-grey: #00473C;
  --colour-sea-green: #2D6B52;
  --colour-yellow: #E6FF55;
  --colour-antique-white: #E8DCC6;
  --colour-dark-sea-green: #A9C1A9;
  --colour-orange: #E59700;
  --colour-brown: #A61846;
  --colour-fire-brick: #A72700;
  --colour-peach-puff: #F9DFCE;
  --colour-dark-slate-blue: #203E70;
  --gradient-1: linear-gradient(184.52deg, rgba(0, 0, 0, 0.35) 32.14%, rgba(0, 0, 0, 0) 95.72%),linear-gradient(119.7deg, rgba(0, 0, 0, 0.3) 45.7%, rgba(0, 0, 0, 0) 59.42%);

  /* Typefaces */
  --font-headings: 'Grenette', 'Georgia', 'Cambria', 'Palatino', 'Times New Roman', 'Times';
  --font-buttons: 'SweetSansText', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto';
  --font-body: 'SweetSansText', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto';

  /* Type scale */
  --text-h1: 1.25rem;
  --leading-h1: 1.2;
  --text-h2: 1.25rem;
  --leading-h2: 1.2;
  --text-button: 1rem;
  --leading-button: 1;

  /* Shape */
  --radius-1: 1.25rem;
  --radius-2: 100%;
  --radius-3: 4px;
  --radius-4: 50%;
  --radius-5: unset;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 481px;
  --breakpoint-2: 590px;
  --breakpoint-3: 768px;
  --breakpoint-4: 769px;
  --breakpoint-5: 1023px;
  --breakpoint-6: 1024px;
  --breakpoint-7: 1279px;
  --breakpoint-8: 1280px;
  --max-width-1: 900px;
  --max-width-2: 580px;
  --max-width-3: 500px;
  --max-width-4: 480px;
  --max-width-5: 340px;
  --max-width-6: 300px;
}

{
    "site": "sweetgreen.com",
    "source": "https://sitestyleguide.com/sweetgreen.com",
    "text": "#0E150E",
    "background": "#F4F3E7",
    "colours": [
        {
            "name": "Warm Near Black",
            "hex": "#0E150E",
            "rgb": [
                14,
                21,
                14
            ]
        },
        {
            "name": "Light Warm Off White",
            "hex": "#F4F3E7",
            "rgb": [
                244,
                243,
                231
            ]
        },
        {
            "name": "Deep Warm Off White",
            "hex": "#D8E5D6",
            "rgb": [
                216,
                229,
                214
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#00473C",
            "rgb": [
                0,
                71,
                60
            ]
        },
        {
            "name": "Sea Green",
            "hex": "#2D6B52",
            "rgb": [
                45,
                107,
                82
            ]
        },
        {
            "name": "Yellow",
            "hex": "#E6FF55",
            "rgb": [
                230,
                255,
                85
            ]
        },
        {
            "name": "Antique White",
            "hex": "#E8DCC6",
            "rgb": [
                232,
                220,
                198
            ]
        },
        {
            "name": "Dark Sea Green",
            "hex": "#A9C1A9",
            "rgb": [
                169,
                193,
                169
            ]
        },
        {
            "name": "Orange",
            "hex": "#E59700",
            "rgb": [
                229,
                151,
                0
            ]
        },
        {
            "name": "Brown",
            "hex": "#A61846",
            "rgb": [
                166,
                24,
                70
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#A72700",
            "rgb": [
                167,
                39,
                0
            ]
        },
        {
            "name": "Peach Puff",
            "hex": "#F9DFCE",
            "rgb": [
                249,
                223,
                206
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#203E70",
            "rgb": [
                32,
                62,
                112
            ]
        }
    ],
    "fonts": [
        {
            "name": "Grenette",
            "stack": "Grenette, Georgia, Cambria, Palatino, \"Times New Roman\", Times, serif",
            "weights": [
                200,
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "SweetSans",
            "stack": "SweetSans, SweetSansText, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
            "weights": [
                400,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "SweetSansText",
            "stack": "SweetSansText, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
            "weights": [
                400,
                700
            ],
            "source": "Self-hosted"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run sweetgreen.com?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

<a href="https://sitestyleguide.com/sweetgreen.com" title="sweetgreen style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

sweetgreenstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

Warm Near Black

Light Warm Off White

Deep Warm Off White

White

Colours

Dark Slate Grey

Sea Green

Yellow

Antique White

Dark Sea Green

Orange

Brown

Fire Brick

Peach Puff

Dark Slate Blue

Gradients

Grenette

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Blackboard

Free Podcast Hosting

LifeHack

AI-Native Cloud

sweetgreenstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Warm Near Black

Light Warm Off White

Deep Warm Off White

White

Colours

Dark Slate Grey

Sea Green

Yellow

Antique White

Dark Sea Green

Orange

Brown

Fire Brick

Peach Puff

Dark Slate Blue

Gradients

Grenette

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run sweetgreen.com?

Similar colours

Blackboard

Free Podcast Hosting

LifeHack

AI-Native Cloud

Title &
description