Reverse-engineered design system

Design System
Analysis of Pitch

A crisp white canvas governed by near-black plum ink, electrified by a single high-voltage violet that carries every CTA — softened by lavender surfaces, a candy-lime pop, and signature coloured glow shadows under big, tightly-tracked geometric display type.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Display & headings ride proprietary Mark Pro Bold (shown here as Manrope) at 700 with aggressive negative tracking; body & UI use Eina 03 (shown as Inter). Hierarchy is built from size and weight, not colour.

03 — Components

Button Variants

button-primary
Electric violet #5318eb, white label, 4px radius — the single conversion action.
button-dark
Near-black plum #0c021c used for inverted bands and high-contrast CTAs.
button-secondary
Outlined, ink border on white — the quieter, exploratory action.
button-pill
Lavender fill, deep-indigo text, 100px full pill — filters and tags.
04 — Components

Cards & Surfaces

Borderless cards on white, rounded a soft 24px, that bloom into a lavender-tinted glow shadow on hover rather than a neutral grey drop.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

A 4px base unit expanding through 8 / 12 / 16 / 24 / 32 / 48px, with sections generously padded to let the white breathe.

07 — Foundations

Border Radius

Rounding as brand signal: tight 4px on inputs and the primary button, climbing to soft 20–24px cards, 40px feature panels, and a 100px pill.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. Most surfaces sit flat on the white canvas at rest.
Level 1 — soft lavender lift for resting cards: 0 8px 24px -12px rgba(198,165,255,0.30).
Level 2 — the signature coloured glow on hero art & hover: 0 20px 60px -20px rgba(198,165,255,0.35).
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle column; mega hero type steps down; nav condenses to a menu; large tap targets.
Tablet768–1023pxCard grids collapse 4→2; lede widths tighten; section padding reduces.
Laptop1024–1279pxFull multi-column grids return; display type scales back up.
Desktop≥ 1280pxWide centred max-width column; full 180px hero scale and ambient lavender glow.

Note: the 180px hero scale is desktop-only; the type ramp steps down aggressively below it. The layout consistently favours air and generous rounding over information density.

Pricing Tiers

Brand-appropriate sample content — Pitch's public site is marketing-led, so these tiers are illustrative to demonstrate the card, dark-feature, and list patterns.

Starter
$0/ user / mo
For individuals putting their first decks together.
  • Unlimited presentations
  • AI deck generation
  • Core template gallery
  • Real-time collaboration
Pro● Most popular
$25/ user / mo
For teams that present and pitch every week.
  • Everything in Starter
  • Brand kit & custom fonts
  • Analytics on shared decks
  • Version history
  • Priority support
Enterprise
Custom
For organisations standardising on Pitch.
  • SSO & SCIM provisioning
  • Advanced permissions
  • Dedicated workspace
  • Onboarding & SLA

Data Table

Illustrative workspace table — quiet headers on off-white, pill status chips tinted with the brand lavender and violet.

IDPresentationOwnerStatusWhen
#4821Q3 Board ReviewAvery LinPublished2h ago
#4820Series B PitchDev PatelDraftYesterday
#4817Product Launch DeckMara ColePublished2 days ago
#4811Sales Enablement KitJonas ReedDraft4 days ago
#4805Brand Guidelines 2026Priya ShahPublished1 week ago
1–5 of 412
123

Auth Forms

Sample auth pattern in the Pitch register — soft-shadowed cards, violet primary actions, ghost SSO fallback.

Sign in

Welcome back

OR
Create account

Start with Pitch

OR