Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Snapchat
Social MediaSnapchat's brand radiates youthful spontaneity through bold contrast between stark whites and vibrant blues, balanced by the iconic shock-yellow that pulses with creative energy. Avenir Next typography maintains a clean, approachable sophistication that feels both premium and playful, never taking itself too seriously.
Design Identity
Signature Color
Snapchat Electric Yellow
#fffc00
spontaneous creativity and ephemeral moments - the color of instant inspiration and playful communication
Visual Identity
The asymmetric three-panel layout with oversized imagery dominates half the screen, creating an immersive preview experience that prioritizes visual storytelling over traditional form-heavy interfaces.
Component Style
Buttons feature generous 24px+ corner radius for a soft, approachable feel with the electric blue (#0096e5) creating strong contrast against clean white backgrounds. Cards use subtle gray backgrounds (#f7f8f9) with minimal shadows, keeping everything light and airy.
Spacing Philosophy
Generous whitespace creates breathing room between major sections, while the compact 8px search bar margins show restraint in utility areas - the brand gives content space to shine while keeping functional elements tight.
Design Principles
- Electric yellow (#fffc00) appears sparingly but memorably as the brand anchor
- Avenir Next at 16px/400 weight maintains readability without feeling corporate
- Corner radius never goes below 16px - everything feels soft and touchable
- Blue CTAs (#0096e5) dominate action hierarchy
- Background grays stay light (#f7f8f9, #f9f9f9) never going dark or heavy
Target Audience
Gen Z and young millennials who prioritize authentic visual communication over text, value ephemeral sharing, and expect interfaces that feel more like creative tools than business software
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 | |
| h1 | 48px | 600 | 60px | |
| h2 | 28px | 700 | 36px | |
| h3 | 16px | 500 | 24px | |
| h5 | 16px | 700 | 22px | |
| h6 | 14px | 500 | 18px | |
| p | 14px | 500 | 20px | |
| a | 16px | 400 | normal | |
| button | 16px | 400 | normal | |
| input | 12px | 700 | 14px |
Color Palette
#ffffff#121314#9a9fa7#53575b#2c3137#f0f1f2#c7c7cc#fffc00#edeeef#f9f9f9#f7f8f9#0096e5
