What font does Intercom use?

Intercom’s website uses three typefaces: Hiragino Kaku Gothic ProN (headings and body text), a system font; Inter, self-hosted; MediumLL, self-hosted.

What are Intercom’s brand colours?

The main colours on intercom.com are Medium Blue (#0007CB), Orange Red (#FF5600), Fire Brick (#C41C1C), Medium Sea Green (#37B54A), Navy (#000F83) and Light Royal Blue (#004BFE).

What colour is Intercom’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is Intercom’s logo from?

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

Is this Intercom’s official style guide?

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

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

Unofficial style guide

Intercomstyle guide

Intercom’s website (intercom.com) uses Hiragino Kaku Gothic ProN for its headings and body text. Its palette is led by Medium Blue (#0007CB), Orange Red (#FF5600) and Fire Brick (#C41C1C), with #000000 text on #FFFFFF. Captured from the live site on 24 October 2026.

Website: intercom.com
Typefaces: Hiragino Kaku Gothic ProN, Hiragino Mincho ProN, Inter
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 24 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the intercom.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: Intercom | A complete system for human and AI customer service; ▲ 62 / 60 characters
Meta description: Intercom is the only helpdesk with a natively integrated AI Agent, Fin, meaning every customer conversation improves the next one, enabling perfect experiences that were never possible before.; ▲ 192 / 160 characters
Site name: Intercom
og:title: Intercom | A complete system for human and AI customer service
og:description: Intercom is the only helpdesk with a natively integrated AI Agent, Fin, meaning every customer conversation improves the next one, enabling perfect experiences that were never possible before.
Language: en
Theme colour: #050505

In search results

Intercomhttps://www.intercom.com/

Intercom | A complete system for human and AI customer service

Intercom is the only helpdesk with a natively integrated AI Agent, Fin, meaning every customer conversation improves the next one, enabling perfect experiences t…

When shared

intercom.com

Intercom | A complete system for human and AI customer service

Intercom is the only helpdesk with a natively integrated AI Agent, Fin, meaning every customer conversation i…

Logo & favicons

Found as: schema.org logo. PNG, 232 × 228.

Logo

On white

On black

On Medium Blue

Favicons

3 found

48 px · ICO icon
32 px · PNG icon
16 px · PNG icon

Intercom | A complete system for human and AI customer service

Light browser tab

Intercom | A complete system for human and AI customer service

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

Deep Black 36.3%
White 33.7%
Warm Off White 8%
Medium Blue 7.9%
Orange Red 3.9%
Light Black 2.2%
Fire Brick 1.9%
Medium Sea Green 1.1%
Navy 0.9%
Light Royal Blue 0.7%
Light Steel Blue 0.6%
Deep Pink 0.6%
Light Sky Blue 0.6%
Light Lime Green 0.6%
Deep Lime Green 0.5%
Deep Royal Blue 0.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

Deep Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background, border · .bg-\[color-mix$in_oklab\,var\(--nav-fg\,var\(--color-off-black$\)_15\%\,trans, theme-color meta tag
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
21.00:1 AAA

On white
—

Background, text, graphic · --color-white, .bg-\[color-mix$in_oklab\,var\(--nav-panel-bg\,\#fff$_95\%\,transparent\)\]
Warm Off White

HEX

RGB

HSL

OKLCH

CMYK
0 1 3 5

On text
18.15:1 AAA

On white
1.16:1 Fail

Background, border · --color-chalk, --color-cream
Light Black

HEX

RGB

HSL

OKLCH

CMYK
91 61 0 91

On text
1.05:1 Fail

On white
19.92:1 AAA

Background · --color-navy, .bg-\[\#020917\]

Colours

Brand colours and accents, most used first

Medium Blue

HEX

RGB

HSL

OKLCH

CMYK
100 97 0 20

On text
1.89:1 Fail

On white
11.09:1 AAA

Background, text, graphic · --color-helpdesk, --color-blueprint-core-blue
Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 66 100 0

On text
6.58:1 AA

On white
3.19:1 AA large

Background, graphic, text · --color-orange, --color-fin
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 86 86 23

On text
3.53:1 AA large

On white
5.95:1 AA

Border, text · --color-error, .text-error
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
70 0 59 29

On text
7.87:1 AAA

On white
2.67:1 Fail

Background, text · --color-voice-accent-green, .bg-voice-accent-green
Navy

HEX

RGB

HSL

OKLCH

CMYK
100 89 0 49

On text
1.40:1 Fail

On white
15.04:1 AAA

Text · --color-blueprint-dark-blue, .text-blueprint-dark-blue
Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 70 0 0

On text
3.44:1 AA large

On white
6.11:1 AA

Text · --color-blueprint-rich-blue, .text-blueprint-rich-blue
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
20 10 0 0

On text
16.25:1 AAA

On white
1.29:1 Fail

Border · --color-blueprint-light-blue, .border-blueprint-light-blue
Deep Pink

HEX

RGB

HSL

OKLCH

CMYK
0 87 60 0

On text
5.65:1 AA

On white
3.71:1 AA large

Background · .before\:bg-report-pink:before, --color-report-pink
Light Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
60 29 0 0

On text
9.61:1 AAA

On white
2.19:1 Fail

Background · .before\:bg-report-blue:before, --color-report-blue
Light Lime Green

HEX

RGB

HSL

OKLCH

CMYK
95 0 64 13

On text
11.69:1 AAA

On white
1.80:1 Fail

Background · .before\:bg-report-green:before, --color-report-green
Deep Lime Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 100 15

On text
11.03:1 AAA

On white
1.90:1 Fail

Used · --color-green
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
97 41 0 42

On text
2.84:1 Fail

On white
7.40:1 AAA

Used · --color-sales

Gradients

linear-gradient(initial)
radial-gradient(currentColor 1px,transparent 1px)
radial-gradient(color-mix(in oklab,currentColor 10%, transparent) 1px,transparent 1px)

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.

Hiragino Kaku Gothic ProN

Aa 400

Hiragino Kaku Gothic ProN

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

Aa 300

Hiragino Mincho ProN

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

Aa 100 Aa 900

Inter

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

Aa 300 Aa 700

MediumLL

Self-hosted · weights 300, 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 2 2rem · 32 px / 1 weight 300 · Hiragino Mincho ProN

Intercom | A complete system for human and AI c…

Heading 3 / 1 weight initial · Hiragino Kaku Gothic ProN

Intercom | A complete system for human and AI c…

Heading 4 / initial weight initial · Hiragino Kaku Gothic ProN

Intercom | A complete system for human and AI c…

Paragraph .875rem · 14 px / initial weight initial

Intercom is the only helpdesk with a natively integrated AI Agent, Fin, meaning every customer conversation improves the next one, enabling…

Small 80%

Intercom is the only helpdesk with a natively integrated AI Agent, Fin, meaning every customer conversation improves the next one, enabling…

Sizes in use

Most common across the site

24pxline initial · 3 rules
20pxline initial · 6 rules
18pxline initial · 5 rules
16pxline initial · 10 rules
14pxline initial · 22 rules
12pxline initial · 13 rules
11pxline 1 · 8 rules
10pxline initial · 2 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

3.40282e38px · 6×
.25rem · 5×
.375rem · 4×
.125rem · 3×
1px · 1×

Shadows

0 0 #0000, 0 0 #0000, 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

384

640

768

1024

1280

1500

1536

1920

On a scale of 0 to 1920 px.

Content widths (max-width)

1920 px

768 px

640 px

568 px

384 px

348 px

Notes

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

Notes

▲ CheckThe title is 62 characters. Google usually cuts titles near 60, so the end may not show in results.
▲ CheckThe description is 192 characters. Search results usually show about 160.

Questions

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

Questions

What font does Intercom use?: Intercom’s website uses three typefaces: Hiragino Kaku Gothic ProN (headings and body text), a system font; Inter, self-hosted; MediumLL, self-hosted.
What are Intercom’s brand colours?: The main colours on intercom.com are Medium Blue (#0007CB), Orange Red (#FF5600), Fire Brick (#C41C1C), Medium Sea Green (#37B54A), Navy (#000F83) and Light Royal Blue (#004BFE).
What colour is Intercom’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is Intercom’s logo from?: The logo shown in this guide was found on intercom.com’s homepage. For official logo files and usage rules, check Intercom’s own brand or press page.
Is this Intercom’s official style guide?: No. SiteStyleGuide made it from intercom.com’s public web pages on 24 October 2026, and isn’t affiliated with Intercom. 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

intercom-com-tokens.css

Download

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

/* intercom.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/intercom.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-deep-black: #000000;
  --colour-white: #FFFFFF;
  --colour-warm-off-white: #F1EEE9;
  --colour-light-black: #020917;
  --colour-medium-blue: #0007CB;
  --colour-orange-red: #FF5600;
  --colour-fire-brick: #C41C1C;
  --colour-medium-sea-green: #37B54A;
  --colour-navy: #000F83;
  --colour-light-royal-blue: #004BFE;
  --colour-light-steel-blue: #CDE5FF;
  --colour-deep-pink: #FF2067;
  --colour-light-sky-blue: #65B5FF;
  --colour-light-lime-green: #0BDF50;
  --colour-deep-lime-green: #00DA00;
  --colour-deep-royal-blue: #055895;
  --gradient-1: linear-gradient(initial);
  --gradient-2: radial-gradient(currentColor 1px,transparent 1px);
  --gradient-3: radial-gradient(color-mix(in oklab,currentColor 10%, transparent) 1px,transparent 1px);

  /* Typefaces */
  --font-headings: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', 'Noto Sans JP';
  --font-body: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', 'Noto Sans JP';
  --font-other: 'Inter', 'Inter Fallback';

  /* Type scale */
  --text-h2: 2rem;
  --leading-h2: 1;
  --text-p: .875rem;
  --leading-p: initial;
  --text-small: 80%;

  /* Shape */
  --radius-1: 3.40282e38px;
  --radius-2: .25rem;
  --radius-3: .375rem;
  --radius-4: .125rem;
  --radius-5: 1px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 384px;
  --breakpoint-2: 640px;
  --breakpoint-3: 768px;
  --breakpoint-4: 1024px;
  --breakpoint-5: 1280px;
  --breakpoint-6: 1500px;
  --breakpoint-7: 1536px;
  --breakpoint-8: 1920px;
  --max-width-1: 1920px;
  --max-width-2: 768px;
  --max-width-3: 640px;
  --max-width-4: 568px;
  --max-width-5: 384px;
  --max-width-6: 348px;
}

{
    "site": "intercom.com",
    "source": "https://sitestyleguide.com/intercom.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Deep Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Warm Off White",
            "hex": "#F1EEE9",
            "rgb": [
                241,
                238,
                233
            ]
        },
        {
            "name": "Light Black",
            "hex": "#020917",
            "rgb": [
                2,
                9,
                23
            ]
        },
        {
            "name": "Medium Blue",
            "hex": "#0007CB",
            "rgb": [
                0,
                7,
                203
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#FF5600",
            "rgb": [
                255,
                86,
                0
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#C41C1C",
            "rgb": [
                196,
                28,
                28
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#37B54A",
            "rgb": [
                55,
                181,
                74
            ]
        },
        {
            "name": "Navy",
            "hex": "#000F83",
            "rgb": [
                0,
                15,
                131
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#004BFE",
            "rgb": [
                0,
                75,
                254
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#CDE5FF",
            "rgb": [
                205,
                229,
                255
            ]
        },
        {
            "name": "Deep Pink",
            "hex": "#FF2067",
            "rgb": [
                255,
                32,
                103
            ]
        },
        {
            "name": "Light Sky Blue",
            "hex": "#65B5FF",
            "rgb": [
                101,
                181,
                255
            ]
        },
        {
            "name": "Light Lime Green",
            "hex": "#0BDF50",
            "rgb": [
                11,
                223,
                80
            ]
        },
        {
            "name": "Deep Lime Green",
            "hex": "#00DA00",
            "rgb": [
                0,
                218,
                0
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#055895",
            "rgb": [
                5,
                88,
                149
            ]
        }
    ],
    "fonts": [
        {
            "name": "Hiragino Kaku Gothic ProN",
            "stack": ", \"Hiragino Kaku Gothic ProN\", \"Hiragino Sans\", \"Yu Gothic UI\", \"Yu Gothic\", Meiryo, \"Noto Sans JP\", ui-sans-serif, system-ui, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Hiragino Mincho ProN",
            "stack": ", \"Hiragino Mincho ProN\", \"Yu Mincho\", \"Noto Serif JP\", ui-serif, Georgia, serif",
            "weights": [
                300
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Inter",
            "stack": "Inter, Inter Fallback",
            "weights": [
                100,
                900
            ],
            "source": "Self-hosted"
        },
        {
            "name": "MediumLL",
            "stack": "MediumLL, MediumLL Fallback",
            "weights": [
                300,
                400,
                600,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "IvoryLL",
            "stack": "IvoryLL, IvoryLL Fallback",
            "weights": [
                300
            ],
            "source": "Self-hosted"
        },
        {
            "name": "DmMono",
            "stack": "DmMono, DmMono Fallback",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using Hiragino Kaku Gothic ProN as their main typeface

So-net(ソネット)

so-net.ne.jp · set in Hiragino Kaku Gothic ProN
Save
エキテン byGMO

ekiten.jp · set in Hiragino Kaku Gothic ProN
Save

Websites whose lead colour is closest to Intercom’s

The Motley Fool

fool.com · 4 days ago
Save
Eclipse Foundation

eclipse.org · 5 days ago
Save
craigslist

craigslist.org · 4 days ago
Save
ABC

abc.com · 2 days ago
Save

Captured from intercom.com on 24 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Intercom; this guide describes the public website for reference.

Intercomstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Deep Black

White

Warm Off White

Light Black

Colours

Medium Blue

Orange Red

Fire Brick

Medium Sea Green

Navy

Light Royal Blue

Light Steel Blue

Deep Pink

Light Sky Blue

Light Lime Green

Deep Lime Green

Deep Royal Blue

Gradients

Hiragino Kaku Gothic ProN

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run intercom.com?

Also set in Hiragino Kaku Gothic ProN

So-net(ソネット)

エキテン byGMO

Similar colours

The Motley Fool

Eclipse Foundation

craigslist

ABC

Title &
description