What font does innocentdrinks.co.uk use?

innocentdrinks.co.uk’s website uses three typefaces: InnocentSans Bold (headings and body text), served from static-p58902-e658605.adobeaemcloud.com; InnocentSans Light, served from static-p58902-e658605.adobeaemcloud.com; InnocentSans Super, served from static-p58902-e658605.adobeaemcloud.com.

What are innocentdrinks.co.uk’s brand colours?

The main colours on innocentdrinks.co.uk are Chocolate (#E07322), Olive Drab (#74AA50), Pale Violet Red (#F67599), Orange (#FF9E1B), Black (#3D2C17) and Dark Slate Grey (#00573F).

What colour is innocentdrinks.co.uk’s text and background?

Body text is #212721 on a #FFFFFF background.

Where is innocentdrinks.co.uk’s logo from?

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

Is this innocentdrinks.co.uk’s official style guide?

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

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

Unofficial style guide

innocentdrinks.co.ukstyle guide

innocentdrinks.co.uk’s website (innocentdrinks.co.uk) uses InnocentSans Bold for its headings and body text. Its palette is led by Chocolate (#E07322), Olive Drab (#74AA50) and Pale Violet Red (#F67599), with #212721 text on #FFFFFF. Captured from the live site on 27 October 2026.

Website: innocentdrinks.co.uk
Typefaces: InnocentSans Bold, InnocentSans Light, InnocentSans Super
Palette: 4 neutrals, 12 colours
Captured: 27 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the innocentdrinks.co.uk homepage on a desktop screen — Screenshot of innocentdrinks.co.uk on a 1440 px desktop screen, 27 Oct 2026.

Screenshot of the innocentdrinks.co.uk 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: home; ● 4 / 60 characters
Meta description: We're innocent and we make natural, tasty little drinks. Find out more about our big dreams to help people and the planet.; ● 122 / 160 characters
og:title: home
og:description: We're innocent and we make natural, tasty little drinks. Find out more about our big dreams to help people and the planet.
Language: en-GB

In search results

innocentdrinks.co.ukhttps://www.innocentdrinks.co.uk/

home

We're innocent and we make natural, tasty little drinks. Find out more about our big dreams to help people and the planet.

When shared

No og:image, so no picture

innocentdrinks.co.uk

home

We're innocent and we make natural, tasty little drinks. Find out more about our big dreams to help people an…

Logo & favicons

Found as: image in the header. PNG, 48 × 63.

Logo

On white

On black

On Chocolate

Favicons

5 found

180 px · PNG apple-touch-icon
32 px · PNG icon
32 px · ICO favicon.ico
16 px · PNG icon
SVG mask-icon

home

Light browser tab

home

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

Colour

Balance

How much each colour is used

Light White 24.2%
Warm Near Black 19.7%
Chocolate 6.5%
Olive Drab 4.6%
Pale Violet Red 4.5%
Orange 4.3%
Black 4.2%
Dark Slate Grey 4%
Deep White 3.9%
Cadet Blue 3.9%
Dark Olive Green 3.7%
Pale Green 3.5%
Moccasin 3.5%
Sienna 3.5%
Sea Green 3.5%
Cool Off White 2.5%

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

Light White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
15.25:1 AAA

On white
—

Text, graphic, background · .title-color-white .cmp-title__text, .t-scheme-white .cmp-teaser__action-link .button-background
Warm Near Black

HEX

RGB

HSL

OKLCH

CMYK
15 0 15 85

On text
—

On white
15.25:1 AAA

Text, graphic, background · .txt-list h2, .title-color-sharpieBlack .cmp-title__text
Deep White

HEX

RGB

HSL

OKLCH

CMYK
0 1 5 0

On text
14.94:1 AAA

On white
1.02:1 Fail

Graphic, text, background · .title-color-cloud-background .cmp-title__text, .t-scheme-cloud-background .cmp-teaser__title
Cool Off White

HEX

RGB

HSL

OKLCH

CMYK
7 3 0 7

On text
11.99:1 AAA

On white
1.27:1 Fail

Text, graphic, background · .title-color-cloud .cmp-title__text, .t-scheme-cloud .cmp-teaser__title

Colours

Brand colours and accents, most used first

Chocolate

HEX

RGB

HSL

OKLCH

CMYK
0 49 85 12

On text
4.83:1 AA

On white
3.16:1 AA large

Graphic, text, background · .title-color-burnt .cmp-title__text, .t-scheme-burnt .cmp-teaser__title
Olive Drab

HEX

RGB

HSL

OKLCH

CMYK
32 0 53 33

On text
5.53:1 AA

On white
2.76:1 Fail

Graphic, text, background · .title-color-apple .cmp-title__text, .t-scheme-apple .cmp-teaser__title
Pale Violet Red

HEX

RGB

HSL

OKLCH

CMYK
0 52 38 4

On text
5.75:1 AA

On white
2.65:1 Fail

Text, graphic · .title-color-guava .cmp-title__text, .title-color-pink .cmp-title__text
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 38 89 0

On text
7.38:1 AAA

On white
2.07:1 Fail

Graphic, text, background · .title-color-mango .cmp-title__text, .t-scheme-mango .cmp-teaser__title
Black

HEX

RGB

HSL

OKLCH

CMYK
0 28 62 76

On text
1.14:1 Fail

On white
13.37:1 AAA

Graphic, text, background · .title-color-wood .cmp-title__text, .t-scheme-wood .cmp-teaser__title
Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
100 0 28 66

On text
1.77:1 Fail

On white
8.62:1 AAA

Graphic, text, background · .title-color-spinach .cmp-title__text, .t-scheme-spinach .cmp-teaser__title
Cadet Blue

HEX

RGB

HSL

OKLCH

CMYK
100 8 0 29

On text
5.23:1 AA

On white
2.92:1 Fail

Graphic, text, background · .title-color-water .cmp-title__text, .t-scheme-water .cmp-teaser__title
Dark Olive Green

HEX

RGB

HSL

OKLCH

CMYK
30 0 68 54

On text
2.85:1 Fail

On white
5.34:1 AA

Graphic, text, background · .title-color-grass .cmp-title__text, .t-scheme-grass .cmp-teaser__title
Pale Green

HEX

RGB

HSL

OKLCH

CMYK
17 0 32 4

On text
12.37:1 AAA

On white
1.23:1 Fail

Graphic, text, background · .title-color-bud .cmp-title__text, .t-scheme-bud .cmp-teaser__title
Moccasin

HEX

RGB

HSL

OKLCH

CMYK
0 8 25 0

On text
13.00:1 AAA

On white
1.17:1 Fail

Graphic, text, background · .title-color-magnolia .cmp-title__text, .t-scheme-magnolia .cmp-teaser__title
Sienna

HEX

RGB

HSL

OKLCH

CMYK
0 65 100 26

On text
2.86:1 Fail

On white
5.33:1 AA

Graphic, text, background · .title-color-rust .cmp-title__text, .t-scheme-rust .cmp-teaser__title
Sea Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 28 41

On text
4.05:1 AA large

On white
3.76:1 AA large

Graphic, text, background · .title-color-broccoli .cmp-title__text, .t-scheme-broccoli .cmp-teaser__title

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.

InnocentSans Bold

Aa 400 Aa 700

InnocentSans Bold

Served from static-p58902-e658605.adobeaemcloud.com · weights 400, 700 · headings, buttons, body · shown in a stand-in if you don’t have it

Aa 100 Aa 400

InnocentSans Light

Served from static-p58902-e658605.adobeaemcloud.com · weights 100, 400 · headings, body · shown in a stand-in if you don’t have it

Aa 100 Aa 400

InnocentSans Super

Served from static-p58902-e658605.adobeaemcloud.com · weights 100, 400 · headings · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Heading 1 3rem · 48 px / 2.8rem weight 400 · InnocentSans Bold

innocentdrinks.co.uk

Heading 2 1.75rem · 28 px / 2rem weight 400 · InnocentSans Bold

home

Heading 3 1.75rem · 28 px / 2rem weight 400 · InnocentSans Bold

home

Heading 4 1.5rem · 24 px / 1.625rem weight 400 · InnocentSans Bold

home

Heading 5 1.25rem · 20 px / calc(10px + 2ex) weight 400 · InnocentSans Bold

home

Heading 6 1rem · 16 px / calc(10px + 2ex) weight 400 · InnocentSans Bold

home

Body — weight 400 · InnocentSans Bold

We're innocent and we make natural, tasty little drinks. Find out more about our big dreams to help people and the planet.

Paragraph 1.125rem · 18 px / 1.75rem weight 400 · InnocentSans Light

We're innocent and we make natural, tasty little drinks. Find out more about our big dreams to help people and the planet.

Small 80%

We're innocent and we make natural, tasty little drinks. Find out more about our big dreams to help people and the planet.

Button 100% / 1.15 none

Get started

Link 18px weight 400 · InnocentSans Bold

Sizes in use

Most common across the site

48pxline 2.8rem · 4 rules
30pxline 1.1 · 4 rules
28pxline 2rem · 11 rules
24pxline 1.625rem · 3 rules
22pxline 32px · 10 rules
20pxline initial · 12 rules
18pxline 1.75rem · 3 rules
16pxline calc(10px + 2ex) · 9 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

.btn-kids .cmp-button:before · #A2D45E

Corner radius

20px · 4×
60px · 4×
50px · 1×
50% · 1×
30px · 1×

Layout

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

Grid

Content widths (max-width)

1210 px

1200 px

540 px

420 px

350 px

340 px

Notes

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

Notes

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

Questions

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

Questions

What font does innocentdrinks.co.uk use?: innocentdrinks.co.uk’s website uses three typefaces: InnocentSans Bold (headings and body text), served from static-p58902-e658605.adobeaemcloud.com; InnocentSans Light, served from static-p58902-e658605.adobeaemcloud.com; InnocentSans Super, served from static-p58902-e658605.adobeaemcloud.com.
What are innocentdrinks.co.uk’s brand colours?: The main colours on innocentdrinks.co.uk are Chocolate (#E07322), Olive Drab (#74AA50), Pale Violet Red (#F67599), Orange (#FF9E1B), Black (#3D2C17) and Dark Slate Grey (#00573F).
What colour is innocentdrinks.co.uk’s text and background?: Body text is #212721 on a #FFFFFF background.
Where is innocentdrinks.co.uk’s logo from?: The logo shown in this guide was found on innocentdrinks.co.uk’s homepage. For official logo files and usage rules, check innocentdrinks.co.uk’s own brand or press page.
Is this innocentdrinks.co.uk’s official style guide?: No. SiteStyleGuide made it from innocentdrinks.co.uk’s public web pages on 27 October 2026, and isn’t affiliated with innocentdrinks.co.uk. 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

innocentdrinks-co-uk-tokens.css

Download

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

/* innocentdrinks.co.uk design tokens, from SiteStyleGuide (https://sitestyleguide.com/innocentdrinks.co.uk) */
:root {
  /* Colours */
  --text: #212721;
  --background: #FFFFFF;
  --colour-light-white: #FFFFFF;
  --colour-warm-near-black: #212721;
  --colour-deep-white: #FFFDF1;
  --colour-cool-off-white: #DDE5ED;
  --colour-chocolate: #E07322;
  --colour-olive-drab: #74AA50;
  --colour-pale-violet-red: #F67599;
  --colour-orange: #FF9E1B;
  --colour-black: #3D2C17;
  --colour-dark-slate-grey: #00573F;
  --colour-cadet-blue: #00A7B5;
  --colour-dark-olive-green: #527525;
  --colour-pale-green: #CBF4A6;
  --colour-moccasin: #FFEBC0;
  --colour-sienna: #BD4200;
  --colour-sea-green: #00966C;

  /* Typefaces */
  --font-headings: 'InnocentSans Bold', sans-serif;
  --font-buttons: 'InnocentSans Bold', sans-serif;
  --font-body: 'InnocentSans Bold', sans-serif;

  /* Type scale */
  --text-h1: 3rem;
  --leading-h1: 2.8rem;
  --text-h2: 1.75rem;
  --leading-h2: 2rem;
  --text-h3: 1.75rem;
  --leading-h3: 2rem;
  --text-h4: 1.5rem;
  --leading-h4: 1.625rem;
  --text-h5: 1.25rem;
  --leading-h5: calc(10px + 2ex);
  --text-h6: 1rem;
  --leading-h6: calc(10px + 2ex);
  --text-p: 1.125rem;
  --leading-p: 1.75rem;
  --text-small: 80%;
  --text-button: 100%;
  --leading-button: 1.15;
  --text-a: 18px;

  /* Shape */
  --radius-1: 20px;
  --radius-2: 60px;
  --radius-3: 50px;
  --radius-4: 50%;
  --radius-5: 30px;
}

{
    "site": "innocentdrinks.co.uk",
    "source": "https://sitestyleguide.com/innocentdrinks.co.uk",
    "text": "#212721",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Light White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Warm Near Black",
            "hex": "#212721",
            "rgb": [
                33,
                39,
                33
            ]
        },
        {
            "name": "Deep White",
            "hex": "#FFFDF1",
            "rgb": [
                255,
                253,
                241
            ]
        },
        {
            "name": "Cool Off White",
            "hex": "#DDE5ED",
            "rgb": [
                221,
                229,
                237
            ]
        },
        {
            "name": "Chocolate",
            "hex": "#E07322",
            "rgb": [
                224,
                115,
                34
            ]
        },
        {
            "name": "Olive Drab",
            "hex": "#74AA50",
            "rgb": [
                116,
                170,
                80
            ]
        },
        {
            "name": "Pale Violet Red",
            "hex": "#F67599",
            "rgb": [
                246,
                117,
                153
            ]
        },
        {
            "name": "Orange",
            "hex": "#FF9E1B",
            "rgb": [
                255,
                158,
                27
            ]
        },
        {
            "name": "Black",
            "hex": "#3D2C17",
            "rgb": [
                61,
                44,
                23
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#00573F",
            "rgb": [
                0,
                87,
                63
            ]
        },
        {
            "name": "Cadet Blue",
            "hex": "#00A7B5",
            "rgb": [
                0,
                167,
                181
            ]
        },
        {
            "name": "Dark Olive Green",
            "hex": "#527525",
            "rgb": [
                82,
                117,
                37
            ]
        },
        {
            "name": "Pale Green",
            "hex": "#CBF4A6",
            "rgb": [
                203,
                244,
                166
            ]
        },
        {
            "name": "Moccasin",
            "hex": "#FFEBC0",
            "rgb": [
                255,
                235,
                192
            ]
        },
        {
            "name": "Sienna",
            "hex": "#BD4200",
            "rgb": [
                189,
                66,
                0
            ]
        },
        {
            "name": "Sea Green",
            "hex": "#00966C",
            "rgb": [
                0,
                150,
                108
            ]
        }
    ],
    "fonts": [
        {
            "name": "InnocentSans Bold",
            "stack": "InnocentSans Bold, sans-serif",
            "weights": [
                400,
                700
            ],
            "source": "Served from static-p58902-e658605.adobeaemcloud.com"
        },
        {
            "name": "InnocentSans Light",
            "stack": "InnocentSans Light, sans-serif",
            "weights": [
                100,
                400
            ],
            "source": "Served from static-p58902-e658605.adobeaemcloud.com"
        },
        {
            "name": "InnocentSans Super",
            "stack": "InnocentSans Super, sans-serif",
            "weights": [
                100,
                400
            ],
            "source": "Served from static-p58902-e658605.adobeaemcloud.com"
        }
    ]
}

Websites whose lead colour is closest to innocentdrinks.co.uk’s

ICICI Bank

icicibank.com · 4 days ago
Save
ADSCHEMIST

adschemist.com · 6 days ago
Save
How-To Geek

howtogeek.com · 5 days ago
Save
Resurf

resurf.so · 2 days ago
Save

Captured from innocentdrinks.co.uk on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by innocentdrinks.co.uk; this guide describes the public website for reference.

innocentdrinks.co.ukstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Light White

Warm Near Black

Deep White

Cool Off White

Colours

Chocolate

Olive Drab

Pale Violet Red

Orange

Black

Dark Slate Grey

Cadet Blue

Dark Olive Green

Pale Green

Moccasin

Sienna

Sea Green

InnocentSans Bold

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run innocentdrinks.co.uk?

Similar colours

ICICI Bank

ADSCHEMIST

How-To Geek

Resurf

Title &
description