Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Ather Energy
MobilityAther Energy embraces a minimalist electric vehicle aesthetic with expansive white space and dark charcoal interfaces that feel sophisticated yet approachable. The signature blue palette evokes trust and innovation in sustainable mobility, while the Neurial Grotesk typography creates a contemporary European design language that speaks to conscious urban commuters.
Design Identity
Signature Color
Ather Electric Blue
#3b82f6
sustainable innovation and electric mobility trust
Visual Identity
Dark overlay interfaces floating over pristine white backgrounds with generous breathing room - creating a premium electric vehicle showroom aesthetic
Component Style
Rounded corners at 4px with subtle shadows create approachable tech-forward components. Buttons feel substantial with medium padding, while the dark overlay cards have a premium automotive dashboard quality with clean edges and soft depth.
Spacing Philosophy
Generous white space dominates the layout with large breathing room between sections, while the dark overlay components use tighter internal spacing to create focused interaction zones - mimicking the spacious exterior and precise interior of an electric vehicle.
Design Principles
- Border radius consistently at 4px for subtle friendliness
- Typography uses only Neurial Grotesk family for brand consistency
- Dark overlays (#374151) create premium interaction surfaces
- Button text at 14px with medium weight for optimal readability
- Shadows range from sm to xl for layered depth hierarchy
Target Audience
Urban professionals aged 25-40 who prioritize sustainability and premium technology in their transportation choices
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 | 16px | |
| h2 | 35px | 400 | 35px | |
| p | 50px | 400 | 60px | |
| a | 16px | 400 | 16px | |
| button | 14px | 400 | 14px | |
| input | 14px | 400 | 20px | |
| main | 16px | 400 | 16px |
Color Palette
#3b82f6#1d4ed8#60a5fa#64748b#475569#94a3b8#10b981#f59e0b#ef4444#06b6d4#ffffff#000000
