Pitch
A presentation platform with a creative-professional canvas built around a near-black surface (#1A1A2E / #16213E) for the editor and clean white for slides and marketing. Pitch's brand uses a distinctive coral-salmon accent (#FF6B6B or brand-specific coral) with deep purples and a refined collaborative design aesthetic. The editor chrome is minimal dark, making the slide canvas the undisputed hero. Typography uses Inter or a geometric sans at clean weights, with generous whitespace and an art-director's eye for proportion. The system reads as 'presentation software for people who care about design.'
Color Tokens
1. Visual Theme & Atmosphere
Pitch is the presentation tool for design-literate teams. The editor surfaces a dark, focused chrome that disappears behind the slide — a 1:1 reversal of PowerPoint's cluttered toolbar paradigm. The slide canvas is always the hero. Collaboration features (live cursors, comments, version history) are built in without disrupting the focus. The marketing site uses expressive, bold typography and rich template previews to demonstrate what's possible when presentation software gets out of your way.
2. Color System
Editor (dark):
- Background: #16213E — deep navy-dark for long editing sessions
- Surface: #1A2744 — panel backgrounds within the editor
- Ink: #E8EAF6 — light lavender-white for text in dark context
Marketing/Web (light):
- Canvas: white, surface layers in light blue-gray
- Primary: #5C33F6 — brand purple, primary CTAs
- Secondary: coral/salmon — template highlight accent
3. Typography
Inter at high contrast weights — display at 700 with very tight tracking (-0.03em). The presentation context demands type that works at 14px on a laptop and 100px projected on a conference room screen simultaneously. Pitch's built-in text styles accommodate this range.
4. Components & Patterns
- Slide canvas: Centered in editor, drop shadow against dark editor background, 16:9 ratio
- Slide panel: Left thumbnail strip showing all slides, drag to reorder
- Template picker: Gallery view, filterable by theme/industry, large previews
- Collaboration bar: Top-right live avatar cluster, cursor colors per collaborator
- Comment overlay: Pin comments directly on slide elements, thread conversations
- Present mode: Full-screen, presenter notes panel on secondary display
5. Spacing & Layout
Editor: slide panel left (200px) + canvas center (flex) + properties panel right (280px). All dark chrome. Marketing: 1200px max, feature sections alternating direction.
6. Motion & Interaction
Slide transitions (pitch uses smooth animated transitions). Live cursors move with CSS transitions. Template previews scale up on hover. Slide thumbnail drag uses spring physics. Present mode transitions configurable per-deck.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for