Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Auth0
IdentityAuth0's signature aesthetic blends deep cosmic purples with ethereal gradients, creating a futuristic security atmosphere that feels both protective and mystical. The Aeonik typography maintains a clean, geometric precision that balances technical credibility with approachable warmth, while the dramatic gradient backdrop suggests both depth and infinite possibility.
Design Identity
Signature Color
Auth0 Cosmic Purple
#8B5CF6
Future-forward security that transcends traditional enterprise boundaries - mystical yet trustworthy
Visual Identity
The dramatic purple-to-dark gradient background with large, ethereal light effects creates an unmistakable 'security cosmos' atmosphere - like protecting digital identities in space.
Component Style
Buttons have subtle rounded corners (approximately 6-8px) with clean fills and gentle shadows. The primary CTA uses a light cream background against the dark theme, while secondary actions maintain the purple scheme. Everything feels weightless yet substantial - floating in the cosmic interface.
Spacing Philosophy
Generous vertical breathing room with the hero content floating in abundant whitespace. The large heading dominates the center while navigation stays compact at the top. Buttons are given substantial padding to feel important without overwhelming the ethereal composition.
Design Principles
- Typography uses exclusively 400 weight Aeonik for elegant consistency
- Hero headlines scale to massive 64px for dramatic impact
- Dark-to-light theme creates depth and focus
- Purple gradients flow from deep space to lighter mystical tones
- Button text stays at 14px regardless of button importance
Target Audience
Technical decision-makers and developers who want enterprise-grade security that doesn't feel like traditional corporate software - forward-thinking teams building the next generation of digital experiences
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 | 14px | 400 | 28px | |
| h1 | 64px | 400 | 72px | |
| h2 | 48px | 400 | 56px | |
| h3 | 48px | 400 | 56px | |
| p | 14px | 500 | 20px | |
| a | 14px | 400 | 20px | |
| button | 14px | 400 | 16.1px | |
| nav | 14px | 400 | 28px | |
| header | 14px | 400 | 28px | |
| footer | 14px | 400 | 28px |
Color Palette
No colors extracted
