Pitch Design System

Color Palette

Primary Brand Colors

Dark Gray (×1492)

#2B2A35

Dark Gray 2 (×85)

#1E1D28

Blue (×316)

#6B53FF

Blue 6 (deep)

#5318EB

Dark Blue 2

#371789

Black (×348)

#000000

White (×321)

#FFFFFF

White 2

#F6F6F9

Vivid Accent Colors

Yellow (×110)

#FFD02C

Yellow 2

#FFD600

Orange

#FFA000

Orange 2

#FF9E2C

Purple (×97)

#8D49F7

Purple 2

#8A4CF9

Light Purple

#AB6EF9

Light Cyan

#81D4FA

Text / UI Scale

Blue 2 (×14)

#545465

Dark Blue (×6)

#3F4250

Blue 3 (×8)

#6F7387

Mid Gray

#808080

Blue 5 (fill)

#586EE0

Light Gray (border)

#DDDFE5

Light Gray 3

#F0EFF4

Typography

Base · Eina01 / Mark Pro

Eina01

Beautiful presentations for ambitious teams. Pitch makes it easy to build, present, and share slide decks that win.

Regular 400 Semibold 600 Bold 700 Extrabold 800

Secondary · Mark Pro · system-ui fallback

Mark Pro

TEMPLATES · THEMES · AI · TEAM

system-ui (fallback) CAPS +1.4px

Pitch

Display 80px · Extrabold · Eina01 · line-height: 80px · letter-spacing: −1.6px

Fast-moving teams

Display 60px · Extrabold · line-height: 60px · letter-spacing: −1.6px

Beautiful presentations

Heading 36px · Extrabold · line-height: 44px · letter-spacing: −1.2px

Build, present, and share

Heading 24px · Bold · line-height: 32px · letter-spacing: −0.72px

Pitch is the AI-powered presentation platform that helps ambitious teams create beautiful slide decks, collaborate in real time, and share with confidence.

Body · 16px · Regular · line-height: 24px · letter-spacing: −0.28px

Shared 3 days ago · 24 views · 6 comments

Caption · 14px · Regular · line-height: 22.4px

TEMPLATES · AI · THEMES · ANALYTICS

Label · 12px · Semibold · caps · letter-spacing: +1.4px

Font system: Pitch uses proprietary Eina01 (base) and Mark Pro (UI secondary) — both geometric sans-serifs common in startup design tools. Weight goes all the way to 800 (Extrabold) for display text, giving headlines extra visual authority. Letter-spacing spans negative display tightening (−1.6px) and positive caps tracking (+1.4px) — a total range of 3px.

Line Heights

Tight

13px

Snug

15.6px

Normal

17.6px

Relaxed

22.4px

LH-6

24px

LH-11

32px

LH-14

44px

LH-16

60px

LH-17

80px

LH-18

104px

Letter Spacing

Pitch

Tight · −1.6px

--letter-spacing-tight · 80px display

Present

Wide · −0.72px

--letter-spacing-wide · 24px headings

SLIDES

LS-6 · +1.3px

--letter-spacing-ls-6 · section labels

THEMES

LS-7 · +1.4px

--letter-spacing-ls-7 · micro caps

Spacing

Spacing Scale

36 tokens — 1px → 231.281px · Dense pixel-precise small values, many computed fractional tokens

42.3

62.6

84.7

103.9

120

128.6

142.6

147.3

231.3

Pitch uses dense fractional spacing — tokens like 42.348px, 84.702px, 103.94px, 128.562px, 147.281px, 231.281px — are computed values from a proportional layout scale, likely driven by a slide canvas ratio.

Borders

Border Radii

3px

6px

8px

10px

2XL

12px

Full

14px

20px

R10

26px

R11 (pill)

56px

Circle

50%

Pitch has the most granular radius system in this series — 13 tokens from 3px to 56px (plus 50%). Also notable: two asymmetric tokens --radius-md: 3px 3px 0 0 and --radius-2xl: 8px 8px 0 0 (top-rounded only) — used for drawer handles and bottom-attached panels.

Border Widths

--border-width-hairline

1px · standard dividers, card borders (×69)

--border-width-thin

2px · active states, selected slides (×12)

--border-width-base

9px · thick selection ring for slide thumbnails (×16)

The 9px --border-width-base is the most unusual border token in this series — thick enough to be used as a visual "selection ring" around active slide thumbnails. Only Bloomberg (8px) comes close. This is a deliberate choice for a presentation app where slide selection state needs high visual emphasis.

Shadow / Elevation

Shadow Tokens

5 tokens — from flat to deep modal overlay

--shadow-sm

Dropdowns, tooltips (×24)

rgba(0,0,0,0.15) 0px 3px 10px — standard neutral drop shadow

--shadow-md

Cards, popovers (×2)

rgba(103,110,144,0.2) 0px 8px 26px — blue-tinted medium shadow matching the brand palette

--shadow-lg

Modals, dialogs (×2)

rgba(43,42,53,0.25) 0px 6px 27px — dark-indigo tinted, matches dark-gray base color

--shadow-xl

Full overlays, slide presenter mode (×2)

rgba(43,42,53,0.5) 0px 6px 27px — same base as LG but 50% opacity. The lg/xl pair share identical offsets, only the opacity differs — maximizing modal presence without changing shadow shape. Uniquely Pitch-matched: the shadow color is derived directly from the --color-dark-gray background, making shadows feel like the surface itself is casting a shadow.

Z-Index

