Typeform

Typeform operates in a register of editorial authority — a publishing house that also ships software. The hero section is a deep aubergine-black (#2a222b) that transitions to an almost-white cream (#faf9fb), creating a palette that feels like parchment under lamplight rather than a typical SaaS light-on-dark flip. The defining signature is the Tobias serif at display sizes: a classical editorial typeface with tight negative tracking (-0.031em at 64px) sitting alongside the geometric sans-serif TWK Lausanne, creating a deliberate tension between print heritage and digital utility. Buttons are low-key 12px radius rectangles in near-black — not pill-shaped, not sharp — quiet enough to let the typography lead. Purple (#9454ab) appears sparingly as a section label color for category eyebrows, never as a primary CTA, acting more like an editorial accent ink than a conversion color. Use Tobias 400 with negative letter-spacing (-1.98px at 64px minimum) for all display headlines — do not substitute a heavier weight sans-serif Reserve #9454ab exclusively for section eyebrow labels in uppercase TWK Lausanne 14px — never use it on buttons, links, or backgrounds Apply 12px radius to all button variants and 24px radius to all card containers — do not use pill (9999px) or sharp (0px) radius anywhere in the UI Alternate sections between #2a222b dark surfaces and #faf9fb/#f5f3f6 light surfaces — never stack two dark sections or two identical-tone light sections consecutively Maintain TWK Lausanne font-feature-settings of '"clig", "liga", "ss01", "ss11"' at all sizes — these alternate glyphs are part of the brand identity Use #2a222b (not pure #000000) for all primary text and dark backgrounds — the warm violet undertone is the brand's chromatic signature Keep CTAs in near-black fill regardless of section — on dark backgrounds use #faf9fb text with #faf9fb border; on light backgrounds same fill, no change Do not use saturated purple (#9454ab, #b66dd5) on buttons, hover states, or backgrounds — it exists only as typographic ink for category labels Do not use Tobias for body copy, captions, or UI labels — it is display-only; all functional text uses TWK Lausanne Do not add box-shadows to cards or buttons — elevation is expressed through background color contrast (dark surface vs light surface), not shadows Do not use weight 600+ in TWK Lausanne for headlines — heavy-weight sans headings contradict the editorial register the Tobias/Lausanne pairing establishes Do not use pill-shaped buttons (border-radius > 12px) for CTAs — the 12px radius is intentionally understated so typography leads, not the button shape Do not place colored backgrounds (purple, green, yellow) behind large content sections — only #2a222b, #faf9fb, #f5f3f6, and #ffffff are valid section backgrounds Do not set display headlines without negative letter-spacing — Tobias at -0em tracking reads archaic; the tightened tracking is what makes it feel contemporary