Typography
scale ratio 1.348- Sweet Sanscss: SweetSansdisplay40048%
- Sweet Sans Textcss: SweetSansTextbody400 70046%
- Grenetteui2006%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Sweet Sans | 80px | 400 | 0.85 | 0em |
| headline | Sweet Sans Text | 16px | 400 | 1 | 0em |
| body | Sweet Sans Text | 18px | 400 | 1.25 | 0em |
Type scale
Aa12Aa16Aa18Aa24Aa40Aa48Aa70Aa80
- Body size
- 18px / 1.25
- Display size
- 80px
- Display tracking
- 0em
- Case
- upper
Color
light schemePalette by painted area
- Text on bg
- 16.62:1
- Muted on bg
- undefined:1
- Accent on bg
- 1.00:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 5
- 8
- 10
- 12
- 16
- 20
- 24
- 30
- 35
- 40
- 43
- 60
Corner radii
410pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 86px
Components
exact computed valuesbutton-primary
Order
- backgroundColor
- #00473C
- textColor
- #E6FF55
- rounded
- 9999px
- padding
- 7px 16px
- height
- 30px
- fontFamily
- Sweet Sans Text
- fontSize
- 16px
- fontWeight
- 400
button-secondary
Order now
- backgroundColor
- #E6FF55
- textColor
- #00473C
- rounded
- 9999px
- padding
- 15px 60px
- height
- 46px
- fontFamily
- Sweet Sans Text
- fontSize
- 16px
- fontWeight
- 400
input
- rounded
- 10px
- height
- 50px
- padding
- 12px 50px
- border
- 1px solid #0E150E
Layout & motion
- Container
- 1360px
- Grid columns
- 2
- Hero
- left-over-media
- Navigation
- top-sticky
- Page height
- 4,108px
- Easing
- ease-in-out
- Durations
- 240ms 250ms 300ms
- Transitions
- 56
- Keyframes
- 0
- Stack
- contentful, google-tag-manager, cloudfront
Page sections (6)
section labels are heuristic
01nav
02hero
03features?Kale Caesar
04feature detail?All the ways we keep your workplace working
05feature detail?Step inside the sweetgreen kitchen
06footerLegal
How sweetgreen compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 80px: larger than 80% of indexed sites (median 60px).
- Type scale
- 1.35×: steeper than 68% of indexed sites (median 1.28×).
- Container
- 1360px: wider than 89% of indexed sites (median 1242px).
- Text contrast
- 16.6:1: lower than 63% of indexed sites (median 17.6:1).
- Page length
- 4,108px: shorter than 82% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Sweet Sans
- The only site in the index that loads Sweet Sans.
- Sweet Sans Text
- The only site in the index that loads Sweet Sans Text.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does sweetgreen use?
sweetgreen uses Sweet Sans (loaded as "SweetSans") for headings. Sweet Sans Text (loaded as "SweetSansText") is used for body text. Grenette is used for ui.
What are sweetgreen's brand colors?
sweetgreen's website uses a light scheme: background #F4F3E7, surface #D8E5D6, text #0E150E and borders #0E150E.
How is sweetgreen's website laid out?
The most common corner radius is fully rounded (pill), body text is 18px with 1.25 line height, and the page container is 1360px wide.
