---
version: alpha
name: Typeform
description: A calm off-white plum canvas where a high-contrast Tobias serif sets the headlines, a TWK Lausanne grotesque runs the interface, and the only color that escapes the near-black palette is a soft violet glow — form-building that feels conversational, editorial, and quietly premium.

colors:
  # Surface / canvas
  background: "#faf9fb"        # warm off-white — the dominant canvas
  surface: "#ffffff"           # pure white cards lifted off the off-white
  surface-dark: "#2a222b"      # near-black plum surface, primary button fill

  # Ink / text
  ink: "#2a222b"               # near-black plum — headings, body, primary button
  ink-soft: "#3c323e"          # softened plum-black for secondary buttons
  ink-secondary: "#655d67"     # supporting copy
  ink-muted: "#9b929d"         # captions, metadata
  on-dark: "#faf9fb"           # off-white text on the dark plum surface

  # Brand accent — violet
  primary: "#9454ab"           # the violet highlight — emphasized words, links, NEW pills
  primary-hover: "#564b58"     # button-primary hover (plum-tinted)
  on-primary: "#ffffff"
  glow-violet: "#b66dd5"       # the soft violet glow on playful cards
  glow-violet-soft: "#ddb7f0"  # lighter glow ring

  # Borders
  border: "#e5e1e6"            # soft plum-gray hairline
  border-strong: "#d4d1d5"     # hover/focus border, stronger dividers

  # Shadow tints (opaque approximations for the elevation table)
  shadow-glow: "#b66dd5"       # was rgb(182,109,213) 0 0 15px — the violet card glow
  shadow-soft: "#251c27"       # was rgba(37,28,39,...) — soft inset/drop on dark cards

typography:
  display-hero:
    fontFamily: "Tobias, Georgia, 'Times New Roman', serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1px
  display:
    fontFamily: "Tobias, Georgia, 'Times New Roman', serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1.75px
  heading:
    fontFamily: "TWK Lausanne, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  heading-sub:
    fontFamily: "TWK Lausanne, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  title:
    fontFamily: "TWK Lausanne, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.24px
  body-large:
    fontFamily: "TWK Lausanne, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body:
    fontFamily: "TWK Lausanne, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  button-label:
    fontFamily: "TWK Lausanne, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  eyebrow:
    fontFamily: "TWK Lausanne, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.5px
  caption:
    fontFamily: "TWK Lausanne, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px
  4xl: 48px
  5xl: 80px

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-label}"
    rounded: "{rounded.lg}"
    padding: 8px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-dark}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-label}"
    rounded: "{rounded.lg}"
    padding: 8px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-label}"
    rounded: "{rounded.lg}"
    padding: 8px 24px
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
  card-glow:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 16px 24px

  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    padding: 0px

  badge:
    backgroundColor: "{colors.glow-violet-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.md}"
    padding: 2px 8px
---

# Typeform Design System

## Overview

Typeform's site reads like a well-set magazine that happens to build forms. The single most distinctive move is the typographic split: headlines are set in **Tobias** (`{typography.display-hero}`), a high-contrast literary serif by Klim with dramatic thick-to-thin strokes, while every heading, paragraph, button, and label switches to **TWK Lausanne** (`{typography.body}`), a neutral Swiss grotesque. The serif is the brand's "conversational" voice — warm, human, a little editorial — and the grotesque is the calm machinery underneath it. Where most SaaS sites lead with a bold sans, Typeform leads with a serif, and that one decision is what makes the whole page feel premium and unhurried.

The palette is almost monochrome on purpose. The canvas is a warm off-white (`{colors.background}`) — not white, a barely-perceptible plum-tinted cream — and the ink is a near-black plum (`{colors.ink}`) rather than true black. Primary buttons are that same near-black plum (`{colors.surface-dark}`) with off-white text, so the page reads as calm, confident, low-contrast-but-legible. The restraint is the point: a form-builder needs to feel trustworthy and quiet, so the chrome stays out of the way.

