What font does OLIPOP use?

OLIPOP’s website uses three typefaces: Ano (headings and body text), self-hosted; WindsorEF, self-hosted; Inter, google Fonts.

What are OLIPOP’s brand colours?

The main colours on drinkolipop.com are Slate Grey (#14433D), Light Slate Grey (#034638), Khaki (#FDDA79), Slate Grey (#18312A), Gold (#FFE340) and Dark Slate Blue (#003B5E).

What colour is OLIPOP’s text and background?

Body text is #14433D on a #FFFFFF background.

Where is OLIPOP’s logo from?

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

Is this OLIPOP’s official style guide?

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

Unofficial A style guide made by SiteStyleGuide from drinkolipop.com’s public web pages. Not affiliated with or endorsed by OLIPOP. The real site is drinkolipop.com ↗

Unofficial style guide

OLIPOPstyle guide

OLIPOP’s website (drinkolipop.com) uses Ano for its headings and body text. Its palette is led by Slate Grey (#14433D), Light Slate Grey (#034638) and Khaki (#FDDA79), with #14433D text on #FFFFFF. Captured from the live site on 26 October 2026.

Website: drinkolipop.com
Typefaces: Ano, WindsorEF, Inter
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 26 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the drinkolipop.com homepage on a desktop screen — Screenshot of drinkolipop.com on a 1440 px desktop screen, 26 Oct 2026.

Screenshot of the drinkolipop.com homepage on a phone — On a phone, 390 px.

Identity & metadata

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

Title &
description

Page title: OLIPOP | Healthy Prebiotic Soda; ● 31 / 60 characters
Meta description: Discover a new kind of soda made with plant fiber and prebiotics. Non-GMO, gluten-free, paleo, and vegan, with high fiber and 2-5g of sugar. Enjoy a variety of delicious, refreshing and classic flavors.; ▲ 202 / 160 characters
Site name: OLIPOP
og:title: OLIPOP | Healthy Prebiotic Soda
og:description: Discover a new kind of soda made with plant fiber and prebiotics. Non-GMO, gluten-free, paleo, and vegan, with high fiber and 2-5g of sugar. Enjoy a variety of delicious, refreshing and classic flavors.
Language: en
Theme colour: #3a3a3a

In search results

OLIPOPhttps://drinkolipop.com/

OLIPOP | Healthy Prebiotic Soda

Discover a new kind of soda made with plant fiber and prebiotics. Non-GMO, gluten-free, paleo, and vegan, with high fiber and 2-5g of sugar. Enjoy a variety of d…

When shared

drinkolipop.com

OLIPOP | Healthy Prebiotic Soda

Discover a new kind of soda made with plant fiber and prebiotics. Non-GMO, gluten-free, paleo, and vegan, wit…

Logo & favicons

Found as: schema.org logo. PNG, 560 × 218.

Logo

On white

On black

On Slate Grey

Favicons

1 found

32 px · PNG shortcut icon

OLIPOP | Healthy Prebiotic Soda

Light browser tab

OLIPOP | Healthy Prebiotic Soda

Dark browser tab

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 (#14433D) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

Slate Grey 29.7%
White 24.3%
Warm Off White 11.2%
Light Slate Grey 10.2%
Black 5.2%
Charcoal 4.4%
Khaki 2.8%
Slate Grey 2.4%
Gold 2%
Dark Slate Blue 1.2%
Chocolate 1.2%
Deep Sea Green 1.2%
Light Sea Green 1%
Powder Blue 1%
Golden Rod 1%
Deep Slate Grey 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

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
11.05:1 AAA

On white
—

Text, background, graphic · .header-wrapper[color-theme="white"]:not(.is-active):not(.dropdown-active):not(., body
Warm Off White

HEX

RGB

HSL

OKLCH

CMYK
0 3 10 0

On text
10.36:1 AAA

On white
1.07:1 Fail

Text, background, graphic · .modal-title-accept-special-offer-modal .MuiTypography-root .modal-icon-containe, [data-stay-selector="subDetails_giftNextOrderModal"] #modal-title .modal-icon-co
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.90:1 Fail

On white
21.00:1 AAA

Text, background, border · #vw-modal-root.vw-has-subtitle .vw-subtitle-custom, #vw-root .vw-cmp__in-video-card--root .vw-cmp__in-video-card--details-under .vw-
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 77

On text
1.03:1 Fail

On white
11.37:1 AAA

Text, background, border · body, .list-view-item__title

Colours

Brand colours and accents, most used first

Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
70 0 9 74

On text
—

On white
11.05:1 AAA

Text, background, border · inline style on <div>, .modal-title-reactivate-subscription-modal .MuiDialogContent-root .MuiStack-root
Light Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
96 0 20 73

On text
1.02:1 Fail

On white
10.84:1 AAA

Text, background, graphic · inline style on <span>, button.sc-pl-product-selector-form__content-search-btn
Khaki

HEX

RGB

HSL

OKLCH

CMYK
0 14 52 1

On text
8.15:1 AAA

On white
1.36:1 Fail

Background, text · inline style on <div>, .button-yellow:hover
Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
51 0 14 81

On text
1.26:1 Fail

On white
13.89:1 AAA

Background, text, border · header.is-dropdown-open .site-nav__button:hover, header.is-dropdown-open .site-nav__button:focus
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 11 75 0

On text
8.59:1 AAA

On white
1.29:1 Fail

Text, background, border · .button-yellow-blue, .c-btn-primary.c-btn-yellow
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
100 37 0 63

On text
1.06:1 Fail

On white
11.75:1 AAA

Text, background, border · .button-yellow-blue, .button-blue-yellow
Chocolate

HEX

RGB

HSL

OKLCH

CMYK
0 44 69 25

On text
2.80:1 Fail

On white
3.95:1 AA large

Background, text · .button-orange:hover, .button-orange:focus
Deep Sea Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 19 49

On text
2.28:1 Fail

On white
4.84:1 AA

Text, background, graphic · --Evergreen-web-jade, .mobile-menu__utility-list
Light Sea Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 19 45

On text
2.59:1 Fail

On white
4.26:1 AA large

Text, background, border · #retextion-root .main .MuiToolbar-root .MuiBox-root .active::after, #retextion-root [data-stay-selector="subDetails_subscriptionsNavigation"] a.acti
Powder Blue

HEX

RGB

HSL

OKLCH

CMYK
20 0 6 18

On text
6.62:1 AA

On white
1.67:1 Fail

Text, background · #retextion-root .main, #retextion-root
Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 21 73 4

On text
6.61:1 AA

On white
1.67:1 Fail

Text, background · .button-yellow, .tw-bg-yellow-dark
Deep Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
80 0 18 81

On text
1.28:1 Fail

On white
14.16:1 AAA

Text, background, border · button.sc-pl-product-selector-form__content-search-btn:hover, .rebuy-cart__flyout-item-subscription button.rebuy-button.outline:hover

Gradients

linear-gradient(180deg,hsla(0,0%,100%,0),#fff 35%)
linear-gradient(180deg,hsla(0,0%,85%,0),#000 84%)
linear-gradient(0deg,rgba(0,0,0,.7),transparent)

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.

Ano

Aa 400 Aa 900

Ano

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

Aa 700 Aa 900

WindsorEF

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

Aa 400 Aa 700

Inter

Google Fonts · weights 400, 600, 700 · headings, buttons

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

Type scale

From the site’s CSS

Heading 1 calc(35 / 15 * 1em) / 1.2 weight 700 · none · Ano

OLIPOP

Heading 2 50px / 62px weight 700 · uppercase · Ano

OLIPOP | Healthy Prebiotic Soda

Heading 3 47px / 48px weight 700 · none · Ano

OLIPOP | Healthy Prebiotic Soda

Heading 4 32px / 40px weight 700 · Ano

OLIPOP | Healthy Prebiotic Soda

Heading 5 calc(15 / 15 * 1em) / 1.2 weight 700 · Ano

OLIPOP | Healthy Prebiotic Soda

Heading 6 calc(14 / 15 * 1em) / 1.2 weight 700 · Ano

OLIPOP | Healthy Prebiotic Soda

Body 16px / normal weight 400 · Ano

Discover a new kind of soda made with plant fiber and prebiotics. Non-GMO, gluten-free, paleo, and vegan, with high fiber and 2-5g of sugar…

Paragraph 25px / 40px weight 400

Discover a new kind of soda made with plant fiber and prebiotics. Non-GMO, gluten-free, paleo, and vegan, with high fiber and 2-5g of sugar…

Small 80%

Discover a new kind of soda made with plant fiber and prebiotics. Non-GMO, gluten-free, paleo, and vegan, with high fiber and 2-5g of sugar…

Button 15 / 1.5 weight 400 · Helvetica

Get started

Link 20px / 26px weight 700 · capitalize · Ano

Sizes in use

Most common across the site

36pxline 1 · 19 rules
24pxline 1 · 23 rules
22pxline 30px · 15 rules
20pxline 110% · 45 rules
18pxline 1.75rem · 114 rules
16pxline 1.5rem · 93 rules
14pxline 180% · 99 rules
12pxline 1 · 70 rules

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

#retextion-root button[data-stay-selector="subHub_manageSubscriptionsButton"] · #14433D · radius 100px

Link

Read our latest news today.

a · #3A3A3A

Corner radius

3.125rem · 39×
50% · 35×
100px · 26×
10px · 22×
4px · 19×
50px · 19×

Shadows

0 0 #0000, 0 0 #0000, 0 0 #0000
4px 4px 0 0 #ffdbd9
0 0 0 1.5px
0 0 50px 0 transparent

Layout

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

Grid

Breakpoints

749

750

767

768

989

1023

1024

1183

On a scale of 0 to 1440 px.

Content widths (max-width)

1200 px

500 px

440 px

400 px

350 px

300 px

Notes

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

Notes

● FineThe title is 31 characters, short enough to show in full in search results.
▲ CheckThe description is 202 characters. Search results usually show about 160.
▲ CheckThe favicon is dark on a see-through background, so it nearly disappears on dark browser tabs.

Questions

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

Questions

What font does OLIPOP use?: OLIPOP’s website uses three typefaces: Ano (headings and body text), self-hosted; WindsorEF, self-hosted; Inter, google Fonts.
What are OLIPOP’s brand colours?: The main colours on drinkolipop.com are Slate Grey (#14433D), Light Slate Grey (#034638), Khaki (#FDDA79), Slate Grey (#18312A), Gold (#FFE340) and Dark Slate Blue (#003B5E).
What colour is OLIPOP’s text and background?: Body text is #14433D on a #FFFFFF background.
Where is OLIPOP’s logo from?: The logo shown in this guide was found on drinkolipop.com’s homepage. For official logo files and usage rules, check OLIPOP’s own brand or press page.
Is this OLIPOP’s official style guide?: No. SiteStyleGuide made it from drinkolipop.com’s public web pages on 26 October 2026, and isn’t affiliated with OLIPOP. Members can refresh a guide after 90 days to pick up changes.

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

drinkolipop-com-tokens.css

Download

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

/* drinkolipop.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/drinkolipop.com) */
:root {
  /* Colours */
  --text: #14433D;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-warm-off-white: #FFF7E5;
  --colour-black: #000000;
  --colour-charcoal: #3A3A3A;
  --colour-slate-grey: #14433D;
  --colour-light-slate-grey: #034638;
  --colour-khaki: #FDDA79;
  --colour-slate-grey-2: #18312A;
  --colour-gold: #FFE340;
  --colour-dark-slate-blue: #003B5E;
  --colour-chocolate: #BE6A3B;
  --colour-deep-sea-green: #008168;
  --colour-light-sea-green: #008B70;
  --colour-powder-blue: #A7D1C5;
  --colour-golden-rod: #F4C142;
  --colour-deep-slate-grey: #0A3128;
  --gradient-1: linear-gradient(180deg,hsla(0,0%,100%,0),#fff 35%);
  --gradient-2: linear-gradient(180deg,hsla(0,0%,85%,0),#000 84%);
  --gradient-3: linear-gradient(0deg,rgba(0,0,0,.7),transparent);

  /* Typefaces */
  --font-headings: 'Ano', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-buttons: 'Ano', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-body: 'Ano', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

  /* Type scale */
  --text-h2: 50px;
  --leading-h2: 62px;
  --text-h3: 47px;
  --leading-h3: 48px;
  --text-h4: 32px;
  --leading-h4: 40px;
  --text-body: 16px;
  --leading-body: normal;
  --text-p: 25px;
  --leading-p: 40px;
  --text-small: 80%;
  --text-button: 15;
  --leading-button: 1.5;
  --text-a: 20px;
  --leading-a: 26px;

  /* Shape */
  --radius-1: 3.125rem;
  --radius-2: 50%;
  --radius-3: 100px;
  --radius-4: 10px;
  --radius-5: 4px;
  --radius-6: 50px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 749px;
  --breakpoint-2: 750px;
  --breakpoint-3: 767px;
  --breakpoint-4: 768px;
  --breakpoint-5: 989px;
  --breakpoint-6: 1023px;
  --breakpoint-7: 1024px;
  --breakpoint-8: 1183px;
  --max-width-1: 1200px;
  --max-width-2: 500px;
  --max-width-3: 440px;
  --max-width-4: 400px;
  --max-width-5: 350px;
  --max-width-6: 300px;
}

{
    "site": "drinkolipop.com",
    "source": "https://sitestyleguide.com/drinkolipop.com",
    "text": "#14433D",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Warm Off White",
            "hex": "#FFF7E5",
            "rgb": [
                255,
                247,
                229
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#3A3A3A",
            "rgb": [
                58,
                58,
                58
            ]
        },
        {
            "name": "Slate Grey",
            "hex": "#14433D",
            "rgb": [
                20,
                67,
                61
            ]
        },
        {
            "name": "Light Slate Grey",
            "hex": "#034638",
            "rgb": [
                3,
                70,
                56
            ]
        },
        {
            "name": "Khaki",
            "hex": "#FDDA79",
            "rgb": [
                253,
                218,
                121
            ]
        },
        {
            "name": "Slate Grey",
            "hex": "#18312A",
            "rgb": [
                24,
                49,
                42
            ]
        },
        {
            "name": "Gold",
            "hex": "#FFE340",
            "rgb": [
                255,
                227,
                64
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#003B5E",
            "rgb": [
                0,
                59,
                94
            ]
        },
        {
            "name": "Chocolate",
            "hex": "#BE6A3B",
            "rgb": [
                190,
                106,
                59
            ]
        },
        {
            "name": "Deep Sea Green",
            "hex": "#008168",
            "rgb": [
                0,
                129,
                104
            ]
        },
        {
            "name": "Light Sea Green",
            "hex": "#008B70",
            "rgb": [
                0,
                139,
                112
            ]
        },
        {
            "name": "Powder Blue",
            "hex": "#A7D1C5",
            "rgb": [
                167,
                209,
                197
            ]
        },
        {
            "name": "Golden Rod",
            "hex": "#F4C142",
            "rgb": [
                244,
                193,
                66
            ]
        },
        {
            "name": "Deep Slate Grey",
            "hex": "#0A3128",
            "rgb": [
                10,
                49,
                40
            ]
        }
    ],
    "fonts": [
        {
            "name": "Ano",
            "stack": "Ano, Helvetica Neue, Helvetica, Arial, sans-serif",
            "weights": [
                400,
                500,
                600,
                700,
                900
            ],
            "source": "Self-hosted"
        },
        {
            "name": "WindsorEF",
            "stack": "WindsorEF, sans-serif",
            "weights": [
                700,
                800,
                900
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Inter",
            "stack": "Inter",
            "weights": [
                400,
                600,
                700
            ],
            "source": "Google Fonts"
        }
    ]
}

Websites whose lead colour is closest to OLIPOP’s

Free Podcast Hosting

buzzsprout.com · 4 days ago
Save
Blackboard

blackboard.com · 3 days ago
Save
AI-Native Cloud

digitalocean.com · 1 day ago
Save
National Archives

archives.gov · 6 days ago
Save

Captured from drinkolipop.com on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by OLIPOP; this guide describes the public website for reference.

OLIPOPstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Warm Off White

Black

Charcoal

Colours

Slate Grey

Light Slate Grey

Khaki

Slate Grey

Gold

Dark Slate Blue

Chocolate

Deep Sea Green

Light Sea Green

Powder Blue

Golden Rod

Deep Slate Grey

Gradients

Ano

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run drinkolipop.com?

Similar colours

Free Podcast Hosting

Blackboard

AI-Native Cloud

National Archives

Title &
description