Pitchfork's music-magazine home page as a DESIGN.md: black on white, FeatureFlatDisplay headlines and Walfork uppercase labels, for React and AI tools.
Curated by Dov Azencot, updated May 18, 2026. Source pitchfork.com (opens in a new tab).
Pitchfork's home page is the rare music-publication site that does not behave like a music-product site. There is no dark canvas, no gradient hero, no large now-playing card, no album-of-the-week takeover. The page floor is pure white, the ink is pure black (#000000), and every chromatic moment on the page comes from the album-art thumbnails sitting inside a tight five-column wire-service grid. Where Apple Music throws a radial gradient under a 128px display headline and Bandcamp lets cover art bleed into a saturated brand wash, Pitchfork puts the artwork inside a hairline-edged tile and keeps the editorial chrome monochrome. The result reads like the front page of a print music section rather than a streaming surface.
The DESIGN.md file packages the captured tokens for React tooling. Inside: ten color tokens (six neutrals from pure black through #b3b3b3 gray to pure white, the saturated red badge accent #ff3530, the deep #2b2b2b primary, the soft #1a1a1a near-black, and a single warm #eeeeee surface). Two typefaces: FeatureFlatDisplay for every editorial headline (24–36px at weight 700) and Walfork for every body, label, byline, and nav link (11–16px at weights 400 and 600). The radius scale collapses to 1px — there is essentially no rounded geometry on the page. Spacing runs on a 4 / 8 / 16 / 32 / 64 ladder, and fourteen component definitions cover the album-tile, the "Best New Music" red badge, the hard-edged black CTA button, the uppercase kicker label, and the top-nav.
Feed this file to Claude, Cursor, or any agent that reads structured design tokens and it will reproduce Pitchfork's specific moves: pure-white canvas instead of a faint cream, hard 1px corners instead of the 8–16px softness that consumer-media sites lean on, uppercase Walfork small-caps as the universal label tier, and the red badge held in extreme scarcity so the BNM stamp keeps its weight. The single move worth borrowing for any editorial product: let the cover-art grid carry the chroma and starve the brand chrome of color. The harder move is restraint — most teams add a tinted hero band the moment they have one to spare.
5 highlights
Pitchfork in production, as captured. Scroll the window to see the whole page.
Pitchfork's system runs on #ff3530 as its primary voltage, used in 2 of 15 components. Type is set in Walfork across 11 tokens from 11px to 36px, weights 400–700. Shape language is sharp — components average 0px corner radius, favoring crisp rectangles.
Sparing, CTA-only voltage · 1
Page and card backgrounds · 2
Headlines, body, captions · 4
Dividers, outlines, rules · 3
Set in Walfork across 11 tokens, from 11px to 36px, weights 400–700. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.
3 corner radii and 7 spacing values. Shape language: sharp, on a 0px base radius.
Each rendered from its tokens (color, type, radius, padding) on Pitchfork's own canvas.
Pitchfork's tokens on the kind of product it builds.
The stories that shape the world, told well
Reporting, analysis and opinion from journalists around the world, every day.
Support independent journalism
MonthlyYearlyThe cities racing to adapt before the next flood
Coastal planners are rewriting the rules for how and where we build. Not everyone agrees on who should pay for it.
Pitchfork staff · 12 min readWe are designing for water we have not seen yet. The people who build the places we live are starting to plan for decades, not seasons, and the work is already changing what gets made.
Pitchfork's tokens, its components and how to use this DESIGN.md in your project.
Specs, directories and component libraries that pair with this design system.
One machine-readable file. Drop it into Claude Code, Cursor, VS Code or any AI tool that reads DESIGN.md.
One machine-readable file: every color, type, radius, spacing, and component token of Pitchfork.
Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Pitchfork's visual language.
Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.
Pitchfork's home page is the rare music-publication surface that does not behave like a streaming product. Editorial wire-service. The canvas is pure white, the ink is pure black ({colors.ink} — #000000), and every chromatic moment on the page comes from the album-art thumbnails sitting inside a five-column hairline-divided grid. Where Apple Music throws a radial gradient under a 128px display headline, Bandcamp lets cover art bleed into a saturated brand wash, and Spotify holds the page on a near-black canvas, Pitchfork keeps the editorial chrome monochrome and trusts the artwork to carry the chroma. The grid alternates a wide hero-story tile with a stacked three-up of secondary stories and a vertical "More" rail — a front-page composition that reads as print rather than product.
The single brand voltage is the saturated red {colors.primary} (#ff3530), used twice on the captured page: the round "BNM" (Best New Music) stamp that overlays select album thumbnails, and the "Listen" pill on audio-anchored stories. Five usages out of more than 1,750 captured color occurrences — the scarcity is the point. The badge has trained two decades of Pitchfork readers to scan a thumbnail grid for that red dot; spreading the color across hero bands or button fills would erode the verdict's weight. The remaining color set is a graded monochrome ladder ({colors.ink-soft} #1a1a1a, {colors.ink-deep} #2b2b2b, {colors.ink-muted} #828282, three hairline tones from {colors.hairline-strong} to {colors.hairline-soft}, the warm {colors.surface-warm} #eeeeee), each doing one tonal job at a single point on the gray-to-white ramp.
Typography splits between two families. FeatureFlatDisplay at 36px / 700 is the hero-story tier; the same family at 24px / 700 carries secondary stack headlines. Walfork — a tighter sans — runs everything else at 11–16px in weights 400 and 600, with the 600-weight tier carrying uppercase transforms and 0.825–1.75px letter-spacing for every kicker, byline, category tag, and nav link. There is no script accent, no italic display, no serif body alternative. The radius scale collapses to a 1px hairline; the page geometry sits at hard right angles throughout.
Key Characteristics:
{colors.canvas} — #ffffff), pure-black ink ({colors.ink} — #000000), no faint cream tint anywhere — the contrast is print-grade.{colors.primary} — #ff3530) reserved for the BNM stamp and the Listen pill. Five total usages on the captured page.{colors.hairline-soft} (#cccccc) dividers separating tiles — depth from rules, never from shadows.{colors.hairline} (#b3b3b3) — the only place a muted gray functions as primary copy color.{colors.primary} — #ff3530): frequency 5. Used as background (1), text (2), border (2). The saturated red badge — appears as the round "BNM" (Best New Music) circular stamp on review thumbnails and as the "Listen" pill flag on audio-anchored stories. Scarcity is the design: out of 1,754 color occurrences captured on the home page, the red accounts for five.{colors.ink} — #000000): frequency 1754 across text (876) and border (876). The dominant chrome color in the system — every editorial headline, body paragraph, kicker label, and dividing rule. Pure black, not softened to charcoal; the wire-service contrast is intentional.{colors.ink-deep} — #2b2b2b): frequency 322 — text (161) and border (161). A second near-black tone used on secondary body copy and finer dividing rules where pure ink would feel too heavy.{colors.ink-soft} — #1a1a1a): frequency 187 — text (92), border (92), background (3). Used on the persistent ticker band and a small set of dark-backgrounded promotional tiles below the fold.{colors.ink-muted} — #828282): frequency 32 — text and border evenly. The metadata tone for timestamps, photographer credits, and sub-deck text.{colors.hairline} — #b3b3b3): frequency 72. Used both as text on the footer caption row and as the medium-tone dividing rule between secondary tiles. The only tone that functions as both copy and rule.{colors.hairline-soft} — #cccccc): frequency 48. The default 1px rule color separating cards in the album-art grid and column dividers between stacked stories.{colors.hairline-strong} — #979797): frequency 6. Used on form input outlines and a small set of UI affordances where the hairline needs to read more confidently than the cccccc default.{colors.canvas} — #ffffff): frequency 12 across text (6), background (1), and border (5). Pure white — the page floor and every card surface. There is no faint cream or warm tint anywhere in the system.{colors.surface-warm} — #eeeeee): frequency 8. A single warm-gray surface used on the persistent newsletter sign-up band and a small set of in-line promotional callouts below the fold.The system runs two voices: FeatureFlatDisplay for every editorial display tier and Walfork for every body, label, kicker, byline, and nav surface. FeatureFlatDisplay is a Condé Nast custom display face; Walfork is the supporting sans. Both fall back to "helvetica", sans-serif. There is no serif tier, no italic display alternative, and no script accent — the page is unapologetically two-family.
The pairing is the typographic split: FeatureFlatDisplay does the editorial speaking, Walfork does the editorial chrome — labels, bylines, kickers, nav, footnotes. The 600-weight Walfork tier carries every uppercase small-caps moment in the system; there is no all-caps FeatureFlatDisplay headline anywhere on the page.
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.display-xl} | 36px | 700 | 40px | 0 | Hero-story headline ("Haruomi Hosono Details New Album Yours Sincerely") |
{typography.display-md} | 24px | 700 | 28px | 0 | Secondary stack headline, "More From Pitchfork" tile headline |
{typography.heading-sm} | 16px | 600 | 20px | 0 | Sub-section title, review-card headline |
{typography.body-md} | 14px | 400 | 20px | 0 | Default paragraph body, story dek |
{typography.body-sm} | 12px | 400 | 16px | 0 | Metadata, byline date, photographer credit |
{typography.label-md} | 14px | 600 | 16px | 1.75px | Section kicker, "Reviews" / "More Reviews" header |
{typography.label-sm} | 12px | 600 | 16px | 0.996px | Category tag, nav link, kicker chip |
{typography.label-xs} | 11px | 600 | 16px | 1.5px | BNM badge label, Listen tag label |
{typography.nav-link} | 12px | 600 | 16px | 0.996px | Top-nav link label |
{typography.byline} | 12px | 600 | 16px | 0.825px | Author byline above story cards |
{typography.h2-section} | 14px | 700 | 20px | 0 | "The Latest", "Reviews", "More From Pitchfork" h2 |
Display weight sits at 700, not 800 or 900. The 36px hero-story headline is the loudest typographic moment in the system — deliberately measured at the size a print front page would set its lead story, not the 72–128px that a streaming product would reach for. The 24px secondary tier carries every stack-story headline below the lead. There is no 56px or 72px display step.
Every uppercase label in the system lives in the Walfork 600-weight tier at 11–14px with 0.825–1.75px tracking. The tracking widens as the size shrinks — the 11px BNM badge label sits at the widest 1.5px tracking, the 12px kicker at 0.996px, the 14px section kicker at 1.75px. The widening reads as small-caps weight rather than caps-shouting; the 600 weight keeps the labels readable at hairline sizes without tipping into bold.
FeatureFlatDisplay and Walfork are both proprietary Condé Nast faces. The closest open-source substitutes for FeatureFlatDisplay are Source Serif 4 Display or Tiempos Headline at the same 700 weight; the proportions transfer cleanly at 24–36px. For Walfork, Inter at the same weights covers the body and chrome tier, and Inter with text-transform: uppercase and the same letter-spacing values reproduces the small-caps treatment. The fallback stack already walks helvetica, sans-serif so a Helvetica-rendering OS will read close to the captured page out of the box.
{spacing.xs} 4px · {spacing.sm} 8px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.3xl} 64px.{colors.hairline-soft} dividers.The page is unapologetically dense. There is no atmospheric hero band, no looping video, no full-bleed pull quote. The grid is a stack of bands — Lead Stories, The Latest, Reviews, More Reviews, More From Pitchfork — each separated by a 32–64px gap and a 1px {colors.hairline-soft} rule. The rhythm reads as front-page wire-service; the same content treatment on a streaming product would look hollow, but on an editorial site of record it reads as authority.
The system has no shadow tier at all. The captured CSS has 1 shadow occurrence on the entire home page, and that single instance is on the cookie-consent overlay — not on any editorial surface. Depth and separation come entirely from 1px {colors.hairline-soft} (#cccccc) dividing rules between tiles, and from the album-art photography that fills each card edge-to-edge. There is no card lift, no hover shadow, no focus halo.
{colors.hairline-soft} between tiles, 1px {colors.hairline} (#b3b3b3) on the medium-tone dividers, 1px {colors.hairline-strong} (#979797) on form input outlines.:hover shadow state on any tile. Hover affordance comes from the headline color shifting from {colors.ink} to {colors.ink-deep}, not from elevation.The radius scale is almost entirely zero. The captured CSS exposes a single radius value (1px) used on form inputs and a small set of badge surfaces. Every other surface in the system sits at hard right angles.
{rounded.none} 0px — the dominant radius. Buttons, tiles, cards, nav surfaces, headers, and the newsletter band all use hard corners.{rounded.xs} 1px — the only non-zero rounded tier, used on text-input outlines and the rectangular "Listen" tag.{rounded.full} 9999px — the BNM (Best New Music) circular badge, the single fully-rounded element on the page.There is no 4px, 6px, 8px, 12px, or 16px middle tier. The hard-edge geometry is part of the print-front-page identity; rounding the corners would soften the wire-service density into a consumer-product softness the brand does not want.
top-nav — White {colors.canvas} surface, 64px height, 16x32 padding, 1px bottom hairline {colors.hairline-soft}. Pitchfork wordmark centered, primary section links (News / Reviews / Features / Lists / Newsletter) inset, account links flush right.
nav-link — Transparent fill, {colors.ink-muted} text in {typography.nav-link} (12px / 600 / uppercase / 0.996px tracking). Hover state lifts the color to {colors.ink} without a background fill.
section-heading — {typography.h2-section} (14px / 700 / 20px-leading) ink text. Used as the h2 above each major band ("The Latest", "Reviews", "More Reviews", "More From Pitchfork"). Sits 32px above the band and 16px above the first tile.
hero-heading — {typography.display-xl} (36px / 700 / 40px-leading) ink text. The lead-story headline ("Haruomi Hosono Details New Album Yours Sincerely"). 0 padding — the headline butts directly against the album-art block above and the byline beneath.
story-heading — {typography.display-md} (24px / 700 / 28px-leading) ink text. The secondary-story headline in the three-up stack and the four-up "More From Pitchfork" tiles.
body-paragraph — {typography.body-md} (14px / 400 / 20px-leading) ink text. The story dek that sits beneath each headline and the running paragraph body inside review cards.
byline — {typography.byline} (12px / 600 / uppercase / 0.825px tracking) {colors.ink-muted} text. Author name and timestamp above each story card. The 600-weight uppercase treatment reads as wire-service editorial credit rather than a casual byline.
kicker-label — {typography.label-md} (14px / 600 / uppercase / 1.75px tracking) ink text. The category kicker above each story headline ("Rising", "5-10-15-20", "Listen"). 0-0-8 padding so it sits flush above the headline.
album-tile — White {colors.canvas} fill, {colors.hairline-soft} 1px border, hard corners ({rounded.none}), 0 padding. The artwork fills the tile edge-to-edge. Used in the five-column album-art grid and the four-column "More Reviews" row.
bnm-badge — {colors.primary} (#ff3530) circular fill, white text in {typography.label-xs} (11px / 600 / uppercase / 1.5px tracking). 32px height with {rounded.full} so the badge renders as a perfect circle. Overlays the bottom-left of select album-tile thumbnails to mark Best New Music.
listen-tag — {colors.primary} rectangular fill, white label, {rounded.xs} 1px corners, 4x8 padding. The audio-anchored story flag.
button-primary — Black {colors.ink} fill, white text, {typography.label-md} (14px / 600 / uppercase / 1.75px tracking), hard corners, 0x16 padding, 48px height. The newsletter sign-up CTA and the "Subscribe" CTA in the persistent ticker band.
button-secondary — White {colors.canvas} fill, ink text, 1px ink border, hard corners, 48px height. Used on inline "Load more" and "Continue" affordances inside review cards.
text-input — White {colors.canvas} fill, ink text, {rounded.xs} 1px outline in {colors.hairline-soft}, 8x16 padding, 40px height. The newsletter email field. No focus glow — the outline thickens to 2px instead.
footer — White canvas, {colors.hairline} (#b3b3b3) text in {typography.body-sm}, 32x64 padding. The only place a muted gray functions as primary copy color — the footer caption ("© 2026 Condé Nast. All rights reserved...") sits at 12px / 400 in #b3b3b3 against pure white, almost a watermark.
Do treat the red {colors.primary} (#ff3530) as a critic's badge. It marks Best New Music and Listen audio-anchored stories — nothing else. If you reach for it on a CTA or a hover state, you have erased the badge's editorial weight.
Do keep the canvas at pure {colors.canvas} (#ffffff) and the ink at pure {colors.ink} (#000000). The wire-service contrast is the brand's print-front-page identity; softening either tone toward a cream or a charcoal loses the editorial seriousness.
Do use Walfork at weight 600 with text-transform: uppercase and 0.825–1.75px letter-spacing for every kicker, byline, category tag, and nav link. There is no second small-caps tier in the system; reaching for a serif italic or a styled sans-caps tracks outside the family discipline.
Do separate tiles with 1px {colors.hairline-soft} (#cccccc) rules rather than shadows. The system has no elevation layer — the rules carry the depth job, and adding a shadow band would feel like importing a streaming-product idiom into a publication of record.
Don't use {colors.primary} (#ff3530) on a CTA, a hover state, or a body link. The captured page has five total red occurrences across 1,754 color usages; multiplying them into button fills or focus rings would dilute the BNM badge from a verdict into a brand decoration.
Don't introduce a 4–16px middle radius tier. The system runs at 0 / 1 / 9999px and nothing in between; adding a rounded {rounded.md} would soften the hard-edged wire-service geometry into consumer-product softness.
Don't swap the ink to a charcoal like {colors.ink-deep} (#2b2b2b) for body text. That tone is reserved for secondary copy and fine-grain rules; running body paragraphs in #2b2b2b instead of pure black flattens the contrast that gives Pitchfork its print-grade authority.
Don't add card shadows or hover lifts to the album-art tiles. The captured CSS has zero shadow occurrences on editorial surfaces; introducing a box-shadow on the tile grid would make the page read like a Spotify-style streaming surface rather than a music publication.
:hover shadow or background-fill states on the tile grid; the only documented hover is the headline color shift from {colors.ink} to {colors.ink-deep}.BuzzFeed, Financial Times, Ghost and 25 more in News & Publishing: each brand's colors, type and components in one file your AI agent builds from.
The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
4.9 out of 5 from 150+ developers
Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.
