What font does US EPA use?

US EPA’s website uses three typefaces: Merriweather Web (headings), self-hosted; Source Sans Pro Web (body text), self-hosted; Roboto Mono Web, self-hosted.

What are US EPA’s brand colours?

The main colours on epa.gov are Deep Royal Blue (#005EA2), Dark Slate Blue (#1A4480), Midnight Blue (#162E51), Golden Rod (#FFBE2E), Deep Sky Blue (#00BDE3) and Fire Brick (#B50909).

What colour is US EPA’s text and background?

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

Where is US EPA’s logo from?

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

Is this US EPA’s official style guide?

No. SiteStyleGuide made it from epa.gov’s public web pages on 4 November 2026, and isn’t affiliated with US EPA. Members can refresh a guide after 90 days to pick up changes.

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

Unofficial style guide

US EPAstyle guide

US EPA’s website (epa.gov) sets its headings in Merriweather Web and its body text in Source Sans Pro Web. Its palette is led by Deep Royal Blue (#005EA2), Dark Slate Blue (#1A4480) and Midnight Blue (#162E51), with #1B1B1B text on #FFFFFF. Captured from the live site on 4 November 2026.

Website: epa.gov
Typefaces: Merriweather Web, Source Sans Pro Web, Roboto Mono Web
Palette: 4 neutrals, 12 colours, 1 gradient
Captured: 4 Nov 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the epa.gov homepage on a desktop screen — Screenshot of epa.gov on a 1440 px desktop screen, 4 Nov 2026.

Screenshot of the epa.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: U.S. Environmental Protection Agency | US EPA; ● 45 / 60 characters
Meta description: Website of the U.S. Environmental Protection Agency (EPA). EPA's mission is to protect human health and the environment.; ● 120 / 160 characters
Site name: US EPA
og:title: U.S. Environmental Protection Agency | US EPA
og:description: Website of the U.S. Environmental Protection Agency (EPA). EPA's mission is to protect human health and the environment.
Language: en

In search results

US EPAhttps://www.epa.gov/

U.S. Environmental Protection Agency | US EPA

Website of the U.S. Environmental Protection Agency (EPA). EPA's mission is to protect human health and the environment.

When shared

epa.gov

U.S. Environmental Protection Agency | US EPA

Website of the U.S. Environmental Protection Agency (EPA). EPA's mission is to protect human health and the e…

Logo & favicons

Found as: SVG in the header. SVG, 454 × 155.

Logo

On white

On black

On Deep Royal Blue

Favicons

8 found

196 px · PNG apple-touch-icon-precomposed
180 px · PNG apple-touch-icon-precomposed
152 px · PNG apple-touch-icon-precomposed
144 px · PNG apple-touch-icon-precomposed
120 px · PNG apple-touch-icon-precomposed
114 px · PNG apple-touch-icon-precomposed
72 px · PNG apple-touch-icon-precomposed
32 px · ICO icon

U.S. Environmental Protection Agency | US EPA

Light browser tab

U.S. Environmental Protection Agency | US EPA

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

Colour

Balance

How much each colour is used

White 20.4%
Near Black 16.7%
Deep Royal Blue 13.4%
Dark Slate Blue 8.8%
Off White 8.7%
Midnight Blue 7.3%
Light Grey 5.6%
Golden Rod 2.9%
Deep Sky Blue 2.7%
Fire Brick 2.7%
Rebecca Purple 2.6%
Light Royal Blue 1.9%
Red 1.9%
Khaki 1.5%
Cadet Blue 1.5%
Sky Blue 1.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
17.22:1 AAA

On white
—

Text, background, border · body, .box--rss>.box__title
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 89

On text
—

On white
17.22:1 AAA

Text, background, border · body, .usa-process-list__heading
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 6

On text
15.11:1 AAA

On white
1.14:1 Fail

Background, text, border · .menu--sidenav .menu__link.is-active, .menu--main .menu__subnav
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 21

On text
10.40:1 AAA

On white
1.66:1 Fail

Background, border, text · .usa-button:disabled, .usa-button:disabled.usa-button--hover

Colours

Brand colours and accents, most used first

Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 42 0 36

On text
2.56:1 Fail

On white
6.72:1 AA

Text, background, border · .usa-sidenav .usa-current::after, .usa-dark-background .box--news>.box__title
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
80 47 0 50

On text
1.79:1 Fail

On white
9.62:1 AAA

Text, background, border · .box--news>.box__title, .button--dark
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
73 43 0 68

On text
1.27:1 Fail

On white
13.60:1 AAA

Text, background, border · .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--unstyled.usa-button--active
Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 25 82 0

On text
10.38:1 AAA

On white
1.66:1 Fail

Background, border, text · .box--highlight>.box__title, .document__private-icon
Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
100 17 0 11

On text
7.70:1 AAA

On white
2.24:1 Fail

Text, border, background · .usa-hero__heading, .usa-section--dark h1
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 95 95 29

On text
2.47:1 Fail

On white
6.98:1 AA

Text, border, background · .usa-button--secondary:hover, .button--danger:hover
Rebecca Purple

HEX

RGB

HSL

OKLCH

CMYK
41 73 0 44

On text
1.69:1 Fail

On white
10.18:1 AAA

Text · .block--web-area-menu .block__title a:visited, .usa-banner__button:visited
Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 63 0 15

On text
2.57:1 Fail

On white
6.69:1 AA

Background, border, text · .usa-date-picker__calendar__date--selected, .usa-date-picker__calendar__date--selected:not([disabled])
Red

HEX

RGB

HSL

OKLCH

CMYK
0 69 96 16

On text
3.80:1 AA large

On white
4.53:1 AA

Background, border, text · .box--alert>.box__title, .button--danger
Khaki

HEX

RGB

HSL

OKLCH

CMYK
0 9 48 0

On text
13.84:1 AAA

On white
1.24:1 Fail

Border, text, background · .bg-yellow, .bg-warning-light
Cadet Blue

HEX

RGB

HSL

OKLCH

CMYK
100 18 0 24

On text
5.46:1 AA

On white
3.15:1 AA large

Border, text, background · .bg-cyan, .bg-info-dark
Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
35 9 0 8

On text
10.60:1 AAA

On white
1.63:1 Fail

Background, border, text · table th[data-sortable][aria-sort=descending], table thead th[aria-sort]

Gradients

linear-gradient(transparent, 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.

Merriweather Web

Aa 300 Aa 700

Merriweather Web

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

Aa 300 Aa 700

Source Sans Pro Web

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

Aa 300 Aa 700

Roboto Mono Web

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

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

Type scale

From the site’s CSS

Heading 1 2.44rem · 39 px / 1.2 weight 700 · Merriweather Web

US EPA

Heading 2 1.95rem · 31 px / 1.2 weight 700 · Merriweather Web

U.S. Environmental Protection Agency | US EPA

Heading 3 1.34rem · 21 px / 1.2 weight 700 · Merriweather Web

U.S. Environmental Protection Agency | US EPA

Heading 4 0.98rem · 16 px / 1.2 weight 700 · Merriweather Web

U.S. Environmental Protection Agency | US EPA

Heading 5 0.91rem · 15 px / 1.2 weight 700 · Merriweather Web

U.S. Environmental Protection Agency | US EPA

Heading 6 0.87rem · 14 px / 1.1 weight 400 · uppercase · Source Sans Pro Web

U.S. Environmental Protection Agency | US EPA

Body 1.06rem · 17 px / 1.5 Source Sans Pro Web

Website of the U.S. Environmental Protection Agency (EPA). EPA's mission is to protect human health and the environment.

Paragraph 1.06rem · 17 px / 1.5 Source Sans Pro Web

Website of the U.S. Environmental Protection Agency (EPA). EPA's mission is to protect human health and the environment.

Small 80%

Website of the U.S. Environmental Protection Agency (EPA). EPA's mission is to protect human health and the environment.

Button 100% / 1.15 none

Get started

Link .98rem · 16 px / 1.2 weight 700 · Merriweather Web

Sizes in use

Most common across the site

23pxline .9 · 14 rules
21pxline 1.2 · 14 rules
18pxline 1.7 · 11 rules
17pxline 1.5 · 55 rules
16pxline 1.2 · 28 rules
15pxline 1.2 · 33 rules
14pxline 1.2 · 23 rules
13pxline 1.1 · 12 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

.button--danger · #D54309

Link

Read our latest news today.

a · #005EA2

Corner radius

99rem · 23×
50% · 23×
.25rem · 11×
2px · 7×
0.25rem · 4×
0.5rem · 4×

Shadows

0 0 0 .25rem #fff
0 0 0 2px #005ea2
0 0 0 2px #757575
0 0 0 2px #2491ff

Layout

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

Grid

Breakpoints

320

479

480

640

700

880

900

1024

On a scale of 0 to 1440 px.

Content widths (max-width)

1400 px

1024 px

880 px

640 px

480 px

320 px

Notes

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

Notes

● FineThe title is 45 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 US EPA use?: US EPA’s website uses three typefaces: Merriweather Web (headings), self-hosted; Source Sans Pro Web (body text), self-hosted; Roboto Mono Web, self-hosted.
What are US EPA’s brand colours?: The main colours on epa.gov are Deep Royal Blue (#005EA2), Dark Slate Blue (#1A4480), Midnight Blue (#162E51), Golden Rod (#FFBE2E), Deep Sky Blue (#00BDE3) and Fire Brick (#B50909).
What colour is US EPA’s text and background?: Body text is #1B1B1B on a #FFFFFF background.
Where is US EPA’s logo from?: The logo shown in this guide was found on epa.gov’s homepage. For official logo files and usage rules, check US EPA’s own brand or press page.
Is this US EPA’s official style guide?: No. SiteStyleGuide made it from epa.gov’s public web pages on 4 November 2026, and isn’t affiliated with US EPA. 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

epa-gov-tokens.css

Download

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

/* epa.gov design tokens, from SiteStyleGuide (https://sitestyleguide.com/epa.gov) */
:root {
  /* Colours */
  --text: #1B1B1B;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #1B1B1B;
  --colour-off-white: #F0F0F0;
  --colour-light-grey: #C9C9C9;
  --colour-deep-royal-blue: #005EA2;
  --colour-dark-slate-blue: #1A4480;
  --colour-midnight-blue: #162E51;
  --colour-golden-rod: #FFBE2E;
  --colour-deep-sky-blue: #00BDE3;
  --colour-fire-brick: #B50909;
  --colour-rebecca-purple: #54278F;
  --colour-light-royal-blue: #0050D8;
  --colour-red: #D54309;
  --colour-khaki: #FEE685;
  --colour-cadet-blue: #009EC1;
  --colour-sky-blue: #97D4EA;
  --gradient-1: linear-gradient(transparent, transparent);

  /* Typefaces */
  --font-headings: 'Merriweather Web', 'Noto Sans Arabic homepage', 'Noto Sans KR homepage', 'Noto Sans SC homepage', 'Noto Sans BN homepage', 'Noto Sans GU homepage';
  --font-body: 'Source Sans Pro Web', 'Noto Sans Arabic homepage', 'Noto Sans KR homepage', 'Noto Sans SC homepage', 'Noto Sans BN homepage', 'Noto Sans GU homepage';
  --font-buttons: 'Source Sans Pro Web', 'Noto Sans Arabic homepage', 'Noto Sans KR homepage', 'Noto Sans SC homepage', 'Noto Sans BN homepage', 'Noto Sans GU homepage';
  --font-other: 'Roboto Mono Web', 'Bitstream Vera Sans Mono', 'Consolas', 'Courier', monospace;

  /* Type scale */
  --text-h1: 2.44rem;
  --leading-h1: 1.2;
  --text-h2: 1.95rem;
  --leading-h2: 1.2;
  --text-h3: 1.34rem;
  --leading-h3: 1.2;
  --text-h4: 0.98rem;
  --leading-h4: 1.2;
  --text-h5: 0.91rem;
  --leading-h5: 1.2;
  --text-h6: 0.87rem;
  --leading-h6: 1.1;
  --text-body: 1.06rem;
  --leading-body: 1.5;
  --text-p: 1.06rem;
  --leading-p: 1.5;
  --text-small: 80%;
  --text-button: 100%;
  --leading-button: 1.15;
  --text-a: .98rem;
  --leading-a: 1.2;

  /* Shape */
  --radius-1: 99rem;
  --radius-2: 50%;
  --radius-3: .25rem;
  --radius-4: 2px;
  --radius-5: 0.25rem;
  --radius-6: 0.5rem;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 320px;
  --breakpoint-2: 479px;
  --breakpoint-3: 480px;
  --breakpoint-4: 640px;
  --breakpoint-5: 700px;
  --breakpoint-6: 880px;
  --breakpoint-7: 900px;
  --breakpoint-8: 1024px;
  --max-width-1: 1400px;
  --max-width-2: 1024px;
  --max-width-3: 880px;
  --max-width-4: 640px;
  --max-width-5: 480px;
  --max-width-6: 320px;
}

{
    "site": "epa.gov",
    "source": "https://sitestyleguide.com/epa.gov",
    "text": "#1B1B1B",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#1B1B1B",
            "rgb": [
                27,
                27,
                27
            ]
        },
        {
            "name": "Off White",
            "hex": "#F0F0F0",
            "rgb": [
                240,
                240,
                240
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#C9C9C9",
            "rgb": [
                201,
                201,
                201
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#005EA2",
            "rgb": [
                0,
                94,
                162
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#1A4480",
            "rgb": [
                26,
                68,
                128
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#162E51",
            "rgb": [
                22,
                46,
                81
            ]
        },
        {
            "name": "Golden Rod",
            "hex": "#FFBE2E",
            "rgb": [
                255,
                190,
                46
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#00BDE3",
            "rgb": [
                0,
                189,
                227
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#B50909",
            "rgb": [
                181,
                9,
                9
            ]
        },
        {
            "name": "Rebecca Purple",
            "hex": "#54278F",
            "rgb": [
                84,
                39,
                143
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#0050D8",
            "rgb": [
                0,
                80,
                216
            ]
        },
        {
            "name": "Red",
            "hex": "#D54309",
            "rgb": [
                213,
                67,
                9
            ]
        },
        {
            "name": "Khaki",
            "hex": "#FEE685",
            "rgb": [
                254,
                230,
                133
            ]
        },
        {
            "name": "Cadet Blue",
            "hex": "#009EC1",
            "rgb": [
                0,
                158,
                193
            ]
        },
        {
            "name": "Sky Blue",
            "hex": "#97D4EA",
            "rgb": [
                151,
                212,
                234
            ]
        }
    ],
    "fonts": [
        {
            "name": "Merriweather Web",
            "stack": "Merriweather Web, \"Noto Sans Arabic homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans Arabic\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Noto Sans BN\", \"Noto Sans GU\", Georgia, Cambria, \"Times New Roman\", Times, serif",
            "weights": [
                300,
                400,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Source Sans Pro Web",
            "stack": "Source Sans Pro Web, \"Noto Sans Arabic homepage\", \"Noto Sans KR homepage\", \"Noto Sans SC homepage\", \"Noto Sans BN homepage\", \"Noto Sans GU homepage\", \"Noto Sans Arabic\", \"Noto Sans KR\", \"Noto Sans SC\", \"Noto Sans TC\", \"Noto Sans BN\", \"Noto Sans GU\", \"Helvetica Neue\", Helvetica, Arial, sans",
            "weights": [
                300,
                400,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Roboto Mono Web",
            "stack": "Roboto Mono Web, Bitstream Vera Sans Mono, Consolas, Courier, monospace",
            "weights": [
                300,
                400,
                700
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using Merriweather Web as their main typeface

DOL

dol.gov · set in Merriweather Web
Save

Websites whose lead colour is closest to US EPA’s

CDC

cdc.gov · 6 days ago
Save
Go

go.com · 5 days ago
Save
Internal Revenue Service

irs.gov · 8 hours ago
Save
Chase.com

chase.com · 13 hours ago
Save

Captured from epa.gov on 4 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by US EPA; this guide describes the public website for reference.

US EPAstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Off White

Light Grey

Colours

Deep Royal Blue

Dark Slate Blue

Midnight Blue

Golden Rod

Deep Sky Blue

Fire Brick

Rebecca Purple

Light Royal Blue

Red

Khaki

Cadet Blue

Sky Blue

Gradients

Merriweather Web

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run epa.gov?

Also set in Merriweather Web

DOL

Similar colours

CDC

Go

Internal Revenue Service

Chase.com

Title &
description