---
version: alpha
name: "Pitchfork"
description: "Music criticism's paper of record — near-black header, paper-white editorial canvas, PT Serif long-form reading, FeatureFlatDisplay bold heds, and a single alarm-red accent for the subscribe CTA and every hover flash."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"       # light page sections, alternating row fills
  surface-dark: "#1a1a1a"  # header, footer, dark hero zones

  # Text / ink
  ink: "#000000"
  ink-soft: "#2b2b2b"      # body paragraph text — just off pure black
  ink-muted: "#828282"     # bylines, timestamps, secondary metadata
  ink-faint: "#b3b3b3"     # disabled, placeholder, tertiary labels
  on-background: "#000000"
  on-surface: "#2b2b2b"
  on-dark: "#ffffff"       # type on surface-dark zones

  # Brand accent
  primary: "#ff3530"       # alarm red — subscribe CTA, link hover flash, active nav
  on-primary: "#000000"    # black type on red (button label)
  primary-hover: "#d92d29" # darkened red on CTA hover

  # Interaction states
  text-hover: "#ff3530"    # inline link hover color shift
  focus-ring: "#ff3530"    # keyboard focus ring

  # Borders
  border: "#cccccc"        # horizontal section rules, input edges
  border-strong: "#000000" # 2px tab underline, active nav indicator

  # Shadow tints
  shadow-soft: "#000000"   # was rgba(0,0,0,.1) — flattened for Google format

typography:
  display-hero:
    fontFamily: "FeatureFlatDisplay, helvetica, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  display:
    fontFamily: "FeatureFlatDisplay, helvetica, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.11
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "FeatureFlatDisplay, helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.17
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Walfork, helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "PT Serif, Georgia, serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body:
    fontFamily: "PT Serif, Georgia, serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  label-caps:
    fontFamily: "Walfork, helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.14
    letterSpacing: 1.75px
  nav-link:
    fontFamily: "Walfork, helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.14
    letterSpacing: 0.84px
  button-ui:
    fontFamily: "Walfork, helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 1.75px
  caption:
    fontFamily: "Walfork, helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0.996px
  caption-light:
    fontFamily: "Walfork, helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  score:
    fontFamily: "FeatureFlatDisplay, helvetica, sans-serif"
    fontSize: 96px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -2px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 56px
  4xl: 80px

rounded:
  none: 0px
  sm: 4px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-secondary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-secondary-hover:
    backgroundColor: "{colors.ink-soft}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
    borderColor: "{colors.border-strong}"
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-soft}"
    rounded: "{rounded.none}"
    padding: 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 12px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 12px
    borderColor: "{colors.border-strong}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  badge-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  nav-item:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.nav-link}"
    padding: 8px 12px
  nav-item-hover:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    padding: 8px 12px
  score-display:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.score}"
    rounded: "{rounded.none}"
    padding: 24px 0px
---

# Pitchfork Design System

## Overview

Pitchfork's visual identity is the graphical equivalent of its editorial voice: severe, authoritative, and committed to the idea that criticism is a serious art form. The homepage sits on paper-white (`{colors.background}`) with a near-black header bar (`{colors.surface-dark}`) forming a hard architectural frame at the top of every page. Within that frame, the page is almost entirely typographic — editorial photography carries most of the visual weight, while the chrome itself defers to ink-and-paper discipline. There are no rounded corners on anything important, no decorative gradients, no drop shadows on story tiles. The design is flat in the printerly sense, not the trend-chasing one.

The single chromatic intervention is the alarm red (`{colors.primary}`), a pure saturated red that appears on exactly two classes of elements: the SUBSCRIBE call-to-action button in the header, and the hover flash that fires whenever a link is rolled over. Everything else lives in the grayscale range from `{colors.ink}` pure black through `{colors.ink-soft}`, `{colors.ink-muted}`, and `{colors.ink-faint}`. This restraint makes the red hit hard — it is not a palette accent used across multiple components, it is an alarm, used only when Pitchfork wants your attention and your credit card.

The type system runs on three distinct faces that map to three editorial registers. FeatureFlatDisplay (a custom flat condensed bold) handles every headline — blunt, high-contrast, carrying the same declarative confidence as a review verdict. PT Serif handles body copy and article decks, pulling the prose into long-form reading territory with generous `1.65` line-height. Walfork (a custom neutral sans, demi weight) governs all navigation, labels, captions, and UI chrome in uppercase with positive letter-spacing, giving every metadata element the feel of a music magazine's standfirst. The three fonts never swap roles.

