Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Superhuman
CommunicationSuperhuman's aesthetic combines deep cosmic purples with sophisticated workspace interfaces, creating a luxurious yet functional productivity environment. The gradient from deep indigo to vibrant purple evokes premium software craftsmanship, while the custom 'Super Sans VF' typography with precise variable weights (460, 540) communicates refined technical excellence.
Design Identity
Signature Color
Superhuman Purple
#6B46E5
premium productivity power - the intersection of luxury and performance for executive workflows
Visual Identity
The distinctive cosmic purple-to-blue gradient background paired with floating, semi-transparent interface mockups creates an unmistakable 'productivity in space' aesthetic that feels both aspirational and technically sophisticated.
Component Style
Components feature subtle transparency with soft rounded corners (8-12px radius), minimal shadows, and floating card treatments. Everything feels weightless and premium - like high-end software floating in a digital cosmos rather than grounded interface elements.
Spacing Philosophy
Generous vertical breathing room with hero sections spanning full viewport height, while maintaining intimate clustering of related interface elements. The brand uses expansive negative space to create luxury, then tight groupings for functional clarity.
Design Principles
- Variable font weights stick to 460 for body and 540 for emphasis - no traditional bold
- Gradient backgrounds always flow from deep purple (#1b1938) to lighter cosmic tones
- Interface mockups float with subtle transparency rather than solid backgrounds
- Typography scales dramatically from 64px headlines to 14px body with precise line-height ratios
- All interactive elements use rounded corners between 8-16px - never sharp
Target Audience
C-suite executives and senior knowledge workers who view email as a strategic weapon and are willing to pay premium prices for tools that make them demonstrably faster and more effective
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 | 460 | 19.2px | |
| h1 | 64px | 540 | 61.44px | |
| h2 | 26px | 460 | 33.8px | |
| h3 | 28px | 540 | 32px | |
| p | 14px | 460 | 21px | |
| a | 14px | 460 | 16.8px | |
| button | 16px | 460 | 24px | |
| nav | 16px | 460 | 19.2px | |
| header | 16px | 460 | 19.2px | |
| footer | 16px | 460 | 19.2px |
Color Palette
#1b1938#000000
