What font does ABC use?

ABC’s website uses two typefaces: proxima-nova (headings), a system font; abc-gt-america-standard-regular (body text), self-hosted.

What are ABC’s brand colours?

The main colours on abc.com are Midnight Blue (#26269C), Gold (#FFD800), Deep Red (#D70100), Orange (#FFA500), Light Royal Blue (#0066CC) and Light Red (#F20000).

What colour is ABC’s text and background?

Body text is #FFFFFF on a #000000 background.

Where is ABC’s logo from?

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

Is this ABC’s official style guide?

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

ABC Style Guide: Colours, Fonts & Logo

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: ABC Network - ABC.com; ● 21 / 60 characters
Meta description: Watch the ABC Shows online at abc.com. Get exclusive videos and free episodes.; ● 78 / 160 characters
Site name: ABC
og:title: ABC Network - ABC.com
og:description: Watch the ABC Shows online at abc.com. Get exclusive videos and free episodes.
Language: en

In search results

ABChttps://abc.com/

ABC Network - ABC.com

Watch the ABC Shows online at abc.com. Get exclusive videos and free episodes.

When shared

abc.com

ABC Network - ABC.com

Watch the ABC Shows online at abc.com. Get exclusive videos and free episodes.

Back to top ↑

Logo & favicons

Found as: image in the header. PNG, 1250 × 1250.

Logo

On white

On black

On Midnight Blue

Favicons

1 found

256 px · ICO apple-touch-icon

ABC Network - ABC.com

Light browser tab

ABC Network - ABC.com

Dark browser tab

Back to top ↑

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

Colour

Balance

How much each colour is used

White 45.5%
Black 17.2%
Near Black 15.9%
Light Grey 5.1%
Midnight Blue 3.6%
Gold 3.4%
Deep Red 2.9%
Orange 2.4%
Light Royal Blue 1%
Light Red 0.8%
Deep Royal Blue 0.8%
Light Pink 0.5%
Pale Green 0.5%
Dark Slate Blue 0.4%

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
—

On white
—

Text, background, border · inline style on <circle>, body
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
21.00:1 AAA

On white
21.00:1 AAA

Background, text, graphic · .hero__wrapper .tile--hero .Image__Wrapper picture:after, .abc-com .page-background:before
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 90

On text
17.58:1 AAA

On white
17.58:1 AAA

Background, text, border · .bp-mobile .MarketingBanner .Image__Wrapper picture:after, .Button__tertiary
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
1 1 0 19

On text
1.61:1 Fail

On white
1.61:1 Fail

Text, graphic, border · .Button--alt.Button--disabled, .lightbox__header--dark .lightboxSubTitle

Colours

Brand colours and accents, most used first

Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
76 76 0 39

On text
11.41:1 AAA

On white
11.41:1 AAA

Background · .freeform-com .Button__primary, .freeform-com .StaticHtml .button
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 15 100 0

On text
1.39:1 Fail

On white
1.39:1 Fail

Background · .national-geographic .Button__primary, .national-geographic .StaticHtml .button
Deep Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 16

On text
5.39:1 AA

On white
5.39:1 AA

Background, border · .fx-com .Button__primary, .fx-com .StaticHtml .button
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 35 100 0

On text
1.97:1 Fail

On white
1.97:1 Fail

Text · freeform-com .luke .tile__details-title, .luke .social-links-bar__container__header
Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 50 0 20

On text
5.57:1 AA

On white
5.57:1 AA

Background, text, border · .freeform-com .MyEmptyListCta__link .no-touch:hover:not(.Button--disabled):not(., .Input--range::-moz-range-progress
Light Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 5

On text
4.40:1 AA large

On white
4.40:1 AA large

Background, text · .fx-com .Button__primary:active, .fx-com .MyEmptyListCta__link .no-touch:hover:not(.Button--disabled):not(.Button
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
94 60 0 26

On text
7.57:1 AAA

On white
7.57:1 AAA

Text · .modal__title, .modal__text
Light Pink

HEX

RGB

HSL

OKLCH

CMYK
0 28 28 0

On text
1.65:1 Fail

On white
1.65:1 Fail

Background · .Input--error::-moz-selection, .Input--error::selection
Pale Green

HEX

RGB

HSL

OKLCH

CMYK
28 0 27 0

On text
1.16:1 Fail

On white
1.16:1 Fail

Background · .Input--success::-moz-selection, .Input--success::selection
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
100 50 0 40

On text
8.31:1 AAA

On white
8.31:1 AAA

Text · .no-touch .Button--alt:hover, .AnchorLink:hover

Gradients

linear-gradient(336deg,rgba(0,0,0,.45),rgba(0,0,0,.05) 35%)

Back to top ↑

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.

proxima-nova

Aa 400 Aa 900

proxima-nova

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

Aa 400 Aa 500

natgeo-geograph

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

Aa 200 Aa 700

abc-gt-america-standard-regular

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

Aa 400 Aa 500

futura-demi

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

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

Type scale

From the site’s CSS

Heading 1 20px / 1.4 weight 200 · uppercase

ABC

Heading 2 20px / 1.2 weight 300

ABC Network - ABC.com

Paragraph 16px / 27px weight 300

Watch the ABC Shows online at abc.com. Get exclusive videos and free episodes.

Small 80%

Watch the ABC Shows online at abc.com. Get exclusive videos and free episodes.

Button 100% / 1.15 none

Get started

Link 15px / 21px weight 500 · natgeo-geograph

Sizes in use

Most common across the site

22pxline 1.18 · 15 rules
18pxline 20px · 15 rules
17pxline 1.24 · 25 rules
16pxline 1.25 · 45 rules
15pxline 1.33 · 55 rules
14pxline 1.29 · 25 rules
13pxline 1.23 · 13 rules
12pxline 16px · 25 rules

Back to top ↑

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

.fx-com .Button__primary · #D70100

Corner radius

4px · 21×
2px · 6×
5px · 6×
24px · 6×
50% · 5×
50px · 4×

Shadows

0 0 0 1px #cbccce
0 1px 4px rgba(0,0,0,.24)
0 2px 4px 0 rgba(0,0,0,.3)
0 0 4px 0 rgba(0,0,0,.2)

Back to top ↑

Layout

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

Grid

Breakpoints

340

478

480

586

768

900

1023

1024

On a scale of 0 to 1440 px.

Content widths (max-width)

1440 px

1280 px

688 px

600 px

426 px

414 px

Back to top ↑

Notes

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

Notes

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

Back to top ↑

Questions

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

Questions

What font does ABC use?: ABC’s website uses two typefaces: proxima-nova (headings), a system font; abc-gt-america-standard-regular (body text), self-hosted.
What are ABC’s brand colours?: The main colours on abc.com are Midnight Blue (#26269C), Gold (#FFD800), Deep Red (#D70100), Orange (#FFA500), Light Royal Blue (#0066CC) and Light Red (#F20000).
What colour is ABC’s text and background?: Body text is #FFFFFF on a #000000 background.
Where is ABC’s logo from?: The logo shown in this guide was found on abc.com’s homepage. For official logo files and usage rules, check ABC’s own brand or press page.
Is this ABC’s official style guide?: No. SiteStyleGuide made it from abc.com’s public web pages on 1 November 2026, and isn’t affiliated with ABC. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

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

abc-com-tokens.css

Download

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

/* abc.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/abc.com) */
:root {
  /* Colours */
  --text: #FFFFFF;
  --background: #000000;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-near-black: #191919;
  --colour-light-grey: #CBCCCE;
  --colour-midnight-blue: #26269C;
  --colour-gold: #FFD800;
  --colour-deep-red: #D70100;
  --colour-orange: #FFA500;
  --colour-light-royal-blue: #0066CC;
  --colour-light-red: #F20000;
  --colour-deep-royal-blue: #0B4CBC;
  --colour-light-pink: #FFB7B7;
  --colour-pale-green: #B7FFBA;
  --colour-dark-slate-blue: #004D9A;
  --gradient-3: linear-gradient(336deg,rgba(0,0,0,.45),rgba(0,0,0,.05) 35%);

  /* Typefaces */
  --font-headings: 'proxima-nova';
  --font-buttons: 'proxima-nova';
  --font-body: 'abc-gt-america-standard-regular';

  /* Type scale */
  --text-h1: 20px;
  --leading-h1: 1.4;
  --text-h2: 20px;
  --leading-h2: 1.2;
  --text-p: 16px;
  --leading-p: 27px;
  --text-small: 80%;
  --text-button: 100%;
  --leading-button: 1.15;
  --text-a: 15px;
  --leading-a: 21px;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 340px;
  --breakpoint-2: 478px;
  --breakpoint-3: 480px;
  --breakpoint-4: 586px;
  --breakpoint-5: 768px;
  --breakpoint-6: 900px;
  --breakpoint-7: 1023px;
  --breakpoint-8: 1024px;
  --max-width-1: 1440px;
  --max-width-2: 1280px;
  --max-width-3: 688px;
  --max-width-4: 600px;
  --max-width-5: 426px;
  --max-width-6: 414px;
}

{
    "site": "abc.com",
    "source": "https://sitestyleguide.com/abc.com",
    "text": "#FFFFFF",
    "background": "#000000",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Near Black",
            "hex": "#191919",
            "rgb": [
                25,
                25,
                25
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#CBCCCE",
            "rgb": [
                203,
                204,
                206
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#26269C",
            "rgb": [
                38,
                38,
                156
            ]
        },
        {
            "name": "Gold",
            "hex": "#FFD800",
            "rgb": [
                255,
                216,
                0
            ]
        },
        {
            "name": "Deep Red",
            "hex": "#D70100",
            "rgb": [
                215,
                1,
                0
            ]
        },
        {
            "name": "Orange",
            "hex": "#FFA500",
            "rgb": [
                255,
                165,
                0
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#0066CC",
            "rgb": [
                0,
                102,
                204
            ]
        },
        {
            "name": "Light Red",
            "hex": "#F20000",
            "rgb": [
                242,
                0,
                0
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#0B4CBC",
            "rgb": [
                11,
                76,
                188
            ]
        },
        {
            "name": "Light Pink",
            "hex": "#FFB7B7",
            "rgb": [
                255,
                183,
                183
            ]
        },
        {
            "name": "Pale Green",
            "hex": "#B7FFBA",
            "rgb": [
                183,
                255,
                186
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#004D9A",
            "rgb": [
                0,
                77,
                154
            ]
        }
    ],
    "fonts": [
        {
            "name": "proxima-nova",
            "stack": "proxima-nova",
            "weights": [
                400,
                500,
                600,
                900
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "natgeo-geograph",
            "stack": "natgeo-geograph",
            "weights": [
                400,
                500
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "abc-gt-america-standard-regular",
            "stack": "abc-gt-america-standard-regular",
            "weights": [
                200,
                300,
                400,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "futura-demi",
            "stack": "futura-demi",
            "weights": [
                400,
                500
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "futura-medium",
            "stack": "futura-medium",
            "weights": [
                400,
                500
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "abc-gt-america-standard-medium",
            "stack": "abc-gt-america-standard-medium",
            "weights": [
                400,
                500
            ],
            "source": "Self-hosted"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run abc.com?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

<a href="https://sitestyleguide.com/abc.com" title="ABC style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

ABCstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Near Black

Light Grey

Colours

Midnight Blue

Gold

Deep Red

Orange

Light Royal Blue

Light Red

Deep Royal Blue

Light Pink

Pale Green

Dark Slate Blue

Gradients

proxima-nova

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

PR Newswire

Houzz

TechSmith

The Motley Fool

dw.com

Yahoo! JAPAN

Eclipse Foundation

ABCstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Near Black

Light Grey

Colours

Midnight Blue

Gold

Deep Red

Orange

Light Royal Blue

Light Red

Deep Royal Blue

Light Pink

Pale Green

Dark Slate Blue

Gradients

proxima-nova

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run abc.com?

Also set in proxima-nova

PR Newswire

Houzz

TechSmith

Similar colours

The Motley Fool

dw.com

Yahoo! JAPAN

Eclipse Foundation

Title &
description