What font does CDC use?

CDC’s website uses three typefaces: Poppins (headings), self-hosted; Nunito (body text), self-hosted; cdc-fa, self-hosted.

What are CDC’s brand colours?

The main colours on cdc.gov are Light Royal Blue (#005EAA), Steel Blue (#0081A1), Deep Slate Blue (#0B4778), Crimson (#DC3545), Sea Green (#198754) and Gold (#FFC107).

What colour is CDC’s text and background?

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

Where is CDC’s logo from?

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

Is this CDC’s official style guide?

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

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

Unofficial style guide

CDCstyle guide

CDC’s website (cdc.gov) sets its headings in Poppins and its body text in Nunito. Its palette is led by Light Royal Blue (#005EAA), Steel Blue (#0081A1) and Deep Slate Blue (#0B4778), with #1C1D1F text on #FFFFFF. Captured from the live site on 29 October 2026.

Website: cdc.gov
Typefaces: Poppins, Nunito, cdc-fa
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 29 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the cdc.gov homepage on a desktop screen — Screenshot of cdc.gov on a 1440 px desktop screen, 29 Oct 2026.

Screenshot of the cdc.gov 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: Centers for Disease Control and Prevention | CDC; ● 48 / 60 characters
Meta description: Missing; ▲ 0 / 160 characters
og:title: Centers for Disease Control and Prevention
Language: en-us
Theme colour: #0056b3

In search results

CDChttps://www.cdc.gov/index.html

Centers for Disease Control and Prevention | CDC

When shared

No og:image, so no picture

cdc.gov

Centers for Disease Control and Prevention

Logo & favicons

Found as: image in the header. SVG, 228 × 147.

Logo

On white

On black

On Light Royal Blue

Favicons

8 found

700 px · SVG mask-icon
180 px · PNG apple-touch-icon
96 px · PNG manifest
72 px · PNG manifest
48 px · PNG manifest
36 px · PNG manifest
32 px · PNG icon
16 px · PNG icon

Centers for Disease Control and Prevention | CDC

Light browser tab

Centers for Disease Control and Prevention | CDC

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

Colour

Balance

How much each colour is used

White 32.2%
Light Royal Blue 13.6%
Black 9%
Steel Blue 5.7%
Near Black 5.6%
Off White 5.4%
Deep Slate Blue 5.3%
Crimson 4.5%
Sea Green 4.5%
Gold 3.5%
Sky Blue 3.5%
Deep Royal Blue 2.3%
Light Slate Blue 1.6%
Corn Silk 1.4%
Cadet Blue 1%
Midnight Blue 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

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
16.87:1 AAA

On white
—

Text, background, border · --bs-btn-hover-color, --bs-btn-active-color
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.24:1 Fail

On white
21.00:1 AAA

Text, background, graphic · --bs-table-color, --bs-table-striped-color
Near Black

HEX

RGB

HSL

OKLCH

CMYK
10 6 0 88

On text
—

On white
16.87:1 AAA

Text, background, graphic · body, .h1
Off White

HEX

RGB

HSL

OKLCH

CMYK
3 1 0 6

On text
14.23:1 AAA

On white
1.19:1 Fail

Border, background · main section h2, .navbar-nav .nav-item.dropdown .dropdown-menu-list-title

Colours

Brand colours and accents, most used first

Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 45 0 33

On text
2.56:1 Fail

On white
6.60:1 AA

Text, background, border · a, main section.featured-topics .btn
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 20 0 37

On text
3.74:1 AA large

On white
4.51:1 AA

Background, text, border · .btn.btn-outline-primary, header nav.mobile-navbar .mobile-navbar_bottom
Deep Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
91 41 0 53

On text
1.76:1 Fail

On white
9.60:1 AAA

Background, text, graphic · header.menu-container .navbar.navbar .navbar-nav .nav-item button, header.menu-container .navbar.navbar .navbar-nav .nav-item input
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 76 69 14

On text
3.73:1 AA large

On white
4.53:1 AA

Background, text, border · --bs-btn-border-color, --bs-btn-disabled-border-color
Sea Green

HEX

RGB

HSL

OKLCH

CMYK
81 0 38 47

On text
3.72:1 AA large

On white
4.53:1 AA

Background, text, border · --bs-btn-border-color, --bs-btn-disabled-border-color
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 24 97 0

On text
10.35:1 AAA

On white
1.63:1 Fail

Background, text, graphic · --bs-btn-border-color, --bs-btn-disabled-border-color
Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
95 16 0 6

On text
8.61:1 AAA

On white
1.96:1 Fail

Background, text, graphic · --bs-btn-border-color, --bs-btn-disabled-border-color
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 52 0 28

On text
2.45:1 Fail

On white
6.89:1 AA

Background, theme, text · header nav.mobile-navbar .mobile-navbar_bottom, theme-color meta tag
Light Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
100 42 0 46

On text
2.02:1 Fail

On white
8.35:1 AAA

Background · .navbar-nav .nav-item .nav-link.show, .navbar-nav .nav-item:active .nav-link
Corn Silk

HEX

RGB

HSL

OKLCH

CMYK
0 5 20 0

On text
15.23:1 AAA

On white
1.11:1 Fail

Background · .mark, .bg-warning-subtle
Cadet Blue

HEX

RGB

HSL

OKLCH

CMYK
100 18 0 24

On text
5.35:1 AA

On white
3.15:1 AA large

Text · .navbar-nav .nav-item.dropdown .dropdown-menu-list-title a:hover, .navbar-nav .nav-item.dropdown .dropdown-menu-list-title a:hover .cdc-fa-house
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
78 40 0 69

On text
1.24:1 Fail

On white
13.63:1 AAA

Background, text · .cdc-footer__desktop .cdc-footer__nav a[aria-expanded=true], .cdc-footer__desktop .cdc-footer__subnav

Gradients

linear-gradient(90deg,#0057b7 0,#0081a1 100%)
linear-gradient(90deg,#0057b7 0,#0081a1 98%)
linear-gradient(90deg,#00518a 0,#006589 100%)

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.

Poppins

Aa 100 Aa 700

Poppins

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

Aa 300 Aa 700

Nunito

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

Aa 100 Aa 500

cdc-fa

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

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

Type scale

From the site’s CSS · root 18 px

Heading 1 calc(1.369rem + 1.428vw) / 1.25 weight 400 · Poppins

CDC

Heading 2 calc(1.32rem + .84vw) / 1.25 weight 400 · Poppins

Centers for Disease Control and Prevention | CDC

Heading 3 calc(1.275rem + .3vw) / 1.25 weight 400 · Poppins

Centers for Disease Control and Prevention | CDC

Heading 4 1.25rem · 23 px / 1.25 weight 400 · Poppins

Centers for Disease Control and Prevention | CDC

Heading 5 1.25rem · 23 px / 1.25 weight 400 · Poppins

Centers for Disease Control and Prevention | CDC

Heading 6 1rem · 18 px / 1.25 weight 400 · Poppins

Centers for Disease Control and Prevention | CDC

Body 18px / 1.5 weight 400 · Nunito

The quick brown fox jumps over the lazy dog.

Paragraph 16px / 28px

The quick brown fox jumps over the lazy dog.

Small .875em · 16 px

The quick brown fox jumps over the lazy dog.

Link 16px / 2 weight 300 · uppercase · Poppins

Sizes in use

Most common across the site

23px10 rules
22pxline 1.4 · 4 rules
19pxline 2 · 3 rules
18pxline 1.5 · 30 rules
16pxline 28px · 24 rules
15pxline 34px · 11 rules
14pxline 0 · 3 rules
12px2 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

header.menu-container .navbar.navbar .navbar-nav .nav-item button · #0B4778

Link

Read our latest news today.

a · #005EAA

Corner radius

0.375rem · 13×
6px · 6×
1rem · 5×
0.25rem · 4×
0.5rem · 4×

Shadows

0 0 0 .25rem rgba(0,94,170,.25)
0 0 0 .25rem rgba(25,135,84,.25)
0 0 0 .25rem rgba(220,53,69,.25)

Layout

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

Grid

Breakpoints

380

576

768

770

991

992

1200

1400

On a scale of 0 to 1440 px.

Content widths (max-width)

1400 px

1140 px

960 px

720 px

540 px

336 px

Notes

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

Notes

● FineThe title is 48 characters, short enough to show in full in search results.
▲ CheckThere is no meta description, so search engines will pick text from the page.
▲ CheckThere is no og:image, so links shared on social media show no picture.

Questions

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

Questions

What font does CDC use?: CDC’s website uses three typefaces: Poppins (headings), self-hosted; Nunito (body text), self-hosted; cdc-fa, self-hosted.
What are CDC’s brand colours?: The main colours on cdc.gov are Light Royal Blue (#005EAA), Steel Blue (#0081A1), Deep Slate Blue (#0B4778), Crimson (#DC3545), Sea Green (#198754) and Gold (#FFC107).
What colour is CDC’s text and background?: Body text is #1C1D1F on a #FFFFFF background.
Where is CDC’s logo from?: The logo shown in this guide was found on cdc.gov’s homepage. For official logo files and usage rules, check CDC’s own brand or press page.
Is this CDC’s official style guide?: No. SiteStyleGuide made it from cdc.gov’s public web pages on 29 October 2026, and isn’t affiliated with CDC. 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

cdc-gov-tokens.css

Download

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

/* cdc.gov design tokens, from SiteStyleGuide (https://sitestyleguide.com/cdc.gov) */
:root {
  /* Colours */
  --text: #1C1D1F;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-near-black: #1C1D1F;
  --colour-off-white: #E9ECEF;
  --colour-light-royal-blue: #005EAA;
  --colour-steel-blue: #0081A1;
  --colour-deep-slate-blue: #0B4778;
  --colour-crimson: #DC3545;
  --colour-sea-green: #198754;
  --colour-gold: #FFC107;
  --colour-sky-blue: #0DCAF0;
  --colour-deep-royal-blue: #0057B7;
  --colour-light-slate-blue: #00508A;
  --colour-corn-silk: #FFF3CD;
  --colour-cadet-blue: #009EC1;
  --colour-midnight-blue: #112F4E;
  --gradient-1: linear-gradient(90deg,#0057b7 0,#0081a1 100%);
  --gradient-2: linear-gradient(90deg,#0057b7 0,#0081a1 98%);
  --gradient-3: linear-gradient(90deg,#00518a 0,#006589 100%);

  /* Typefaces */
  --font-headings: 'Poppins', sans-serif;
  --font-buttons: 'Poppins', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --font-other: 'cdc-fa';

  /* Type scale */
  --text-h1: calc(1.369rem + 1.428vw);
  --leading-h1: 1.25;
  --text-h2: calc(1.32rem + .84vw);
  --leading-h2: 1.25;
  --text-h3: calc(1.275rem + .3vw);
  --leading-h3: 1.25;
  --text-h4: 1.25rem;
  --leading-h4: 1.25;
  --text-h5: 1.25rem;
  --leading-h5: 1.25;
  --text-h6: 1rem;
  --leading-h6: 1.25;
  --text-body: 18px;
  --leading-body: 1.5;
  --text-p: 16px;
  --leading-p: 28px;
  --text-small: .875em;
  --text-a: 16px;
  --leading-a: 2;

  /* Shape */
  --radius-1: 0.375rem;
  --radius-2: 6px;
  --radius-3: 1rem;
  --radius-4: 0.25rem;
  --radius-5: 0.5rem;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 380px;
  --breakpoint-2: 576px;
  --breakpoint-3: 768px;
  --breakpoint-4: 770px;
  --breakpoint-5: 991px;
  --breakpoint-6: 992px;
  --breakpoint-7: 1200px;
  --breakpoint-8: 1400px;
  --max-width-1: 1400px;
  --max-width-2: 1140px;
  --max-width-3: 960px;
  --max-width-4: 720px;
  --max-width-5: 540px;
  --max-width-6: 336px;
}

{
    "site": "cdc.gov",
    "source": "https://sitestyleguide.com/cdc.gov",
    "text": "#1C1D1F",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Near Black",
            "hex": "#1C1D1F",
            "rgb": [
                28,
                29,
                31
            ]
        },
        {
            "name": "Off White",
            "hex": "#E9ECEF",
            "rgb": [
                233,
                236,
                239
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#005EAA",
            "rgb": [
                0,
                94,
                170
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#0081A1",
            "rgb": [
                0,
                129,
                161
            ]
        },
        {
            "name": "Deep Slate Blue",
            "hex": "#0B4778",
            "rgb": [
                11,
                71,
                120
            ]
        },
        {
            "name": "Crimson",
            "hex": "#DC3545",
            "rgb": [
                220,
                53,
                69
            ]
        },
        {
            "name": "Sea Green",
            "hex": "#198754",
            "rgb": [
                25,
                135,
                84
            ]
        },
        {
            "name": "Gold",
            "hex": "#FFC107",
            "rgb": [
                255,
                193,
                7
            ]
        },
        {
            "name": "Sky Blue",
            "hex": "#0DCAF0",
            "rgb": [
                13,
                202,
                240
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#0057B7",
            "rgb": [
                0,
                87,
                183
            ]
        },
        {
            "name": "Light Slate Blue",
            "hex": "#00508A",
            "rgb": [
                0,
                80,
                138
            ]
        },
        {
            "name": "Corn Silk",
            "hex": "#FFF3CD",
            "rgb": [
                255,
                243,
                205
            ]
        },
        {
            "name": "Cadet Blue",
            "hex": "#009EC1",
            "rgb": [
                0,
                158,
                193
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#112F4E",
            "rgb": [
                17,
                47,
                78
            ]
        }
    ],
    "fonts": [
        {
            "name": "Poppins",
            "stack": "'Poppins', sans-serif",
            "weights": [
                100,
                300,
                400,
                500,
                600,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Nunito",
            "stack": "Nunito, sans-serif",
            "weights": [
                300,
                400,
                500,
                600,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "cdc-fa",
            "stack": "cdc-fa",
            "weights": [
                100,
                300,
                400,
                500
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using Poppins as their main typeface

SiteGround

siteground.com · set in Poppins
Save
NCI

cancer.gov · set in Poppins
Save
BuildYourBzns

buildyourbzns.com · set in Poppins
Save
Universidad Martín Lutero

uml.edu.ni · set in Poppins
Save

Websites whose lead colour is closest to CDC’s

Go

go.com · 5 days ago
Save
US EPA

epa.gov · 8 hours ago
Save
DOL

dol.gov · 5 days ago
Save
Chase.com

chase.com · 14 hours ago
Save

Captured from cdc.gov on 29 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by CDC; this guide describes the public website for reference.

CDCstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Near Black

Off White

Colours

Light Royal Blue

Steel Blue

Deep Slate Blue

Crimson

Sea Green

Gold

Sky Blue

Deep Royal Blue

Light Slate Blue

Corn Silk

Cadet Blue

Midnight Blue

Gradients

Poppins

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run cdc.gov?

Also set in Poppins

SiteGround

NCI

BuildYourBzns

Universidad Martín Lutero

Similar colours

Go

US EPA

DOL

Chase.com

Title &
description