What font does UNICEF Global use?

UNICEF Global’s website uses three typefaces: Noto Sans (headings and body text), google Fonts; Unicef-Logos, self-hosted; Unicef, self-hosted.

What are UNICEF Global’s brand colours?

The main colours on unicef.org are Deep Sky Blue (#00AEEF), Light Slate Blue (#0047BB), Orange Red (#D14808), Red (#E2231A), Steel Blue (#008BBF) and Fire Brick (#C81E17).

What colour is UNICEF Global’s text and background?

Body text is #111111 on a #FFFFFF background.

Where is UNICEF Global’s logo from?

The logo shown in this guide was found on unicef.org’s homepage. For official logo files and usage rules, check UNICEF Global’s own brand or press page.

Is this UNICEF Global’s official style guide?

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

Unofficial A style guide made by SiteStyleGuide from unicef.org’s public web pages. Not affiliated with or endorsed by UNICEF Global. The real site is unicef.org ↗

Unofficial style guide

UNICEF Globalstyle guide

UNICEF Global’s website (unicef.org) uses Noto Sans for its headings and body text. Its palette is led by Deep Sky Blue (#00AEEF), Light Slate Blue (#0047BB) and Orange Red (#D14808), with #111111 text on #FFFFFF. Captured from the live site on 27 October 2026.

Website: unicef.org
Typefaces: Noto Sans, Unicef-Logos, Unicef
Palette: 4 neutrals, 12 colours, 2 gradients
Captured: 27 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the unicef.org homepage on a desktop screen — Screenshot of unicef.org on a 1440 px desktop screen, 27 Oct 2026.

Screenshot of the unicef.org 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: UNICEF, for every child; ● 23 / 60 characters
Meta description: UNICEF works in the world’s toughest places to reach the most disadvantaged children and to protect the rights of every child, everywhere.; ● 138 / 160 characters
Site name: UNICEF Global
og:title: UNICEF
og:description: UNICEF works in the world’s toughest places to reach the most disadvantaged children and adolescents – and to protect the rights of every child, everywhere
Language: en

In search results

UNICEF Globalhttps://www.unicef.org/

UNICEF, for every child

UNICEF works in the world’s toughest places to reach the most disadvantaged children and to protect the rights of every child, everywhere.

When shared

unicef.org

UNICEF

UNICEF works in the world’s toughest places to reach the most disadvantaged children and adolescents – and to…

Logo & favicons

Found as: schema.org logo. PNG, 1200 × 900.

Logo

On white

On black

On Deep Sky Blue

Favicons

1 found

64 px · ICO icon

UNICEF, for every child

Light browser tab

UNICEF, for every child

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

Colour

Balance

How much each colour is used

Near Black 29.4%
White 28.8%
Deep Sky Blue 9.4%
Light Grey 5.3%
Grey 5.3%
Light Slate Blue 4.8%
Orange Red 3.4%
Red 2.8%
Steel Blue 1.7%
Fire Brick 1.5%
Orange 1.3%
Deep Slate Blue 1.3%
Sienna 1.3%
Lavender 1.2%
Misty Rose 1.2%
Sea Green 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

Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 93

On text
—

On white
18.88:1 AAA

Text, background, border · body:not(.is-admin-path) div.block-system-main-block :not(.pager__item,.card,.ca, body:not(.is-admin-path) div.block-system-main-block div.link-grey1 :not(.pager_
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
18.88:1 AAA

On white
—

Background, text, border · .klaro .cookie-modal p, .region--navigation-collapsible nav div#block-meganavigation div.mega-nav-backgr
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 24

On text
10.49:1 AAA

On white
1.80:1 Fail

Background, text, border · .btn.accent-action-bg.white.disabled, .grey-lighter
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 54

On text
4.10:1 AA large

On white
4.61:1 AA

Text, background, border · .unicef-component-mosaic .selectric-secondary.grey4-bg .card, .unicef-component-mosaic .selectric-secondary .promoted-grey4-bg

Colours

Brand colours and accents, most used first

Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
100 27 0 6

On text
7.46:1 AAA

On white
2.53:1 Fail

Background, text, border · .unicef-component-mosaic .selectric-secondary.primary-bg .card, .unicef-component-mosaic .selectric-secondary .promoted-primary-bg
Light Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
100 62 0 27

On text
2.35:1 Fail

On white
8.02:1 AAA

Text, background, graphic · .view-unicef-geographical-regions .container .views-row .unicef-region .region-t, .unicef-component-mosaic .selectric-secondary.secondary-bg .card
Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 66 96 18

On text
4.17:1 AA large

On white
4.52:1 AA

Text, background, graphic · .unicef-component-mosaic .selectric-secondary.accent-action-bg .card, .unicef-component-mosaic .selectric-secondary .promoted-accent-action-bg
Red

HEX

RGB

HSL

OKLCH

CMYK
0 85 88 11

On text
4.04:1 AA large

On white
4.68:1 AA

Background, text, graphic · .unicef-component-mosaic .selectric-secondary.accent-alert-bg .card, .unicef-component-mosaic .selectric-secondary .promoted-accent-alert-bg
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 27 0 25

On text
4.90:1 AA

On white
3.86:1 AA large

Text, background, border · form.unicef-subscriptions-form-template.text-primaryfocus .subscribe-description, form.unicef-subscriptions-form-template.text-primaryfocus .subscribe-container-e
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 85 89 22

On text
3.29:1 AA large

On white
5.75:1 AA

Text, background, border · form.unicef-subscriptions-form-template.text-accentalertfocus .subscribe-descrip, form.unicef-subscriptions-form-template.text-accentalertfocus .subscribe-contain
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 29 100 0

On text
10.67:1 AAA

On white
1.77:1 Fail

Background · .list-content:has(.list-short-title > a.enable-state:not(:visited)) .visit-page, body:not(.is-admin-path) div.block-system-main-block :not(.pager__item,.card,.ca
Deep Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
100 69 0 35

On text
1.83:1 Fail

On white
10.34:1 AAA

Text, background, graphic · form.unicef-subscriptions-form-template.text-secondaryfocus .subscribe-descripti, form.unicef-subscriptions-form-template.text-secondaryfocus .subscribe-container
Sienna

HEX

RGB

HSL

OKLCH

CMYK
0 65 96 26

On text
3.50:1 AA large

On white
5.39:1 AA

Text, background, border · form.unicef-subscriptions-form-template.text-accentactionfocus .subscribe-descri, form.unicef-subscriptions-form-template.text-accentactionfocus .subscribe-contai
Lavender

HEX

RGB

HSL

OKLCH

CMYK
14 8 0 4

On text
14.26:1 AAA

On white
1.32:1 Fail

Text, background, border · form.unicef-subscriptions-form-template.text-secondarylightbg .subscribe-descrip, form.unicef-subscriptions-form-template.text-secondarylightbg .subscribe-contain
Misty Rose

HEX

RGB

HSL

OKLCH

CMYK
0 13 14 4

On text
13.79:1 AAA

On white
1.37:1 Fail

Text, background, border · form.unicef-subscriptions-form-template.text-accentalertlightbg .subscribe-descr, form.unicef-subscriptions-form-template.text-accentalertlightbg .subscribe-conta
Sea Green

HEX

RGB

HSL

OKLCH

CMYK
82 0 24 42

On text
4.90:1 AA

On white
3.86:1 AA large

Background, text · .klaro .cookie-modal .cm-list-input:checked+.cm-list-label .slider, .klaro .cookie-modal .cm-list-input.half-checked:checked+.cm-list-label .slider

Gradients

linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%)
linear-gradient(to bottom left,#ffffff00 50%,#fff 50%)

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.

Noto Sans

Aa 100 Aa 900

Noto Sans

Google Fonts · weights 100, 200, 300, 400, 500, 600, 700, 800, 900 · body, buttons

Aa 100

Unicef-Logos

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

Aa 100 Aa 400

Unicef

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

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

Type scale

From the site’s CSS

Heading 1 30px / 38px weight 700

UNICEF Global

Heading 2 28px / 34px weight 700

UNICEF, for every child

Heading 3 26px / 33px weight 700

UNICEF, for every child

Heading 4 22px / 28px weight 700

UNICEF, for every child

Heading 5 20px / 26px weight 700

UNICEF, for every child

Heading 6 20px / 26px weight 700

UNICEF, for every child

Body 16px / 22px Noto Sans

UNICEF works in the world’s toughest places to reach the most disadvantaged children and to protect the rights of every child, everywhere.

Paragraph 14px / 18px weight 700

UNICEF works in the world’s toughest places to reach the most disadvantaged children and to protect the rights of every child, everywhere.

Button 14px / 18px weight 700 · Noto Sans

Get started

Link 18px / 28px

Sizes in use

Most common across the site

30pxline 38px · 5 rules
26pxline 33px · 5 rules
22pxline 28px · 7 rules
20pxline 26px · 15 rules
18pxline 24px · 8 rules
16pxline 22px · 31 rules
14pxline 18px · 30 rules
12pxline 16px · 19 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

.dam-wrapper .btn-primary · #0074BD

Corner radius

5px · 19×
50% · 11×
4px · 11×
50px · 6×
100% · 4×
25px · 4×

Shadows

0 3px 3px -2px rgba(0,0,0,.1),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12)
0 5px 5px -3px rgba(0,0,0,.12),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)
0 0 0 2px #00aeef
0 4px 6px 0 rgba(0,0,0,.2),5px 5px 10px 0 rgba(0,0,0,.19)

Layout

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

Grid

Breakpoints

400

480

767

768

991

992

1200

1440

On a scale of 0 to 1440 px.

Content widths (max-width)

1170 px

1140 px

932 px

770 px

648 px

309 px

Notes

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

Notes

● FineThe title is 23 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 UNICEF Global use?: UNICEF Global’s website uses three typefaces: Noto Sans (headings and body text), google Fonts; Unicef-Logos, self-hosted; Unicef, self-hosted.
What are UNICEF Global’s brand colours?: The main colours on unicef.org are Deep Sky Blue (#00AEEF), Light Slate Blue (#0047BB), Orange Red (#D14808), Red (#E2231A), Steel Blue (#008BBF) and Fire Brick (#C81E17).
What colour is UNICEF Global’s text and background?: Body text is #111111 on a #FFFFFF background.
Where is UNICEF Global’s logo from?: The logo shown in this guide was found on unicef.org’s homepage. For official logo files and usage rules, check UNICEF Global’s own brand or press page.
Is this UNICEF Global’s official style guide?: No. SiteStyleGuide made it from unicef.org’s public web pages on 27 October 2026, and isn’t affiliated with UNICEF 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

unicef-org-tokens.css

Download

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

/* unicef.org design tokens, from SiteStyleGuide (https://sitestyleguide.com/unicef.org) */
:root {
  /* Colours */
  --text: #111111;
  --background: #FFFFFF;
  --colour-near-black: #111111;
  --colour-white: #FFFFFF;
  --colour-light-grey: #C1C1C1;
  --colour-grey: #757575;
  --colour-deep-sky-blue: #00AEEF;
  --colour-light-slate-blue: #0047BB;
  --colour-orange-red: #D14808;
  --colour-red: #E2231A;
  --colour-steel-blue: #008BBF;
  --colour-fire-brick: #C81E17;
  --colour-orange: #FFB500;
  --colour-deep-slate-blue: #0033A7;
  --colour-sienna: #BC4107;
  --colour-lavender: #D3E1F5;
  --colour-misty-rose: #F5D5D3;
  --colour-sea-green: #1A936F;
  --gradient-1: linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);
  --gradient-2: linear-gradient(to bottom left,#ffffff00 50%,#fff 50%);

  /* Typefaces */
  --font-body: 'Noto Sans', sans-serif;
  --font-buttons: 'Noto Sans', sans-serif;
  --font-other: 'Unicef-Logos';

  /* Type scale */
  --text-h1: 30px;
  --leading-h1: 38px;
  --text-h2: 28px;
  --leading-h2: 34px;
  --text-h3: 26px;
  --leading-h3: 33px;
  --text-h4: 22px;
  --leading-h4: 28px;
  --text-h5: 20px;
  --leading-h5: 26px;
  --text-h6: 20px;
  --leading-h6: 26px;
  --text-body: 16px;
  --leading-body: 22px;
  --text-p: 14px;
  --leading-p: 18px;
  --text-button: 14px;
  --leading-button: 18px;
  --text-a: 18px;
  --leading-a: 28px;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 400px;
  --breakpoint-2: 480px;
  --breakpoint-3: 767px;
  --breakpoint-4: 768px;
  --breakpoint-5: 991px;
  --breakpoint-6: 992px;
  --breakpoint-7: 1200px;
  --breakpoint-8: 1440px;
  --max-width-1: 1170px;
  --max-width-2: 1140px;
  --max-width-3: 932px;
  --max-width-4: 770px;
  --max-width-5: 648px;
  --max-width-6: 309px;
}

{
    "site": "unicef.org",
    "source": "https://sitestyleguide.com/unicef.org",
    "text": "#111111",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Near Black",
            "hex": "#111111",
            "rgb": [
                17,
                17,
                17
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#C1C1C1",
            "rgb": [
                193,
                193,
                193
            ]
        },
        {
            "name": "Grey",
            "hex": "#757575",
            "rgb": [
                117,
                117,
                117
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#00AEEF",
            "rgb": [
                0,
                174,
                239
            ]
        },
        {
            "name": "Light Slate Blue",
            "hex": "#0047BB",
            "rgb": [
                0,
                71,
                187
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#D14808",
            "rgb": [
                209,
                72,
                8
            ]
        },
        {
            "name": "Red",
            "hex": "#E2231A",
            "rgb": [
                226,
                35,
                26
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#008BBF",
            "rgb": [
                0,
                139,
                191
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#C81E17",
            "rgb": [
                200,
                30,
                23
            ]
        },
        {
            "name": "Orange",
            "hex": "#FFB500",
            "rgb": [
                255,
                181,
                0
            ]
        },
        {
            "name": "Deep Slate Blue",
            "hex": "#0033A7",
            "rgb": [
                0,
                51,
                167
            ]
        },
        {
            "name": "Sienna",
            "hex": "#BC4107",
            "rgb": [
                188,
                65,
                7
            ]
        },
        {
            "name": "Lavender",
            "hex": "#D3E1F5",
            "rgb": [
                211,
                225,
                245
            ]
        },
        {
            "name": "Misty Rose",
            "hex": "#F5D5D3",
            "rgb": [
                245,
                213,
                211
            ]
        },
        {
            "name": "Sea Green",
            "hex": "#1A936F",
            "rgb": [
                26,
                147,
                111
            ]
        }
    ],
    "fonts": [
        {
            "name": "Noto Sans",
            "stack": "\"Noto Sans\", sans-serif",
            "weights": [
                100,
                200,
                300,
                400,
                500,
                600,
                700,
                800,
                900
            ],
            "source": "Google Fonts"
        },
        {
            "name": "Unicef-Logos",
            "stack": "Unicef-Logos",
            "weights": [
                100
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Unicef",
            "stack": "Unicef",
            "weights": [
                100,
                400
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using Noto Sans as their main typeface

New York Daily News

nydailynews.com · set in Noto Sans
Save
gameforge.com

gameforge.com · set in Noto Sans
Save
The Denver Post

denverpost.com · set in Noto Sans
Save
PPP

ppp.tokyo.jp · set in Noto Sans
Save

Websites whose lead colour is closest to UNICEF Global’s

Calculatio

calculat.io · 5 days ago
Save
Movies Anywhere

moviesanywhere.com · 3 days ago
Save
آپارات

aparat.com · 1 day ago
Save
Snapchat

snapchat.com · 3 days ago
Save

Captured from unicef.org on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by UNICEF Global; this guide describes the public website for reference.

UNICEF Globalstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Near Black

White

Light Grey

Grey

Colours

Deep Sky Blue

Light Slate Blue

Orange Red

Red

Steel Blue

Fire Brick

Orange

Deep Slate Blue

Sienna

Lavender

Misty Rose

Sea Green

Gradients

Noto Sans

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run unicef.org?

Also set in Noto Sans

New York Daily News

gameforge.com

The Denver Post

PPP

Similar colours

Calculatio

Movies Anywhere

آپارات

Snapchat

Title &
description