Soft, human form brand where no neutral is truly neutral: every black is aubergine and every white is a warm off-white, with an inverted dark hero carrying an 80px Tobias serif headline at a calm weight 400 over Twklausanne named optical cuts, a deliberately generous 4-to-80px radius scale, and a signature hover in which border-radius animates alongside the fill so controls visibly change shape.
Browse Typeform in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: typeform.com (live DOM, computed styles + published Webflow design-token variables), 2026-07-18. Coverage: home / platform landing. Logged-in form builder not captured (needs login). Note: the hero is on the inverted dark aubergine surface, not white. Section-band order below the hero: not fully captured (a cookie modal locked scrolling).
Typeform's system is warm-neutral rather than gray: every "black" is aubergine #2a222b and every "white" is the off-white #faf9fb, so the page never feels clinical. The hero inverts onto that aubergine and carries an 80px Tobias serif headline at weight 400 — a high-contrast display face that supplies all the personality, with no bold weight anywhere on the page. Under it, everything is Twklausanne, a grotesque shipped as *named optical weights* (350 / 400 / 500 / 600) rather than numeric weights on one file. Radii are unusually generous — the token scale runs 4px, 12px, 24px, 48px, 80px — which is what makes the surface read as soft and human. Purple #a25fba is reserved for eyebrows and link highlights only, with a wide pastel tint family (purple, lavender, blue, green, yellow) held back for illustrations. Feels: soft, human, warm, editorial.
| Token | Hex | Role / usage |
|---|---|---|
surfaces/background-idle | #faf9fb | Page background (warm off-white, never pure white) |
surfaces/background-hover | #f5f3f6 | Background hover |
surfaces/foreground-idle | #ffffff | Cards / raised panels |
surfaces/foreground-hover | #f5f3f6 | Card hover |
surfaces/invert-idle | #2a222b | Inverted hero + dark sections |
text-colour/primary | #2a222b | Primary text |
text-colour/secondary | #655d67 | Secondary text |
text-colour/invert | #faf9fb | Text on dark |
text-colour/highlight | #9454ab | Link / highlight text |
eyebrow-colour | #a25fba | Eyebrow labels |
border/border-primary | #e5e1e5 | Hairlines |
| Token | Hex |
|---|---|
button/primary-bg-idle | #2a222b |
button/primary-bg-hover | #564b58 |
button/primary-text | #faf9fb |
button/secondary-bg-idle | #faf9fb |
button/secondary-bg-hover | #eeecee |
button/secondary-text | #2a222b |
button/secondary-border | #2a222b |
button/tertiary-idle | #2a222b |
button/tertiary-hover | #a25fba |
tag-border #2a222b · tag-bg-hover #eeecee · tag-bg-active #2a222b · tag-text-active #faf9fb · tag-text #f9f2fd
25 #faf9fb · 50 #f5f3f6 · 100 #eeecee · 200 #e5e1e5 · 300 #d4d1d5 · 400 #c5c0c6 · 600 #837a85 · 700 #655d67 · 900 #3e3040 · 1000 #2a222b
50 #fcf9fd · 100 #f9f2fd · 200 #f7edfc · 300 #eccffa · 400 #ddb7f0 · 500 #b66dd5 · 600 #a25fba · 700 #9454ab · 800 #753a88 · 900 #5c2e6b
get-real 400 #f3e4fb · 500 #b66dd5 · 600 #b96dd5 · 700 #a057bb · 800 #580273
lavender 25 #fbfafe / 100 #f2f1fe / 200 #ece9fb / 300 #ddd6fa · blue 25 #fafcff / 200 #e2f0fe / 300 #bdddf9 · green 50 #f9fbf7 / 200 #e7f2e4 / 300 #c4e3ba / 400 #97da90 / 700 #457d4e · yellow 200 #fcf0ca / 300 #fbe19d · red 100 #faf0f0 / 600 #ce5d55
Rules. There is no pure black and no pure gray — every neutral is aubergine-tinted. Purple is confined to eyebrows, link highlights and the tertiary-button hover; it is never a button fill. The pastel tint family belongs to illustrations and template cards, never to chrome.
Tobias, "Times New Roman", serif — the brand serif"Twklausanne 350", "Twklausanne 400", "Twklausanne 500", "Twklausanne 600", each with Arial, sans-serif fallbackPublished type tokens:
| Role | Family | Size | Line | Tracking |
|---|---|---|---|---|
| heading-display | Tobias | 5rem / 80px | 1em | -1px |
| heading-one | Tobias | 4.5rem / 72px | 1em | -1px |
| heading-two | Tobias | 4rem / 64px | 1.1em | -2px |
| heading-three | Twklausanne 350 | 3rem / 48px | 1.1em | 0 |
| heading-four | Twklausanne 400 | 2.25rem / 36px | 1.15em | 0 |
| heading-five | Twklausanne 500 | 1.875rem / 30px | 1.15em | 0 |
| heading-six | Twklausanne 500 | 1.5rem / 24px | 1.15em | 0 |
| eyebrow | Twklausanne 600 | 0.875rem / 14px | 1.2em | 0 (#a25fba) |
| paragraph-md | Twklausanne 400 | 1.25rem / 20px | 1.3em | 0 |
| paragraph-sm | Twklausanne 400 | 1rem / 16px | 1.3em | 0 |
| paragraph-xs | Twklausanne 400 | 0.875rem / 14px | 1.3em | 0 |
| paragraph-xxs | Twklausanne 400 | 0.75rem / 12px | 1.3em | 0 |
| paragraph-lg | Twklausanne 350 | — | 1.3em | 0 |
| action-text-md | Twklausanne 500 | — | — | — |
| action-text-sm | Twklausanne 500 | 1rem / 16px | 1.3em | 0 |
| bold body variants | Twklausanne 600 | (sm / xs) | 1.3em | 0 |
Heading-primitive scale (size-0 → size-6): 1.5rem, 1.875rem, 2.25rem, 3rem, — , — , 7rem, with -.01em at the small end tightening to -.02em.
Patterns: serif for display, sans for everything else, and the serif never goes above 400. Negative tracking appears only on the Tobias roles (-1px display/h1, -2px h2) and is zero on every Twklausanne role. Weight is expressed by *which named cut* you load, not by font-weight — computed weight is 400 across the board. Eyebrows are purple, and not uppercase-tracked.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.