Your favorite forms.
Now with automation.

Combine AI forms and automated workflows to turn every response into action.

Get started — it’s freeExplore forms →
QUESTION 2 OF 5
What brings you here today?
Choose the one that fits best.
ACollect research at scale
BQualify inbound leads
CRun a customer survey
DSomething else
OK ✓ press Enter ↵ 40% completed
INTELLIGENT FORMS

Build forms at the drop of a prompt

With over 48 million responses collected, Typeform knows what makes people answer.

High Response Rate

One question at a time keeps people moving to the end — and keeps your data clean.

Deeper Insights

Logic branches on every answer, so each respondent gets the questions that matter.

Advanced Analytics

See drop-off per question and fix the one that is costing you completions.

CONTROLS

Shapes that soften on hover

Primary · 48px · 12px radius · Twklausanne 500 16px · hover fill #564b58
Get started Hover Disabled
Secondary / outline · 1px #2a222b · hover fill #eeecee · and the 40px nav variant
Read all customer stories Hover Disabled Sign up Hover
Tertiary / link · text hovers to purple #a25fba
Explore forms → Hover → Disabled →
Tags / choice chips — idle, hover and active
Idle Hover Active TemplatesIntegrations
Choice field — default and selected (the form card’s answer control)
ACollect research at scale
BQualify inbound leads
Open-answer field · default and focus · reconstructed from captured surface, hairline and radius tokens
Type your answer here...Shift ↵ to add a line
Collect research at scalepress Enter ↵

The signature interaction: border-radius animates alongside background-color over 0.2s, so every control visibly softens on hover. Buttons are 12px at rest and round out toward the 24px step. The hero form renders inside the embedded product canvas, so input and focus styles were not captured: the field above is assembled from published tokens only, the #ffffff foreground surface on a 1px #e5e1e5 hairline at the 12px control radius, with Twklausanne 350 at 1.875rem and #655d67 placeholder text. Its focus state is derived the same way, the captured secondary hover fill #eeecee plus the #a25fba accent on the border and caret, with the radius easing to the 24px step. Disabled field tokens were not captured either; every other state above uses the published idle/hover token pairs.

TYPOGRAPHY

Tobias serif over Twklausanne

heading-display · Tobias · 5rem/1em · 400 · -1pxYour favorite
heading-one · Tobias · 4.5rem/1em · 400 · -1pxForms, evolved
heading-two · Tobias · 4rem/1.1em · 400 · -2pxAsk beautifully
heading-three · Twklausanne 350 · 3rem/1.1em · 0Build forms at the drop of a prompt
heading-four · Twklausanne 400 · 2.25rem/1.15em · 0Intelligent Forms
heading-five · Twklausanne 500 · 1.875rem/1.15em · 0Growth Flow
heading-six · Twklausanne 500 · 1.5rem/1.15em · 0High Response Rate
eyebrow · Twklausanne 600 · .875rem/1.2em · 0 · #a25fbaINTELLIGENT FORMS
paragraph-lg · Twklausanne 350 · 1.3em · 0People finish forms that feel like a conversation.
paragraph-md · Twklausanne 400 · 1.25rem/1.3em · 0Combine AI forms and automated workflows.
paragraph-sm · Twklausanne 400 · 1rem/1.3em · 0With over 48 million responses collected.
paragraph-xs · Twklausanne 400 · .875rem/1.3em · 040% completed
paragraph-xxs · Twklausanne 400 · .75rem/1.3em · 0Powered by Typeform
bold body · Twklausanne 600 · sm / xs · 1.3emWeight comes from the named cut, not font-weight
action-text-md · Twklausanne 500 · 1.25rem/1.3em · 0Read all customer stories
action-text-sm · Twklausanne 500 · 1rem/1.3em · 0Get started — it’s free
PALETTE

Nothing here is gray

Semantic surfaces & text
background-idle#faf9fb
background-hover#f5f3f6
foreground-idle#ffffff
invert-idle#2a222b
text-secondary#655d67
text-highlight#9454ab
eyebrow#a25fba
border-primary#e5e1e5
Button & tag tokens
primary-bg#2a222b
primary-hover#564b58
secondary-hover#eeecee
tag-text#f9f2fd
Neutral primitives (aubergine-tinted)
neutral-25#faf9fb
neutral-50#f5f3f6
neutral-100#eeecee
neutral-200#e5e1e5
neutral-300#d4d1d5
neutral-400#c5c0c6
neutral-600#837a85
neutral-700#655d67
neutral-900#3e3040
neutral-1000#2a222b
Purple primitives
purple-50#fcf9fd
purple-100#f9f2fd
purple-200#f7edfc
purple-300#eccffa
purple-400#ddb7f0
purple-500#b66dd5
purple-600#a25fba
purple-700#9454ab
purple-800#753a88
purple-900#5c2e6b
Get real (brand secondary)
get-real-400#f3e4fb
get-real-500#b66dd5
get-real-600#b96dd5
get-real-700#a057bb
get-real-800#580273
Pastel illustration family & semantic
lavender-25#fbfafe
lavender-100#f2f1fe
lavender-200#ece9fb
lavender-300#ddd6fa
blue-25#fafcff
blue-200#e2f0fe
blue-300#bdddf9
green-50#f9fbf7
green-200#e7f2e4
green-300#c4e3ba
green-400#97da90
green-700#457d4e
yellow-200#fcf0ca
yellow-300#fbe19d
red-100#faf0f0
red-600#ce5d55
DEPTH & MOTION

Softness is the depth

xs · .25rem / 4px
sm · .75rem / 12px
md · 1.5rem / 24px
lg · 3rem / 48px
xl · 5rem / 80px
full · 1000rem
background-idle #faf9fb
foreground-idle #ffffff
foreground-hover #f5f3f6
invert-idle #2a222b

No box-shadow recipes resolved on this surface — depth is the #faf9fb → #ffffff surface step, the #e5e1e5 hairline, and the large radii. Motion — background-color 0.2s transitioned together with border-radius, so controls change shape as they highlight; consent chrome uses 0.15s ease-in-out. Spacing runs on a rem spacer scale (.25 / .5 / .75 / 1 / 1.25 / 1.5 / 2 / 2.5 / 3 / 4 / 5rem) with section padding at 2 / 3 / 5rem.