Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
QuantumScape
Climate TechQuantumScape embodies sustainable innovation through cinematic landscapes and industrial precision. The brand balances aspirational environmental imagery with clean, technical typography using Obvia, creating a narrative that connects cutting-edge battery technology to a livable future.
Design Identity
Signature Color
QuantumScape Mint
#7bdcb5
sustainable technology optimism - the bridge between nature and innovation
Visual Identity
Cinematic hero imagery featuring electric vehicles in renewable energy landscapes, overlaid with large-scale typography that creates environmental storytelling through visual hierarchy.
Component Style
Minimal, borderless components that blend seamlessly into photographic backgrounds. Typography-heavy design with no visible buttons or form elements - everything feels integrated into the narrative landscape rather than sitting on top of it.
Spacing Philosophy
Generous negative space in hero sections allows environmental imagery to breathe, while text blocks use tight leading (54px font with 54px line height) to create impact density against expansive landscapes.
Design Principles
- Hero typography uses identical font-size and line-height (54px) for maximum impact
- Body text maintains 1.5x line height ratio (19px font, 28.5px leading) for readability
- Navigation uses consistent 19px sizing across all interactive elements
- Shadows range from natural (6px blur) to crisp (0px blur) for layering depth
- Color palette emphasizes environmental greens and cyan blues over traditional tech colors
Target Audience
Sustainability-focused executives and investors who need to understand complex battery technology through environmental impact narratives
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 | 19px | 400 | 28.5px | |
| h1 | 54px | 500 | 54px | |
| h2 | 24px | 700 | 24px | |
| p | 22px | 400 | 30.8px | |
| a | 19px | 400 | 28.5px | |
| nav | 19px | 400 | 28.5px | |
| footer | 19px | 400 | 28.5px | |
| main | 19px | 400 | 28.5px |
Color Palette
#000000#abb8c3#ffffff#f78da7#cf2e2e#ff6900#fcb900#7bdcb5#00d084#8ed1fc#0693e3#9b51e0