**Key Characteristics:**
- Near-black header bar (`{colors.surface-dark}`) with inverted white type — the only persistent dark zone
- Single red accent (`{colors.primary}`) for subscribe CTA and all link hover states — never decorative
- FeatureFlatDisplay bold italic for headlines — blunt, condensed, no ornament
- PT Serif for all article body text — warm, readable, specifically editorial (not a UI serif)
- Walfork Demi for navigation and labels — all-caps with `1.75px` letter-spacing
- Sharp corners on every container, button, and input — `{rounded.none}` as the default
- 2px black underline as the active/hover nav indicator — rule weight over color
- Score numerals (`{typography.score}`) displayed at 96px FeatureFlatDisplay — Pitchfork's most iconic UI element
- Hairline `{colors.border}` section rules between editorial blocks
- Dense 8px grid rhythm with `{spacing.md}` and `{spacing.xl}` as the dominant vertical intervals

## Colors

### Primary
- **Paper White** (`{colors.background}`): The editorial canvas. Every article page, review, and list view sits on this — never tinted, never pulled toward warm or cool. Pure newsprint.
- **Pitch Black** (`{colors.ink}`): Section headlines, rubric labels, and the hard structural rules that divide content. The purest editorial moment.
- **Editorial Ink** (`{colors.ink-soft}`): Body copy and card headlines on white — marginally softer than pure black for long-form reading comfort.

### Brand Accent
- **Alarm Red** (`{colors.primary}`): The SUBSCRIBE button, and every link hover state on the site. One role: interrupt. On hover the red appears without transition and disappears without fuss. The CTA deepens to `{colors.primary-hover}` on press.

### Text States
- **Caption Gray** (`{colors.ink-muted}`): Bylines, timestamps, photo credits, and secondary metadata. The quietest active text the system allows.
- **Faint Gray** (`{colors.ink-faint}`): Navigation links in their secondary state, disabled form elements, placeholder text.
- **White Reverse** (`{colors.on-dark}`): All type inside the near-black header and footer, including the wordmark, nav links, and icon buttons.

### Borders & Rules
- **Hairline** (`{colors.border}`): The `1px solid` horizontal rule between editorial sections, input borders at rest.
- **Hard Rule** (`{colors.border-strong}`): Active tab underline, currently-selected nav item. Weight and ink, not color, mark selection.

### Shadow
- **Shadow Soft** (`{colors.shadow-soft}`): Flattened from `rgba(0,0,0,0.1)`. Used only for the consent modal's box-shadow. The rest of the site has no shadows.

## Typography

### Font Family
- **Display**: `FeatureFlatDisplay` (custom self-hosted), fallback `helvetica`. Two weights: Bold and Bold Italic. The bold italic variant (`FeatureFlatDisplay-BoldItalic-Web.woff2`) appears on music review heds where editorial conviction leans into the slant.
- **Editorial Serif**: `PT Serif` (PTSerif-Regular.woff2, self-hosted), fallback `Georgia, serif`. Regular weight only. The warm workhorse for all long-form reading.
- **UI Sans**: `Walfork` (Walfork-Demi and Walfork-Regular, self-hosted), fallback `helvetica`. Demi for labels and navigation; Regular for secondary metadata. Never set in sentence case for UI roles — always uppercase.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Feature story openers, section cover heds — 72px FeatureFlatDisplay 700 |
| `display` | Standard headline grid cards — 36px FeatureFlatDisplay 700 |
| `heading-section` | Sub-section heds, module titles — 24px FeatureFlatDisplay 700 |
| `heading-sub` | Card sub-heds, sidebar stubs — 16px Walfork 600 |
| `body-large` | Review article body, long-form features — 19px PT Serif |
| `body` | Standard article body, news posts — 17px PT Serif |
| `label-caps` | Section labels, rubric headers — 14px Walfork 600 uppercase, 1.75px tracking |
| `nav-link` | Top navigation links — 14px Walfork 600, 0.84px tracking |
| `button-ui` | CTA labels — 14px Walfork 600 uppercase, 1.75px tracking |
| `caption` | Photo credits, author bios, timestamps — 12px Walfork 600 uppercase |
| `caption-light` | Supplementary captions, tertiary labels — 12px Walfork 400 |
| `score` | Review score display — 96px FeatureFlatDisplay 700 |

