Typeform

Add this design system to use its color palette, typography, spacing & other tokens while creating your own designs.

Form builder. Warm off-white with deep aubergine, a violet accent, serif-meets-sans type and radius-morphing buttons.

core colors

typefaces

tokens

Now playing — motion preview

Palette

The system's color tokens.

primary

#2A222B

on-primary

#FAF9FB

accent

#A25FBA

surface

#FAF9FB

surface-secondary

#EEECEE

surface-inverse

#2A222B

on-surface

#2A222B

on-surface-secondary

#655D67

on-inverse

#FAF9FB

on-inverse-secondary

#D4D1D5

hairline

#E5E1E5

Typography

Type tokens — family, size.

display-serifThe quick brown fox jumpsTobias, Georgia, "Times New Roman", serif
64px

headingThe quick brown fox jumps"TWK Lausanne 600", Arial, sans-serif
48px

eyebrowThe quick brown fox jumps"TWK Lausanne 600", Arial, sans-serif
14px

body-mdThe quick brown fox jumps"TWK Lausanne 400", Arial, sans-serif
16px

Spacing & Shape

Layout spacing tokens.

Token	Value	Preview
sm	16px
md	24px
lg	40px
xl	48px
xxl	80px

Border Radius

Corner rounding tokens.

Token	Value	Preview
sm	12px
full	9999px

design.md

The system as one file your coding agent can read and build from.

design.mdreadable by AI agents

tokens (raw)

