# Typeform — Marketing site Design Spec

> 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).

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Semantic tokens (published)

| 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 |

### Button tokens (published, with hover states)

| 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 tokens

`tag-border #2a222b` · `tag-bg-hover #eeecee` · `tag-bg-active #2a222b` · `tag-text-active #faf9fb` · `tag-text #f9f2fd`

### Neutral primitives (warm aubergine-tinted, not gray)

`25 #faf9fb` · `50 #f5f3f6` · `100 #eeecee` · `200 #e5e1e5` · `300 #d4d1d5` · `400 #c5c0c6` · `600 #837a85` · `700 #655d67` · `900 #3e3040` · `1000 #2a222b`

### Purple primitives

`50 #fcf9fd` · `100 #f9f2fd` · `200 #f7edfc` · `300 #eccffa` · `400 #ddb7f0` · `500 #b66dd5` · `600 #a25fba` · `700 #9454ab` · `800 #753a88` · `900 #5c2e6b`

### "Get real" (brand secondary) & pastel illustration family

`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.

## 3. Typography Rules

- Display: `Tobias, "Times New Roman", serif` — the brand serif
- UI + body: **Twklausanne**, shipped as named optical cuts: `"Twklausanne 350"`, `"Twklausanne 400"`, `"Twklausanne 500"`, `"Twklausanne 600"`, each with `Arial, sans-serif` fallback

Published 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.

## 4. Component Stylings

**Nav** — sits directly on the inverted `#2a222b` hero: wordmark, five links (three with chevrons), then a text "Log in" and a `#faf9fb` "Sign up" button. No border, no backdrop blur.

**Buttons** — 12px radius (`corner-radius/xs` scale step at rest), Twklausanne 500 at 16px, no uppercase:

| Variant | Fill | Text | Border | Radius | Height | Padding | Hover |
|---|---|---|---|---|---|---|---|
| Primary | `#2a222b` | `#faf9fb` | none | 12px | 48px | 8px 24px | fill → `#564b58` |
| Secondary / outline | `#faf9fb` | `#2a222b` | 1px `#2a222b` | 12px | 48px | 8px 24px | fill → `#eeecee` |
| Nav (small) | `#faf9fb` | `#2a222b` | none | 12px | 40px | 12px 20px | fill → `#eeecee` |
| Tertiary / link | none | `#2a222b` | none | — | — | — | text → `#a25fba` |

Transition: `background-color 0.2s, border-radius …` — note that **border-radius itself is animated** on hover, which is the signature interaction detail.

**Tags / chips** — 1px `#2a222b` border at rest, `#eeecee` on hover, and a filled `#2a222b` / `#faf9fb` active state.

**Cards** — `#ffffff` foreground on the `#faf9fb` canvas, hover to `#f5f3f6`, using the generous radius scale (24px / 48px). Hairlines `#e5e1e5`.

**Inputs** — not captured (the hero form is rendered inside the embedded product canvas).

## 5. Layout Principles

Inverted full-bleed hero on `#2a222b` carrying the 80px Tobias headline, a 20/26 sub, and CTAs, with the product surface embedded below. Published spacing tokens: spacers `0.25 / 0.5 / 0.75 / 1 / 1.25 / 1.5 / 2 / 2.5 / 3 / 4 / 5rem`; section padding small `2rem`, medium `3rem`, large `5rem`; section vertical spacing small `1.5rem`, medium `3rem`, large `4rem`; section margin `3rem`, gutter `2rem`.

## 6. Depth & Elevation

Published corner-radius scale — unusually generous, and the main reason the brand reads as soft:

| Token | Value |
|---|---|
| `corner-radius/xs` | 0.25rem / 4px |
| `corner-radius/sm` | 0.75rem / 12px (all buttons) |
| `corner-radius/md` | 1.5rem / 24px |
| `corner-radius/lg` | 3rem / 48px |
| `corner-radius/xl` | 5rem / 80px |
| `corner-radius/full` | 1000rem |