### Principles
- **Three faces, three jobs.** FeatureFlatDisplay declares, PT Serif explains, Walfork labels. These roles are enforced at the component level and never swapped.
- **Serif for reading, sans for clicking.** Any text a reader will consume for more than a sentence is set in PT Serif. Any text a reader will scan, click, or parse at a glance is Walfork.
- **Uppercase is Walfork's register.** All `{typography.label-caps}`, `{typography.nav-link}`, and `{typography.caption}` tokens imply `text-transform: uppercase`. Setting Walfork in sentence case breaks the system's voice.
- **Score is the brand monument.** The 96px `{typography.score}` token — a FeatureFlatDisplay numeral from `0.0` to `10.0` — is Pitchfork's most recognizable UI element globally. It should never be set smaller than 72px and should never share visual weight with adjacent headlines.
- **Generous serif leading.** PT Serif runs at `1.65` line-height, wider than most editorial sites. This is intentional: music criticism is long-form prose that earns its whitespace.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The rhythm is dense for an editorial site. `{spacing.sm}` (8px) governs internal card padding and between-element stacking; `{spacing.md}` (16px) is the default horizontal page gutter at mobile; `{spacing.xl}` (32px) handles section-to-section vertical separation on desktop. The page never becomes airy in the way of a product site — density is editorial.

### Grid & Container
- Max content width: approximately 1280px on desktop, with a center-column editorial track of ~800px for article bodies
- Homepage: 3-up grid on large desktop, 2-up on tablet, collapsing to 1-up single-column on mobile
- Section separators: 1px `{colors.border}` horizontal rules between editorial bands
- No card chrome: story tiles are image + label + headline + byline, with no background fill or box-shadow

### Whitespace Philosophy
- **Density without clutter.** Pitchfork's page packs more stories per scroll than most editorial sites, but the consistent `8px` base grid and hard column structure prevent it feeling chaotic.
- **Type sets the rhythm.** Whitespace is calibrated to the type metrics, not added independently. The 1.65 leading of PT Serif determines the vertical feel of review pages.
- **Rules, not space.** Section separation is primarily signaled by `1px solid {colors.border}` horizontal rules, not by large vertical gaps.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | All story tiles, editorial cards, article body |
| Hairline (Level 1) | `1px solid {colors.border}` | Section rules between editorial bands |
| Hard Rule (Level 2) | `2px solid {colors.border-strong}` | Active nav underline, selected tab indicator |
| Header Bar (Level 3) | Solid `{colors.surface-dark}` fill | Persistent near-black header zone — the deepest visual layer |
| Modal (Level 4) | `box-shadow: rgba(0,0,0,0.1) 0px 2px 4px` | Consent/overlay modals only |
| Focus Ring | `2px solid {colors.focus-ring}` | Keyboard navigation focus on interactive elements |

**Shadow Philosophy**: Pitchfork uses essentially no shadows. The one instance dembrandt detected (`rgba(0,0,0,0.1) 0px 2px 4px`) is the privacy consent modal. The rest of the site is completely flat. Depth is communicated by the contrast between the `{colors.surface-dark}` header and the white page canvas, and by typographic weight and size differentials, not by simulated lighting.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All buttons, all cards, all inputs, all images — the system default |
| `sm` | 4px | Dropdown menus (observed in data); very occasional UI elements |
| `pill` | 9999px | Not currently used — Pitchfork avoids pill shapes |

Pitchfork's corner philosophy is as close to binary as an editorial site gets: almost everything is sharp. The occasional `4px` radius appears in utility UI (navigation dropdowns) but is never applied to content containers or CTAs. The subscribe button is a sharp rectangle. Badges are sharp rectangles. The score display has no container at all.

## Components

### Button Variants

- **`button-primary`** — Alarm red (`{colors.primary}`) background, black (`{colors.on-primary}`) Walfork uppercase label, sharp corners, `8px 16px` padding. The SUBSCRIBE button in the header. On hover: `{colors.primary-hover}`, no animation, 0.2s `ease-out` color transition.
- **`button-secondary`** — Black background, white type, same geometry as primary. Used for "Learn More" and modal CTAs.
- **`button-ghost`** — White background with `2px solid {colors.border-strong}` border, black type. Used for secondary actions on white surfaces ("See More").

