Pitch — design system & UI screens

Design · 1 screen · 12 sections · pitch.com

Opens with an oversized italic serif headline "Create slides that win." set on a dark plum hero with a faint 3D slide-deck graphic, an inline AI-style search prompt bar, and a row of muted brand logos. Below, the page shifts to a white canvas walking through stunning-slides product shots, a large 4M+/150+/5H+ stat band, a colorful masonry testimonial wall, and a pastel bento "complete presentation toolkit" grid; the signature element is the recurring electric-lime (#C9FF3D) accent against deep purple, capped by a full-bleed violet-gradient lower section with a stacked "TEMPLATES / PITCH DECK / MARKETING" giant-type word stack.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/pitch.

Decoded design system

Pitch's decoded design system: background #FFFFFF, text #0A0A0B, accent #5318EB, link #280F62, primary #5318EB; type scale h1 180px / h2 20px / body 16px; 8px spacing base; 15px base radius. The single interactive/action color is #5318EB — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#F0F0F0`
border	`#DADADA`
text	`#0A0A0B`
text_muted	`#676767`
primary	`#5318EB`
accent	`#5318EB`
link	`#280F62`
button_bg	`#5318EB`
button_text	`#FFFFFF`

Using these colors

Action color #5318EB — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #5318EB — one role, not several (the action color).
accent #5318EB — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #280F62 — inline text links and link-styled controls.

Typography

Heading: Mark Pro
Body: Eina 03
Mono: Space Mono
h1: 180px
h2: 20px
body: 16px

Spacing

base unit: 8px
scale: 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 52px

Radii

base: 15px
button: 4px

Shadows (elevation)

card: rgba(198, 165, 255, 0.35) 0px 20px 60px -20px
overlay: rgba(12, 2, 28, 0.18) 0px 24px 60px 0px, rgba(12, 2, 28, 0.08) 0px 4px 12px 0px

Motion

Micro-interactions run at 200ms (dominant) with ease-out.

durations: 200ms · 150ms · 400ms
easings: ease-out · ease
animated properties: opacity, filter, transform, outline-color

Layout (measured)

container max-width: 1220px
nav: 80px relative
common grid: 2 columns

Motion choreography (measured)

Load order: div → div×44

Scroll reveal: 8 elements rest at opacity 0, translateY(20px), animate in over 750ms.

Stagger: div ×3 — 200ms apart.

Input (measured)

height 72px · radius 0px

Responsive (measured)

breakpoints: 809px · 1199px
mobile (390px): hero 82px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Bold purple presentation-tool landing with giant serif hero and scrollytelling product proof