Then color arrives as a glow, not a fill. Typeform's accent is a soft violet (`{colors.primary}`) — it lights up an emphasized word in a headline, a "NEW" pill, a link — and on the playful template and research cards it appears as a literal **violet glow** (`{colors.glow-violet}`), a `0 0 15px` blur of light radiating from behind product screenshots. That glow is the brand's flash of personality: the rest of the page is composed and serif-serious, and then a card lights up violet. The effect is editorial calm punctuated by one warm, slightly magical color.

**Key Characteristics:**
- **Tobias** high-contrast serif (`{typography.display-hero}`) for headlines — the conversational, editorial voice
- **TWK Lausanne** grotesque (`{typography.body}`) for every heading, paragraph, button, and label — the calm machinery
- Warm off-white canvas (`{colors.background}`), a barely plum-tinted cream — never pure white
- Near-black plum ink (`{colors.ink}`), not true black — keeps contrast soft and trustworthy
- Primary buttons are near-black plum (`{colors.surface-dark}`), not the violet accent
- Violet (`{colors.primary}`) used as emphasis and links — single words, pills, never a workhorse
- Signature **violet glow** (`{colors.glow-violet}`): a `0 0 15px` halo behind playful product cards
- Soft 12px button radius (`{rounded.lg}`), generous 24px card radius (`{rounded.xl}`) — rounded but composed
- Tight 8px vertical button padding (`8px 24px`) — buttons are slim and wide, never chunky
- Soft plum-gray hairlines (`{colors.border}`) do structural separation; shadows are reserved for the glow moments

## Colors

### Surface & Canvas
- **Off-White** (`{colors.background}`): The dominant canvas — a warm, plum-tinted cream, not pure white.
- **White** (`{colors.surface}`): Pure white cards that lift subtly off the off-white ground.
- **Plum-Black** (`{colors.surface-dark}`): The near-black plum surface used for primary buttons and dark sections.

### Ink / Text
- **Plum-Black** (`{colors.ink}`): Headings, body, and the primary button fill. A near-black plum, not true black.
- **Soft Plum** (`{colors.ink-soft}`): Secondary button surfaces and softened ink.
- **Muted Plum** (`{colors.ink-secondary}`): Supporting copy.
- **Faint Plum** (`{colors.ink-muted}`): Captions and metadata.

