Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Tutanota
CommunicationTutanota projects a bold privacy-first identity through its commanding coral-red gradient backdrop and strong typographic hierarchy. The dramatic monospace 'MDIO' headline font creates an almost terminal-like, tech-forward impression while the warm red conveys urgency and protection.
Design Identity
Signature Color
Privacy Shield Red
#E74C3C
urgent data protection and encrypted security
Visual Identity
The striking coral-red gradient background that dominates the entire viewport, creating an immersive, almost militant privacy-focused atmosphere that's impossible to ignore.
Component Style
Clean, minimal components with subtle rounded corners and gentle shadows. The 'Create free account' button uses warm cream/yellow (#F7DC6F) against the red backdrop for strong contrast without being jarring.
Spacing Philosophy
Generous vertical breathing room with the main content centrally positioned in abundant whitespace. The layout feels spacious and uncluttered, letting the bold red background dominate while keeping UI elements comfortable and accessible.
Design Principles
- Headlines use MDIO monospace at 65px for technical authority
- Body text stays at 16px Noto Sans for readability
- Primary buttons use warm cream/yellow for contrast against red
- Shadows are subtle with 4-8px blur radius
- Border radius kept minimal around 4-6px
Target Audience
Privacy-conscious professionals and activists who prioritize data security over mainstream convenience features
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 | 25.6px | |
| h1 | 65.087px | 700 | 71.5957px | |
| h2 | 37.585px | 400 | 52.619px | |
| h3 | 29.585px | 700 | 41.419px | |
| h4 | 23.3962px | 700 | 32.7547px | |
| p | 14px | 400 | 15.4px | |
| a | 14px | 400 | 16.8px | |
| button | 17.3962px | 400 | 27.834px | |
| input | 13.3333px | 400 | normal | |
| nav | 17.3962px | 400 | 27.834px |
Color Palette
#ffffff#be8f96#ff0a0a#ffcccc#3964d9#0040ff#cce7ff
