| 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
