Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
HP
Consumer ElectronicsHP's signature aesthetic blends enterprise professionalism with consumer accessibility through a distinctive electric blue palette and clean, geometric layouts. The forma-djr-micro typeface creates a contemporary tech feel while maintaining corporate reliability, with generous whitespace and subtle gradients that feel premium yet approachable.
Design Identity
Signature Color
HP Electric Blue
#296ef9
Technology innovation with enterprise trust - energetic enough for consumer appeal yet authoritative for business confidence
Visual Identity
The distinctive electric blue gradient backgrounds combined with clean product photography on white space, using the forma-djr-micro typeface's subtle geometric character to create a tech-forward but accessible enterprise feeling.
Component Style
Moderately rounded corners (8-12px) with clean fills and subtle shadows. Buttons feel substantial with generous padding and electric blue backgrounds. Cards use soft shadows and clean white backgrounds with plenty of breathing room - everything feels premium but not intimidating.
Spacing Philosophy
Generous 36px default padding creates breathing room throughout. Large hero sections with expansive whitespace convey premium positioning, while tight product grids maintain efficient browsing. Asymmetrical layouts with 60/40 splits between content and imagery.
Design Principles
- Electric blue (#296ef9) as primary action color across all CTAs
- forma-djr-micro font family maintains consistency across all text elements
- 56px large headlines with 400 weight for impact without aggression
- 36px default padding provides consistent spatial rhythm
- Subtle drop shadows (rgba(26,26,26,.2)) add depth without heaviness
Target Audience
Business decision-makers and IT professionals who need enterprise-grade technology but value intuitive user experiences and modern design sensibilities
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 | |
| h2 | 56px | 400 | 56px | |
| h3 | 24px | 500 | 28px | |
| p | 16px | 500 | 22px | |
| a | 16px | 400 | normal | |
| button | 30px | 400 | 34px | |
| input | 14px | 400 | 18px | |
| nav | 14px | 400 | 21px |
Color Palette
#ccdef5#007aff#ffffff#000000#e4eefa#c9e0fc#b2d2ff#8fbaff#72a3ff#518cff#296ef9#024ad8
