Huffington Post — Brand Design System Deep Dive

1. Brand Overview

HuffPost’s design system is unapologetically bold, but not flashy. This is a newsroom brand that leans into a high-contrast, typography-driven aesthetic. There’s a tension between heavy, condensed headlines and clean, flat UI components. It works because the typography is so dominant — the rest of the interface gets out of the way.

The vibe: assertive journalism meets utilitarian interface. You’re here for the story, not the decoration. The color palette is restrained — mostly monochrome with injections of deep green and occasional accent pink. It’s not a “friendly” palette in the pastel sense; it’s confident, editorial, and a little gritty.

Audience-wise, this serves readers who want immediacy. The grid is tight, spacing is economical, and the typographic scale jumps from huge masthead text down to small captions without hesitation. That’s a visual hierarchy designed for scanning — you can spot the lead story in seconds.

Philosophically, HuffPost treats UI as part of the editorial voice. The condensed uppercase headlines scream authority. The buttons and links are functional, not ornamental. Even the border radii are minimal — mostly 2px or 4px, with occasional pills for very specific CTAs.

If you’re building on top of this system, understand: it’s a typography-first brand. Color plays a supporting role. Spacing is tight to medium. Depth is minimal — shadows are rare and subtle. This is not a skeuomorphic or glossy interface. It’s flat, sharp, and direct.

And that’s the point: the design is here to deliver news, not to seduce with UI flourishes.

2. Color System

2.1 Primary Colors

Primary semantic color: rgb(0,0,0) — pure black. That’s the brand’s anchor. It’s used for text, borders, and structural elements. It’s not softened with grays unless needed for hierarchy.

Psychologically, pure black signals authority, finality, and seriousness. Competitors like The Guardian lean into deep navy; HuffPost goes full black. It’s a choice that says “we’re not here to soften the message.”

