Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
ProtonVPN
CybersecurityProtonVPN creates a sophisticated privacy-first aesthetic through its ethereal purple gradients and celestial globe visualization, positioning digital security as both mystical and grounded. The combination of Arizona serif headlines with Inter sans-serif body text establishes editorial authority while maintaining technical approachability.
Design Identity
Signature Color
Proton Violet
#8B5CF6
privacy mystique and digital freedom - a color that suggests both technical sophistication and protective invisibility
Visual Identity
The floating 3D globe with ethereal purple energy streams connecting continents - this cosmic network visualization immediately signals global connectivity with a premium, almost magical quality that differentiates from typical tech minimalism.
Component Style
Pill-shaped buttons with generous 24px+ border radius create a softer, more approachable feel than sharp enterprise interfaces. Cards feature subtle shadows and rounded corners, while the mobile app interface shows clean dark theme with teal accent indicators.
Spacing Philosophy
Extremely generous vertical spacing creates breathing room around the hero section, with the globe illustration given massive white space to float. Navigation elements maintain tight clustering while action buttons get isolated prominence through spacing.
Design Principles
- Headlines exclusively use Arizona serif at large scales (60px+) for authority
- All UI text uses Inter at 14-16px weights for consistency
- Primary CTAs always use high-contrast pill shapes with 24px+ radius
- Purple gradients flow organically without hard geometric constraints
- Mobile interfaces favor dark themes with teal/green accent colors
Target Audience
Privacy-conscious professionals and tech-savvy individuals who view digital security as both a necessity and a lifestyle choice, valuing Swiss engineering precision over flashy marketing
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 | 60px | 400 | 63.6px | |
| h2 | 36px | 400 | 39.96px | |
| h3 | 20px | 400 | 24px | |
| p | 14px | 400 | 21.98px | |
| a | 14px | 400 | 21.98px | |
| button | 14px | 600 | 21.98px | |
| nav | 14px | 400 | 21.98px | |
| header | 16px | 400 | 24px | |
| footer | 16px | 400 | 24px |
Color Palette
#ffffff
