Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.

Back to Browse

Fastmail

Communication

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

(0)
0
Visit Website
Screenshot of Fastmail website

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

nocturnaltrustworthysophisticatedproductiveprivateprofessionalfocused

Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.

Design System

Typography Scale

ElementFontSizeWeightLine Height
body"Proxima Nova"16px40024px
h1roca58.1826px40064.699px
h2roca45.9705px40050.7653px
h3"Proxima Nova"25.5108px60035.835px
p"Proxima Nova"15.75px40022px
a"Proxima Nova"15.75px40022px
button"Proxima Nova"15.9266px60023.8899px
input"Proxima Nova"15.75px40022px
nav"Proxima Nova"16px40024px
header"Proxima Nova"15.75px40022px

Color Palette

#ffffff
#f4f5f5
#eaebec
#e0e2e3
#d6d8da
#ccced1
#c1c5c8
#adb1b5
#999ea3
#848b91
#70777e
#5b646c

UI Elements

button-primary
button-secondary
button
input
a
nav

Similar Designs

Completely Different Designs

Discussion

Loading comments...