Skip to content
All AI Kits
Design system Pro AI Kit15 components

Pitch-inspired Story Studio

An unofficial, original Pitch-inspired product system with 15 evidence-backed elements for Canvas's focused workflow language.

Desktop · 1440 × 14510
Pitch homepage — desktop reference

Foundations

The visual decisions behind the system

A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.

Style identity

Story Studio

An original presentation workspace built from Pitch's current prompt-to-presentation story: expressive display type, bright color fields, a focused slide canvas, collaborative presence, and a clear path from draft to share.

expressive light and dark presentation surfaces theme
Visit website

Typography

Font families

Mark Pro

Observed Pitch display family for the oversized hero, slide titles, and conversion headlines.

Mark Pro Bold, Mark Pro Regular, Inter, sans-serif
Weights
400, 700
Sizes
32–180px
Line height
0.8–1.15
Tracking
-0.06em to 0

Fallback: Inter, ui-sans-serif, system-ui, sans-serif

Eina 03

Observed Pitch product, section, and supporting copy family.

Eina 03 Regular, Eina 03 Bold, Inter, ui-sans-serif, system-ui, sans-serif
Weights
400, 700
Sizes
14–48px
Line height
1.2–1.65
Tracking
-0.02em to 0

Fallback: Inter, ui-sans-serif, system-ui, sans-serif

Space Mono

Observed prompt labels, navigation metadata, and technical/editorial accents.

Space Mono, ui-monospace, SFMono-Regular, monospace
Weights
400, 700
Sizes
11–16px
Line height
1.35–1.6
Tracking
0.02em–0.08em

Fallback: ui-monospace, SFMono-Regular, monospace

Inter

Observed support family in embedded and utility content.

Inter, ui-sans-serif, system-ui, sans-serif
Weights
400, 700, 900
Sizes
12–24px
Line height
1.3–1.6
Tracking
0

Fallback: ui-sans-serif, system-ui, sans-serif

Palette

Core colors

Paper

#fffafb

Light workspace canvas

Ink

#26202d

Slide and editor copy

Editor violet

#8c63e8

Primary generation, selected slide, and focus

Pitch pink

#f26eb7

Expressive campaign accent and collaboration cue

Proof teal

#61d5c0

Data story and positive signal

Signal lime

#d8f27e

Prompt or delivery highlight

Dark canvas

#15121c

Dark editor and campaign surface

Raised dark

#342748

Selected and elevated dark-mode panel

Type scale

Responsive hierarchy

RoleSizeWeightLine heightTracking
Campaign display92px7000.8-0.06em
Hero mobile48px7000.9-0.05em
Section heading56px7000.98-0.045em
Slide heading32px7001.05-0.03em
Body large20px4001.45-0.01em
Body16px4001.550
Editor label13px7001.30
Prompt metadata12px4001.450.04em

Spacing & shape

Layout rhythm

Density
focused editor density with generous presentation pacing
Base unit
4px
Max width
1200px
Section gap
96px
Card padding
24px
Element gap
8px

System metrics

Radius

Control 8pxCard 12pxSlide frame 18pxCampaign media 28pxPill 999px

Spacing

1 4px2 8px3 12px4 16px6 24px

Motion

Control 120msEditor 200msStory reveal 480msEase cubic-bezier(0.2, 0.8, 0.2, 1)

Elevation

Slide card

0 1px 0 rgba(38,32,45,.06)

Default slide and template separation

Editor frame

0 18px 46px rgba(25,19,34,.18)

Focused deck canvas and modal surface

Focus ring

0 0 0 3px rgba(140,99,232,.34)

Keyboard focus and selected editor state

Surfaces & shape

Paper workspace

#fffafb

Light presentation workspace

White slide

#ffffff

Slide and card surface

Dark workspace

#15121c

Dark editor and presentation background

Violet panel

#342748

Selected and elevated dark-mode surface

Guidelines

Do

  • Keep one visual or one next action dominant on each slide or specimen.
  • Use display type for story and Eina/Inter for controls and explanation.
  • Make prompt, generate, review, and share steps explicit in the flow.
  • Use color fields as meaningful narrative or data signals.
  • Keep collaborators, brand controls, and sharing states close to the active slide.

Don't

  • ×Do not copy Pitch logos, source slides, customer marks, or proprietary page copy.
  • ×Do not turn a focused slide specimen into a full presentation application.
  • ×Do not use expressive type for every control label.
  • ×Do not rely on color alone for collaboration or delivery status.
  • ×Do not let high-res media or long titles force mobile overflow.

Imagery

Use original CSS slide frames, abstract color fields, chart primitives, and concise narrative labels. Avoid copied Pitch editor screenshots, downloaded templates, customer photography, and protected logos.

Layout

Use a 1200px rail with a strong slide frame or gallery as the focal point. Keep 24px desktop and 16px mobile gutters; collapse editor side panels below 760px and preserve slide order, prompt context, and share action.

Concept

A complete visual language, ready to inspect.

Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.

Assigned collection

Pitch-inspired Interface Elements

15 published components in collection order

Components

Built from the same system

Production-ready specimens from this AI Kit's approved collection.

Open collection
Presentation prompt
0
22
Template Product launch Company update Sales proposal
0
29
Presentation goal Generate outline
0
11
↑ Import presentation assets PPTX, PDF, CSV, or images up to 50 MB No file selected.
0
23
Editor actions ⌄ Present deck ⌘ ↵ Duplicate deck ⌘ D Archive deck ⌘ A
0
20
Workspace Editor Analytics Workspace selected.
0
24
Series A narrative 12-slide investor deck Draft Updated 9 min ago Open
0
18
Opening 01 Problem 02 Market 03
0
19
Share this deck? People in the deal room will receive view access to this presentation. Cancel Share deck
0
17
Brand library Apply team fonts and colors. Brand guardrails On
0
14
Series A The market is ready A new workflow for modern teams. 1 of 3 slides ← →
0
27
Story clarity +14%
0
22

More like this

Postman-inspired API Orbit

An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.

v0-inspired Prompt Workshop

An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.

Borderless Ledger — Wise-inspired AI Kit

13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.

Runway-inspired Real-World Studio

A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.

Observable-inspired Signal Notebook

An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.

Replit-inspired Build Canvas

A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.

Published AI Kit Protected source files for Pro members
Pitch-inspired Story Studio AI Kit - Frontend Forever