Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
NordVPN
CybersecurityNordVPN's brand exudes confident security through a distinctive bright blue signature color that balances approachability with technical authority. The design combines playful curved elements with clean geometric layouts, creating a trustworthy yet accessible cybersecurity aesthetic that appeals to mainstream users rather than hardcore tech enthusiasts.
Design Identity
Signature Color
NordVPN Blue
#3e5fff
cybersecurity trust with consumer accessibility - not intimidating corporate blue but confident protection
Visual Identity
The distinctive bright blue combined with soft geometric patterns and curved UI elements creates an immediately recognizable 'friendly security' aesthetic that stands apart from typical dark, intimidating cybersecurity brands.
Component Style
Pill-shaped buttons with 9999px border radius create maximum softness, while cards and containers use moderate 12px rounding. Everything feels approachable and consumer-friendly with clean edges and subtle shadows rather than sharp enterprise angles.
Spacing Philosophy
Generous whitespace creates breathing room that reduces anxiety around security topics, with 32px container margins providing comfortable boundaries while maintaining focus on key conversion elements.
Design Principles
- Buttons always use pill shape (9999px border radius) for maximum approachability
- Typography weight stays at 600 for headlines to maintain authority without aggression
- Color palette balances bright blues with neutral grays - never pure black
- Interactive elements use the signature #3e5fff blue consistently
- Containers use 12px radius for friendly but professional feel
Target Audience
Privacy-conscious mainstream consumers who want enterprise-level security without technical complexity - people who understand they need protection but don't want to feel like hackers
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 | 40px | 600 | 52px | |
| h2 | 48px | 600 | 62.4px | |
| h3 | 28px | 600 | 39.2px | |
| h4 | 16px | 600 | 24px | |
| h5 | 16px | 400 | 24px | |
| p | 20px | 600 | 30px | |
| a | 14px | 400 | 21px | |
| button | 16px | 600 | 24px | |
| nav | 16px | 400 | 24px |
Color Palette
#404040#3b82f6#f7f7f8#ededed#fac900#5a0e07#43a5a1#696a6d#243dcc#c8c9cb#3e5fff#e02f1f
