--- version: alpha name: "Pitchfork" website: "https://pitchfork.com" description: >- The Condé Nast music-criticism site whose home page reads like a wire-service front rather than a streaming product — pure black ink on white, no canvas tint, no card shadows, and a single saturated red (#ff3530) reserved for the "BNM" Best New Music badge and the "Listen" tag. Headlines run FeatureFlatDisplay at 36px / 700 in a tight 40px leading; everything else, including the metadata that swarms each article tile, is Walfork at 11–14px with uppercase tracking on labels. The page is a five-column album-cover-led grid where the artwork carries the chromatic voltage and the brand chrome carries none. seo: title: "Pitchfork Design System for React — black on white, FeatureFlatDisplay, 14 components" metaDescription: "Pitchfork's home page as a DESIGN.md file. Pure black ink on white canvas, FeatureFlatDisplay display, Walfork uppercase labels, single red badge, 14 components. For React, Next.js, and AI tools." highlights: - "Album-art as voltage — the cover thumbnails carry the page's chromatic load, the brand chrome stays pure black on white" - "Single red flag — #ff3530 is reserved for the BNM badge and Listen tag, two surfaces total in the captured page" - "FeatureFlatDisplay 36px / 700 — the editorial display tier, no second display family, no script or serif accent" - "Walfork uppercase labels — 11–14px small-caps with 0.825–1.75px tracking does every kicker, byline, and category tag" - "1px rounding — the only radius in the captured CSS is 1px; cards, buttons, and inputs all sit at hard right angles" tags: - "News & Publishing" - "Music, Video & Streaming" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://pitchfork.com" title: "Pitchfork — official site" description: "Pitchfork's public home page — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Pitchfork's primary brand color?" answer: "Pitchfork's brand voltage is the saturated red badge color #ff3530, used in two places on the captured home page — the round "BNM" (Best New Music) circular stamp that overlays select album-tile thumbnails, and the "Listen" pill flag on audio-anchored stories. Outside those two surfaces the page is monochrome: pure black ink (#000000) on a pure white canvas, with a graded neutral set (#2b2b2b, #1a1a1a, #b3b3b3, #cccccc, #828282) carrying borders and secondary metadata. The red is held in scarcity so the BNM stamp keeps the visual weight a critic's badge of honor needs." - id: "typography" title: "What typefaces does Pitchfork use, and what should I use as substitutes?" answer: "Two families do the entire job. FeatureFlatDisplay is the editorial display face — 36px / 700 with 40px line height for the lead-story headlines, 24px / 700 / 28px for secondary stack headlines, and 16px / 600 for sub-section titles. Walfork is the body and chrome face — 14px / 400 for running paragraph text, 12px / 400 for metadata captions and bylines, and 11–14px / 600 with uppercase transform and 0.825–1.75px letter-spacing for every label, kicker, and nav link. The closest open-source substitutes are Tiempos Headline or Source Serif for the display tier and Inter at the same weights for the Walfork tier; the proportions transfer cleanly at 14px and below." - id: "red-badge" title: "Why does Pitchfork use red so sparingly?" answer: "The red (#ff3530) is the BNM (Best New Music) signal — the single most authoritative editorial verdict the site issues. Pitchfork has trained two decades of readers to scan for that red dot. Diluting the red across hero bands, accent rules, or button fills would erode the badge's recognition value; the captured page uses the red exactly twice (the BNM circle, the Listen pill) out of more than 1,750 color usages. Every other color signal — section dividers, hover states, secondary text — comes from a graded neutral stack so the red can stay the brand's loudest moment without anyone hearing it twice." - id: "layout-philosophy" title: "Why does Pitchfork still look like a print front page?" answer: "The home grid is intentionally wire-service. A wide hero-story tile sits left at the top, flanked by a stacked three-up of secondary stories to its right and a vertical More rail. Below the fold, the Reviews band runs a featured review on the left with a stacked two-up to its right; More Reviews drops to a four-column thumbnail row. There is no atmospheric hero band, no looping video, no gradient. The grid is unapologetically dense — 1px hairlines separate tiles, 16px gaps separate rows, 32–64px gaps separate sections. The format reads as editorial seriousness; a softer, card-shadowed treatment would feel more like a streaming product and less like a publication of record." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own music or editorial publication?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Pitchfork's specific moves: pure-white canvas with pure-black ink, FeatureFlatDisplay-equivalent display at modest 36px / 700, Walfork-equivalent small-caps for every label tier, hard 1px corners, and a single saturated red held in extreme scarcity as an editorial-verdict badge. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the wire-service density only works if you actually have the editorial volume to fill it — five columns of empty tiles read as hollow rather than authoritative." mockups: - "marketing-hero" - "editorial-article" colors: primary: "#ff3530" ink: "#000000" ink-soft: "#1a1a1a" ink-deep: "#2b2b2b" ink-muted: "#828282" hairline-strong: "#979797" hairline: "#b3b3b3" hairline-soft: "#cccccc" surface-warm: "#eeeeee" canvas: "#ffffff" typography: display-xl: fontFamily: "\"FeatureFlatDisplay\", \"helvetica\", sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 40px letterSpacing: 0 display-md: fontFamily: "\"FeatureFlatDisplay\", \"helvetica\", sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 28px letterSpacing: 0 heading-sm: fontFamily: "\"Walfork\", \"helvetica\", sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 20px letterSpacing: 0 body-md: fontFamily: "\"Walfork\", \"helvetica\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 body-sm: fontFamily: "\"Walfork\", \"helvetica\", sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: 0 label-md: fontFamily: "\"Walfork\", \"helvetica\", sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 16px letterSpacing: "1.75px" label-sm: fontFamily: "\"Walfork\", \"helvetica\", sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 16px letterSpacing: "0.996px" label-xs: fontFamily: "\"Walfork\", \"helvetica\", sans-serif" fontSize: 11px fontWeight: 600 lineHeight: 16px letterSpacing: "1.5px" nav-link: fontFamily: "\"Walfork\", \"helvetica\", sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 16px letterSpacing: "0.996px" byline: fontFamily: "\"Walfork\", \"helvetica\", sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 16px letterSpacing: "0.825px" h2-section: fontFamily: "\"Walfork\", \"helvetica\", sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 20px letterSpacing: 0 rounded: none: "0px" xs: "1px" full: "9999px" spacing: xs: "4px" sm: "8px" base: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "64px" components: top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "16px 32px" height: "64px" borderColor: "{colors.hairline-soft}" nav-link: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "0px 8px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.h2-section}" padding: "32px 0px 16px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "0px" story-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" rounded: "{rounded.none}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "0px" byline: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.byline}" padding: "0px" kicker-label: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-md}" padding: "0px 0px 8px" album-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "0px" borderColor: "{colors.hairline-soft}" bnm-badge: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.label-xs}" rounded: "{rounded.full}" padding: "0px" height: "32px" listen-tag: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.label-xs}" rounded: "{rounded.xs}" padding: "4px 8px" button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "0px 16px" height: "48px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "0px 16px" height: "48px" borderColor: "{colors.ink}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: "8px 16px" height: "40px" borderColor: "{colors.hairline-soft}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.hairline}" typography: "{typography.body-sm}" padding: "32px 64px" borderColor: "{colors.hairline-soft}" --- ## Overview 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:** - Pure-white canvas (`{colors.canvas}` — #ffffff), pure-black ink (`{colors.ink}` — #000000), no faint cream tint anywhere — the contrast is print-grade. - Single red badge (`{colors.primary}` — #ff3530) reserved for the BNM stamp and the Listen pill. Five total usages on the captured page. - Five-column album-art grid with 1px `{colors.hairline-soft}` (#cccccc) dividers separating tiles — depth from rules, never from shadows. - FeatureFlatDisplay 36px / 700 / 40px-leading is the loudest typographic moment. There is no 56px or 72px display tier. - Walfork uppercase small-caps at 11–14px with 0.825–1.75px tracking carries every label, kicker, byline, and nav link in the system. - 1px is the only non-zero radius in the captured CSS — buttons, inputs, tiles, and badges all sit at hard corners (the BNM circle is the lone full-radius exception). - Spacing on a 4 / 8 / 16 / 32 / 64 ladder with 8px the dominant module (100 occurrences) and 16px the second (75) — tight wire-service density rather than generous editorial whitespace. - Footer text drops to `{colors.hairline}` (#b3b3b3) — the only place a muted gray functions as primary copy color. ## Colors ### Brand - **Pitchfork Red** (`{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. ### Text - **Ink** (`{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. - **Ink Deep** (`{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. - **Ink Soft** (`{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. - **Ink Muted** (`{colors.ink-muted}` — #828282): frequency 32 — text and border evenly. The metadata tone for timestamps, photographer credits, and sub-deck text. ### Hairline - **Hairline** (`{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. - **Hairline Soft** (`{colors.hairline-soft}` — #cccccc): frequency 48. The default 1px rule color separating cards in the album-art grid and column dividers between stacked stories. - **Hairline Strong** (`{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. ### Surface - **Canvas** (`{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. - **Surface Warm** (`{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. ## Typography ### Font Families 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. ### Hierarchy | 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 | ### Principles 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. ### Note on Font Substitutes 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. ## Layout ### Spacing System - **Base unit:** 8px (100 occurrences in the captured page). - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px. - **Inline gaps:** 16px (75 occurrences) is the dominant inter-tile gap inside the album-art grid; 8px is the dominant inter-element gap inside a single story tile. - **Section padding (vertical):** 32px between major sections, 64px in the side gutter between the editorial grid and the rail. The 16-0-32 pattern (top 16, bottom 32) is the standard story-tile margin. - **Card internal padding:** 0 on the album-tile (the artwork extends edge-to-edge inside the hairline border); 16px on the secondary-story stack; 24px on the newsletter sign-up band. ### Grid & Container - **Max content width:** ~1312px on the body container (the footer caption spans the full 1312px width in the captured page). - **Five-column hero grid:** wide hero-story tile (~640px), stacked three-up of secondary stories (~320px each), vertical "More" rail (~240px). Sums to the 1312px content max. - **Reviews band:** featured review on the left (~640px), stacked two-up to its right (~320px each), with the album-thumbnail rail extending to the right edge. - **"More Reviews" four-up:** four equal-width thumbnail tiles in a single row, separated by 16px gaps and 1px `{colors.hairline-soft}` dividers. - **"More From Pitchfork" four-up:** four wide editorial tiles, each pairing a 16:9 illustration with a 24px / 700 headline beneath. ### Rhythm 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. ## Elevation 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. - **Flat (no shadow):** every editorial tile, the top-nav, the footer, the newsletter band — 100% of brand surfaces. - **Hairline elevation:** 1px `{colors.hairline-soft}` between tiles, 1px `{colors.hairline}` (#b3b3b3) on the medium-tone dividers, 1px `{colors.hairline-strong}` (#979797) on form input outlines. - **No hover lift:** the captured page has no `:hover` shadow state on any tile. Hover affordance comes from the headline color shifting from `{colors.ink}` to `{colors.ink-deep}`, not from elevation. ## Shapes 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. ## Components **`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's and Don'ts **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. ## Known Gaps - **Dark mode:** the captured marketing surface is light-only. No dark variant is exposed on the public home page. - **Hover and focus states:** the captured CSS does not expose `: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}`. - **Form input error states:** the newsletter email field carries only the resting state; validation styling and error tints are not captured. - **Mobile breakpoints:** the captured render is desktop-only at 1440px. The mobile-collapsed grid (single-column, condensed tile padding) is not represented. - **Article-page templates:** this DESIGN.md captures the home page only. The individual review-page chrome (the giant scoring number, the artist-info inset, the genre-tag rail) is a richer system not exposed here. - **Score number tier:** the famous Pitchfork decimal score (e.g. "8.4", "9.3") sets at a much larger display size on individual review pages — that tier is not present on the home page and is not captured. - **Subscription / paywall surfaces:** the Pitchfork+ subscription overlay carries its own narrow token set and is not exposed on the captured home page.