The secondary brand color is a muted teal (#2e7061). This shows up in links, subnav backgrounds, and certain buttons. It’s a unique signature in the news space — most outlets use red, blue, or yellow for accents. HuffPost’s teal is more distinctive and less politically coded.

Accent: vivid pink (rgb(248, 51, 113)) — rare, and used for support or special CTAs. It pops against the otherwise muted palette.

2.2 Complete Palette

2.3 Color Relationships

Black on white is the default — maximum contrast. Teal (#2e7061) on white is readable but less stark; it serves for secondary actions. Pink (#f83371) is high-contrast against white, but less so against teal — avoid that pairing unless accessibility isn’t critical.

Contrast ratios:

• Black (#000000) on white (#ffffff) — 21:1 (AAA)
• Teal (#2e7061) on white — ~4.5:1 (AA for normal text)
• Pink (#f83371) on white — ~4.1:1 (borderline AA)

Dark mode isn’t explicitly implemented — the palette is designed for light backgrounds.

2.4 Usage Guide

Works well:

• Black text on white — always readable
• Teal buttons on white — clear brand signature
• Pink accents sparingly — draws attention without overwhelming

Avoid:

• Pink text on teal — poor contrast
• Pale mint backgrounds with light gray text — low readability
• Mixing more than two accent colors per viewport — reduces editorial clarity

3. Typography

3.1 Font Families

Dominant family: ProximaNovaCond (Adobe Fonts, condensed variant). Heavy weights (700–800) dominate headings.
Secondary family: ProximaNova (regular width) for body and captions.
Additional accents: Montserrat (Google Fonts) for uppercase UI elements.
Other appearances: Sporting Grotesque_Bold, Roboto, Georgia, Verdana, sans-serif, arial — likely legacy or section-specific.

Sources:

• Google Fonts: Montserrat, Alfa Slab One, Source Code Pro
• Adobe Fonts: ProximaNovaCond and ProximaNova
• Variable fonts enabled.

3.2 Type Scale

(Full table includes all ~70 entries from data — see token section later.)

3.3 Hierarchy

The jump from 72px H1 to 48px secondary headline is big — proper for editorial. Condensed uppercase makes those sizes even more impactful. Body copy hangs around 16px–18px, which is standard for news. Captions drop to 12–14px.

Readability is good because line lengths are kept short in news columns. The condensed headings allow more words per line without wrapping — ideal for long headlines.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid (confirmed in data). Common values:

4.2 Layout

Breakpoints range from 374px up to 1280px — granular control. There’s a lot of small-step breakpoints (414px, 425px, 550px, etc.), suggesting careful tuning for specific device widths.

Responsive approach:

• Mobile-first.
• Tight spacing on small screens, expands slightly on desktop.
• No max width given, but typical news layouts hover around 1280px for large screens.

5. Visual Elements

Border Radius System

Minimal radii dominate — sharp editorial look.

Values:

• 0px — default for most buttons (square)
• 2px — common for cards, small buttons
• 4px — slightly softer for larger touch targets
• 21.5px — pill-like inputs (email signup)
• 24px — occasional rounded buttons
• 40px, 50% — full circles for avatars/icons
• Odd: 1000px — likely a pill container hack.

Shadow System

Rare. Most common: rgba(196,196,196,0.25) 3px 3px 7px — subtle drop shadow.
Other shadows are tiny 1px outlines in low-opacity black.
This is effectively a flat design with occasional depth for emphasis.

Borders & Dividers

A lot of 1px solid black or light gray borders.
Dotted borders (rgb(46,112,97)) appear in asides.
Borders are used for separation instead of shadows — keeps UI lightweight.

6. Components

6.1 Buttons

Three main styles:

Primary (Teal) — .js-entry-link.cli-support-huffpost__support-button

• Default: bg #2e7061, white text, 11px vertical padding, 0px radius, 1px solid teal border.
• Hover: bg #f5f5f5, border pink, opacity 0.6.
• Active: bg #2c6415 (dark green), scale 0.95.
• Focus: outline purple (#bb22ee), bg blue (#1eAEDB).

Accent Pink — .nav__right__support-button

• Default: bg pink #f83371, white text, padding 6px 12px, radius 24px.
• Hover/Active/Focus share same states as primary — odd reuse.

Neutral — .on-this-day__support-button

• Default: bg #fafafa, text #333, padding 8px 4px, radius 4px, border #333.
• Same hover/active/focus pattern — standardized interaction.

6.2 Links

Eight variants, e.g.:

• White text, bold, no underline — nav links.
• Teal #61ae96 text — secondary links.
• Blue #0000ee underlined — default HTML links.
• Hover states often flip to white — may cause accessibility issues.

6.3 Forms

Email input:

• Default: transparent bg, black text, border #dbdbdb, radius 21.5px, padding left 20px.
• Focus: outline black, bg blue #1eAEDB, white text.

Radio: similar focus behavior — bg blue, white text.

6.4 Cards

No explicit card component data, but border radius 4px + subtle shadow suggest simple white rectangles for content grouping.

7. Design Tokens — CSS Variables

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-dark-gray: #222222;
  --color-light-gray: #d4d4d4;
  --color-pale-mint: #b3dace;
  --color-charcoal: #3a3a3a;
  --color-medium-gray: #555555;
  --color-teal: #2e7061;
  --color-mid-gray: #626262;
  --color-pink: #f83371;
  --color-blue: #0000ee;
  --color-bright-blue: #083fff;
  --color-light-green: #61ae96;
  --color-warm-gray: #757575;
  --color-neutral-gray: #333333;

  /* Typography */
  --font-proxima-cond: "ProximaNovaCond", sans-serif;
  --font-proxima: "ProximaNova", sans-serif;
  --font-montserrat: "Montserrat", sans-serif;
  --font-roboto: "Roboto", -apple-system, system-ui, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue";
  --font-georgia: Georgia, serif;
  --font-verdana: Verdana, sans-serif;
  --font-arial: Arial, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-60: 60px;
  --space-90: 90px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 21.5px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-soft: rgba(196,196,196,0.25) 3px 3px 7px;
  --shadow-outline: rgba(0,0,0,0.33) 0px 0px 0px 1px;
}

8. AI Coding Assistant Prompt

# HuffPost Design System Specification

You are a HuffPost design expert. Build UIs matching their visual language exactly.

## Brand Context
HuffPost's design is editorial-first: bold condensed headlines, flat UI, restrained color palette. Typography sets hierarchy; color accents guide interaction.

## Color Palette
- White: #ffffff — backgrounds, card surfaces
- Black: #000000 — primary text, borders
- Dark Gray: #222222 — section headers
- Light Gray: #d4d4d4 — dividers, secondary UI
- Pale Mint: #b3dace — highlight backgrounds
- Charcoal: #3a3a3a — secondary text
- Medium Gray: #555555 — icons, link buttons
- Teal: #2e7061 — brand accent, buttons
- Mid Gray: #626262 — hover states
- Pink: #f83371 — CTA emphasis
- Blue: #0000ee — default links
- Bright Blue: #083fff — nav highlights
- Light Green: #61ae96 — secondary links
- Warm Gray: #757575 — body copy
- Neutral Gray: #333333 — captions

## Typography
Fonts:
- Headings: "ProximaNovaCond", sans-serif
- Body: "ProximaNova", sans-serif
- UI labels: "Montserrat", sans-serif
- System/UI: "Roboto", system fallbacks

Type sizes:
| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 | ProximaNovaCond | 72px | 800 | 0.51 | Lead headline |
| H2 | ProximaNovaCond | 48px | 800 | 0.77 | Secondary headline |
| Body | ProximaNova | 16px | 400 | 1.38 | Main text |
| Caption | ProximaNova | 14px | 400 | 1.43 | Image captions |

## Spacing & Grid
Base: 8px grid.
Scale: 1px, 2px, 4px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 32px, 60px, 90px.

## Border Radius
- none: 0px — square buttons
- sm: 2px — cards, small buttons
- md: 4px — larger buttons
- pill: 21.5px — inputs
- lg: 24px — special buttons
- full: 50% — avatars/icons

## Shadows & Depth
Flat design. Use borders for separation. Minimal shadow: rgba(196,196,196,0.25) 3px 3px 7px.

## Components

### Primary Button
```css
.btn-primary {
  background: #2e7061;
  color: #ffffff;
  padding: 11px 0;
  border-radius: 0;
  border: 1px solid #2e7061;
  font-weight: 700;
  font-size: 14px;
}
.btn-primary:hover {
  background: #f5f5f5;
  border: 1px solid #f83371;
  opacity: 0.6;
}
.btn-primary:active {
  background: #2c6415;
  transform: scale(0.95);
}
.btn-primary:focus {
  outline: 2px solid #bb22ee;
  background: #1eaedb;
}
```

### Secondary Button (Pink)
```css
.btn-secondary {
  background: #f83371;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 24px;
  font-weight: 700;
  font-size: 14px;
}
```

### Input Field
```css
.input-email {
  border: 1px solid #dbdbdb;
  border-radius: 21.5px;
  padding: 1px 2px 1px 20px;
}
.input-email:focus {
  border-color: #000000;
  background: #1eaedb;
  color: #ffffff;
}
```

## Layout & Responsive Rules
Breakpoints: 374px, 375px, 414px, 425px, 550px, 600px, 768px, 1024px, 1280px.
Mobile: tight spacing, single-column.
Desktop: multi-column, max width ~1280px.

## Interaction Rules
- Transition: 150ms ease for hover/active
- Focus: solid outline, brand colors
- Active: scale down to 0.95

## DO
- Use only defined palette
- Maintain 8px spacing grid
- Use ProximaNovaCond for headlines
- Keep buttons square or pill — no arbitrary radii
- Limit accent colors per viewport

## DON'T
- Invent new colors
- Mix shadows with borders
- Use rounded corners in editorial headlines
- Apply pink to text on teal

## Code Examples
```css
.card {
  background: #ffffff;
  border-radius: 4px;
  padding: 24px;
  border: 1px solid #d4d4d4;
}

.link-nav {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}
.link-nav:hover {
  color: #ffffff;
}
```

9. Summary

TL;DR — HuffPost’s design system is editorial, flat, and typography-first. Black and white dominate, teal is the signature accent, pink is the occasional attention grab. Spacing is tight, borders are thin, and shadows are almost absent.

Brand Keywords

• bold-editorial
• flat-utility
• teal-signature
• condensed-type
• high-contrast