Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Okta
EnterpriseOkta creates a sophisticated enterprise identity through the juxtaposition of classical serif headlines (Playfair Display) against modern sans-serif body text (Aeonik), establishing both gravitas and accessibility. The deep electric blue palette evokes trust and technological precision while the futuristic hero imagery positions AI security as aspirational rather than intimidating.
Design Identity
Signature Color
Okta Enterprise Blue
#007dc1
enterprise-grade security and technological reliability
Visual Identity
The dramatic contrast between elegant serif headlines and clean sans-serif interface elements, combined with cinematic hero imagery featuring diverse professionals in aspirational workplace environments.
Component Style
Rounded corner buttons (approximately 6-8px radius) with solid fills and clean typography. Cards and containers use subtle rounded corners with generous internal padding. No heavy shadows or borders - relies on color contrast and whitespace for separation.
Spacing Philosophy
Generous vertical rhythm with substantial gaps between major sections. The hero area uses expansive whitespace to let the dramatic imagery breathe, while maintaining tight, organized spacing within UI components and navigation elements.
Design Principles
- Headlines exclusively use Playfair Display serif at large scales (92px for H1, 48px for H2)
- Interface text maintains 400 weight for body, 500 for emphasis
- Button text uses compact 12px sizing with 500 weight for clarity
- Line heights follow 1.4x ratio for optimal readability
- Color palette centers on blues with minimal accent colors
Target Audience
Enterprise IT decision-makers and security professionals who value both technological sophistication and human-centered design in their identity management solutions
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 | normal | |
| h1 | 92px | 400 | 92px | |
| h2 | 48px | 400 | 56px | |
| h3 | 32px | 400 | 40px | |
| h4 | 16px | 500 | 22.4px | |
| p | 16px | 400 | 22.4px | |
| a | 16px | 400 | 22.4px | |
| button | 12px | 500 | 20px | |
| nav | 16px | 400 | normal | |
| header | 16px | 400 | normal |
Color Palette
#aeaeae#191919#e8dcc7#7549f2#fffefa#da372c#585862#4b4b4b#abd5d6#4016a0#efefef#3f59e4
