Pitch Design System

Pitch's marketing site does what almost no productivity SaaS brand does at this saturation: it gives the brand voltage the entire above-fold canvas. The hero is a flat block of indigo-purple — bright, warm, halfway between violet and ultramarine — with an 80px Mark Pro display headline ("Don't just present. Pitch.") in white at weight 800, tightly tracked at -1.6px, and a single white CTA button beneath. Where Notion holds its near-black ink on cream and Figma keeps its hero on white, Pitch paints the page in the brand color and trusts a four-word editorial sentence to do the work. The display weight is 800 — not 500 like Cloudflare or 400 like Linear — and the page reads as confident, almost magazine-cover loud.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 10 color tokens covering the indigo-purple voltage, a secondary brand purple (`#8d49f7`), a mustard-yellow secondary accent (`#ffd02c`), a charcoal ink tier, and the standard white / gray structural scale. Eleven typography tokens span Mark Pro at 27-80px in weight 800 with negative letter-spacing across every display tier, and Eina01 at 14-18px in weights 400-700 for body, button, nav, and metadata. Eight radius tokens centered on 6-8px with circular avatars at 50%; eight spacing tokens; and 14 component definitions covering the purple hero, the slide-preview hero card, the editorial section heads, and the yellow-chip "How Pitch works" callout.

Feed this file to Claude or Cursor and the agent will reproduce Pitch's specific moves: single saturated purple hero canvas, 80px display weight 800 with tight negative tracking, Mark Pro + Eina01 pairing, mustard-yellow as the one allowed competing voltage, and small-step rounding everywhere except the avatar circles. The one move worth borrowing only if you have a brand color this saturated is the full-bleed hero canvas — most teams will need to dilute the voltage to a tinted gradient or a held-in-reserve CTA fill.