Typeform Design System Deep-Dive

1. Brand Overview

Typeform’s design language is confident, human, and stripped of unnecessary gloss. It’s clearly built for a product that wants to feel approachable without sacrificing precision. This isn’t “corporate blue SaaS” — it’s darker, moodier, and more editorial in tone. You can tell they’ve invested in typography first, with custom fonts like Tobias and Twklausanne giving them a distinctive voice. There’s a deliberate tension here: big, bold headings paired with airy white space and soft neutral backgrounds.

The vibe is quiet authority. Typeform isn’t screaming for attention; it’s inviting you to lean in. The dark text colors (#2a222b, #3c323e) combined with off-white surfaces (#faf9fb) make content feel grounded and legible. Accent colors are rare — even the “interactive blue” (#005fcc) only shows up in hover/focus states. That restraint works because it forces attention on the content and interaction, not on decorative distractions.

The visual philosophy? Minimal UI chrome, maximum clarity. Corners are rounded generously on interactive elements (common 12px and 24px radii), but not everywhere. Shadows are sparse — most depth comes from layering and borders. The spacing system is cleanly tied to an 8px scale, which makes layouts feel consistent across breakpoints.

Audience-wise, this is for people who care about clarity and flow — designers, marketers, and product managers who want survey forms that feel personal, not transactional. Typeform’s design system reinforces that by avoiding hard edges, keeping text readable at all sizes, and only using color when it serves a functional purpose.

2. Color System

2.1 Primary Colors

The primary brand color in the semantic set is rgb(255, 255, 255) (#ffffff). That’s unusual — it means the “primary” token is actually representing text or background in a neutral white context, not a conventional brand hue. The secondary semantic color is rgba(0, 0, 0, 0) (transparent). This reinforces the minimalism: they’re not building the brand around a single saturated tone.

The “functional” accent is the blue #005fcc, used in hover/focus states. It’s bright enough to stand out against dark text colors, but because it’s rare, it becomes high-signal when it appears.

2.2 Complete Palette

2.3 Color Relationships

Dark text (#2a222b) on off-white (#faf9fb) is high contrast — WCAG passes easily for normal text. The interactive blue (#005fcc) on dark text or light surfaces is also accessible, though it’s used sparingly. Transparent backgrounds for tags hover to #eeecee (a light gray), which keeps hover states subtle.

No obvious dark mode — the palette is tuned for light backgrounds with dark text. Accessibility is strong for text; however, some hover states drop opacity to 0, which could be problematic for low-vision users if not paired with other cues.

2.4 Usage Guide

• Works well: Dark text on off-white, interactive blue for actions, light gray hover for subtle changes.
• Avoid: Using interactive blue as body text — it’s meant for interaction cues.
• Pairing rule: Keep accent colors rare; rely on typography and spacing for hierarchy.
• Borders: Use deep gray (#3c323e) for dividers on light backgrounds.

3. Typography

3.1 Font Families

• Headings: Tobias (fallback: Times New Roman) — custom serif-like sans, editorial feel.
• Body/UI: Twklausanne 400/500/600 (fallback: Arial) — clean geometric sans.
• Video embeds: WistiaPlayerInter (fallback: Helvetica).

No Google Fonts or Adobe Fonts detected — likely self-hosted custom fonts.

3.2 Type Scale

3.3 Hierarchy

Huge headings with 1.0 line height create strong visual anchors. Body text is tight (1.3 line height), which keeps forms compact. Uppercase captions and labels are clearly for UI elements, not body copy. The scale steps down cleanly — no random pixel sizes outside the 8px rhythm.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px. All spacing values are multiples (with rare odd values like 5px and 6px for micro adjustments).

4.2 Layout

Breakpoints are dense: 400px, 425px, 479px, 530px, 550px, 600px … up to 1280px. This indicates fine-tuned responsive adjustments, probably to keep typography scaling clean. No fixed max content width in data, but these breakpoints suggest design is fluid up to desktop.

5. Visual Elements

Border Radius

They use both subtle and bold radii:

Shadows

Sparse usage — 4 shadows detected, mostly subtle:

1. rgb(255, 255, 255) 0px 0px 0px 2px inset — white inset border.
2. rgba(0, 0, 0, 0) 0px 2px 4px, rgba(50, 50, 93, 0.1) 0px 7px 14px — soft layered shadow.
3. rgb(199, 197, 199) -3px -3px 5px -2px — subtle top shadow.
4. rgb(199, 197, 199) 0px 0px 12px 2px — soft glow.

Borders are more common than shadows for separation.

6. Components

6.1 Buttons

Text Button (Banner)
Default: white text on transparent, no padding, no radius. Hover: not defined.

Primary Dark Button
Default: bg #2a222b, text #faf9fb, padding 12px 20px, radius 12px.
Hover: text highlight #9454ab, scale 1.025.
Active: bg #2c6415, white text, 1px solid rgba(162, 192, 169, 0.5), outline #101010 2px solid.
Focus: outline #b96dd5 1px solid, white text, bg #1eaedb, border #000000.

Secondary Light Button
Default: bg #faf9fb, text #2a222b, padding 0px 24px, radius 12px.
Hover/Active/Focus same as primary.

Gray Button
Default: bg #3c323e, white text, padding 8px 20px, radius 12px, border 1px solid #3c323e.
Hover: text #262627, bg hover token.
Focus: white text, bg #1eaedb, border #b96dd5.

6.2 Links

Four styles — white, dark, off-white, deep gray — all underline on hover, with hover color #1883fd.

6.3 Forms

No detailed input styles in data — likely styled minimally with borders and 12px radius.

6.4 Cards

Likely using 24px radius, off-white background, subtle borders. Spacing matches 24px padding.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-text: #2a222b;
  --color-off-white: #faf9fb;
  --color-mid-gray: #655d67;
  --color-deep-gray: #3c323e;
  --color-neutral-gray: #555555;
  --color-interactive-blue: #005fcc;
  --color-transparent: transparent;
  --color-tag-hover: #eeecee;
  --color-text-highlight: #9454ab;

  /* Typography */
  --font-heading: "Tobias", "Times New Roman";
  --font-body: "Twklausanne 400", Arial;
  --font-body-medium: "Twklausanne 500", Arial;
  --font-body-bold: "Twklausanne 600", Arial;
  --font-video: "WistiaPlayerInter", Helvetica;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 16000px;

  /* Shadows */
  --shadow-inset-white: rgb(255, 255, 255) 0px 0px 0px 2px inset;
  --shadow-soft-layered: rgba(0, 0, 0, 0) 0px 2px 4px, rgba(50, 50, 93, 0.1) 0px 7px 14px;
  --shadow-top-subtle: rgb(199, 197, 199) -3px -3px 5px -2px;
  --shadow-soft-glow: rgb(199, 197, 199) 0px 0px 12px 2px;
}

8. AI Coding Assistant Prompt

# Typeform Design System Specification

You are a Typeform design expert. Build UIs matching their visual language exactly.

## Brand Context
Typeform's design is minimal, human-centered, and typographically driven. It uses dark, grounded text colors against airy off-white backgrounds, with rare accents. Corners are rounded generously, and spacing adheres strictly to an 8px grid.

## Color Palette
- Dark Text: #2a222b — primary text, headings
- Off-White: #faf9fb — page background, button surfaces
- Mid Gray: #655d67 — secondary text
- Deep Gray: #3c323e — footer links, dividers
- Neutral Gray: #555555 — icons, secondary UI
- Interactive Blue: #005fcc — hover/focus states
- Transparent: transparent — tag idle background
- Tag Hover Gray: #eeecee — tag hover state
- Text Highlight Purple: #9454ab — hover text highlight

## Typography
- Headings: "Tobias", "Times New Roman"
- Body: "Twklausanne 400", Arial
- Body Medium: "Twklausanne 500", Arial
- Body Bold: "Twklausanne 600", Arial
- Video Embed: "WistiaPlayerInter", Helvetica

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 Hero | 80px | 400 | 1.00 | Main page titles |
| H1 Alt | 72px | 400 | 1.00 | Large headings |
| H1 Responsive | 64px | 400 | 1.10 | Medium screens |
| Section Heading | 48px | 400 | 1.10 | Section titles |
| Subheading | 24px | 500 | 1.50 | Form headings |
| Body Large | 20px | 400 | 1.30 | Body text large |
| Label | 18px | 500 | — | UI labels |
| Body | 16px | 400 | 1.30 | Forms, buttons |
| Caption Uppercase | 14px | 400 | 1.00 | UI captions |
| Caption | 14px | 400 | 1.30 | Secondary info |
| Small Caption | 12px | 400 | 1.30 | Metadata |

## Spacing & Grid
Base: 8px grid.  
Scale: 1px, 2px, 4px, 5px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 80px.  
Use:
- Buttons: 12px vertical, 20px horizontal
- Cards: 24px padding
- Section gaps: 48px–80px

## Border Radius
- sm: 2px — small buttons
- md: 12px — buttons, inputs
- lg: 24px — cards
- xl: 50px — search fields
- pill: 16000px — pills, avatars

## Shadows & Depth
Minimal shadows:
- Inset white border
- Soft layered shadow for modals
- Subtle top shadow for nav
- Soft glow for emphasis

## Component Specifications

### Primary Button
Default: bg #2a222b, color #faf9fb, padding 12px 20px, radius 12px, no border.  
Hover: color #9454ab, scale 1.025.  
Active: bg #2c6415, color #ffffff, border 1px solid rgba(162,192,169,0.5), outline #101010 2px solid.  
Focus: outline #b96dd5 1px solid, bg #1eaedb, border #000000.

### Secondary Button
Default: bg #faf9fb, color #2a222b, padding 0px 24px, radius 12px.  
States: same as primary.

### Navigation Links
Default: underline, color depends on context (white/dark/off-white/deep gray).  
Hover: color #1883fd, underline.

### Input Fields
Default: border 1px solid #3c323e, radius 12px, padding 12px, bg #faf9fb.  
Focus: border-color #b96dd5, bg #1eaedb.

### Card
Bg #faf9fb, radius 24px, padding 24px, border 1px solid #3c323e.

## Layout & Responsive Rules
Breakpoints: 400px, 425px, 479px, 530px, 550px, 600px, 640px, 767px, 768px, 890px, 896px, 991px, 992px, 1023px, 1024px, 1280px.

## Interaction Rules
- Transitions: 150ms ease for hover/focus.
- Focus indicators: solid outline, color from focus state.
- Loading states: dim opacity to 0.5.

## DO List
- Use ONLY colors from palette.
- Maintain 8px grid for spacing.
- Use Tobias for headings, Twklausanne for body.
- Apply large radii consistently to buttons/cards.
- Keep hover effects subtle (scale ≤ 1.025).

## DON'T List
- Don't introduce new colors.
- Don't use heavy shadows.
- Don't mix sharp and rounded corners.
- Don't overuse accent blue.
- Don't stretch images.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #2a222b;
  color: #faf9fb;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 400;
  font-size: 16px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  color: #9454ab;
  transform: scale(1.025);
}
.btn-primary:focus {
  outline: 1px solid #b96dd5;
  background: #1eaedb;
  border: 1px solid #000000;
}
```

### Secondary Button
```css
.btn-secondary {
  background: #faf9fb;
  color: #2a222b;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 16px;
}
```

### Card
```css
.card {
  background: #faf9fb;
  border-radius: 24px;
  padding: 24px;
  border: 1px solid #3c323e;
}
```

9. Summary

TL;DR — Typeform’s design system is built on restraint: dark grounded text, off-white surfaces, generous radii, and an 8px spacing grid. Accents are rare and functional. Typography is the hero.

Brand Keywords:

• typographic-minimalist
• grounded-neutral
• high-contrast-readable
• rounded-functional
• interaction-focused