What is BuzzFeed's primary brand color?

BuzzFeed's CTA voltage is electric purple #5246f5, used on every Add Your Answer pill and primary action below the masthead. The purple appears 236 times in the captured page — 118 text, 117 border, 1 background — and pairs with the canonical 29px pill radius to form the brand's signature action shape. The historical BuzzFeed red survives only on the wordmark itself (the meta theme-color is still declared as #ee3322) and a small inline tag chip in a desaturated #eb5369 — appearing just 16 times — but no longer carries any primary-action duty. The dominant ink color across the page is a warm charcoal #222222, occurring 2395 times, more than 10x more than any other token.

What typeface does BuzzFeed use, and what should I use as a substitute?

Two voices: Proxima Nova for every news-and-action tier (display, headings, navigation, body, button) and Calistoga — a bouncy display serif by Yellow Design Studio — for quiz-and-list section titles at 18/22/28/48px. Proxima Nova sits at weight 700 for headlines, 600 for nav, 400 for timestamps; Calistoga only appears at weight 400 (its only weight) with a slight 0.18-0.48px positive letter-spacing. The Proxima Nova substitute is Montserrat or Source Sans Pro at the same weights. For Calistoga, the closest open-source substitutes are Bevan, Carter One, or Lobster — all bouncy display serifs with a single weight; none transfer perfectly but Bevan reads closest at the 48px display tier.

Why does BuzzFeed have two display typefaces?

The two-voice display split signals editorial scope. Proxima Nova at 18px weight 700 carries news-and-shopping headlines — politics stories, product roundups, breaking-news cards. Calistoga at 18-48px weight 400 carries quiz-and-list headlines — Literally LOL, Tasty recipes, personality quizzes, the lighthearted bottom-half of the BuzzFeed mix. The serif's bouncy character signals 'this is fun' against the news-feed grotesk; flipping between them is how the reader knows which editorial mode they're in. The trick is scope discipline: Calistoga never appears on a hard-news headline, and Proxima Nova never appears on a quiz title.

Why is BuzzFeed's CTA pill exactly 29px?

The Add Your Answer button and every primary CTA use a 29px border-radius on a 32px-height pill — appearing 3 times in the captured page. The radius is just under half the height, which renders as a true horizontal pill with a slightly squared cap. Most pill CTAs in the directory use either a calculated 9999px (full pill) or an 8-16px softened rectangle; BuzzFeed sits between those at a specific 29px that reads as more 'tappable on mobile' than a softened rectangle but slightly less 'iOS native' than a full pill. The 8px tier (95 occurrences) is reserved for story cards; 50% radius (68 occurrences) is reserved for avatar chips.

Can I use this DESIGN.md to build a content-feed React site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce BuzzFeed's specific moves: warm charcoal ink #222222 on a white canvas, electric-purple primary CTAs at 29px pill radius, Proxima Nova + Calistoga two-voice display, the saturated lemon-yellow #f0fa81 feature band, and the dense 3-up / 4-up news-grid rhythm. The token references resolve cleanly. The two-voice display pairing only motivates if you have both news and quiz content; for a pure-news brand, drop Calistoga and run Proxima Nova at every tier, but expect the page to feel more news-publisher and less feed-of-everything.

BuzzFeed Design System

BuzzFeed's homepage as a DESIGN.md file.

About BuzzFeed DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source buzzfeed.com

News & Publishing
Social & Community

BuzzFeed's homepage looks like a tabloid front page crossed with a social-media feed, organized around an inky charcoal grid with a saturated electric-purple primary CTA. The wordmark sits in the historical BuzzFeed red as a decorative header at the top of the page, but the brand voltage that actually carries every primary action below the masthead is electric purple — every Add Your Answer pill, every Subscribe button, every quiz-call-to-action uses #5246f5 at 29px pill radius. This is the inverse of what most readers expect: the "red BuzzFeed pill" people remember from the 2014-era brand has been retired from the action layer, and red survives only on the wordmark itself and a handful of inline accents.

The DESIGN.md file packages the system into a structured spec. Inside: 13 color tokens organized around an inky charcoal body grid (#222222 carries 2395 occurrences — the dominant token by an enormous margin), a saturated electric purple primary, a graphite gray for secondary text, a cool gray for surface fills, and a single lemon-highlighter yellow used as a feature-band background on the "Literally LOL" quiz section; 11 typography tokens running Proxima Nova at weight 600/700 for every news-and-action tier and Calistoga (a bouncy display serif) at 18/22/28/48px for quiz-and-list section titles; an 8/29/50% radius scale with no middle tier; a 12/24/48px spacing rhythm; and 14 component definitions covering the photo card, the electric-purple pill CTA, the yellow-band quiz section, the avatar chip, and the dense top-nav.

Feed this file to Claude, Cursor, or any AI coding agent that reads structured tokens and it reproduces BuzzFeed's specific moves: charcoal ink on white canvas, electric-purple pill CTAs at 29px radius, Proxima Nova / Calistoga two-voice display, the lemon highlighter band as the only chromatic feature fill, and the dense 3-up / 4-up news-grid rhythm. The token references resolve cleanly. The one disciplined move worth borrowing only if your content mix includes quizzes: the two-voice display pairing where Proxima Nova carries news and Calistoga signals "this is a quiz." On a pure-news brand the Calistoga tier would feel unmotivated; here it carries the editorial scope-flip that BuzzFeed's mixed-feed identity depends on.

What makes it distinct

Electric purple primary CTA#5246f5 at 29px pill radius carries every Add Your Answer and primary action, the inverse of the red-pill brand most readers remember
Calistoga display serifa bouncy display serif at 48px weight 400 signals quiz-and-list editorial scope; never used on news headlines
Inky charcoal body#222222 carries 1209 text and 1184 border occurrences, the dominant token by a 5x margin over any other
Lemon highlighter banda saturated #f0fa81 yellow appears just 3 times as a full-bleed feature-band background, the page's only quiz-emphasis fill
8px / 29px / 50% radius ladderstory cards at 8px, primary pill CTAs at 29px, avatar chips at full circle; no middle tier between the card and the pill

Live at buzzfeed.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

buzzfeed.com

Explore BuzzFeed

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

BuzzFeed design system FAQ

Common questions about BuzzFeed's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

BuzzFeed — official site

BuzzFeed's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.