Layer	Value	Usage
--z-1	-1	Behind content — slide background textures, canvas decorations
--z-2	1	Base content — slide thumbnails, text blocks on canvas
--z-3	2	Slightly elevated — selected elements, hover states, resize handles
--z-4	2,147,483,001	Maximum (near int32 max, −646 offset) — presenter mode, full-screen overlays, critical modals that must sit above all embedded content and browser extensions

Pitch uses 2,147,483,001 — near int32 max (2,147,483,647) but with a −646 offset. This is the same family as Warp/Superhuman/xAI's int32 max strategy, but Pitch leaves room for exactly 646 values above it. This allows an internal "trump" value system where the presentation renderer can still guarantee stacking above the nav layer.

Breakpoints

🖥️

--breakpoint-xs

1082px

Compact desktop (minimum)

🖥️

--breakpoint-sm

1123px

Standard laptop

🖥️

--breakpoint-md

1399px

Standard desktop

🖥️

--breakpoint-lg

1667px

Wide desktop

🖥️

--breakpoint-xl

1670px

Wide desktop (offset)

🖥️

--breakpoint-2xl

1820px

Ultrawide desktop

All 6 breakpoints start at 1082px minimum — Pitch is the only brand in this series with zero sub-1000px breakpoints. It's a pure desktop product; mobile web access to the editor is intentionally unsupported. The 1667/1670 near-pair is the same strategy as Warp's 809/809.98 — boundary max/min pairs that create clean layout transitions without rounding artifacts.

Opacity

Opacity Tokens

4 tokens — 0.50 → 0.85 · all in the high-visibility range

--opacity-50

50% · ×1

--opacity-70

70% · ×5

--opacity-80

80% · ×2

--opacity-85

85% · ×5

Pitch's opacity tokens are all in the upper range (50–85%) — none of the ultra-low ghost values found in most brands. These are used for disabled UI states (70%), focused panel overlays (80%), and tooltip/drawer backdrops (85%). The heavy opacity work is done via rgba() color values embedded in the color tokens directly.

Accessibility — Contrast Ratios

WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1

Text Token	Background Token	Ratio	WCAG Rating
--color-dark-gray	--color-white	14.14:1	AAA
--color-dark-gray	--color-yellow	9.63:1	AAA
--color-dark-gray-2	--color-white	16.65:1	AAA
--color-dark-gray-2	--color-yellow	11.34:1	AAA
--color-blue-2	--color-white	7.41:1	AAA
--color-blue-2	--color-yellow	5.05:1	AA
--color-blue	--color-white	4.88:1	AA
--color-blue	--color-black	4.31:1	AA Large
--color-blue-3	--color-white	4.69:1	AA
--color-blue-3	--color-black	4.48:1	AA Large
--color-dark-gray	--color-mid-gray	3.58:1	AA Large
--color-dark-gray-2	--color-purple	3.51:1	AA Large
--color-dark-gray	--color-black	1.49:1	Fail
--color-dark-gray	--color-purple	2.98:1	Fail
--color-blue	--color-purple	1.03:1	Fail
--color-blue-3	--color-purple	1.01:1	Fail

CSS Variables Reference

Colors29 tokens

Dark Gray (×1492)--color-dark-gray#2B2A35

Dark Gray 2 (×85)--color-dark-gray-2#1E1D28

Blue (×316)--color-blue#6B53FF

Blue 6 (deep)--color-blue-6#5318EB

Blue 5 (fill)--color-blue-5#586EE0

Blue 2 (mid text)--color-blue-2#545465

Blue 3 (muted text)--color-blue-3#6F7387

Dark Blue (deep text)--color-dark-blue#3F4250

Dark Blue 2--color-dark-blue-2#371789

Purple (×97)--color-purple#8D49F7

Light Purple--color-light-purple#AB6EF9

Yellow (×110)--color-yellow#FFD02C

Orange--color-orange#FFA000

Black (×348)--color-black#000000

White (×321)--color-white#FFFFFF

Light Gray (border)--color-light-gray#DDDFE5

DG-3 (shadow 25%)--color-dark-gray-3rgba(43,42,53,.25)

DG-4 (shadow 50%)--color-dark-gray-4rgba(43,42,53,.5)

Typography, Motion & Layersselected tokens

Eina01 (base)--font-family-baseEina01

Mark Pro (UI)--font-family-2Mark Pro

system-ui (fallback)--font-family-3system-ui

Regular--font-weight-regular400

Semibold--font-weight-semibold600

Bold--font-weight-bold700

Extrabold--font-weight-extrabold800

80px display--font-size-80px80px

Tight (display)--letter-spacing-tight−1.6px

LS-7 (micro caps)--letter-spacing-ls-7+1.4px

Instant (×16)--duration-instant100ms

Fast (×52)--duration-fast120ms

D-7 (×120)--duration-duration-7400ms

D-10 (longest)--duration-duration-101.4s

Ease In-Out (×146)--easing-ease-in-outease-in-out

Dim 50%--opacity-5050%

Muted 70%--opacity-7070%

Strong 85%--opacity-8585%

Behind content--z-1-1

Base / Elevated--z-2 / --z-31 / 2

Max (int32 −646)--z-42,147,483,001

Hairline--border-width-hairline1px

Thin (active)--border-width-thin2px

Base (selection ring!)--border-width-base9px

Design System Preview · Pitch (Dark Blue-Indigo) · Generated 19/04/2026 · 29 color tokens · 14 font-size · 3 font-family · 4 font-weight · 18 line-height · 7 letter-spacing · 36 spacing · 13 radius · 3 border-width · 5 shadow · 10 duration · 3 easing · 4 z-index · 6 breakpoints · 4 opacity