An unofficial, original Pitch-inspired product system with 15 evidence-backed elements for Canvas's focused workflow language.
Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.
Delivered component specimen
Inspect the kit's typography, palette, icons, spacing and motion.
Style identity
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.
Reference style: expressive light and dark presentation surfacesTypography
Mark Pro
Observed Pitch display family for the oversized hero, slide titles, and conversion headlines.
Mark Pro Bold, Mark Pro Regular, Inter, sans-serifFallback: 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-serifFallback: 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, monospaceFallback: ui-monospace, SFMono-Regular, monospace
Inter
Observed support family in embedded and utility content.
Inter, ui-sans-serif, system-ui, sans-serifFallback: ui-sans-serif, system-ui, sans-serif
Palette
Paper
#fffafbLight workspace canvas
Ink
#26202dSlide and editor copy
Editor violet
#8c63e8Primary generation, selected slide, and focus
Pitch pink
#f26eb7Expressive campaign accent and collaboration cue
Proof teal
#61d5c0Data story and positive signal
Signal lime
#d8f27ePrompt or delivery highlight
Dark canvas
#15121cDark editor and campaign surface
Raised dark
#342748Selected and elevated dark-mode panel
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Campaign display | 92px | 700 | 0.8 | -0.06em |
| Hero mobile | 48px | 700 | 0.9 | -0.05em |
| Section heading | 56px | 700 | 0.98 | -0.045em |
| Slide heading | 32px | 700 | 1.05 | -0.03em |
| Body large | 20px | 400 | 1.45 | -0.01em |
| Body | 16px | 400 | 1.55 | 0 |
| Editor label | 13px | 700 | 1.3 | 0 |
| Prompt metadata | 12px | 400 | 1.45 | 0.04em |
Spacing & shape
Iconography
Use icons as navigation and action support, keep stroke weight consistent, and label editor commands. The pack uses original text/CSS symbols rather than Pitch artwork.
System metrics
Radius
Spacing
Motion
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
#fffafbLight presentation workspace
White slide
#ffffffSlide and card surface
Dark workspace
#15121cDark editor and presentation background
Violet panel
#342748Selected and elevated dark-mode surface
Guidelines
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.
Assigned collection
15 published components in collection order
Components
These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.
More AI Kits
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 16 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger.
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.
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.
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.
