Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Hasura
Dev ToolsHasura embodies developer-grade sophistication with its crystalline gradient cards and ultra-light typography hierarchy. The brand speaks in whispers rather than shouts, using ethereal gradient overlays and generous whitespace to create an atmosphere of technical elegance and AI-powered precision.
Design Identity
Signature Color
Hasura Blue
#3970fd
Developer trust and API reliability - the color of stable infrastructure
Visual Identity
Dreamy gradient cards with soft bokeh-like overlays that transition from mint green to sky blue to lavender purple, creating an otherworldly data visualization aesthetic
Component Style
Soft rounded corners with generous padding, no harsh shadows or borders - everything feels like it's floating in a gradient mist with subtle transparency effects
Spacing Philosophy
Cathedral-like spacing with massive gaps between sections creating a sense of infinite digital space, while card content breathes with comfortable internal padding
Design Principles
- Typography weight contrast: ultra-light 300 weight for impact text against regular 400 weight for body
- Gradient overlays on every major component with 60%+ transparency
- Cards span nearly full width with substantial corner radius
- Monospace-inspired logo treatment contrasts with humanist Inter typography
- Color temperature shifts from cool to warm across the interface
Target Audience
Senior backend developers and technical architects who appreciate subtle design craft and need enterprise-grade GraphQL infrastructure
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 | 40px | 500 | 48px | |
| p | 40px | 300 | 44px | |
| a | 16px | 400 | 24px | |
| button | 14px | 400 | 21px | |
| input | 14px | 400 | 16.8px | |
| header | 16px | 400 | 24px |
Color Palette
#3970fd#ffffff
