Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Typeform
Forms & SurveysTypeform embodies sophisticated minimalism through a moody dark purple backdrop that feels both intimate and professional. The custom Tobias serif headlines create editorial gravitas while Twklausanne sans-serif body text maintains approachable clarity, suggesting a brand that values both craft and usability.
Design Identity
Signature Color
Typeform Charcoal
#2a222b
thoughtful professionalism - darker than typical SaaS brands, suggesting depth and considered design over flashy marketing
Visual Identity
The dramatic dark background with oversized serif headlines creates an editorial magazine aesthetic that's instantly recognizable among form builders - it feels more like a design publication than typical SaaS marketing.
Component Style
Soft, approachable buttons with generous rounded corners (approximately 8px radius) and ample padding. The primary CTA uses a clean white background on dark, creating subtle contrast rather than aggressive neon. No harsh shadows or borders - everything feels organic and touchable.
Spacing Philosophy
Luxurious breathing room with massive vertical gaps between sections. The hero content sits in a sea of negative space, creating focus through isolation rather than cramped efficiency. Internal component spacing is equally generous, suggesting unhurried consideration.
Design Principles
- Headlines use Tobias serif at 80px for editorial weight
- Body text never exceeds 400 weight for approachable readability
- Dark backgrounds dominate over white for sophisticated mood
- Button corners stay consistently rounded at ~8px
- Line heights are tight (80px for 80px headlines) for modern stacking
Target Audience
Design-conscious marketers and product teams who want their forms to feel as considered as their brand - people who see data collection as part of user experience, not just conversion optimization
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 16px | 400 | 20.8px | |
| h1 | 80px | 400 | 80px | |
| h2 | 48px | 400 | 52.8px | |
| h3 | 14px | 400 | 14px | |
| p | 16px | 400 | 19.2px | |
| a | 16px | 400 | 20.8px | |
| button | 16px | 400 | 20.8px | |
| nav | 16px | 400 | 20.8px | |
| footer | 16px | 400 | 20.8px | |
| main | 16px | 400 | 20.8px |
Color Palette
#2a222b#564b58#faf9fb#eeecee
