Design System Inspiration of Typeform
1. Visual Theme & Atmosphere
Typeform makes forms and surveys that ask one question at a time. Founded in 2012, it is operated
by TYPEFORM, S.L., at Via Augusta 29–31 in Barcelona, and describes itself today as a remote-first
company with more than 250 people.
Its brand page puts the idea in a line: Typeform "inspires businesses to break the norm of forms".
The voice is "bold, authentic, and witty — never grandiose, haughty, or cheap with our humor". The
logo is "a blinking cursor side-by-side with a form", set in Aperçu Pro Regular. And the colours
are deliberately plain: "Typeform is the blank canvas on which businesses can add their own
colors… Our default colors reflect this: Paper (white) and Ink (black)."
The site follows that literally — Paper #faf9fb and Ink #2a222b, a warm near-black with a
touch of plum — with lavender and orchid reserved for highlights. Headlines are set in Tobias, a
serif; everything else in TWK Lausanne.
What makes it worth reading:
- Two named colours. Paper and Ink do almost all the work; the palette's other hues are accents.
- Hover as a step along the neutral ramp. Paper buttons go to neutral-100
#eeecee; Ink buttons
to neutral-800 #564b58.
- Tokens built in Webflow. The variables are Webflow's own exports — primitive collections
(
--_colour-primitives---…) aliased by role tokens (--tokens--button--primary-bg-idle).
Primary tasks
- Start building a form; browse templates.
- Sign up or log in; compare pricing.
2. Color Palette & Roles
Measured with getComputedStyle on typeform.com: about 250 root variables, all Typeform's —
about 220 primitive entries (colour, typography, size and spacing collections), 30 --tokens--*
roles and 4 --tag--* component values.
Paper and Ink
- Primary (
#2a222b) — Ink; --tokens--button--primary-bg-idle, neutral-1000.
- Foreground (
#2a222b) — --tokens--text-colour--text-colour-primary.
- Canvas (
#faf9fb) — Paper; --tokens--surfaces--background-idle, neutral-25.
- Ink hover (
#564b58) — --tokens--button--primary-bg-hover, neutral-800.
- Surface active (
#eeecee) — --tokens--surfaces--foreground-active,
--tokens--button--secondary-bg-hover.
- Surface hover (
#f5f3f6) — --tokens--surfaces--background-hover.
- Text secondary (
#655d67) · Border (#e5e1e5) · neutral-500 #a49da6 · White
#ffffff (--tokens--surfaces--foreground-idle).
Lavender and orchid
Highlight #9454ab (--tokens--text-colour--text-colour-highlight) · Eyebrow #a25fba
(also the tertiary button hover) · lavender-300 #ddd6fa · lavender-500 #a494eb · lavender-700
#7761b3 · lavender-900 #42377b.
3. Typography Rules
Font family
Tobias (400) for display headings and TWK Lausanne (350, 400, 500, 600) for body and
interface — both loaded (document.fonts) and served from the site's own CDN; body computes to
"Twklausanne 400", Arial, sans-serif. The brand's logotype face, Aperçu Pro Regular, is
declared but did not load on the pages measured — the brand page names it for the logo. Inter also
loads and drives none of the measured elements.
Scale
Buttons are 16px at 400 — the interface stays regular weight.
4. Component Stylings
Measured on the home page, focus read under a real Tab key, and a hover counted only when :hover
matched; background-image, text-decoration and pseudo-elements were compared too.
- Light button — Get started:
#faf9fb, Ink label, 12px radius, 48px, 8px 24px,
16px/400. Hover and press #eeecee. Focus is the browser's auto ring. Sign up is a 40px
version.
- Dark button — Explore forms:
#2a222b, Paper label, same shape. Hover and press
#564b58.
- Log in — Paper text on the dark hero; hover and press turn it lavender
#ddb7f0.
Radius
--_size-and-spacing---tokens--corner-radius--xs .25rem · sm .75rem (buttons, 12px) · md 1.5rem ·
lg 3rem · xl 5rem · full 1000rem.
5. Layout Principles
- Paper sections with Ink type; dark heroes invert to Paper on Ink.
- Generous corner radii on cards (24px and up).
6. Depth & Elevation
Flat: every measured control has no shadow, and the only shadow variable is
--tag--shadow-colour: transparent.
7. Do's and Don'ts
Do
- Build with Paper
#faf9fb and Ink #2a222b; add colour only as a highlight.
- Step hover along the neutral ramp:
#eeecee on Paper, #564b58 on Ink.
- Set headlines in Tobias and everything else in TWK Lausanne at regular weight.
Don't
- Don't use pure black or white where Ink and Paper are meant.
- Don't set interface text in the logo face, Aperçu Pro.
- Don't add drop shadows.
8. Responsive Behavior
Not measured. Desktop 1440×1000 only.
9. Agent Prompt Guide
Quick Color Reference
#2a222b Ink · #faf9fb Paper · #564b58 Ink hover · #eeecee Paper hover · #655d67 secondary ·
#e5e1e5 border · #9454ab highlight · #a494eb lavender
Example Component Prompts
- "A 48px button, Ink
#2a222b with a Paper #faf9fb 16px/400 TWK Lausanne label, 12px radius;
hover #564b58."
- "A Paper
#faf9fb section with a Tobias serif headline in Ink and a lavender #9454ab highlight."
10. Voice & Tone
The brand page defines it: "bold, authentic, and witty — never grandiose, haughty, or cheap with
our humor." Copy on the site was not audited against it.
11. Brand Narrative
Typeform set out to make forms something people enjoy, and its brand keeps itself out of the way so
customers' colours can come through: a cursor, a form, Paper and Ink. The site is the demonstration
— warm off-white, plum-tinted black, a serif for headlines, and lavender only where something should
stand out.
12. Principles
- A blank canvas. Paper and Ink, so the customer's brand leads.
- One question at a time. Calm, uncluttered layouts.
- Bold, authentic, witty. A serif headline with a sense of humour.
13. Personas
Not researched. No persona claim is made from a UI capture.
14. States
Hover and press: Paper buttons to #eeecee, Ink buttons to #564b58, the Log in link to lavender.
Focus: the browser's ring. No disabled state was observed.
15. Motion & Easing
Not measured.
Tier 1 sources: https://www.typeform.com/ (live homepage — about 250 root variables read via getComputedStyle; Tobias and TWK Lausanne loaded; three components measured at rest, hover, pressed and focus, captured 2026-09-26); https://www.typeform.com/brand/ (Typeform Brand — Voice, Logo, Color: Paper and Ink, Aperçu Pro Regular, read 2026-09-26); https://www.typeform.com/zz-this-does-not-exist-9182 (nonsense-path control — HTTP 404 "Page Error", read 2026-09-26); https://www.typeform.com/about-us/ (About us — "Founded in 2012 … remote-first … over 250 employees", read 2026-09-26); https://www.typeform.com/legal/privacy-policy (Privacy Policy — TYPEFORM, S.L., Via Augusta 29–31, 08006 Barcelona, read 2026-09-26)
