What font does Tony’s Chocolonely Global use?

Tony’s Chocolonely Global’s website uses three typefaces: Chocolate letter (headings), self-hosted; Apple Color Emoji (body text), a system font; American typewriter, self-hosted.

What are Tony’s Chocolonely Global’s brand colours?

The main colours on tonyschocolonely.com are Yellow (#FFED00), Royal Blue (#006BE1), Red (#EB0000), Yellow Green (#78C828), Dark Orange (#FF7400) and Forest Green (#009E00).

What colour is Tony’s Chocolonely Global’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is Tony’s Chocolonely Global’s logo from?

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

Is this Tony’s Chocolonely Global’s official style guide?

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

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

Unofficial style guide

Tony’s Chocolonely Globalstyle guide

Tony’s Chocolonely Global’s website (tonyschocolonely.com) sets its headings in Chocolate letter and its body text in Apple Color Emoji. Its palette is led by Yellow (#FFED00), Royal Blue (#006BE1) and Red (#EB0000), with #000000 text on #FFFFFF. Captured from the live site on 26 October 2026.

Website: tonyschocolonely.com
Typefaces: Chocolate letter, Apple Color Emoji, American typewriter
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 26 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the tonyschocolonely.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: Fighting exploitation in cocoa – Tony’s Chocolonely Global; ● 58 / 60 characters
Meta description: Tony's Chocolonely: fighting exploitation in cocoa – poverty, child labor and deforestation. Pick your country to start shopping.; ● 129 / 160 characters
Site name: Tony’s Chocolonely Global
og:title: Fighting exploitation in cocoa
og:description: Tony's Chocolonely: fighting exploitation in cocoa – poverty, child labor and deforestation. Pick your country to start shopping.
Language: en
Theme colour: #EB0000

In search results

Tony’s Chocolonely Globalhttps://tonyschocolonely.com/

Fighting exploitation in cocoa – Tony’s Chocolonely Global

Tony's Chocolonely: fighting exploitation in cocoa – poverty, child labor and deforestation. Pick your country to start shopping.

When shared

The image Tony’s Chocolonely Global shares with links

tonyschocolonely.com

Fighting exploitation in cocoa

Tony's Chocolonely: fighting exploitation in cocoa – poverty, child labor and deforestation. Pick your countr…

Logo & favicons

Found as: schema.org logo. JPG, 1536 × 806.

Logo

On white

On black

On Yellow

Favicons

1 found

152 px · PNG icon

Fighting exploitation in cocoa – Tony’s Chocolonely Global

Light browser tab

Fighting exploitation in cocoa – Tony’s Chocolonely Global

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

Colour

Balance

How much each colour is used

Black 20.3%
White 16.5%
Yellow 10.5%
Royal Blue 10.1%
Red 7.3%
Warm Off White 6.7%
Yellow Green 3.6%
Dark Orange 3.6%
Forest Green 3.1%
Slate Blue 3.1%
Hot Pink 3.1%
Crimson 2.7%
Medium Orchid 2.7%
Orange 2.7%
Cadet Blue 2.7%
Cool Grey 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

Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background, border · .swiper-pagination-bullet, .swiper-cube .swiper-cube-shadow:before
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
21.00:1 AAA

On white
—

Background, text, border · --tw-ring-offset-color, .bg-tonys-white
Warm Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 2 5

On text
18.53:1 AAA

On white
1.13:1 Fail

Background, text · .apply-button.apply-radio-option:before, .bg-tonys-gray
Cool Grey

HEX

RGB

HSL

OKLCH

CMYK
11 7 0 31

On text
8.27:1 AAA

On white
2.54:1 Fail

Text · input::-moz-placeholder, input::placeholder

Colours

Brand colours and accents, most used first

Yellow

HEX

RGB

HSL

OKLCH

CMYK
0 7 100 0

On text
17.37:1 AAA

On white
1.21:1 Fail

Background, text, border · #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton, #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 52 0 12

On text
4.19:1 AA large

On white
5.01:1 AA

Background, text, border · #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton#CybotCookiebotDialog, inline style on <div>
Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 8

On text
4.53:1 AA

On white
4.63:1 AA

Text, background, theme · theme-color meta tag, inline style on <div>
Yellow Green

HEX

RGB

HSL

OKLCH

CMYK
40 0 80 22

On text
10.09:1 AAA

On white
2.08:1 Fail

Background, text · inline style on <div>, .bg-almond-green
Dark Orange

HEX

RGB

HSL

OKLCH

CMYK
0 55 100 0

On text
7.75:1 AAA

On white
2.71:1 Fail

Background, text · inline style on <div>, .bg-caramel-orange
Forest Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 100 38

On text
5.89:1 AA

On white
3.56:1 AA large

Background, text · .bg-hazelnut-green, .\!text-hazelnut-green
Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
47 47 0 25

On text
4.11:1 AA large

On white
5.11:1 AA

Background, text · .bg-pretzel-purple, .\!text-pretzel-purple
Hot Pink

HEX

RGB

HSL

OKLCH

CMYK
0 62 35 0

On text
7.48:1 AAA

On white
2.81:1 Fail

Background, text · .bg-raspberry-pink, .\!text-raspberry-pink
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 100 58 16

On text
4.04:1 AA large

On white
5.20:1 AA

Background, text · .bg-caramel-biscuit-pink, .\!text-caramel-biscuit-pink
Medium Orchid

HEX

RGB

HSL

OKLCH

CMYK
11 53 0 25

On text
4.92:1 AA

On white
4.27:1 AA large

Background, text · .bg-cinnamon-biscuit-purple, .\!text-cinnamon-biscuit-purple
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 33 82 0

On text
11.04:1 AAA

On white
1.90:1 Fail

Background, text · .bg-cookie-caramel-orange, .\!text-cookie-caramel-orange
Cadet Blue

HEX

RGB

HSL

OKLCH

CMYK
100 8 0 25

On text
7.88:1 AAA

On white
2.67:1 Fail

Background, text · .bg-crispy-wafer-blue, .\!text-crispy-wafer-blue

Gradients

linear-gradient(to left,#00000080,#0000)
linear-gradient(to right,#00000080,#0000)
linear-gradient(to top,#00000080,#0000)

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.

Chocolate letter

Aa 400 Aa 700

Chocolate letter

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

Aa 400

Apple Color Emoji

System font, or not loaded on this page · body · shown in a stand-in if you don’t have it

Aa 600 Aa 700

American typewriter

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

Aa 400

SFMono-Regular

System font, or not loaded on this page · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Heading 1 2em · 32 px weight 700

Tony’s Chocolonely Global

Heading 2 1.5em · 24 px weight 700

Fighting exploitation in cocoa – Tony’s Chocolo…

Heading 3 1.17em · 19 px weight 700

Fighting exploitation in cocoa – Tony’s Chocolo…

Heading 5 .83em · 13 px weight 700

Fighting exploitation in cocoa – Tony’s Chocolo…

Heading 6 .67em · 11 px weight 700

Fighting exploitation in cocoa – Tony’s Chocolo…

Paragraph .625rem · 10 px / .625rem

Tony's Chocolonely: fighting exploitation in cocoa – poverty, child labor and deforestation. Pick your country to start shopping.

Small 80%

Tony's Chocolonely: fighting exploitation in cocoa – poverty, child labor and deforestation. Pick your country to start shopping.

Button 100% none

Get started

Sizes in use

Most common across the site

24px3 rules
18pxline 1.5rem · 5 rules
16pxline 1.125rem · 7 rules
15pxline 1rem · 3 rules
14pxline 1.125rem · 7 rules
13pxline .875rem · 7 rules
11pxline .875rem · 6 rules
10pxline .75rem · 6 rules

Elements

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

Elements

Corner radius

50% · 2×
10px · 2×
9999px · 2×
.375rem · 1×

Shadows

0 0 #0000,0 0 #0000,0 0 #0000

Layout

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

Grid

Breakpoints

640

767

768

1024

1440

1920

On a scale of 0 to 1920 px.

Content widths (max-width)

1440 px

1024 px

768 px

640 px

336 px

300 px

Notes

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

Notes

● FineThe title is 58 characters, short enough to show in full in search results.

Questions

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

Questions

What font does Tony’s Chocolonely Global use?: Tony’s Chocolonely Global’s website uses three typefaces: Chocolate letter (headings), self-hosted; Apple Color Emoji (body text), a system font; American typewriter, self-hosted.
What are Tony’s Chocolonely Global’s brand colours?: The main colours on tonyschocolonely.com are Yellow (#FFED00), Royal Blue (#006BE1), Red (#EB0000), Yellow Green (#78C828), Dark Orange (#FF7400) and Forest Green (#009E00).
What colour is Tony’s Chocolonely Global’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is Tony’s Chocolonely Global’s logo from?: The logo shown in this guide was found on tonyschocolonely.com’s homepage. For official logo files and usage rules, check Tony’s Chocolonely Global’s own brand or press page.
Is this Tony’s Chocolonely Global’s official style guide?: No. SiteStyleGuide made it from tonyschocolonely.com’s public web pages on 26 October 2026, and isn’t affiliated with Tony’s Chocolonely Global. 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

tonyschocolonely-com-tokens.css

Download

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

/* tonyschocolonely.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/tonyschocolonely.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-black: #000000;
  --colour-white: #FFFFFF;
  --colour-warm-off-white: #F1F1EC;
  --colour-cool-grey: #9CA3AF;
  --colour-yellow: #FFED00;
  --colour-royal-blue: #006BE1;
  --colour-red: #EB0000;
  --colour-yellow-green: #78C828;
  --colour-dark-orange: #FF7400;
  --colour-forest-green: #009E00;
  --colour-slate-blue: #6464BE;
  --colour-hot-pink: #FF60A6;
  --colour-crimson: #D7005A;
  --colour-medium-orchid: #AA5ABE;
  --colour-orange: #FFAA2D;
  --colour-cadet-blue: #00AFBE;
  --gradient-1: linear-gradient(to left,#00000080,#0000);
  --gradient-2: linear-gradient(to right,#00000080,#0000);
  --gradient-3: linear-gradient(to top,#00000080,#0000);

  /* Typefaces */
  --font-headings: 'Chocolate letter', sans-serif;
  --font-buttons: 'Chocolate letter', sans-serif;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-other: 'American typewriter', sans-serif;

  /* Type scale */
  --text-h1: 2em;
  --text-h2: 1.5em;
  --text-h3: 1.17em;
  --text-h5: .83em;
  --text-h6: .67em;
  --text-p: .625rem;
  --leading-p: .625rem;
  --text-small: 80%;
  --text-button: 100%;

  /* Shape */
  --radius-1: 50%;
  --radius-2: 10px;
  --radius-3: 9999px;
  --radius-4: .375rem;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 640px;
  --breakpoint-2: 767px;
  --breakpoint-3: 768px;
  --breakpoint-4: 1024px;
  --breakpoint-5: 1440px;
  --breakpoint-6: 1920px;
  --max-width-1: 1440px;
  --max-width-2: 1024px;
  --max-width-3: 768px;
  --max-width-4: 640px;
  --max-width-5: 336px;
  --max-width-6: 300px;
}

{
    "site": "tonyschocolonely.com",
    "source": "https://sitestyleguide.com/tonyschocolonely.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Warm Off White",
            "hex": "#F1F1EC",
            "rgb": [
                241,
                241,
                236
            ]
        },
        {
            "name": "Cool Grey",
            "hex": "#9CA3AF",
            "rgb": [
                156,
                163,
                175
            ]
        },
        {
            "name": "Yellow",
            "hex": "#FFED00",
            "rgb": [
                255,
                237,
                0
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#006BE1",
            "rgb": [
                0,
                107,
                225
            ]
        },
        {
            "name": "Red",
            "hex": "#EB0000",
            "rgb": [
                235,
                0,
                0
            ]
        },
        {
            "name": "Yellow Green",
            "hex": "#78C828",
            "rgb": [
                120,
                200,
                40
            ]
        },
        {
            "name": "Dark Orange",
            "hex": "#FF7400",
            "rgb": [
                255,
                116,
                0
            ]
        },
        {
            "name": "Forest Green",
            "hex": "#009E00",
            "rgb": [
                0,
                158,
                0
            ]
        },
        {
            "name": "Slate Blue",
            "hex": "#6464BE",
            "rgb": [
                100,
                100,
                190
            ]
        },
        {
            "name": "Hot Pink",
            "hex": "#FF60A6",
            "rgb": [
                255,
                96,
                166
            ]
        },
        {
            "name": "Crimson",
            "hex": "#D7005A",
            "rgb": [
                215,
                0,
                90
            ]
        },
        {
            "name": "Medium Orchid",
            "hex": "#AA5ABE",
            "rgb": [
                170,
                90,
                190
            ]
        },
        {
            "name": "Orange",
            "hex": "#FFAA2D",
            "rgb": [
                255,
                170,
                45
            ]
        },
        {
            "name": "Cadet Blue",
            "hex": "#00AFBE",
            "rgb": [
                0,
                175,
                190
            ]
        }
    ],
    "fonts": [
        {
            "name": "Chocolate letter",
            "stack": "Chocolate letter, sans-serif",
            "weights": [
                400,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Apple Color Emoji",
            "stack": "ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", Segoe UI Symbol, \"Noto Color Emoji\"",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "American typewriter",
            "stack": "American typewriter, sans-serif",
            "weights": [
                600,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "SFMono-Regular",
            "stack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Websites whose lead colour is closest to Tony’s Chocolonely Global’s

Lulu

lulu.com · 6 days ago
Save
iMore

imore.com · 6 days ago
Save
Adcash

adcash.com · 6 days ago
Save
Onet

onet.pl · 2 days ago
Save

Captured from tonyschocolonely.com on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Tony’s Chocolonely Global; this guide describes the public website for reference.

Tony’s Chocolonely Globalstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Black

White

Warm Off White

Cool Grey

Colours

Yellow

Royal Blue

Red

Yellow Green

Dark Orange

Forest Green

Slate Blue

Hot Pink

Crimson

Medium Orchid

Orange

Cadet Blue

Gradients

Chocolate letter

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run tonyschocolonely.com?

Similar colours

Lulu

iMore

Adcash

Onet

Title &
description