Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Fastmail
CommunicationFastmail embraces a deep navy-blue nocturnal aesthetic that feels like premium nighttime productivity software. The elegant serif headlines paired with clean sans-serif body text creates a sophisticated yet approachable tone, suggesting serious email tools for discerning professionals.
Design Identity
Signature Color
Fastmail Navy
#2d4a73
Professional reliability and nighttime productivity - the color of focused work after hours
Visual Identity
The signature deep blue gradient background with floating geometric shapes and the prominent email interface mockup creates an unmistakable 'premium email software in the cloud' aesthetic.
Component Style
Soft rounded corners with subtle shadows and gentle borders. Buttons have comfortable padding with medium border radius (~6-8px), creating approachable but professional touch targets. The email interface shows clean white cards with subtle dividers.
Spacing Philosophy
Generous vertical rhythm with ample breathing room between sections. The hero area uses expansive whitespace to create focus, while the email interface demonstrates tighter, productivity-focused spacing for information density.
Design Principles
- Serif headlines (Roca) for authority, sans-serif (Proxima Nova) for readability
- Deep blue backgrounds (#2d4a73 range) establish premium positioning
- Border radius stays between 6-8px for friendly professionalism
- Spacing follows 4px grid system from 4px to 36px increments
- Email interface uses high contrast white on dark for clarity
Target Audience
Privacy-conscious professionals and small business owners who need reliable email hosting and want to move away from Big Tech solutions
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 | 24px | |
| h1 | 58.1826px | 400 | 64.699px | |
| h2 | 45.9705px | 400 | 50.7653px | |
| h3 | 25.5108px | 600 | 35.835px | |
| p | 15.75px | 400 | 22px | |
| a | 15.75px | 400 | 22px | |
| button | 15.9266px | 600 | 23.8899px | |
| input | 15.75px | 400 | 22px | |
| nav | 16px | 400 | 24px | |
| header | 15.75px | 400 | 22px |
Color Palette
#ffffff#f4f5f5#eaebec#e0e2e3#d6d8da#ccced1#c1c5c8#adb1b5#999ea3#848b91#70777e#5b646c
