EPA Brand Design System Analysis

1. Brand Overview

EPA (United States Environmental Protection Agency) isn’t selling sneakers or SaaS subscriptions — they’re communicating serious, public-interest information. That affects every visual choice. The tone is formal, but approachable. No wild flourishes, no motion for motion’s sake. It’s a government site; clarity beats cleverness.

The vibe is “trusted civic resource.” You can feel the weight of regulations and science behind it, but it’s wrapped in a clean, accessible interface. Buttons are honest rectangles, typography leans on tried-and-tested legibility champions: Merriweather for headings (authority, history) and Source Sans Pro for body and UI (clarity, neutral tone). No novelty fonts — this isn’t about brand personality through type, it’s about trust and accessibility.

Colors are firmly rooted in the blues you expect from environmental and governmental bodies. Deep blues (#005ea2, #1a4480) signal stability and professionalism. Neutral greys (#dfe1e2, #565c65) give structure and hierarchy without adding emotional weight. There’s very deliberate use of white (#ffffff) for space and contrast; nothing feels cramped, because government content often lives best in roomy layouts.

Interaction styles are functional: hover states mostly flip backgrounds to transparent or invert colors; focus states are high-contrast outlines. Accessibility is clearly intended — big, bold focus rings like #2491ff encircle active controls. That’s for keyboard users and screenreader synergy.

If I could sum up the design philosophy: functional clarity with a restrained palette and typography that nods to institutional authority. No “cute,” no “dark mode experiments.” The design is there to support policy content and search tools, not to impress you with art direction. And it works — even though, for a brand designer, it’s tempting to want more personality, the understated system achieves credibility.

2. Color System

2.1 Primary Colors

The main brand color is #005ea2 — a deep, saturated blue. This is the color of the header, site logo, and some buttons. Why this works: it’s a “trust” color, familiar in public agency contexts. It carries authority but isn't as cold as black. It holds up against white for readable contrast, and it plays well with lighter greys.

#1a4480 appears as another dominant blue in buttons — slightly darker, richer, probably intended for smaller action buttons.

Competitor comparison: Other federal agencies often lean black/red (think FBI) or navy blue (#002F5D DOJ-style). EPA’s choice pushes slightly toward a more vibrant and “environmental” blue.

2.2 Complete Palette

2.3 Color Relationships

Contrast: The #005ea2 on white is WCAG AAA for normal text — very safe. White text on #1a4480 also clears WCAG AA easily. The near-black #1b1b1b on white obviously hits AAA. Where EPA needs to watch: secondary text in #565c65 over #dfe1e2 — it plays at low contrast and could edge below AA if font size is small.

No dark mode present here — palette is hardcoded for light backgrounds. If they ever attempt dark mode, swapping white out for near-black backgrounds would require rebalancing the blues to maintain accessibility.

2.4 Usage Guide

• White background + #005ea2 text: Use for hero headings, primary links.
• #005ea2 background + white text: Use for primary CTAs.
• #dfe1e2 background + #1b1b1b text: Use for neutral cards.
• Avoid layering #565c65 text over #1a4480 background — poor contrast.
• Bright cyan #00bde3 should be used sparingly — accents, not bulk background.

3. Typography

3.1 Font Families

Two core families:

• Merriweather Web and a massive serif fallback stack: Georgia, Cambria, Times, serif. Used for headings, certain links, and buttons to convey gravitas.
• Source Sans Pro Web with sans fallback (Helvetica Neue, Helvetica, Arial, sans-serif). Used for body text, UI, links. Clean, screen-friendly.

No Google Fonts — likely self-hosted. No variable fonts. AdobeFonts false.

3.2 Type Scale

3.3 Hierarchy

Biggest size they use is a 40px link — unusual. Probably hero-level nav or big callouts. H1 hitting ~39px Merriweather gives gravitas. Then they quickly drop down to 31.2px and 21.44px — no giant gaps, which keeps hierarchy tight. Body text sits at 16–16.96px — readable on desktops and scaled enough for mobile.

Line heights are mostly 1.2 for headings — tighter, formal tone. Body goes up to 1.5 for legibility.

4. Spacing & Layout

4.1 Spacing Scale

Pure 8px base grid. Deviations: 16.96px and 31.2px appear due to type size alignment, not real spacing tokens.

4.2 Layout

Breakpoints: 333px (tiny mobile), 500px, 1000px (desktop). Narrow container widths for mobile-first scaling. At 1000px they shift to full desktop layouts.

5. Visual Elements

Border Radius

All corner radii are practical:

• 0px — square edges, used in a few anchors.
• 4px (most common) — buttons, carousel nav; safe, generic softness.
• 8px — cards, modals; slightly friendlier but still not bubble-y.
• 6px 6px 0px 0px — card top corners only; probably image containers.
• 50% — one circular element (avatar/icon?).

Shadows

Mostly flat design; rare shadows, subtle if present:

• rgba(0, 0, 0, 0.1) 0px 16px 32px — large, soft — maybe modals.
• Inset 2px outlines for interactive states — not typical elevation shadows.

Borders & Dividers

Functional — 1–2px solids, greys, sometimes on one side only. Used heavily for input fields, labels, list items.

6. Components

6.1 Buttons

Variant: .button

• Default: bg #1a4480, white text, padding 0 12px, radius 0 4px 4px 0.
• Hover/Active: background transparent, text grey (#757575 active: #162e51).
• Focus: transparent bg, grey text, outline #2491ff solid 0.25rem.

Variant: .usa-button

• Default: bg #005ea2, text #dfe1e2, padding 12px 20px, radius 4px.
• Hover: bg #c9c9c9, text white.
• Focus: bg white, text #003366, box-shadow #2491ff 0px 0px 0px 2px.

Variant: .hero-slideshow__nav-button

• Default: bg #71767a, white text, same padding/radius as usa-button.
• States identical to .button — transparent hover, grey text.

6.2 Links

Three main colors: white, primary blue (#005ea2), light grey (#dfe1e2). All keep underline on hover. Some invert to white on hover.

6.3 Forms

Search input:

• Default: white bg, #1b1b1b text, no border radius, padding 0 8px.
• Focus: outline #2491ff solid 0.25rem, bg #c9c9c9, text #003366.

6.4 Cards

8px radius, border 2px solid #dfe1e2. Padding aligns to 24px or 32px depending on density. No hover shadow — static surfaces.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-blackish: #1b1b1b;
  --color-grey-light: #dfe1e2;
  --color-primary-blue: #005ea2;
  --color-grey-dark: #565c65;
  --color-accent-cyan: #00bde3;
  --color-secondary-blue: #1a4480;
  --color-hover-blue1: #0a5495;
  --color-focus-blue: #2491ff;
  --color-hover-blue2: #085697;
  --color-hover-blue3: #193d71;

  /* Typography */
  --font-serif: "Merriweather Web", Georgia, Cambria, "Times New Roman", Times, serif;
  --font-sans: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --size-xxxxl: 40px;
  --size-xxxl: 39.04px;
  --size-xxl: 31.2px;
  --size-xl: 21.44px;
  --size-lg: 19.2px;
  --size-md: 17.6px;
  --size-sm: 16.96px;
  --size-body: 16px;
  --size-xs: 14.56px;
  --size-xxs: 12.8px;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-16-96: 16.96px;
  --space-20: 20px;
  --space-24: 24px;
  --space-31-2: 31.2px;
  --space-32: 32px;
  --space-40: 40px;
  --space-56: 56px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-card-top: 6px 6px 0px 0px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.1) 0px 16px 32px 0px;
  --shadow-inset-light: #dfe1e2 0px 0px 0px 2px inset;
  --shadow-inset-primary: #005ea2 0px 0px 0px 2px inset;
}

8. AI Coding Assistant Prompt

# EPA Design System Specification

You are an EPA design expert. Build UIs matching their visual language exactly.

## Brand Context
EPA's site prioritizes clarity, accessibility, and public trust. The tone is formal but approachable. Typography reinforces authority with Merriweather for headings and Source Sans Pro for body and UI text. Colors center around blues and neutrals, with high-contrast focus states.

## Color Palette
- White: #ffffff — Page background, text on dark
- Near-Black: #1b1b1b — Headers, text
- Light Grey: #dfe1e2 — Surfaces, button backgrounds
- Primary Blue: #005ea2 — Header, logo, primary CTAs
- Dark Grey: #565c65 — Secondary text, borders
- Bright Cyan: #00bde3 — Accent highlights
- Dark Navy Blue: #1a4480 — Action buttons
- Mid-Navy: #0a5495 — Hover/focus accents
- Bright Blue: #2491ff — Focus ring
- Mid Blue: #085697 — Hover/focus state
- Deep Slate Blue: #193d71 — Hover/focus state

## Typography
- Headings: "Merriweather Web", Georgia, Cambria, Times New Roman, Times, serif
- Body/UI: "Source Sans Pro Web", Helvetica Neue, Helvetica, Arial, sans-serif

| Level   | Size     | Weight | Line Height | Use For            |
|---------|----------|--------|-------------|--------------------|
| Hero Link | 40px     | 400    | 0.5         | Hero callouts/nav  |
| H1      | 39.04px  | 700    | 1.2         | Page titles        |
| H1 lg   | 31.2px   | 700    | 1.2         | Section titles     |
| H1 md   | 21.44px  | 700    | 1.2         | Subsection titles  |
| Body large | 19.2px  | 400/700| 1.3/1.3     | Body text          |
| UI label| 17.6px   | 700    | 1.2         | Button text        |
| Body sm | 16.96px  | 400/700| 1.5/1.1     | Body, link text    |
| Base body| 16px    | 400/700| 1.5/1.2     | Standard copy      |
| Btn sm  | 14.56px  | 700    | 1.1         | Small buttons      |
| Caption | 12.8px   | 400    | 1.1         | Meta info          |

## Spacing & Grid
Base: 8px. Scale: 1px, 2px, 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 56px.
Use multiples for component padding/margin.

## Border Radius
- none: 0px — Square corners (tables, certain inputs)
- sm: 4px — Buttons, nav controls
- card-top: 6px 6px 0px 0px — Top corners of card images
- md: 8px — Cards, modals
- full: 50% — Circular avatars/icons

## Shadows & Depth
- Large: rgba(0,0,0,0.1) 0px 16px 32px — Modals, overlays
- Inset Light: #dfe1e2 0px 0px 0px 2px inset — Inputs
- Inset Primary: #005ea2 0px 0px 0px 2px inset — Active input outlines

## Component Specifications

### Primary Button (.button)
Default:
- background: #1a4480
- text color: #ffffff
- padding: 0 12px
- border-radius: 0 4px 4px 0
- font-weight: 700
- font-size: 16.96px
Hover: transparent background, text #757575
Active: transparent background, text #162e51
Focus: transparent background, outline #2491ff solid 0.25rem

### Secondary Button (.usa-button)
Default: bg #005ea2, text #dfe1e2, padding 12px 20px, radius 4px
Hover: bg #c9c9c9, text #ffffff
Focus: bg #ffffff, text #003366, box-shadow #2491ff 0 0 0 2px

### Nav Button (.hero-slideshow__nav-button)
Matches primary button states but bg default #71767a.

### Input Field (search)
Default: bg #ffffff, text #1b1b1b, padding 0 8px
Focus: bg #c9c9c9, text #003366, outline #2491ff solid 0.25rem

### Card
bg #ffffff, border 2px solid #dfe1e2, radius 8px, padding 24px

## Layout & Responsive Rules
Breakpoints:
- Mobile: <333px
- Small Tablet: >=333px and <500px
- Large Tablet: >=500px and <1000px
- Desktop: >=1000px

## Interaction Rules
- Transition timing: 150ms ease for hover/focus state changes
- Focus indicators: Use #2491ff outline 0.25rem
- No animated transforms except minimal rotation=0deg resets

## DO
- Use only defined colors
- Maintain 8px grid
- Keep headings in Merriweather, body in Source Sans Pro
- Ensure AA contrast ratios
- Keep button radius consistent per variant

## DON'T
- Add shadows not in spec
- Mix rounded and sharp corners within same component
- Use colors outside palette
- Drop focus indicators

## Code Examples

**Primary Button**
```css
.button {
  background: #1a4480;
  color: #ffffff;
  padding: 0 12px;
  border-radius: 0 4px 4px 0;
  font-weight: 700;
  font-size: 16.96px;
  border: none;
  transition: background 150ms ease;
}
.button:hover { background: transparent; color: #757575; }
.button:focus { outline: 0.25rem solid #2491ff; }

Card

.card {
  background: #ffffff;
  border: 2px solid #dfe1e2;
  border-radius: 8px;
  padding: 24px;
}

Search Input

input[type="search"] {
  background: #ffffff;
  color: #1b1b1b;
  padding: 0 8px;
  border: none;
}
input[type="search"]:focus {
  background: #c9c9c9;
  color: #003366;
  outline: 0.25rem solid #2491ff;
}

---

## 9. Summary

**TL;DR** — EPA’s design system is disciplined: restrained blues, practical typography, 8px grid, minimal shadows. Every visual choice reinforces trust, clarity, and accessibility. If you stick to their palette and spacing, your UI will feel instantly “EPA.”

**Brand Keywords**:
- trust-first
- blue-authority
- formal-accessible
- minimal-motion