Typography

We set the brand in Post Grotesk, designed for maximum usability and an overall sense of neutrality. We read informative and clear to help professionals' stories shine.

Post Grotesk

Post GroteskABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789*↗$!”
Sharp Type · Josh Finklea6 weights · 12 fontsBook 400 · Medium 500

Weights

We use a narrow range of weights, each with 1 job.

Book sets paragraphs, labels and eyebrows. Medium sets every headline and header. Bold sets very short, big visual text: 1 to 3 words or a number.

Aa
Book · 400
Aa
Medium · 500
Aa
Bold · 700

Headlines and headers

Set every headline and header in Medium.

We set display type at 120px and up for covers, chapter openers and statement pages, and every header from H1 to H6 uses the same settings. Nothing goes tighter than 100% leading, because below that a descender lands on the line beneath it.

Display
Medium 500120px and up100% leading−0.04em tracking
Headers H1–H6
Medium 50024–72px100% leading−0.04em tracking
Metrics
Cap height 0.70emDescender 0.213em
Designer decks
without the designer
Automate layout at the speed of thought
Headlines · headersMedium 500 · default−0.04em tracking

Work ready
for the room.

100% — correct

Work ready
for the room.

86% — descender collides
Optical alignment

Left-align display type to the ink, not the text box. Pull each line left by its own glyph side bearing, about 0.08em for B and 0.05em for G, so the stems land on the grid.

BrandGrowth

Text box — stems sit off the grid

BrandGrowth

Ink — stems on the grid
Text as a graphic element

Set a single number or short claim in Bold when it stands alone as the graphic on a slide. Give it the whole frame, keep it to 1 figure, phrase, or fragment, and never set it beside other display type in another weight.

10xFaster to a work-ready deck

Paragraphs, labels and eyebrows

Set paragraphs, labels and eyebrows in Book.

Body copy holds professionals’ detail, so we give it open leading and a full line of space between paragraphs. Labels and eyebrows set in uppercase Book, tracked to 0.12em.

Paragraphs
Book 40014–20px150% leading1em between
Eyebrows and labels
Book 400 · uppercase11–14px130% leadingUppercase · 0.12em
Get work ready

Professionals come to us with a deadline and a blank deck. Our AI builds the first draft from professional templates and smart slide layouts.

Their team starts from a work-ready presentation in minutes instead of hours.

Professional templatesOn brand
Stay work ready

The work keeps changing after the first draft. Our smart slide layouts adapt every time professionals rewrite or reorder their story.

Every slide stays on brand, so the deck is ready whenever the meeting moves up.

Smart slide layoutsWork-ready
Paragraphs · labels · eyebrowsBook 400Uppercase · 0.12em

Type scale

Every size on the page comes from these 12 steps.

Pick each size by its role, never by eye. On phones, headers step down: H1 to 48px, H2 to 40px, H3 to 32px, H4 to 24px, H5 to 20px and H6 to 18px.

Display120px+ · 100% · 500The new standard for presentations at work.
H172px · 100% · 500Build faster. Launch smarter.
H258px · 100% · 500Everything you need to show up ready.
H346px · 100% · 500A presentation platform for professionals.
H437px · 100% · 500Smart Slides, not smart hacks.
H530px · 100% · 500Section title here.
H624px · 100% · 500Subsection heading.
Body L20px · 150% · 400Body large — lede paragraphs and pull quotes.
Body M16px · 150% · 400Body regular — the workhorse for descriptive copy and product surfaces.
Body S14px · 150% · 400Body small — captions, footnotes, helper text.
Tagline16px · 150% · 500Eyebrow / category
LabelBook 400 · uppercase · 0.12em→ code · labels · system metadata

In context

The weights, sizes and tracking work together on a real page.

This page uses 3 roles from the scale and nothing else.

Eyebrow
Book 400 · uppercaseUppercase · 0.12em
Headline
H1Medium 500
Body
Body LBook 400
For product teams

Our AI builds every slide from professional templates and smart slide layouts, so product teams take an on-brand, work-ready deck into the room 10x faster.

Get startedSee pricing
H1 · Medium 500Body L · Book 400Eyebrow · uppercase 0.12em

Layout

We rely on a structure professionals never see to keep every piece of our work consistent and polished. Our product, marketing and content all follow the same grid rules, so professionals recognize our work in every format.

Responsive grid

Desktop uses 12 columns, tablets use 8 and phones use 4.

Drag the handle or pick a screen to see how our grid and type adapt.

Margin
1/12 of the screen120px at 1440, 160px at 1920
Marketing pages
Stop at 1200pxA comfortable reading measure for product copy
Showcase pages
Grow to 2280px84% of the screen for imagery and specimens
Screen
Columns
Gutter
Margin
Content
Headline / body

Spans

Span every element across whole columns.

Keep body copy between 45 and 70 characters a line, set flush left. We never center body copy across a wide span.

12 columns

Heroes, mosaics and wide banners

6 + 6

Image pairs and 2-up cards

4 + 4 + 4

Rule cards and 3-up grids

3 + 9

A label rail beside its content

4 to 8 columns

Body copy, set flush left. We never center body copy across a wide span.

Vertical rhythm

Space between elements comes from 5 steps on a 4px base.

Pick the step by the relationship between the elements. We list values at 1440px and up and draw each sample at half size. Each step scales down on smaller screens and never grows past these values.

12
Heading to its rule line--sp-rule
32
Gutter between tiles--gut
32
Heading to its content--sp-content
96
Intro paragraph to content--sp-block
112
112
Between sub-sections--sub-gap