Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
MSI
Consumer ElectronicsMSI's gaming-tech aesthetic merges electric cyberpunk energy with precision engineering through dramatic dark gradients and neon cyan accents. The bold typography and sharp geometric layouts communicate cutting-edge performance while the dragon shield logo reinforces their gaming heritage with fierce sophistication.
Design Identity
Signature Color
MSI Gaming Cyan
#00BFFF
High-performance gaming precision and electric energy that cuts through darkness
Visual Identity
Dramatic black-to-gray gradients with horizontal neon lines creating a futuristic tunnel effect, combined with bold sans-serif typography that uses stark white text on dark backgrounds for maximum contrast and gaming appeal.
Component Style
Sharp-edged geometric components with minimal borders and subtle gradients. Icons are clean line-art style with consistent stroke weights. Cards feature dark backgrounds with cyan accent highlights and no shadows, emphasizing flat precision over depth.
Spacing Philosophy
Dense information architecture with tight vertical rhythm between feature callouts, but generous horizontal spacing around the central product hero. The layout prioritizes impact over breathing room.
Design Principles
- Border radius never exceeds 4px maintaining sharp gaming aesthetics
- Typography uses high contrast white on dark with cyan for accents only
- Horizontal line elements span full width to create speed/motion illusion
- Feature icons maintain consistent 24px sizing with 2px stroke weights
- Dark gradients always flow top-to-bottom from pure black to gray
Target Audience
Hardcore PC gamers and enthusiasts who prioritize performance specs and appreciate aggressive, tech-forward aesthetics over mainstream consumer design
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 | 36px | 700 | 48px | |
| h3 | 18px | 700 | normal | |
| a | 16px | 400 | normal | |
| button | 24px | 400 | normal | |
| header | 16px | 400 | normal | |
| footer | 16px | 400 | normal | |
| main | 16px | 400 | normal |
Color Palette
#000000#ffffff#e60000#f7f7fa#fafafa#ececec#cccccc#7c7b7b#696969#333333#222222#1a1a1a