### Cards

Story tiles have no card chrome: no background fill, no border, no shadow. They are composed of a full-bleed 16:9 or 4:3 photograph, a `{typography.label-caps}` section label above the hed (e.g., "NEWS", "REVIEWS", "FEATURES"), a `{typography.display}` or `{typography.heading-section}` headline in `{colors.ink-soft}`, and a `{typography.caption}` byline in `{colors.ink-muted}`. On hover the headline shifts to `{colors.text-hover}` red — the only hover affordance on tiles.

### Inputs

Sharp rectangle, `{colors.border}` at rest, `{colors.border-strong}` on focus. PT Serif body type as placeholder. No glow ring — focus state is indicated by the darkened border and the blinking cursor only.

### Badges / Labels

Section label badges (NEWS, REVIEWS, FEATURES, PREMIERES) are set in `{typography.label-caps}` with no background fill on article pages — they appear as freestanding uppercase text above the headline. On darker surfaces or in selected/active states, `badge-active` inverts to a black fill.

### Score Display

The review score is rendered at `{typography.score}` (96px FeatureFlatDisplay 700, tracking -2px) in `{colors.ink}` pure black, with no enclosing box or decorative container. It sits inline with the review metadata block — artist name, album name, label, release year — above the article body. This is the most distinctive element in the design system. No other publication formats criticism with this typographic certainty.

### Navigation

**Top Nav Bar**
- Background: `{colors.surface-dark}`
- Logo: centered Pitchfork wordmark in white SVG
- Nav links: `{typography.nav-link}` Walfork Demi in white, letter-spaced; hover shifts to `{colors.primary}`
- Right cluster: NEWSLETTER, SIGN IN, SUBSCRIBE (red pill CTA)
- Active state: `2px solid {colors.border-strong}` underline on the selected section tab
- Transition: `0.3s cubic-bezier(0, 0.59, 0.32, 1)` on color, `background-color`, `fill`

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for the subscribe CTA and link hover states — alarm red earns its power through scarcity
- Set all section labels and navigation in Walfork Demi uppercase with positive letter-spacing (`1.75px`) — `{typography.label-caps}`
- Keep all buttons and containers sharp-cornered (`{rounded.none}`) — Pitchfork's authority comes from its refusal to soften
- Use PT Serif (`{typography.body}`) for every article body paragraph — it is the only body face in the system
- Display review scores at `{typography.score}` size (96px+) with no enclosing box — the numeral is the design
- Separate editorial sections with `1px solid {colors.border}` hairline rules, not with vertical whitespace alone
- Keep the header bar `{colors.surface-dark}` — it is the site's only persistent dark zone and defines the structural frame
- Use FeatureFlatDisplay (`{typography.display}`) for all headlines above `{typography.heading-sub}` scale

### Don't
- Don't use `{colors.primary}` red for decorative elements, icon tints, or section accents — one job, one color
- Don't introduce rounded corners on CTAs, cards, or inputs — even `{rounded.sm}` (4px) reads as too consumer-app for this brand
- Don't set PT Serif at UI scale (below 14px) — it is a reading face, not a label face; use Walfork for UI
- Don't add drop shadows to story tiles, cards, or the header — the site is flat by conviction, not oversight
- Don't use Walfork in sentence case for labels and navigation — uppercase with letter-spacing is the register
- Don't substitute a different accent color for the subscribe CTA — no orange, no brand-blue, no gradient fill
- Don't crowd the score display with competing visual elements — the 96px numeral needs clear space to land
- Don't introduce a fourth typeface — FeatureFlatDisplay, PT Serif, and Walfork cover every editorial and UI register the system requires

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, nav collapses to hamburger, FeatureFlatDisplay hero drops to ~36px |
| Mobile | 375–767px | Single column, 1-up story grid, article body at 17px PT Serif |
| Tablet | 768–1023px | 2-up story grid, condensed nav, moderate headline scaling |
| Desktop | 1024–1279px | 3-up story grid, full horizontal nav in header bar |
| Large Desktop | 1280–1600px | Max ~1280px container, 3–4-up grid, full type scale active |
| Wide | >1600px | Page caps at 1600px; outer margins expand |

