Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
MetaMask
Web3MetaMask's brand radiates crypto-native confidence through deep purples and electric gradients that feel both premium and rebellious. The bold typographic hierarchy with massive 161px headings creates a commanding presence that speaks to digital sovereignty and Web3 empowerment.
Design Identity
Signature Color
MetaMask Purple
#4362d1
Crypto authority and decentralized trust - the color of Web3 empowerment
Visual Identity
Aggressive purple gradients paired with ultra-bold typography at massive scales - the brand owns its space with unapologetic confidence and crypto-native aesthetics.
Component Style
Rounded corners with generous padding and smooth shadows create approachable yet premium components. The 'GET METAMASK' button uses high contrast black-on-white for maximum conversion impact.
Spacing Philosophy
Minimal spacing tokens (3px-10px) suggest tight control and precision, while the layout breathes with generous whitespace that lets the bold typography dominate the canvas.
Design Principles
- Headlines scale to massive 161px to command attention
- Purple gradients (#4362d1 to deeper variants) define brand moments
- Primary actions use high-contrast black buttons
- Custom font families (MMPolyVariable, MMEuclidCircularB) create unique voice
- Subtle shadows (0 4px 14px) add depth without distraction
Target Audience
Crypto enthusiasts and DeFi power users who value self-custody and want tools that match their sophisticated understanding of blockchain technology
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 | 24.15px | 400 | 36.225px | |
| h1 | 161px | 400 | 161px | |
| h2 | 32.2px | 400 | 40.25px | |
| h3 | 16.1px | 500 | 24.15px | |
| p | 16px | 400 | 16px | |
| a | 16px | 400 | 20px | |
| button | 13.3333px | 400 | normal | |
| input | 13.3333px | 400 | normal | |
| nav | 24.15px | 400 | 36.225px | |
| header | 24.15px | 400 | 36.225px |
Color Palette
#ffffff#2c56dd#4362d1#000000#b0b0b0#7a3ff1#37cd8f#29246a#ebebeb#37cd84#180d43#058a5e