No box-shadow recipes were resolved on the landing surface — depth comes from the `#faf9fb` → `#ffffff` surface step, the `#e5e1e5` hairline, and the large radii. Shadow scale: not captured.

## 7. Motion

`background-color 0.2s` on buttons, with **`border-radius` transitioned alongside it** — controls visibly change shape on hover, the system's signature motion. Cookie-consent chrome uses `0.15s ease-in-out`. Other durations/easings: not captured.

## 8. Backgrounds, Effects & WebGL

No gradients, backdrop-filters, grain or WebGL resolved on the landing surface — the atmosphere comes from the aubergine/off-white surface inversion and the pastel tint family in illustrations. The hero product moment is rendered as embedded media rather than CSS. Full below-the-fold effect census: not captured (cookie modal locked scrolling).

## 9. Do's and Don'ts

### Do
- Warm every neutral toward aubergine: ink `#2a222b`, canvas `#faf9fb`, hairline `#e5e1e5`.
- Set display headlines in the Tobias serif at weight 400 with -1px (display/h1) or -2px (h2) tracking.
- Use Twklausanne named optical cuts (350/400/500/600) instead of numeric font-weights.
- Reach for the generous radius scale — 12px controls, 24-80px panels.
- Animate `border-radius` together with `background-color` on hover.
- Keep purple `#a25fba` for eyebrows, link highlights and the tertiary hover.
- Put the pastel tint family in illustrations and template cards only.

### Don't
- Don't use pure black, pure white, or neutral gray anywhere.
- Don't set the serif bold, or use it for body and UI copy.
- Don't apply negative tracking to Twklausanne roles — it is zero on all of them.
- Don't fill a button with purple.
- Don't use small radii; nothing on this brand is sharp.
- Don't set eyebrows in uppercase with positive tracking.

## 10. Responsive Behavior

Not captured — a cookie-consent modal locked scrolling, so no media-query census or mobile adaptation was resolved. The token system is rem-based throughout, so the scale is fluid by construction.

## 11. Agent Prompt Guide

- Canvas `#faf9fb` · Card `#ffffff` · Invert `#2a222b` · Text `#2a222b` · Secondary `#655d67` · Border `#e5e1e5` · Eyebrow/accent `#a25fba`
- Font: Tobias serif (display, 400 only), Twklausanne 350/400/500/600 (UI/body) · Body: 20/1.3em (md), 16/1.3em (sm) · Radius: 12px control / 24-48px panel · Control height: 40px nav, 48px standard
- Focus: not captured · Hover fill: primary `#564b58`, secondary `#eeecee`, tertiary text `#a25fba` · Transition `background-color 0.2s` **+ border-radius**

<typeform_design_language>
A soft, human form-building brand where no neutral is truly neutral: the canvas is warm off-white #faf9fb, cards step up to #ffffff, and the "black" is aubergine #2a222b, which the hero inverts onto full-bleed. Display type is the Tobias serif at a calm weight 400 — 80px/1em at -1px in the hero, 64px at -2px for sections — and everything else is Twklausanne, loaded as named optical cuts (350/400/500/600) rather than numeric weights, with zero tracking on every sans role. Body runs 20px and 16px at a tight 1.3em. Purple #a25fba is confined to eyebrows, link highlights (#9454ab) and the tertiary-button hover, never a button fill, while a wide pastel family (purple, lavender, blue, green, yellow tints) is reserved for illustrations and template cards. Buttons are 48px (40px in nav) at a 12px radius: near-black #2a222b filled hovering to #564b58, or off-white with a 1px #2a222b border hovering to #eeecee. The radius scale is deliberately generous — 4 / 12 / 24 / 48 / 80px — and depth comes from that plus the surface step and #e5e1e5 hairlines rather than shadow. The signature interaction is that border-radius animates alongside background-color over 0.2s, so controls visibly change shape on hover. Feels: soft, human, warm, editorial. Avoid: pure black/white/gray, bold or body-copy use of the serif, negative tracking on the sans roles, purple button fills, small sharp radii, and uppercase tracked eyebrows.
</typeform_design_language>