What font does un.org use?

un.org’s website uses two typefaces: Helvetica Neue (headings and body text), a system font; Roboto, google Fonts.

What are un.org’s brand colours?

The main colours on un.org are Light Steel Blue (#337AB7), Royal Blue (#265A88), Forest Green (#419641), Deep Sky Blue (#2AABD2), Dark Orange (#EB9316) and Fire Brick (#C12E2A).

What colour is un.org’s text and background?

Body text is #333333 on a #FFFFFF background.

Is this un.org’s official style guide?

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

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

Unofficial style guide

un.orgstyle guide

un.org’s website (un.org) uses Helvetica Neue for its headings and body text. Its palette is led by Light Steel Blue (#337AB7), Royal Blue (#265A88) and Forest Green (#419641), with #333333 text on #FFFFFF. Captured from the live site on 26 October 2026.

Website: un.org
Typefaces: Helvetica Neue, Roboto
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 26 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the un.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: Welcome to the United Nations; ● 29 / 60 characters
Meta description: Missing; ▲ 0 / 160 characters
og:title: Welcome to the United Nations

In search results

un.orghttps://www.un.org/

Welcome to the United Nations

When shared

un.org

Welcome to the United Nations

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

1 found

16 px · ICO shortcut icon

Welcome to the United Nations

Light browser tab

Welcome to the United Nations

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

Colour

Balance

How much each colour is used

White 25.7%
Off White 14.2%
Light Steel Blue 9%
Charcoal 6.3%
Black 5%
Royal Blue 4.1%
Forest Green 3.7%
Deep Sky Blue 3.7%
Dark Orange 3.7%
Fire Brick 3.7%
Corn Silk 3.7%
Honey Dew 3.7%
Deep Steel Blue 3.7%
Sky Blue 3.5%
Medium Sea Green 3.2%
Orange 3.2%

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
12.63:1 AAA

On white
—

Background, text, border · .navbar-default, .panel-default>.panel-heading
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 9

On text
10.31:1 AAA

On white
1.23:1 Fail

Background, border · .navbar-default .navbar-nav>.active>a, .panel-default>.panel-heading
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 80

On text
—

On white
12.63:1 AAA

Text, background, border · .navbar-inverse, body
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 97

On text
1.59:1 Fail

On white
20.03:1 AAA

Background, border, text · .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav .open .dropdown-menu .divider

Colours

Brand colours and accents, most used first

Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
72 33 0 28

On text
2.77:1 Fail

On white
4.56:1 AA

Background, text, border · .panel-primary>.panel-heading, .btn-primary
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
72 34 0 47

On text
1.75:1 Fail

On white
7.24:1 AAA

Background, text, border · .btn-primary, .progress-bar
Forest Green

HEX

RGB

HSL

OKLCH

CMYK
57 0 57 41

On text
3.41:1 AA large

On white
3.71:1 AA large

Background, border · .btn-success, .progress-bar-success
Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
80 19 0 18

On text
4.73:1 AA

On white
2.67:1 Fail

Background, border · .btn-info, .progress-bar-info
Dark Orange

HEX

RGB

HSL

OKLCH

CMYK
0 37 91 8

On text
5.24:1 AA

On white
2.41:1 Fail

Background, border · .btn-warning, .progress-bar-warning
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 76 78 24

On text
2.22:1 Fail

On white
5.69:1 AA

Background, border · .btn-danger, .progress-bar-danger
Corn Silk

HEX

RGB

HSL

OKLCH

CMYK
0 2 10 1

On text
11.84:1 AAA

On white
1.07:1 Fail

Background, text · .panel-warning>.panel-heading, .alert-warning
Honey Dew

HEX

RGB

HSL

OKLCH

CMYK
7 0 10 6

On text
10.58:1 AAA

On white
1.19:1 Fail

Background, text · .panel-success>.panel-heading, .alert-success
Deep Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
72 34 0 36

On text
2.31:1 Fail

On white
5.47:1 AA

Background, border, text · .panel-primary>.panel-heading, .navbar .navbar-nav .open .dropdown-menu>.active>a
Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
59 14 0 13

On text
6.04:1 AA

On white
2.09:1 Fail

Background, text, border · .btn-info, .progress-bar-info
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
50 0 50 28

On text
5.09:1 AA

On white
2.48:1 Fail

Background, text · .btn-success, .progress-bar-success
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 28 68 6

On text
6.49:1 AA

On white
1.95:1 Fail

Background, text · .btn-warning, .progress-bar-warning

Gradients

linear-gradient(top,#337ab7 0,#2e6da4 100%)
linear-gradient(top,#f5f5f5 0,#e8e8e8 100%)
linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,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.

Helvetica Neue

Aa 400

Helvetica Neue

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

Aa 100 Aa 900

Roboto

Google Fonts · weights 100, 300, 400, 500, 700, 900 · body

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

Type scale

From the site’s CSS · root 10 px

Heading 1 36px / 1.1 weight 500

un.org

Heading 2 30px / 1.1 weight 500

Welcome to the United Nations

Heading 3 24px / 1.1 weight 500

Welcome to the United Nations

Heading 4 18px / 1.1 weight 500

Welcome to the United Nations

Heading 5 14px / 1.1 weight 500

Welcome to the United Nations

Heading 6 12px / 1.1 weight 500

Welcome to the United Nations

Body 14px / 1.42857143 Roboto

The quick brown fox jumps over the lazy dog.

Paragraph 21px weight 200

The quick brown fox jumps over the lazy dog.

Small 85%

The quick brown fox jumps over the lazy dog.

Link 12px / 1.5 weight 400

Sizes in use

Most common across the site

36px3 rules
21pxline inherit · 3 rules
20px4 rules
18pxline 1.3333333 · 10 rules
16pxline 1.4 · 4 rules
14pxline 1.42857143 · 9 rules
12pxline 1.5 · 13 rules
10px2 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-primary · #337AB7

Link

Read our latest news today.

a · #337AB7

Corner radius

4px · 24×
6px · 10×
3px · 8×
4px 4px 0 0 · 3×
10px · 3×
50% · 1×

Shadows

0 1px 2px rgba(0,0,0,.075)
0 6px 12px rgba(0,0,0,.175)
0 1px 1px rgba(0,0,0,.05)
0 3px 9px rgba(0,0,0,.5)

Layout

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

Grid

Breakpoints

450

767

768

991

992

1199

1200

1600

On a scale of 0 to 1600 px.

Notes

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

Notes

● FineThe title is 29 characters, short enough to show in full in search results.
▲ CheckThere is no meta description, so search engines will pick text from the page.
▲ CheckThe page doesn’t declare its language (the lang attribute on <html>).

Questions

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

Questions

What font does un.org use?: un.org’s website uses two typefaces: Helvetica Neue (headings and body text), a system font; Roboto, google Fonts.
What are un.org’s brand colours?: The main colours on un.org are Light Steel Blue (#337AB7), Royal Blue (#265A88), Forest Green (#419641), Deep Sky Blue (#2AABD2), Dark Orange (#EB9316) and Fire Brick (#C12E2A).
What colour is un.org’s text and background?: Body text is #333333 on a #FFFFFF background.
Is this un.org’s official style guide?: No. SiteStyleGuide made it from un.org’s public web pages on 26 October 2026, and isn’t affiliated with un.org. 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

un-org-tokens.css

Download

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

/* un.org design tokens, from SiteStyleGuide (https://sitestyleguide.com/un.org) */
:root {
  /* Colours */
  --text: #333333;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-off-white: #E8E8E8;
  --colour-charcoal: #333333;
  --colour-black: #080808;
  --colour-light-steel-blue: #337AB7;
  --colour-royal-blue: #265A88;
  --colour-forest-green: #419641;
  --colour-deep-sky-blue: #2AABD2;
  --colour-dark-orange: #EB9316;
  --colour-fire-brick: #C12E2A;
  --colour-corn-silk: #FCF8E3;
  --colour-honey-dew: #DFF0D8;
  --colour-deep-steel-blue: #2E6DA4;
  --colour-sky-blue: #5BC0DE;
  --colour-medium-sea-green: #5CB85C;
  --colour-orange: #F0AD4E;
  --gradient-1: linear-gradient(top,#337ab7 0,#2e6da4 100%);
  --gradient-2: linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);
  --gradient-3: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);

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

  /* Type scale */
  --text-h1: 36px;
  --leading-h1: 1.1;
  --text-h2: 30px;
  --leading-h2: 1.1;
  --text-h3: 24px;
  --leading-h3: 1.1;
  --text-h4: 18px;
  --leading-h4: 1.1;
  --text-h5: 14px;
  --leading-h5: 1.1;
  --text-h6: 12px;
  --leading-h6: 1.1;
  --text-body: 14px;
  --leading-body: 1.42857143;
  --text-p: 21px;
  --text-small: 85%;
  --text-a: 12px;
  --leading-a: 1.5;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 450px;
  --breakpoint-2: 767px;
  --breakpoint-3: 768px;
  --breakpoint-4: 991px;
  --breakpoint-5: 992px;
  --breakpoint-6: 1199px;
  --breakpoint-7: 1200px;
  --breakpoint-8: 1600px;
}

{
    "site": "un.org",
    "source": "https://sitestyleguide.com/un.org",
    "text": "#333333",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Off White",
            "hex": "#E8E8E8",
            "rgb": [
                232,
                232,
                232
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#333333",
            "rgb": [
                51,
                51,
                51
            ]
        },
        {
            "name": "Black",
            "hex": "#080808",
            "rgb": [
                8,
                8,
                8
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#337AB7",
            "rgb": [
                51,
                122,
                183
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#265A88",
            "rgb": [
                38,
                90,
                136
            ]
        },
        {
            "name": "Forest Green",
            "hex": "#419641",
            "rgb": [
                65,
                150,
                65
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#2AABD2",
            "rgb": [
                42,
                171,
                210
            ]
        },
        {
            "name": "Dark Orange",
            "hex": "#EB9316",
            "rgb": [
                235,
                147,
                22
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#C12E2A",
            "rgb": [
                193,
                46,
                42
            ]
        },
        {
            "name": "Corn Silk",
            "hex": "#FCF8E3",
            "rgb": [
                252,
                248,
                227
            ]
        },
        {
            "name": "Honey Dew",
            "hex": "#DFF0D8",
            "rgb": [
                223,
                240,
                216
            ]
        },
        {
            "name": "Deep Steel Blue",
            "hex": "#2E6DA4",
            "rgb": [
                46,
                109,
                164
            ]
        },
        {
            "name": "Sky Blue",
            "hex": "#5BC0DE",
            "rgb": [
                91,
                192,
                222
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#5CB85C",
            "rgb": [
                92,
                184,
                92
            ]
        },
        {
            "name": "Orange",
            "hex": "#F0AD4E",
            "rgb": [
                240,
                173,
                78
            ]
        }
    ],
    "fonts": [
        {
            "name": "Helvetica Neue",
            "stack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
            "weights": [
                400
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Roboto",
            "stack": "'Roboto', sans-serif",
            "weights": [
                100,
                300,
                400,
                500,
                700,
                900
            ],
            "source": "Google Fonts"
        }
    ]
}

Other websites using Helvetica Neue as their main typeface

agoda.com

agoda.com · set in Helvetica Neue
Save
YouGlish

youglish.com · set in Helvetica Neue
Save
NME

nme.com · set in Helvetica Neue
Save
The Design Office of David McGillivray

dmcg.co · set in Helvetica Neue
Save

Websites whose lead colour is closest to un.org’s

Sublime Text

sublimetext.com · 4 days ago
Save
The New Yorker

newyorker.com · 19 hours ago
Save
vk.me

vk.me · 4 days ago
Save
cnnic.cn

cnnic.cn · 1 day ago
Save

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

un.orgstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Off White

Charcoal

Black

Colours

Light Steel Blue

Royal Blue

Forest Green

Deep Sky Blue

Dark Orange

Fire Brick

Corn Silk

Honey Dew

Deep Steel Blue

Sky Blue

Medium Sea Green

Orange

Gradients

Helvetica Neue

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run un.org?

Also set in Helvetica Neue

agoda.com

YouGlish

NME

The Design Office of David McGillivray

Similar colours

Sublime Text

The New Yorker

vk.me

cnnic.cn

Title &
description