Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Surfshark
CybersecuritySurfshark embodies cybersecurity confidence through a vibrant teal-to-turquoise gradient that feels both protective and energetic. The Inter typography creates approachable tech credibility while the flowing gradient background suggests dynamic digital protection rather than static corporate security.
Design Identity
Signature Color
Surfshark Teal
#00D4B5
Digital ocean protection - trustworthy cybersecurity with an energetic, modern edge
Visual Identity
The distinctive teal-turquoise gradient background with flowing organic curves that contrast sharply with the geometric UI elements - creating a unique 'digital ocean' aesthetic in the VPN space
Component Style
Soft rounded corners (8-12px radius) with vibrant gradient fills rather than traditional shadows. The coral-red CTA buttons pop against the teal background. UI elements feel friendly and approachable rather than enterprise-sterile, with moderate padding and no harsh edges.
Spacing Philosophy
Generous vertical breathing room in the hero section with the large gradient canvas, while UI components maintain comfortable but not excessive padding. The layout prioritizes visual impact over information density.
Design Principles
- Gradient backgrounds dominate over solid colors
- Coral-red (#FF4B6B) exclusively for primary CTAs
- Border radius consistently 8-12px for approachability
- Inter typography at 600 weight for all headlines
- Teal spectrum (#00D4B5 to #4ECDC4) as brand foundation
Target Audience
Privacy-conscious consumers who want cybersecurity that feels approachable rather than intimidating - tech-savvy individuals who value both protection and user experience
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 | 600 | 64.2px | |
| h2 | 48px | 600 | 58.08px | |
| h3 | 40px | 600 | 52px | |
| p | 22px | 400 | 31.9px | |
| a | 16px | 400 | 24px | |
| button | 14px | 400 | 15.96px | |
| nav | 16px | 400 | 24px | |
| header | 16px | 400 | 24px | |
| footer | 16px | 400 | 24px |
Color Palette
No colors extracted