name: typeform-design
version: alpha
description: >
  An editorial, conversational system on a soft warm off-white (#faf9fb) with a
  plum near-black ink (#2a222b). The signature is a deliberate type duet: an
  elegant serif (Tobias) for big emotional display lines and a clean grotesque
  (TWK Lausanne) for everything functional. A single purple eyebrow voltage
  (#a25fba) plus purple glow accents punctuate dark aubergine sections. Pills,
  12px-rounded cards, and glowing rounded-square icon tiles are the moves.
  Surfaces studied via Playwright: home (computed :root design tokens +
  representative elements).
colors:
  # Brand
  primary: '#2A222B'              # plum/aubergine ink — primary button + text (neutral-1000)
  on-primary: '#FAF9FB'
  accent: '#A25FBA'               # eyebrow purple + glow ("INTELLIGENT FORMS", GROWTH FLOW)
  # Surface
  surface: '#FAF9FB'              # background-idle, warm off-white
  surface-secondary: '#EEECEE'    # neutral-100 panels / testimonial card
  surface-inverse: '#2A222B'      # dark aubergine full-bleed sections
  # Text
  on-surface: '#2A222B'           # text-colour-primary
  on-surface-secondary: '#655D67' # text-colour-secondary
  on-inverse: '#FAF9FB'
  on-inverse-secondary: '#D4D1D5'
  # Hairlines
  hairline: '#E5E1E5'             # border-primary
typography:
  display-serif:                  # "When the form ends, the flow begins…" / "AI forms…"
    fontFamily: 'Tobias, Georgia, "Times New Roman", serif'
    fontSize: 64px
    fontWeight: 400
    lineHeight: 70px
    letterSpacing: -1px
  heading:                        # "Build forms at the drop of a prompt"
    fontFamily: '"TWK Lausanne 600", Arial, sans-serif'
    fontSize: 48px
    fontWeight: 600
    lineHeight: 53px
    letterSpacing: -1px
  eyebrow:                        # "INTELLIGENT FORMS"
    fontFamily: '"TWK Lausanne 600", Arial, sans-serif'
    fontSize: 14px
    fontWeight: 600
    lineHeight: 17px
    letterSpacing: 0
    transform: uppercase
  body-md:
    fontFamily: '"TWK Lausanne 400", Arial, sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 19px
    letterSpacing: 0
rounded:
  sm: 12px                        # corner-radius/sm (.75rem) — cards, icon tiles
  full: 9999px                    # pill buttons, tags
spacing:                          # rem-based scale, 1rem = 16px
  sm: 16px
  md: 24px                        # section gutter (2rem)
  lg: 40px
  xl: 48px                        # section margin (3rem)
  xxl: 80px                       # spacer 500 (5rem)
components:
  button-primary:                 # "Explore forms", "Get started—it's free"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    padding: '14px 24px'
    hoverBg: '#564B58'
  button-secondary:               # white pill on dark sections
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    rounded: '{rounded.full}'
  tag:                            # "NEW" pill
    backgroundColor: '{colors.accent}'
    textColor: '#F9F2FD'
    rounded: '{rounded.full}'
    padding: '4px 8px'
  feature-icon-tile:
    backgroundColor: '{colors.primary}'
    rounded: '{rounded.sm}'
    note: 'dark rounded square with a soft purple glow halo'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-standard: 300ms
  note: 'subtle purple glow pulses; smooth section reveals'
icons:
  style: line
  stroke: 2px
  sizes: { sm: 16px, md: 24px }
  color-rule: 'white on dark tiles; ink on light'

Typeform

v alpha · "AI forms and automation. All in Typeform."

Overview. Typeform's canvas is a soft warm off-white (#FAF9FB) carrying a plum near-black ink (#2A222B) — the same plum that fills its primary buttons. The defining decision is a type duet: an elegant serif, Tobias, handles the big emotional display lines ("When the form ends, the flow begins…"), while the clean grotesque TWK Lausanne does all the functional work — eyebrows, headings, body, buttons. A single purple voltage (#A25FBA) lights the uppercase eyebrows and "NEW" tags and bleeds into glow halos behind dark rounded-square icon tiles. Full-bleed dark aubergine sections (the same #2A222B) create dramatic contrast. Pills, 12px rounded cards, and purple-glow tiles are the recurring moves.

Colors

Plum ink #2A222B {colors.primary} — neutral-1000. Doubles as text and as the primary button / dark section fill. Hover deepens to #564B58.
Eyebrow purple #A25FBA {colors.accent} — uppercase eyebrows, "NEW" tags, and soft glow halos. The only chromatic accent; used in small doses.
Off-white #FAF9FB {colors.surface} — canvas. Neutral-100 #EEECEE for panels and the testimonial card.
Text — primary #2A222B, secondary #655D67; on dark, #FAF9FB and #D4D1D5.
Hairline #E5E1E5 for borders.
A chartreuse/lime appears inside the in-product form mockups (FitCo) — that is product UI, not a brand token.

Typography

A two-family system. Tobias (serif; substitute Tiempos / Source Serif 4) for display only — elegant, editorial, tracked tight (-1px). TWK Lausanne (grotesque; substitute Inter / Neue Haas Grotesk) in three weights: 400 body, 600 headings/eyebrows.

Token	Family	Size	Weight	Line-height	Tracking	Usage
display-serif	Tobias	64px	400	70px	-1px	emotional display lines
heading	Lausanne 600	48px	600	53px	-1px	section headings
eyebrow	Lausanne 600	14px	600	17px	0 (UPPER)	section eyebrows
body-md	Lausanne 400	16px	400	19px	0	body, buttons

Layout

Centered editorial single column with comfortable rem-based spacing (gutter 2rem, section margin 3rem, large 5rem spacers). Feature lists pair a glowing rounded-square icon tile with a heading + paragraph in two-up rows. Generous whitespace; content centered and unhurried.

Elevation & Depth

Mostly flat, but with one signature: a soft purple glow halo behind dark icon tiles and around "NEW" tags. Cards use tint + 12px radius rather than heavy shadows.

Shapes

Rounded and friendly: 12px (0.75rem) on cards and icon tiles, full pills on every button and tag. No sharp corners.

Components

button-primary: plum pill, off-white label (hover #564B58).
button-secondary: white pill with plum label, used on dark sections.
tag "NEW": purple pill, near-white label.
feature-icon-tile: dark plum rounded square (12px) with a purple glow halo.

Motion

Smooth 300ms transitions with a standard ease; purple glows pulse gently and sections reveal on scroll. Nothing jarring — the motion supports the "conversational, human" brand.

Iconography

2px line icons, white on the dark tiles, ink on light. Sizes 16/24px. Icons are simple and geometric.

Do's and Don'ts

Do pair Tobias serif (display) with TWK Lausanne grotesque (everything else) — never swap their roles.
Do keep purple to eyebrows, tags, and glow halos only.
Do use full pills for buttons and 12px radius for cards/tiles.
Do reuse the plum #2A222B as both ink and dark surface.
Don't treat the in-product lime/chartreuse as a brand color — it lives inside form mockups.
Don't flood layouts with purple; it's a spark, not a field.