Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
1Password
Security1Password's visual identity radiates trustworthy professionalism through an elegant gradient that flows from midnight blue to deep purple, creating a sense of secure digital depth. The typography strikes a balance between human approachability and technical precision, with generous letter spacing that feels both premium and accessible.
Design Identity
Signature Color
1Password Blue
#4C7CF0
Digital trust and security expertise - conveying both technological sophistication and human reliability
Visual Identity
The distinctive dark gradient background flowing from blue to purple, combined with the ultra-light weight custom typography (agileSans at 300 weight) creates an immediately recognizable premium security aesthetic.
Component Style
Softly rounded buttons with generous padding and subtle gradients. The primary CTA uses a vibrant blue with medium border radius (~8-12px), while the secondary button maintains elegant restraint with transparent backgrounds and clean outlines. Everything feels substantial but not heavy.
Spacing Philosophy
Luxurious vertical breathing room with massive 88px headlines creating dramatic hierarchy. The layout uses generous whitespace to convey premium positioning, with comfortable button padding that prioritizes accessibility over density.
Design Principles
- Typography weight never exceeds 500 - maintaining elegant lightness
- Gradient backgrounds flow from blue (#4C7CF0) to purple depths
- Button border radius stays between 8-12px for friendly approachability
- Line height maintains 1.1-1.5x ratio for optimal readability
- Custom agileSans font creates distinctive brand voice
Target Audience
Security-conscious professionals and teams who value both robust protection and intuitive user experience - from individual creatives to enterprise IT decision makers
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 | 88px | 300 | 96.8px | |
| h2 | 64px | 300 | 70.4px | |
| h3 | 32px | 300 | 38.4px | |
| h6 | 18px | 500 | 21.6px | |
| p | 20px | 300 | 30px | |
| a | 16px | 400 | 24px | |
| button | 16px | 350 | 24px | |
| nav | 16px | 350 | 24px | |
| header | 16px | 350 | 24px |
Color Palette
#ffffff