### Touch Targets
- Subscribe CTA: min 44px height at all breakpoints; 8px 16px padding satisfies touch sizing
- Nav links: minimum 44px tap height in the expanded mobile drawer
- Story tiles: entire tile area is tappable, not just the headline text

### Collapsing Strategy
- **Header**: horizontal nav collapses to hamburger drawer at ≤1024px; wordmark remains centered
- **Type**: FeatureFlatDisplay hero scales from ~72px on large desktop to ~36px on mobile; PT Serif body stays fixed at 17px; Walfork labels stay fixed at 12–14px across all breakpoints
- **Grid**: 3–4-up → 2-up → 1-up, with hairline rules preserved between items at every width
- **Score**: review scores stay at 96px on desktop and scale to ~72px on mobile — never smaller

### Image Behavior
- Story photographs maintain 16:9 crop in the homepage grid; article heroes go full-width
- Album art appears as square 1:1 crops on review cards and the score block
- No art direction swaps — same crop scales responsively via `srcset`

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}` / `{colors.ink-soft}`
- Brand accent: `{colors.primary}`
- Secondary text: `{colors.ink-muted}`
- Border: `{colors.border}`
- CTA: `{colors.primary}`
- Dark header/footer: `{colors.surface-dark}`

### Example Component Prompts

- "Create a Pitchfork-style review score block: a 96px FeatureFlatDisplay 700 numeral ('7.8') in `{colors.ink}` pure black, no enclosing box, positioned above a metadata block — artist name in 24px FeatureFlatDisplay 700, album title in PT Serif 17px italic, record label and year in 12px Walfork 600 uppercase with 1.75px tracking in `{colors.ink-muted}`. White canvas, zero decoration."
- "Build a Pitchfork story tile on `{colors.background}`: a 16:9 album/artist photograph (square corners), a 12px Walfork 600 uppercase section label ('REVIEWS') in `{colors.ink-muted}` above the headline, a 24px FeatureFlatDisplay 700 headline in `{colors.ink-soft}`, and a 12px Walfork 400 byline below. On hover, the headline color shifts to `{colors.primary}` red. No card chrome, no shadow, no border-radius."
- "Design a Pitchfork top nav bar on `{colors.surface-dark}`: centered white SVG wordmark, horizontal nav links in 14px Walfork 600 uppercase with 0.84px tracking in `{colors.on-dark}` — hover shifts each link to `{colors.primary}`. Right-aligned cluster: 'NEWSLETTER' and 'SIGN IN' as ghost links in white, and a sharp-rectangle SUBSCRIBE button with `{colors.primary}` background and black Walfork uppercase label."
- "Create a Pitchfork section divider: a full-width `1px solid {colors.border}` horizontal rule with a 14px Walfork 600 uppercase section label ('BEST NEW MUSIC') in `{colors.ink}` positioned inline-left, followed by a 36px FeatureFlatDisplay 700 feature headline in `{colors.ink-soft}` below it."
- "Build a Pitchfork 'Best New Music' badge: black (`{colors.ink}`) background, white Walfork 600 uppercase label ('BEST NEW MUSIC') at 12px with 0.996px letter-spacing, `{rounded.none}` sharp corners, `4px 8px` padding. Pair it with a 36px FeatureFlatDisplay 700 headline below it and a 12px Walfork 400 byline in `{colors.ink-muted}`."

### Iteration Guide

1. Start with `{colors.background}` white canvas and the `{colors.surface-dark}` header bar — the structural frame is the foundation.
2. `{colors.primary}` red appears only on the subscribe CTA and on link hover states — use it in exactly those two moments.
3. Three typefaces, three jobs: FeatureFlatDisplay for headlines, PT Serif for reading, Walfork for labeling. Never swap.
4. Default to `{rounded.none}` everywhere — any softening signals a different brand.
5. Section separation is `1px solid {colors.border}` hairline rule, not vertical whitespace gaps.
6. Review scores render at 96px FeatureFlatDisplay with clear surrounding space — they are the signature UI moment.
7. Walfork UI type is always uppercase with positive letter-spacing (`0.84px` nav, `1.75px` labels/buttons).

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Pitchfork. Brand names and trademarks belong to their respective owners.