acd-remix-vercel-x-pitchfork-design

name	acd-remix-vercel-x-pitchfork-design
description	Remix. Vercel's grayscale-only restraint + Pitchfork's `#ff5d1f` orange and editorial serif. For docs, changelogs, and developer-marketing pages that want to read like a magazine review without losing technical credibility. Use when building UI components, applying design tokens, or implementing visual styles for remix vercel x pitchfork.
license	CC-BY-NC-SA-4.0
metadata	{"risk":"unknown","source":"community","kind":"mode","category":"design-systems","tags":["design-system","ui","remix","claude-design"]}

Vercel × Pitchfork — Editorial Docs With An Opinion Design Mode

You are an expert in the Vercel × Pitchfork — Editorial Docs With An Opinion aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

Source DESIGN.md

Remix. Vercel's grayscale-only restraint + Pitchfork's #ff5d1f orange and editorial serif. For docs, changelogs, and developer-marketing pages that want to read like a magazine review without losing technical credibility.

Parent DNA: Vercel 60% · Pitchfork 40%

1. Visual Theme & Atmosphere

Vercel's chrome holds the page — single grayscale ramp, Geist everywhere, sharp grid. Pitchfork's contribution is editorial confidence: oversized review-style headlines, an orange that punctuates pull-quotes and section markers, and a willingness to let a paragraph run.

The result reads like a Pitchfork feature about a Vercel deploy. Cold neutrals, hot opinion.

Mood: opinionated, calm, technically literate.

2. Color Palette & Roles

/* grayscale ramp from Vercel — single source */
--bg:              #ffffff
--bg-alt:          #fafafa
--surface:         #f4f4f5
--text:            #000000
--text-muted:      #52525b
--text-dim:        #a1a1aa
--border:          #e4e4e7
--border-strong:   #d4d4d8

/* dark mirror */
--bg-dark:         #000000
--bg-dark-alt:     #0a0a0a
--surface-dark:    #18181b
--text-dark:       #ffffff
--text-dark-muted: #a1a1aa
--border-dark:     #27272a

/* sole accent from Pitchfork */
--accent:          #ff5d1f
--accent-hover:    #e64a0e
--accent-soft:     #ffead9

Arbitration: Vercel's monochrome wins everything except the single accent slot. Pitchfork orange replaces every place Vercel would otherwise reach for a blue / green / purple hint — section markers, link hover, pull-quote rule, code-fence caption. One color, used with restraint.

3. Typography Rules

• Display / h1 / review-style heads: Tiempos Headline (Pitchfork-adjacent serif) at 56px+, weight 600.
• h2–h6 + body + UI: Geist Sans (Vercel), weights 400 / 500 / 600.
• Code + numerals: Geist Mono (Vercel).

Scale: Vercel's tight ramp extended at the top for editorial heads. 12 / 14 / 16 / 18 / 20 / 24 / 32 / 48 / 64 / 88.

Serif fires above 48px only. Below that, Geist holds — docs density requires it.

Arbitration: Pitchfork's all-serif body would collapse code-block legibility. Geist body wins. Pitchfork serif gets the marquee slot — h1 and review-style callouts only.

4. Component Stylings

Button (primary)

• Vercel geometry: radius 6, padding 8/14, weight 500.
• Fill --text (black), text --bg (white). Pitchfork orange reserved for links, not CTAs.

Button (secondary)

• Transparent fill, 1px --border, --text color.

Card

• Vercel pattern: --bg-alt fill, 1px --border, radius 8, no shadow.
• Hover: border to --border-strong. Never a colored border on hover.

Input

• Vercel: 1px border, radius 6, padding 8/12.
• Focus: 2px --accent ring, 2px offset.

Pull-quote / review callout

• Tiempos at 28px, weight 500, italic optional.
• 4px left rule in --accent. 24px left padding. Quote sits in its own 8/16 grid cell.

Section marker

• Small caps, 12px Geist, --accent color, 1px tracking. Pitchfork-style "REVIEW", "BENCHMARK", "CHANGELOG" labels above each section heading.

5. Layout Principles

• Marketing / changelog: 1180px max, 24px gutter, 12-column.
• Long-form article: 720px reading column, centered.
• Docs: Vercel's 256px sidebar + 720px article + 240px on-this-page rail.
• 4px base. 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96.

Magazine move: every long-form page opens with a full-width title block — section marker, serif h1, dek paragraph, byline rule — then drops back into Vercel's docs grid.

6. Depth & Elevation

Flat. Border-based depth on light, alpha-border on dark. Shadows only on popovers (0 2px 8px rgba(0,0,0,0.04) light, 0 12px 32px rgba(0,0,0,0.6) dark).

Both parents agree — print-flat editorial meets developer-tool minimalism. No conflict.

7. Do's and Don'ts

Do

• Use Tiempos at 48px+ only.
• Reserve orange for links, section markers, and pull-quote rules.
• Open every long-form page with a full-width title block.
• Keep all body and UI in Geist for density.

Don't

• Use orange as a button fill.
• Add a second accent color.
• Drop serif into UI controls or table cells.
• Add drop shadows on cards.

8. Responsive Behavior

• Serif h1 scales 88 → 56 → 40.
• Reading column stays 720px until viewport < 768px, then padding-only.
• Docs sidebar collapses to drawer at 1024px; on-this-page rail hides at 1280px.
• Section markers stay 12px at all breakpoints — hierarchy comes from the serif, not the marker.

9. Agent Prompt Guide

Bias: single grayscale ramp + Geist UI everywhere, Tiempos serif at 48px+ for editorial heads, #ff5d1f orange used only for links / section markers / pull-quote rules, full-width article title blocks, Vercel docs grid below the fold.

Reject: orange button fills, second accent colors, serif in body or UI, drop shadows, colored hover borders on cards, abandoning the docs grid for full-bleed art on technical pages.

Creative Tensions (documented for team)

• Editorial heat vs technical cool. Pitchfork orange wants to dominate; Vercel restraint wants to bury it. Resolution: orange appears at most twice per viewport, and never on a CTA.
• Serif legibility floor. Below 48px the serif reads decorative against Geist body. Enforce a hard size floor in tokens — no exceptions, even for h2.

Parent-brand DNA

Tokens traced:

• From Vercel: 26 (grayscale ramp light + dark, Geist Sans + Mono, button geometry, card pattern, input pattern, docs grid, 4px base scale, flat depth, focus ring geometry, sidebar shell)
• From Pitchfork: 17 (orange accent, Tiempos display, pull-quote rule, section markers, full-width title block, dek paragraph pattern, byline rule, italic pull-quote treatment)

Net DNA: Vercel 60% · Pitchfork 40%.

When to Use This Mode

• When user references vercel-x-pitchfork or the remix family as inspiration
• When building UI in the remix aesthetic
• When applying this brand's color palette, typography, or layout patterns
• When critiquing UI for adherence to this aesthetic