Typography
scale ratio 1.260- Windsor EFcss: WindsorEFdisplay800 90071%
- Anobody400 600 70029%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Windsor EF | 80px | 900 | 0.92 | 0em |
| headline | Windsor EF | 48px | 800 | 1 | 0em |
| body | Ano | 20px | 400 | 1.4 | 0em |
| body-sm | Ano | 16px | 400 | 1.8 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa20Aa24Aa32Aa48Aa52Aa54Aa80
- Body size
- 20px / 1.6
- Display size
- 80px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 11.05:1
- Muted on bg
- undefined:1
- Accent on bg
- 1.33:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 2
- 3
- 5
- 6
- 8
- 10
- 11
- 12
- 13
- 16
- 20
- 24
- 30
- 32
Corner radii
pill
Shadows (0)
none
- Borders
- none
- Section padding
- 106px
Components
exact computed valuesbutton-primary
Shop 50% Off
- backgroundColor
- #B5F175
- textColor
- #034638
- rounded
- 9999px
- padding
- 15px 32px
- height
- 48px
- fontFamily
- Ano
- fontSize
- 18px
- fontWeight
- 700
button-secondary
Find Your Flavor
- backgroundColor
- #14433D
- textColor
- #FFF7E5
- rounded
- 9999px
- padding
- 10px 32px
- height
- 48px
- fontFamily
- Ano
- fontSize
- 18px
- fontWeight
- 700
input
- rounded
- 48px
- height
- 47.2px
- padding
- 14px 20px
- backgroundColor
- #FFFFFF
Layout & motion
- Container
- 1320px
- Grid columns
- 5
- Hero
- split
- Navigation
- top-static
- Page height
- 6,104px
- Easing
- ease-in-out
- Durations
- 150ms 200ms 250ms 500ms
- Transitions
- 87
- Keyframes
- 0
- Stack
- shopify, gsap, jquery, google-tag-manager, cloudflare
Page sections (8)
section labels are heuristic
01nav
02heroBlack Friday came early!
03logosShop our collections
04feature detail?Why OLIPOP?
05feature detail?Shop by fiber line
06feature detail?Made with real ingredients
07cta?Available in stores
08footerCompany
How Drinkolipop compares
- Body text
- 20px: larger than 90% of indexed sites (median 16px).
- Largest heading
- 80px: larger than 80% of indexed sites (median 60px).
- Type scale
- 1.26×: flatter than 60% of indexed sites (median 1.28×).
- Container
- 1320px: wider than 77% of indexed sites (median 1242px).
- Text contrast
- 11.1:1: lower than 90% of indexed sites (median 17.6:1).
- Page length
- 6,104px: shorter than 70% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Windsor EF
- The only site in the index that loads Windsor EF.
- Ano
- The only site in the index that loads Ano.
- 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 Drinkolipop use?
Drinkolipop uses Windsor EF (loaded as "WindsorEF") for headings. Ano is used for body text.
What are Drinkolipop's brand colors?
Drinkolipop's website uses a light scheme: background #FFFFFF, surface #FFF6EA, text #14433D and borders #14433D.
How is Drinkolipop's website laid out?
The most common corner radius is fully rounded (pill), body text is 20px with 1.6 line height, and the page container is 1320px wide.
