What font does Facebook use?

Facebook’s website uses three typefaces: Calibre (headings), served from static.xx.fbcdn.net; Helvetica (body text), a system font; Facebook Sans, served from static.xx.fbcdn.net.

What are Facebook’s brand colours?

The main colours on messenger.com are Deep Dodger Blue (#0A7CFF), Deep Pink (#FF0169), Dark Orange (#FF7B00), Royal Blue (#0866FF), Light Royal Blue (#0070F6) and Medium Orchid (#D300C5).

What colour is Facebook’s text and background?

Body text is #1C1E21 on a #FFFFFF background.

Where is Facebook’s logo from?

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

Is this Facebook’s official style guide?

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

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

Unofficial style guide

Facebookstyle guide

Facebook’s website (messenger.com) sets its headings in Calibre and its body text in Helvetica. Its palette is led by Deep Dodger Blue (#0A7CFF), Deep Pink (#FF0169) and Dark Orange (#FF7B00), with #1C1E21 text on #FFFFFF. Captured from the live site on 2 November 2026.

Website: messenger.com
Typefaces: Calibre, Helvetica, Helvetica Neue
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 2 Nov 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the messenger.com homepage on a desktop screen — Screenshot of messenger.com on a 1440 px desktop screen, 2 Nov 2026.

Screenshot of the messenger.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: Messenger; ● 9 / 60 characters
Meta description: Hang out wherever, whenever! Messenger makes it easy and fun to stay close to your favourite people; ● 99 / 160 characters
Site name: Facebook
og:title: Messenger
og:description: Hang out wherever, whenever! Messenger makes it easy and fun to stay close to your favourite people.
Language: en

In search results

Facebookhttps://www.messenger.com/

Messenger

Hang out wherever, whenever! Messenger makes it easy and fun to stay close to your favourite people

When shared

messenger.com

Messenger

Hang out wherever, whenever! Messenger makes it easy and fun to stay close to your favourite people.

Logo & favicons

Found as: image linked to the homepage. PNG, 80 × 80.

Logo

On white

On black

On Deep Dodger Blue

Favicons

6 found

512 px · WEBP manifest
512 px · WEBP manifest
192 px · WEBP manifest
192 px · WEBP manifest
128 px · ICO icon
SVG manifest

Messenger

Light browser tab

Messenger

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

Colour

Balance

How much each colour is used

White 31.7%
Black 12.9%
Cool Off White 10%
Deep Dodger Blue 8.2%
Near Black 7.5%
Deep Pink 3.6%
Dark Orange 3.4%
Royal Blue 3.2%
Light Royal Blue 2.9%
Medium Orchid 2.9%
Light Dodger Blue 2.7%
Deep Royal Blue 2.5%
Gold 2.3%
Blue Violet 2.3%
Cornflower Blue 2%
Royal Blue 1.8%

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

On white
—

Background, text, border · body, .x12peec7
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.26:1 Fail

On white
21.00:1 AAA

Text, background, graphic · .x1r1mewj, .x42x0ya
Cool Off White

HEX

RGB

HSL

OKLCH

CMYK
3 2 0 8

On text
13.38:1 AAA

On white
1.25:1 Fail

Background, border, text · .x19utpag, hr
Near Black

HEX

RGB

HSL

OKLCH

CMYK
15 9 0 87

On text
—

On white
16.71:1 AAA

Background, text, border · body, h1

Colours

Brand colours and accents, most used first

Deep Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
96 51 0 0

On text
4.25:1 AA large

On white
3.93:1 AA large

Text, background, border · ._5hy2 ._43dh, ._6aup ._3_t3
Deep Pink

HEX

RGB

HSL

OKLCH

CMYK
0 100 59 0

On text
4.34:1 AA large

On white
3.85:1 AA large

Background · .xyvwgi1, .x14antj2
Dark Orange

HEX

RGB

HSL

OKLCH

CMYK
0 52 100 0

On text
6.43:1 AA

On white
2.60:1 Fail

Background · .x1hhnrii, .xdkhaw6
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
97 60 0 0

On text
3.46:1 AA large

On white
4.82:1 AA

Text, background, border · ._askg ._6aup ._3_t3, .xdpqyqb
Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 54 0 4

On text
3.70:1 AA large

On white
4.52:1 AA

Background, border · ._5s4n ._2m_r, ._6aup ._9g9c
Medium Orchid

HEX

RGB

HSL

OKLCH

CMYK
0 100 7 17

On text
3.64:1 AA large

On white
4.59:1 AA

Background, graphic · .xyvwgi1, .x1dfht1i
Light Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
94 45 0 0

On text
4.90:1 AA

On white
3.41:1 AA large

Background, border · .x1e2d8s5, .x13ld82b.x13ld82b
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
63 42 0 40

On text
2.40:1 Fail

On white
6.96:1 AA

Text, background, border · .x1xzmf5g, a
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 16 100 0

On text
11.83:1 AAA

On white
1.41:1 Fail

Background · .xyvwgi1, .x1wciflz
Blue Violet

HEX

RGB

HSL

OKLCH

CMYK
37 80 0 0

On text
3.51:1 AA large

On white
4.76:1 AA

Background, graphic · .x1e2d8s5, ._9gir:after
Cornflower Blue

HEX

RGB

HSL

OKLCH

CMYK
50 33 0 0

On text
7.25:1 AAA

On white
2.30:1 Fail

Background, graphic, text · .x4o00kh, .x5ghfst
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 55 0 12

On text
3.13:1 AA large

On white
5.33:1 AA

Background, text, graphic · .x1e2d8s5, .x13ld82b.x13ld82b

Gradients

linear-gradient(transparent,)
linear-gradient(90deg,transparent 0%, 50%,transparent 100%)
linear-gradient(,)

Dark mode

When the device is set to dark

Dark Slate Grey

#445664
White

#FFFFFF
Near Black

#242526
Royal Blue

#0064E0
Cool Off White

#E4E6EB

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.

Calibre

Aa 100 Aa 600

Calibre

Served from static.xx.fbcdn.net · weights 100, 200, 400, 500, 600 · headings, buttons · shown in a stand-in if you don’t have it

Aa 400

Helvetica

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

Aa 300

Helvetica Neue

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

Aa 400 Aa 700

Facebook Sans

Served from static.xx.fbcdn.net · weights 400, 600, 700 · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Heading 1 14px weight 600

Facebook

Heading 2 13px weight 600

Messenger

Heading 3 13px weight 600

Messenger

Heading 4 12px weight 600

Messenger

Heading 5 12px weight 600

Messenger

Heading 6 12px weight 600

Messenger

Body 12px / 1.34 Helvetica

Hang out wherever, whenever! Messenger makes it easy and fun to stay close to your favourite people

Paragraph 20px / 26px weight 400 · Calibre

Hang out wherever, whenever! Messenger makes it easy and fun to stay close to your favourite people

Button 12px Helvetica

Get started

Link 15px weight 400

Sizes in use

Most common across the site

24pxline 28px · 9 rules
20pxline 24px · 11 rules
17pxline 24px · 10 rules
16pxline 16px · 21 rules
15pxline 20px · 27 rules
14pxline 18px · 19 rules
13pxline 18px · 14 rules
12pxline 16px · 15 rules

Elements

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

Elements

Link

Read our latest news today.

a · #385898

Corner radius

4px · 8×
6px · 5×
50% · 4×
1.5px · 3×
3px · 3×
12px · 2×

Shadows

0 0 0 2px
0 0 0 1px
0 1px 2px

Layout

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

Grid

Breakpoints

655

679

767

768

899

900

1023

1024

On a scale of 0 to 1440 px.

Content widths (max-width)

680 px

640 px

600 px

480 px

400 px

300 px

Notes

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

Notes

● FineThe title is 9 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 Facebook use?: Facebook’s website uses three typefaces: Calibre (headings), served from static.xx.fbcdn.net; Helvetica (body text), a system font; Facebook Sans, served from static.xx.fbcdn.net.
What are Facebook’s brand colours?: The main colours on messenger.com are Deep Dodger Blue (#0A7CFF), Deep Pink (#FF0169), Dark Orange (#FF7B00), Royal Blue (#0866FF), Light Royal Blue (#0070F6) and Medium Orchid (#D300C5).
What colour is Facebook’s text and background?: Body text is #1C1E21 on a #FFFFFF background.
Where is Facebook’s logo from?: The logo shown in this guide was found on messenger.com’s homepage. For official logo files and usage rules, check Facebook’s own brand or press page.
Is this Facebook’s official style guide?: No. SiteStyleGuide made it from messenger.com’s public web pages on 2 November 2026, and isn’t affiliated with Facebook. 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

messenger-com-tokens.css

Download

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

/* messenger.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/messenger.com) */
:root {
  /* Colours */
  --text: #1C1E21;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-cool-off-white: #E4E6EB;
  --colour-near-black: #1C1E21;
  --colour-deep-dodger-blue: #0A7CFF;
  --colour-deep-pink: #FF0169;
  --colour-dark-orange: #FF7B00;
  --colour-royal-blue: #0866FF;
  --colour-light-royal-blue: #0070F6;
  --colour-medium-orchid: #D300C5;
  --colour-light-dodger-blue: #0F8BFF;
  --colour-deep-royal-blue: #385898;
  --colour-gold: #FFD600;
  --colour-blue-violet: #A033FF;
  --colour-cornflower-blue: #80AAFF;
  --colour-royal-blue-2: #0065E0;
  --gradient-1: linear-gradient(transparent,);
  --gradient-2: linear-gradient(90deg,transparent 0%, 50%,transparent 100%);
  --gradient-3: linear-gradient(,);

  /* Typefaces */
  --font-headings: 'Calibre', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'Lucida Grande';
  --font-buttons: 'Calibre', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'Lucida Grande';
  --font-body: 'Helvetica', 'Arial', sans-serif;
  --font-other: 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

  /* Type scale */
  --text-h1: 14px;
  --text-h2: 13px;
  --text-h3: 13px;
  --text-h4: 12px;
  --text-h5: 12px;
  --text-h6: 12px;
  --text-body: 12px;
  --leading-body: 1.34;
  --text-p: 20px;
  --leading-p: 26px;
  --text-button: 12px;
  --text-a: 15px;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 655px;
  --breakpoint-2: 679px;
  --breakpoint-3: 767px;
  --breakpoint-4: 768px;
  --breakpoint-5: 899px;
  --breakpoint-6: 900px;
  --breakpoint-7: 1023px;
  --breakpoint-8: 1024px;
  --max-width-1: 680px;
  --max-width-2: 640px;
  --max-width-3: 600px;
  --max-width-4: 480px;
  --max-width-5: 400px;
  --max-width-6: 300px;
}

{
    "site": "messenger.com",
    "source": "https://sitestyleguide.com/messenger.com",
    "text": "#1C1E21",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Cool Off White",
            "hex": "#E4E6EB",
            "rgb": [
                228,
                230,
                235
            ]
        },
        {
            "name": "Near Black",
            "hex": "#1C1E21",
            "rgb": [
                28,
                30,
                33
            ]
        },
        {
            "name": "Deep Dodger Blue",
            "hex": "#0A7CFF",
            "rgb": [
                10,
                124,
                255
            ]
        },
        {
            "name": "Deep Pink",
            "hex": "#FF0169",
            "rgb": [
                255,
                1,
                105
            ]
        },
        {
            "name": "Dark Orange",
            "hex": "#FF7B00",
            "rgb": [
                255,
                123,
                0
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#0866FF",
            "rgb": [
                8,
                102,
                255
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#0070F6",
            "rgb": [
                0,
                112,
                246
            ]
        },
        {
            "name": "Medium Orchid",
            "hex": "#D300C5",
            "rgb": [
                211,
                0,
                197
            ]
        },
        {
            "name": "Light Dodger Blue",
            "hex": "#0F8BFF",
            "rgb": [
                15,
                139,
                255
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#385898",
            "rgb": [
                56,
                88,
                152
            ]
        },
        {
            "name": "Gold",
            "hex": "#FFD600",
            "rgb": [
                255,
                214,
                0
            ]
        },
        {
            "name": "Blue Violet",
            "hex": "#A033FF",
            "rgb": [
                160,
                51,
                255
            ]
        },
        {
            "name": "Cornflower Blue",
            "hex": "#80AAFF",
            "rgb": [
                128,
                170,
                255
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#0065E0",
            "rgb": [
                0,
                101,
                224
            ]
        }
    ],
    "fonts": [
        {
            "name": "Calibre",
            "stack": "Calibre, Helvetica Neue, Segoe UI, Helvetica, Arial, Lucida Grande, sans-serif",
            "weights": [
                100,
                200,
                400,
                500,
                600
            ],
            "source": "Served from static.xx.fbcdn.net"
        },
        {
            "name": "Helvetica",
            "stack": "Helvetica, Arial, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Helvetica Neue",
            "stack": "Helvetica Neue, Segoe UI, Helvetica, Arial, Lucida Grande, sans-serif",
            "weights": [
                300
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Facebook Sans",
            "stack": "Facebook Sans, Helvetica, Helvetica Neue, Arial, sans-serif",
            "weights": [
                400,
                600,
                700
            ],
            "source": "Served from static.xx.fbcdn.net"
        },
        {
            "name": "Menlo",
            "stack": "Menlo, Consolas, Monaco, monospace",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Segoe UI Historic",
            "stack": "Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif",
            "weights": [
                400,
                700
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using Calibre as their main typeface

Facebook

m.me · set in Calibre
Save
Casper Sleep

casper.com · set in Calibre
Save

Websites whose lead colour is closest to Facebook’s

Dillard's

dillards.com · 5 days ago
Save
Plarium

plarium.com · 2 days ago
Save
S

SORT

sort-office.com · 1 day ago
Save
Waze

waze.com · 3 hours ago
Save

Captured from messenger.com on 2 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by Facebook; this guide describes the public website for reference.

Facebookstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Cool Off White

Near Black

Colours

Deep Dodger Blue

Deep Pink

Dark Orange

Royal Blue

Light Royal Blue

Medium Orchid

Light Dodger Blue

Deep Royal Blue

Gold

Blue Violet

Cornflower Blue

Royal Blue

Gradients

Dark mode

Calibre

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run messenger.com?

Also set in Calibre

Facebook

Casper Sleep

Similar colours

Dillard's

Plarium

SORT

Waze

Title &
description