BuzzFeed Design System

Overview

BuzzFeed's homepage inverts the brand most readers remember. Purple as the action voltage. The historical "red BuzzFeed pill" has been retired from the CTA layer entirely — the saturated electric-purple {colors.primary} (#5246f5) now carries every Add Your Answer button, every Subscribe pill, every primary action below the masthead. The brand red survives only on the wordmark itself (declared as the HTML theme-color #ee3322) and a small desaturated coral {colors.red-accent} (#eb5369) that shows up just 16 times as an inline tag accent. Where The Atlantic reserves a hazard red for the Subscribe pill and POLITICO scopes crimson to masthead duty, BuzzFeed swaps the action voltage to purple and quietly keeps red as a decorative wordmark color — a brand move that signals the publication has aged out of the 2014-era red-pill identity.

The body grid runs on inky charcoal restraint. {colors.ink} (#222222) appears 2395 times in the captured page — 1209 as text, 1184 as border, 2 as background — making it the single dominant token by a 5x margin over any other (the next most-occurring color, {colors.ink-muted} at #757575, sits at 378 occurrences). The charcoal is warmer than pure black; combined with the cool-gray surface fill {colors.surface-1} (#f4f4f4) on quiz cards, the page reads as ink on newsprint rather than as pixel-pure dev-tool chrome.

Typography is a two-voice display split: Proxima Nova at weight 700 carries every news-and-shopping headline; Calistoga (a bouncy display serif by Yellow Design Studio) carries every quiz-and-list section title at 18-48px. The split is editorial-mode signaling. Calistoga at 48px on "Literally LOL" means quiz section; Proxima Nova at 18px on a card means news. Where a single-voice system (Cloudflare's FT Kunst Grotesk, Spline Sans) trusts one typeface across every tier, BuzzFeed's mixed-content mandate demands two — and the discipline is in the scope rule: Calistoga never appears on a hard-news headline, and Proxima Nova never appears on a quiz title.

Key Characteristics:

• Electric purple ({colors.primary} — #5246f5) carries every primary CTA at 29px pill radius. 236 total occurrences. The historical red has been retired from the action layer.
• Warm charcoal ink ({colors.ink} — #222222) dominates: 2395 total occurrences, 5x more than the next-most-occurring color.
• Two-voice display: Proxima Nova at weight 700 for news headlines, Calistoga at weight 400 for quiz-and-list titles.
• 29px pill radius on every primary CTA — a specific value between an 8px softened rectangle and a 9999px full pill.
• 8px / 50% radius ladder on cards and avatar chips; no middle tier between the 8px card and the 29px pill.
• Lemon highlighter feature band ({colors.feature-band} — #f0fa81) appears 3 times as a full-bleed quiz-emphasis fill — the only saturated chromatic background in the system.
• Cool-gray surface fill ({colors.surface-1} — #f4f4f4) carries 189 background occurrences — the secondary surface that lifts quiz cards off the white canvas.
• Avatar chips at 50% radius (68 occurrences) — the second-most-occurring radius after 8px (95 occurrences); circular avatars are a brand fingerprint inherited from the social-feed era.

Colors

Brand

• Electric Purple ({colors.primary} — #5246f5): frequency 236. Used as text (118), border (117), background (1). The CTA voltage — every Add Your Answer pill, every Subscribe action, every primary button below the masthead. Note the inversion: the rendered usage is mostly text and border (purple inline links and chip outlines), with only one true background fill — the canonical primary-button instance.
• Primary Pale ({colors.primary-pale} — #cdc9ff): frequency 22. A faint lavender used on link-hover backgrounds and inline highlight chips. Used as text (11) and border (11) in roughly equal split.
• Primary Soft ({colors.primary-soft} — #8daaf8): frequency 1. A muted periwinkle used on a single avatar background.

Feature

• Feature Band ({colors.feature-band} — #f0fa81): frequency 3, all as background. The saturated lemon-highlighter yellow that fills the "Literally LOL" quiz feature band — the only chromatic feature-band fill in the system. Reserved exclusively for quiz-section emphasis.
• Feature Deep ({colors.feature-deep} — #481f6b): frequency 2. A deep aubergine used as a single inline accent inside a category tag. Wired to a specific feature lockup; not part of the general accent palette.

Red

• Red Accent ({colors.red-accent} — #eb5369): frequency 16. Used as text (8) and border (8). A desaturated coral red used on a single inline tag chip — the only surviving rendered red in the system below the wordmark, which itself declares the HTML theme-color as #ee3322 but does not render that hex inside the page chrome.

Text

• Ink ({colors.ink} — #222222): frequency 2395 — the dominant token by an enormous margin. Used as text (1209), border (1184), background (2). The warm charcoal that carries every running-text moment on the page. Never pure black; the slight warmth is consistent across body, headings, and the buttoned outline.
• Ink Muted ({colors.ink-muted} — #757575): frequency 378. Used as text (189) and border (189) in perfect symmetry. The secondary running-text tone — timestamp captions, byline credits, "Quizzes" nav-link tone.
• Ink Shadow ({colors.ink-shadow} — #ada8a8): frequency 25. Used as text (3), border (3), shadow (19). The only token that meaningfully participates in shadow ink — used inside card-hover lift shadows.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 32. The page floor — pure white. Used as text (1, where it renders white against the purple CTA pill), border (1), background (30).
• Surface-1 ({colors.surface-1} — #f4f4f4): frequency 189, all as background. The cool-gray secondary surface used on quiz cards and the right-rail promo strip — lifts a card off the white canvas without introducing a chromatic accent.

Hairline

• Hairline ({colors.hairline} — #000000): frequency 29. Pure black used as text (5) and border (24). The single hairline-rule tone for card outlines where the warm charcoal {colors.ink} would feel insufficiently sharp.

Link

• Link Blue ({colors.link-blue} — #0f65ef): frequency 8. Used as text (4) and border (4). The single inline link-default tone — distinct from the electric-purple primary, reserved for legacy hyperlink semantics.

Typography

Font Families

The system runs two voices: Proxima Nova (the licensed Mark Simonson grotesk-humanist sans) for every news-and-action tier — display, heading, navigation, body, button — and Calistoga (the Yellow Design Studio bouncy display serif) for every quiz-and-list section title at 18-48px. Fallbacks walk to Helvetica, Arial, sans-serif for Proxima Nova and cursive for Calistoga.

The two-voice display split is the typographic move that defines the brand. Calistoga only ships at weight 400 — its only weight in the family — and reads as a hand-set wood-block display serif with bouncy character. Proxima Nova at weight 700 reads as straightforward news-feed grotesk-humanist. The pairing — bouncy serif for quizzes, sturdy sans for news — is how the reader knows which editorial scope they're in without reading the headline content.

Hierarchy

Principles

Proxima Nova sits at weight 700 across most of its tiers — the news-feed grotesk wants to read as ink-stamped, not as restrained editorial. Calistoga at weight 400 (its only weight) contrasts hard with the Proxima Nova 700 — the bouncy serif against the sturdy sans is the entire editorial-mode signal.

A small positive letter-spacing (0.16-0.48px) runs across both Proxima Nova at 16-20px and Calistoga at every size. The positive tracking is the brand's tabloid-display fingerprint; it pushes the type slightly looser than default, giving the page a more conversational rhythm than tight-tracked editorial systems like The Atlantic.

Note on Font Substitutes

Proxima Nova is licensed. The closest open-source substitutes are Montserrat at the same weights (proportions transfer cleanly, slightly geometric in places) or Source Sans Pro at the same weights (slightly more humanist). For Calistoga, no perfect open-source match exists — Bevan is the closest bouncy display serif at the 48px display tier, Carter One transfers reasonably at 18-32px, and Lobster can substitute at smaller sizes though its script-leaning glyphs shift the feel.

Layout

Spacing System

• Base unit: 8px — the dominant gap value, appearing 72 times in the captured page. The 8/16/24/48 ladder anchors most card-and-section work, with a 12px secondary rhythm for inline gaps (66 occurrences).
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.2xl} 28px · {spacing.3xl} 48px.
• Section padding (vertical): ~48px between major story bands; the lemon feature band uses 48px internal vertical padding.
• Card internal padding: {spacing.md} (12px) on news story cards; {spacing.base} (16px) on quiz cards.
• Top-nav padding: {spacing.md} (12px) vertical, {spacing.base} (16px) horizontal.
• Inline metadata gap: {spacing.sm} (8px) between byline, timestamp, and category chip.

Grid & Container

• Max content width: ~1280px on the main news grid.
• Hero band: a 4-up news-story grid at the top of the page with full-bleed photo thumbnails, an 18px Proxima Nova weight 700 headline below each, and a small Calistoga 12px category badge above each.
• Quiz strip: the "Literally LOL" feature band runs full-bleed with a lemon yellow background, a 48px Calistoga title, and a 4-up quiz-card grid.
• News grid: alternating 3-up and 4-up rows separated by {colors.surface-1} band gutters; cards sit at 8px radius with cool-gray surface fill on quiz cards and white surface fill on news cards.
• Right rail: a narrower column on the right carrying "Popular on Shopping," "Tasty," and promotional product cards in a stacked layout.

Rhythm

The page alternates between dense news rows (3-up and 4-up Proxima Nova headlines with photo thumbnails) and lemon-band quiz strips (full-bleed Calistoga feature bands). The two editorial modes interleave roughly every 3-4 rows, giving the page a "news / quiz / news / quiz" cadence rather than the single-tempo grid of POLITICO or Atlantic. The quiz bands are the only chromatic-fill moments in the system; everything else sits on white or cool-gray.

Elevation

The system has a light card-lift shadow tier distinct from the hard-or-zero shadow patterns of POLITICO and VICE.

• Card-lift shadow: {colors.ink-shadow} (#ada8a8) at low opacity provides a soft ~25-point lift on hover-capable story cards and quiz cards. The shadow ink is a warm taupe rather than pure black — keeping with the warm-ink palette of the rest of the system.
• Flat cards by default: the resting state of most story cards is no shadow; depth comes from the cool-gray surface-1 fill against the white canvas.
• Modal scrim: not exposed on the captured marketing surface; the modal layer lives in the article-detail and quiz-flow product surfaces.

Shapes

The radius scale runs three tiers with no middle:

• {rounded.none} 0px — full-bleed feature bands, photo thumbnails inside the news grid.
• {rounded.sm} 4px — declared but rare; used once on a small inline chip.
• {rounded.md} 8px — the dominant value (95 occurrences). Every news story card, every quiz card, every feature lockup. The standard surface radius.
• {rounded.pill} 29px — used exclusively on primary CTA pills (Add Your Answer, Subscribe). The radius sits just under half the 32px pill height, rendering as a true horizontal pill with a slightly squared cap.
• {rounded.full} 9999px (50% on square elements) — used on avatar chips (68 occurrences). Circular avatars are inherited from the social-feed era of the brand.

There is no 12px, 16px, or 20px middle tier. The shape language is binary on cards (square photo, 8px card) and binary on actions (29px pill or 50% circle). The absence of a softened-rectangle middle is deliberate — every shape on the page reads as either a card or a pill, no in-between.

Components

hero-heading — The quiz-section signature display. Calistoga at 48px weight 400, rendered in {colors.ink} (warm charcoal). Used at the top of feature bands like "Literally LOL".

section-heading — Proxima Nova at 18px weight 700 — the workhorse news headline tier rendered inside story cards.

section-heading-quiz — Calistoga at 48px weight 400 — the quiz-and-list equivalent of section-heading. The two are scope-divided: news cards always use the Proxima Nova tier, quiz feature bands always use the Calistoga tier.

body-paragraph — Proxima Nova at 14px weight 400. Default running text.

body-paragraph-muted — {colors.ink-muted} (graphite gray) at the same body-sm typography — used for timestamps, byline credits, and secondary metadata.

button-primary — The signature CTA. {colors.primary} (electric purple) fill, white text, 29px pill radius, 8x24 padding, 32px height. "Add Your Answer" is the canonical instance. No border.

button-secondary — White fill, ink text, 1px {colors.ink} border, 29px pill radius, 8x24 padding, 32px height. The inverse of the purple primary.

top-nav — White surface, 56px height, 1px bottom {colors.surface-1} rule, 12x16 padding. Holds the BuzzFeed wordmark on the left (in the historical red, but only as the wordmark — not as a chrome accent) and a row of category nav links (Quizzes, News, Shopping, Tasty, etc.) in Proxima Nova 14px / 600.

nav-link — Transparent background, {colors.ink-muted} (graphite gray) text in {typography.nav-link} (14px weight 600). 0 padding, 17px height. The nav labels are quieter than the headlines below — graphite gray rather than charcoal.

story-card — White {colors.canvas} surface, 8px radius, 12px internal padding, 1px {colors.surface-1} border. The default news story card holds a 16:9 photograph at the top, an 18px Proxima Nova weight 700 headline below, and a byline row.

quiz-card — {colors.surface-1} (cool-gray) fill, 8px radius, 16px internal padding. The quiz equivalent of the story card — the cool-gray surface lift signals "this is a quiz" without using a chromatic accent.

feature-band — {colors.feature-band} (lemon yellow) fill, 8px radius, 48x24 padding. The full-bleed quiz feature band that wraps the "Literally LOL" section. The only chromatic-fill background in the system.

avatar-chip — {colors.surface-1} fill, 9999px radius (50% on a 40x40 square), 0 padding. The circular avatar inherited from the social-feed era.

text-input — White fill, ink text, 1px {colors.ink-muted} border, 8px radius, 12x16 padding, 44px height. Standard inline search input.

Do's and Don'ts

Do use {colors.primary} (#5246f5) at 29px pill radius for every primary CTA. The electric purple is the action voltage that replaced the historical red pill — keeping it scoped to the action layer (not to inline kickers, not to category badges) preserves the single-voltage discipline.

Do scope Calistoga to quiz-and-list section titles only. The two-voice display split is the brand's editorial-mode signal — using Calistoga on a hard-news headline breaks the scope rule, and using Proxima Nova on a quiz title strips the editorial flag. The rule is binary: news = sans, quiz = serif.

Do use {colors.surface-1} (#f4f4f4) cool gray as the quiz-card surface lift. The cool-gray fill is the secondary surface that signals "this is a quiz card" without introducing a chromatic accent. News cards stay white.

Do keep the BuzzFeed wordmark in the historical red as a decorative top-of-page element. The brand red has been retired from the action layer but survives on the wordmark and as the HTML theme-color — keeping it scoped to the masthead preserves the brand-recognition signal without diluting the new purple action voltage.

Don't use the historical BuzzFeed red on a CTA fill. The red has been retired from the action layer entirely; every primary button now uses {colors.primary} (#5246f5) electric purple. Reverting a Subscribe pill to red would re-trigger the 2014-era brand identity the publication has aged out of.

Don't introduce a 12px, 16px, or 20px middle radius tier between the 8px card and the 29px pill. The shape language is binary — cards at 8px, pills at 29px, avatars at 50%. Adding a softened-rectangle middle would dilute the distinction between "this is a content surface" (8px) and "this is an action" (29px).

Don't use the lemon {colors.feature-band} (#f0fa81) for any element outside a full-bleed quiz feature band. The yellow has exactly 3 occurrences in the captured page, all as full-bleed background fills on the "Literally LOL" strip. Using it as a card surface or a button fill would dilute the feature-band signal.

Don't use Proxima Nova at weight 400 or below for headlines. The system runs Proxima Nova at 700 for every news-and-action tier; dropping the weight to 400 would push the page toward editorial-restraint convention and lose the news-feed-grotesk authority that defines the brand voice.

Known Gaps

• Hover and focus states: the resting states of {component.button-primary}, {component.nav-link}, and {component.story-card} are captured; hover backgrounds, focus rings, and disabled tints are not exposed on the marketing surface.
• Form input error states: {component.text-input} carries the resting state only; validation styling lives inside the article-detail and quiz-flow product surfaces and is not represented here.
• Dark mode: the captured marketing surface is light-only. No dark-mode variants are declared in the captured CSS — the warm charcoal {colors.ink} body grid is light-only by design.
• Motion: the quiz-flow product animates on result reveal, but the spec captures end-state values only. Easing curves, stagger timing, and quiz-result confetti behavior are not represented.
• Article-detail and quiz-flow surfaces: this DESIGN.md captures the homepage only. The article-detail view runs a different type ladder (longer body measure, drop-cap-free reading view), and the interactive quiz-flow surface uses its own component vocabulary that is not represented here.
• Tasty / shopping sub-brand surfaces: Tasty (the food sub-brand) and BuzzFeed Shopping run on related but distinct surfaces with their own color and component variations — these are not captured here.
• Wordmark red rendering: the BuzzFeed wordmark renders in red on the page but the exact rendered hex of the wordmark image is not exposed in the captured CSS chrome (the HTML theme-color is declared as #ee3322 but this value does not appear inside the captured page styles).