Pitch Design System

Overview

Pitch's marketing site does what almost no productivity SaaS brand attempts at this saturation. Voltage as canvas. The above-fold hero is a flat block of indigo-purple ({colors.primary} — #6b53ff) 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 pill CTA beneath. Where Notion holds its near-black ink on cream and Figma keeps its hero on plain white, Pitch paints the page in the brand color and trusts a four-word editorial sentence to do the work. The figure-ground reads inverted compared to every peer in the productivity rail — Beautiful.ai, Canva, Gamma — each of which holds its brand color in reserve for a CTA accent against a neutral hero.

The typographic discipline reinforces the move. Mark Pro carries every display tier at weight 800 — 80px on the hero, 42px on section h2s, 28px on the sub-display blocks. There is no weight-500 or weight-700 display tier; the editorial heaviness is the brand voice. Each display step pairs the weight with negative letter-spacing — -1.6px on 80px, -1.2px on 60px, -0.84px on 42px — so the page reads closer to a magazine cover or a deck-template thumbnail than to a typical SaaS landing page. Eina01 — a geometric humanist sans — handles every body paragraph, button label, and nav link at 14-18px in weights 400-700. Together the two families divide labor cleanly: Mark Pro speaks loud, Eina01 speaks soft.

The single competing voltage is mustard yellow ({colors.yellow} — #ffd02c). It carries 10 occurrences across the captured page — almost all of them confined to a single chip-fill callout ("Get a head start with free templates") and a rim accent on a button below the fold. The system rations the yellow ruthlessly; treating it as a scarce second voltage is the discipline that keeps the page feeling like a deck with one bright sticker rather than a five-color marketing site.

Key Characteristics:

• Indigo-purple ({colors.primary} — #6b53ff) fills the entire above-fold hero as a flat canvas — 202 total captured occurrences across text, border, background, and gradient roles.
• 80px Mark Pro at weight 800 with -1.6px tracking on the hero h1 — the heaviest display moment in the directory and the loudest typographic surface in the system.
• Mark Pro + Eina01 pairing — heavy editorial sans for every display tier, geometric humanist sans for every body, button, and nav surface. No third typeface in the system.
• Mustard yellow ({colors.yellow} — #ffd02c) as the single secondary voltage, scoped to the inline-chip "templates" callout and one button rim accent below the fold.
• Charcoal ink across all below-fold text — {colors.ink} (#2b2a35) carries 610 captured occurrences, the dominant ink tone for body paragraphs and section heads on the white canvas.
• Small-step radius scale — 3px on inputs (25 occurrences), 6px on cards (17), 8px on buttons (14), 50% on avatars (8). No middle 12-16px tier.
• 20px and 24px base spacing — the page rhythm uses these two values almost exclusively for module gaps and card padding.
• Hairline borders only — {colors.hairline} (#dddfe5) carries every card edge below the fold, no shadow tier above 1px halo.

Colors

Brand

• Indigo Purple ({colors.primary} — #6b53ff): frequency 202. Used as text (91), border (88), background (4), gradient (19). The single brand voltage — fills the entire hero canvas, the top-nav surface, the bottom-of-page CTA panel, the primary purple-fill button below the fold, and inline link color across body copy. The dominant chromatic move in the system.
• Primary Deep ({colors.primary-deep} — #8d49f7): frequency 37. Used 23 inside gradients, 7 as border, 6 as text, 1 as background. The deeper secondary purple — used as a gradient stop on the slide-preview thumbnail cards and as a hover-state purple on inline links.
• Yellow ({colors.yellow} — #ffd02c): frequency 10. Used 5 as background, 4 as border, 1 as gradient. The single secondary voltage — almost entirely confined to the "free templates" chip callout and a small accent button below the fold. Rationed deliberately.

Text

• Ink ({colors.ink} — #2b2a35): frequency 610 — 305 as text, 300 as border. The dominant charcoal ink across the entire below-fold canvas. Body paragraphs, section h2s rendered on white, nav labels, and the default border tone for hairline-edged surfaces. Never pure black.
• Ink Deep ({colors.ink-deep} — #1e1d28): frequency 85 — 45 as text, 40 as border. A slightly darker variant used inside the slide-preview thumbnail rendering and for inline strong-emphasis spans.
• Ink Soft ({colors.ink-soft} — #3f4250): frequency 6. A secondary running-text tone — used inside the customer-quote testimonials and figure captions.
• Muted ({colors.muted} — #6f7387): frequency 10. Tertiary text — secondary paragraph lines, footer category labels, "Learn more" links.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 214 — 89 as text (white text on the purple hero), 18 as background, 85 as border, 22 inside gradients. The off-purple surface — carries the hero display text, the primary CTA fill on the purple hero, and the entire below-fold page floor.
• Hairline ({colors.hairline} — #dddfe5): frequency 8. The 1px outline tone for cards and inputs below the fold. There is essentially no second hairline tone in the system.

Shadow

• Shadow ({colors.shadow} — #000000): frequency 33, 25 as shadow ink, 4 each as text and border. Pure black is used exclusively for soft 1px halos under cards and for the slide-preview thumbnail outlines.

Typography

Font Families

The system runs two families on the captured marketing surface. Mark Pro — a heavy editorial sans by FontFont — carries every display tier from 13px (small-caps label) through 80px (hero h1) at weight 700-800, always with letter-spacing adjustments. Eina01 — a geometric humanist sans by Schick Toikka — handles every body paragraph, button label, nav link, and metadata caption at 14-18px in weights 400-700. There is no third family in the system; even monospace code does not appear on the captured marketing pages.

The pairing — heavy editorial display + warm geometric body — is the distinctive typographic move. Where Cloudflare runs sans display + monospace metadata and Stripe runs a single sans across every tier at weight 300-400, Pitch pairs two distinct sans voices and divides display from body across the family boundary.

Hierarchy

Principles

Display weight stays at 800 across every tier; the system has no weight-500 or weight-700 display variant. The negative letter-spacing modifier scales with the size — -1.6px at 80px, -1.2px at 60px, -0.84px at 42px, -0.54px at 27px, -0.28px at 28px — so every Mark Pro display surface carries a tighter optical fit than the default tracking would give. Eina01 by contrast uses no negative tracking on body, only positive 1.3-1.4px tracking on the two uppercase tiers (label-caps and button-md).

The two families divide labor without overlap: every Mark Pro surface is a display tier or an uppercase eyebrow label; every Eina01 surface is body, button, nav, or paragraph emphasis. There is no shared mid-range size where both families compete.

Note on Font Substitutes

Mark Pro is a licensed editorial sans. The closest free open-source substitute is Inter Display at weight 800 — comparable cap height, similar tightness in the negative-tracked display tiers. General Sans at weight 700 is also close in feel but is not freely licensed for commercial use. For Eina01, the closest free substitutes are Manrope at weights 400-700 or DM Sans at the same weights — both share Eina01's geometric humanist character and translate cleanly to the same point sizes.

Layout

Spacing System

• Base unit: 4px implicit, with 20px and 24px as the dominant module values (29 and 27 captured occurrences respectively).
• Tokens: {spacing.xs} 6px · {spacing.sm} 15px · {spacing.base} 20px · {spacing.md} 24px · {spacing.lg} 40px · {spacing.xl} 48px · {spacing.2xl} 90px · {spacing.3xl} 120px.
• Section padding (vertical): ~120px on the purple hero band; below the fold the rhythm tightens to ~90px between major sections.
• Card internal padding: {spacing.md} (24px) on the standard preview cards; the slide-preview hero card sits at {spacing.lg} (40px) horizontal.
• Top-nav padding: {spacing.base} (20px) vertical, {spacing.lg} (40px) horizontal.

Grid & Container

• Max content width: ~1122px on the hero and ~640px on the hero sub-paragraph block (the lead paragraph is deliberately narrower than the headline).
• Hero block: full-bleed purple canvas with the headline + sub-paragraph + CTA stack centered, the embedded slide-preview thumbnail rendered as a 3-up card row directly beneath.
• Below-fold sections: centered displays at ~1122px, with 3-up template thumbnail grids and a 6-up customer-logo strip.
• Template preview row: 3-column grid showing a "Sketch," "Bikes," and "Quarterly" template thumbnail — each in a soft drop-shadow card with rounded corners.

Rhythm

The page alternates between purple bands and white bands rather than holding a single tempo. The hero is purple. The "Trusted by 3M+ teams" band returns to white. The "Get a head start with free templates" band returns to purple. The "How Pitch works" band is white. This call-and-response between the brand voltage and the neutral canvas is the page's structural device — bands either carry the voltage or sit on the canvas, never sit on a tinted-purple in-between.

Elevation

The system has a light shadow tier centered on soft 1px halos and drop shadows for the slide-preview thumbnails.

• Flat (no shadow): hero text, body paragraphs, nav, footer — every typographic surface.
• Card halo: the slide-preview hero card sits with a soft 0-8-32 rgba(0,0,0,0.04) shadow against the purple canvas — the only meaningfully-elevated element above the fold.
• Template thumbnail shadows: the 3-up template-preview grid below the fold uses a faint 0-2-8 drop shadow per card, just enough to lift the card off the white canvas without competing with the brand purple.
• Hairline outlines: {colors.hairline} (#dddfe5) carries 1px outlines on input fields and dropdown menus.

Shapes

The radius scale is small-step with two pill exceptions:

• {rounded.none} 0px — only on the full-bleed hero canvas and the customer-logo wall.
• {rounded.xs} 3px — small inline chips and input field corners (25 captured occurrences, the dominant value).
• {rounded.sm} 6px — cards and dropdown popovers (17 captured occurrences).
• {rounded.md} 8px — buttons and pill-fill chips (14 captured occurrences).
• {rounded.lg} 20px — larger surface blocks and the slide-preview hero card (10 captured occurrences).
• {rounded.xl} 26px — the featured-card thumbnails on the template preview row (5 captured occurrences).
• {rounded.pill} 56px — one single oversized component (a "How Pitch works" callout panel).
• {rounded.full} 9999px / 50% — circular avatars and round icon buttons (8 captured occurrences).

There is no 4px tier and no 12-16px tier. The scale jumps from 8px to 20px and from 20px to 50% with no middle steps — small surfaces stay small-step rounded, large surfaces jump to generous rounding, with no in-between.

Components

hero-section — Full-bleed indigo-purple {colors.primary} canvas, 120×40 padding, no radius. Holds the 80px Mark Pro h1 in white, a 640px sub-paragraph at {typography.body-lg}, the white CTA pill, and the embedded slide-preview thumbnail card directly beneath.

hero-heading — White {colors.canvas} text on the purple canvas, Mark Pro 80px / 800 / -1.6px tracking. The loudest typographic surface in the system.

section-heading — Charcoal {colors.ink} text on the white canvas, Mark Pro 42px / 800 / -0.84px — used for "Trusted by 3M+ teams worldwide" and similar section h2s.

sub-heading — Charcoal {colors.ink} text, Mark Pro 28px / 800 — used for the "How Pitch works" sub-display and the feature-card titles.

body-paragraph — Charcoal {colors.ink} text at {typography.body-lg} (Eina01 18px / 400 / 36px line-height). The workhorse paragraph style.

caps-label — Mark Pro 13px / 700 with 1.3px positive tracking, uppercase. The eyebrow label above section heads — rare but distinctive.

button-primary — White {colors.canvas} fill on the purple hero, charcoal {colors.ink} text, Eina01 uppercase 14px / 700 with 1.4px tracking, {rounded.md} 8px radius, 15×24 padding, 48px height. "Get started for free" is the canonical instance.

button-primary-purple — Indigo-purple {colors.primary} fill, white text on a white canvas — the inverse of the hero CTA, used below the fold where the canvas is white instead of purple.

button-secondary — Transparent fill, white text, 1px white border, {rounded.md} 8px radius — used for "Watch the demo" tertiary CTAs on the purple hero.

top-nav — Indigo-purple {colors.primary} fill (the nav continues the hero canvas), white text, 64px height, 20×40 padding. Houses the Pitch wordmark left, product nav center, and Login / Get started cluster right.

nav-link — Transparent background, white text in {typography.nav-link} (16px / 400 Eina01), 6×12 padding. Hover state is a subtle white-with-alpha background tint.

yellow-chip — Mustard {colors.yellow} fill, charcoal {colors.ink} text, {rounded.md} 8px radius, 8×16 padding, 36px height. The single yellow-chip callout — "Get a head start with free templates" is the canonical instance.

preview-card — White {colors.canvas} fill, 1px {colors.hairline} border, {rounded.xl} 26px radius, 0 padding (the slide preview fills the card edge-to-edge). Holds the template thumbnail in the 3-up below-fold grid.

text-input — White {colors.canvas} fill, charcoal {colors.ink} text, 1px {colors.hairline} border, {rounded.xs} 3px radius, 8×12 padding, 40px height. Used in the "Sign up with email" newsletter form at the page bottom.

Do's and Don'ts

Do treat the brand purple {colors.primary} (#6b53ff) as a full-canvas voltage on the hero and the top-nav. The single move that defines the system is the purple hero canvas; holding the voltage to a CTA-only fill would erase the brand statement.

Do render display headlines at Mark Pro 800 with negative letter-spacing. The 80px / -1.6px hero is the loudest typographic surface in the system; dropping to weight 500 or to 0 tracking would lose the editorial heaviness that distinguishes Pitch from peer SaaS landings.

Do scope the yellow {colors.yellow} (#ffd02c) to chip callouts and small accent rims. The 10-occurrence ration is the discipline; treating it as a section-fill color would create a third major voltage and break the binary purple-and-white rhythm.

Do pair Mark Pro display with Eina01 body. Every display surface is Mark Pro; every body surface is Eina01. The pairing is the typographic identity — mixing Eina01 into display tiers or Mark Pro into body paragraphs collapses the family-boundary distinction.

Don't introduce a tinted-purple band between the saturated hero and the white below-fold canvas. The system is binary — purple bands or white bands, no middle tier. Adding a light-purple section background would muddy the call-and-response rhythm.

Don't render the hero h1 at a smaller size or a lighter weight. The 80px / 800 / -1.6px display is the brand voice; reducing to 56px or to weight 500 would push the page toward a peer-SaaS hero and lose the magazine-cover loudness.

Don't add a third typeface. The two-family stack (Mark Pro + Eina01) is the typographic identity; adding a serif, a script, or a monospace would diffuse the binary display-versus-body split.

Don't introduce a 12-16px middle radius tier. The system jumps from 8px to 20px deliberately; adding a 12 or 16 would soften the contrast between the small-step input chrome and the generous 20-26px card surfaces.

Known Gaps

• Hover and focus states: the captured marketing surface does not expose explicit hover, press, or disabled tints on {component.button-primary} or {component.button-primary-purple}. The full state matrix lives inside the product editor and is not represented in the marketing tokens here.
• Form input validation: {component.text-input} carries the resting state from the newsletter sign-up at the page foot; error / success styling is not exposed on the marketing surface.
• Dark mode: the captured page is light-only (apart from the purple hero band, which is inherently saturated). A dark mode exists in the editor product but is not represented here.
• Motion: the slide-preview thumbnails carry a subtle hover-lift animation and the hero CTA pill has a press-state transition, but the spec captures end-state values only. Easing curves and durations live in the live site CSS.
• Editor surfaces: this DESIGN.md captures the marketing site only. The Pitch editor (app.pitch.com) carries a substantially richer token system — slide-layout grids, comment-thread chrome, video-recording controls, presentation-mode UI — that is not represented here.
• Template thumbnail rendering: the 3-up template preview row uses rendered screenshots from actual customer decks, each carrying its own color palette. These thumbnail palettes are not parameterizable from this token spec; they live in the live template gallery data.
• Yellow accent saturation: the captured page renders the {colors.yellow} chip almost exclusively as a flat fill. A small set of yellow accent rims appears on hover-state highlights elsewhere but is not visible at sufficient frequency to document in the component map.