### Brand Accent
- **Violet** (`{colors.primary}`): The accent. Emphasized words, links, and "NEW" pills — never a workhorse fill.
- **Violet Glow / Soft** (`{colors.glow-violet}`, `{colors.glow-violet-soft}`): The radiating glow behind playful cards and the soft pill backgrounds.
- **Plum Hover** (`{colors.primary-hover}`): Primary-button hover state.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Soft plum-gray card edges and dividers.
- **Strong Border** (`{colors.border-strong}`): Hover and focus borders.
- **Glow / Soft** (`{colors.shadow-glow}`, `{colors.shadow-soft}`): Opaque stand-ins for the violet card glow and the soft dark-card shadows (originals were rgb/rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display serif**: `Tobias` (Klim), fallbacks `Georgia, 'Times New Roman', serif`. High thick-to-thin contrast; headlines only.
- **UI grotesque**: `TWK Lausanne`, fallbacks `'Helvetica Neue', Arial, sans-serif`. Headings, body, buttons, labels — the workhorse.
- **Tracking**: serif display uses negative tracking (up to -1.75px at 56px); grotesque body sits at zero.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 80px / 400 / -1px — **Tobias** marquee headline |
| `display` | 56px / 400 / -1.75px — large **Tobias** display |
| `heading` | 48px / 400 — **TWK Lausanne** section headings |
| `heading-sub` | 36px / 400 — sub-section headings |
| `title` | 24px / 500 — card titles |
| `body-large` | 20px / 400 — lead paragraphs |
| `body` | 16px / 400 — standard body, buttons, inputs |
| `button-label` | 16px / 400 — button text |
| `eyebrow` | 14px / 600 — uppercase-ish category labels and pills |
| `caption` | 13px / 400 — metadata, helper text |

### Principles
- **Serif for voice, grotesque for function**: Tobias headlines talk to the reader; TWK Lausanne runs the interface.
- **Light weights**: both faces live mostly at 400 — the serif's natural contrast carries the headline, not bold weight.
- **Tighten the big**: negative tracking on serif display; zero on grotesque body.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. Generous vertical rhythm (`{spacing.5xl}` = 80px) separates marketing sections; component internals stay compact (`{spacing.md}`–`{spacing.xl}`).

### Grid & Container
- Max content width: ~1200px, centered
- Common pattern: a Tobias serif headline + TWK Lausanne subhead on the left, a glowing product card on the right
- Mega-menus and template grids use multi-column card layouts on the off-white ground

### Whitespace Philosophy
- **Calm and editorial**: generous whitespace and the off-white ground keep the page unhurried
- **Cards float quietly**: white cards lift off the off-white with hairlines, not heavy shadows
- **The glow earns attention**: the one place shadow appears is the violet halo behind a hero product card

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, plum-gray hairline `{colors.border}` only | The off-white canvas, most content |
| Card (Level 1) | Subtle hairline + faint drop | White cards lifted off the off-white |
| Inset dark (Level 2) | Soft inset shadows (`{colors.shadow-soft}`) | Dark plum cards and panels |
| Violet glow (Level 3) | `0 0 15px` halo (`{colors.shadow-glow}`) | Playful product / template cards — the signature elevation |

**Shadow Philosophy**: Typeform's elevation is mostly absent — separation comes from the off-white-vs-white surface contrast and soft hairlines. The exception is the brand-signature **violet glow**: a `0 0 15px` blur of `{colors.shadow-glow}` radiating from behind a product screenshot, as if the card is lit from within. It is the only loud thing in an otherwise composed system, and it is spent deliberately on the playful template and research cards. Never scatter the glow; reserve it for one card per view.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Small chips, tight tags |
| `md` | 8px | Inputs, pills, badges |
| `lg` | 12px | Buttons — the default interactive radius |
| `xl` | 24px | Cards and panels |
| `pill` | 9999px | Avatars, fully-round toggles |

The radius scale is rounded but composed: a soft 12px on buttons, a generous 24px on cards. Nothing is sharp-cornered, but nothing is a full pill either — the geometry stays calm.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Near-black plum (`{colors.surface-dark}`) fill, off-white text, 12px radius, slim `8px 24px` padding. The main CTA. Hover lifts to `{colors.primary-hover}`.
- **`button-secondary`** — Off-white fill, plum text, same radius. Lower emphasis.
- **`button-outline`** — Off-white fill, plum text, 1px border. The "Read all stories" pattern.

### Cards
- **`card`** / **`card-glow`** — White surface, soft hairline, 24px radius. The glow variant carries the signature `0 0 15px` violet halo for product screenshots.

### Inputs
- **`input`** — White fill, soft border, 8px radius. **`input-focus`** strengthens the border to `{colors.border-strong}` — quiet, no loud ring.

### Navigation
- **`nav-bar`** — Off-white surface, plum labels, hairline bottom border; the mega-menu drops onto the off-white ground.

### Accent
- **`link`** — Violet (`{colors.primary}`) text.
- **`badge`** — Soft violet (`{colors.glow-violet-soft}`) fill, violet text, 8px radius — the "NEW" pill.

## Do's and Don'ts

### Do
- Set headlines in **Tobias** serif (`{typography.display-hero}`) at weight 400 — the conversational voice
- Run every heading, paragraph, button, and label in **TWK Lausanne** grotesque (`{typography.body}`)
- Keep the canvas off-white (`{colors.background}`), a warm plum-tinted cream — never pure white
- Use near-black plum (`{colors.ink}`) for ink and primary buttons, not the violet accent
- Reserve violet (`{colors.primary}`) for emphasized words, links, and pills
- Spend the violet glow (`{colors.shadow-glow}`) on one product card per view — `0 0 15px`, never scattered
- Keep buttons slim and wide with `8px 24px` padding and `{rounded.lg}` (12px) radius
- Separate with soft hairlines (`{colors.border}`) before reaching for shadow

### Don't
- Don't make violet the primary button color — buttons are near-black plum, violet is emphasis
- Don't use pure white or true black — the system is off-white and plum-black
- Don't set headlines in the grotesque — Tobias carries the display voice
- Don't bold the serif — Tobias stays at weight 400, its contrast does the work
- Don't scatter the violet glow across the page — it's one halo, deliberately placed
- Don't make buttons chunky — vertical padding stays tight at 8px
- Don't sharpen the corners — the system is rounded (12px buttons, 24px cards)

---

## Responsive Behavior

### Breakpoints
*(Extraction surfaced ~21 breakpoints; the consolidated stops below describe the behavior.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; Tobias hero scales 80px → ~40px; mega-menu collapses to a drawer; glow card stacks below copy full-width |
| Tablet | 640–1023px | Two-column rows begin; template grid reflows to 2-up |
| Desktop | 1024–1279px | Full layout; serif-copy-left / glow-card-right hero |
| Large | ≥1280px | Max ~1200px container, centered; section padding opens to `{spacing.5xl}` |

### Touch Targets
- Buttons run ~40px tall with `8px 24px` padding — slim but comfortable for thumbs
- Mega-menu items carry generous vertical padding for tap rows

### Collapsing Strategy
- **Navigation**: horizontal mega-menu → drawer on mobile; the plum "Sign up" CTA persists
- **Hero**: serif headline and glow card go from side-by-side to stacked, card full-width
- **Type**: Tobias display drops from 80px toward ~40px keeping proportional negative tracking
- **Spacing**: section padding compresses from 80px toward ~48px

### Image Behavior
- Product screenshots reflow as flex/grid children, keeping their violet glow proportional

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Off-White (`{colors.background}`)
- Text: Plum-Black (`{colors.ink}`)
- Brand accent: Violet (`{colors.primary}`)
- Secondary text: Muted Plum (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: Plum-Black (`{colors.surface-dark}`) — not violet

### Example Component Prompts

- "Create a hero on off-white (`{colors.background}`) with an 80px Tobias serif headline in plum-black (`{colors.ink}`), weight 400, with one word emphasized in violet (`{colors.primary}`), a TWK Lausanne subhead at `{typography.body-large}`, and a plum-black primary button"
- "Build the primary button: near-black plum (`{colors.surface-dark}`) fill, off-white text, `{rounded.lg}` (12px) radius, slim `8px 24px` padding; hover deepens to `{colors.primary-hover}`"
- "Create a glowing product card: white (`{colors.surface}`) surface, `{rounded.xl}` (24px) radius, soft hairline (`{colors.border}`), and a `0 0 15px` violet halo using `{colors.shadow-glow}` radiating from behind the screenshot"
- "Design an input: white fill, soft border (`{colors.border}`), `{rounded.md}` (8px) radius; on focus strengthen the border to `{colors.border-strong}` — no loud ring"
- "Build a NEW pill badge: soft violet (`{colors.glow-violet-soft}`) fill, violet (`{colors.primary}`) text in `{typography.eyebrow}`, `{rounded.md}` (8px) radius, `2px 8px` padding"

### Iteration Guide

1. Start on off-white (`{colors.background}`), not pure white. If your canvas is `#ffffff`, warm it to the plum-tinted cream.
2. Violet (`{colors.primary}`) is emphasis only. If it's filling a button, recolor that button near-black plum (`{colors.surface-dark}`).
3. Headlines are Tobias serif (`{typography.display-hero}`) at weight 400; everything else is TWK Lausanne (`{typography.body}`).
4. Ink and primary buttons are plum-black (`{colors.ink}`), never true black.
5. The violet glow (`{colors.shadow-glow}`) belongs on one product card per view — `0 0 15px`, never scattered.
6. Buttons stay slim: `8px 24px` padding, `{rounded.lg}` (12px) radius. Cards round to `{rounded.xl}` (24px).
7. Separate with hairlines (`{colors.border}`) before reaching for shadow — the page is calm.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Typeform. Brand names and trademarks belong to their respective owners.