Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
SmartNews
MediaSmartNews embodies a news-forward aesthetic with subtle gradients and smartphone-centric imagery that emphasizes mobile-first consumption. The warm blue (#329fe7) creates trust while Japanese typography suggests global news accessibility.
Design Identity
Signature Color
SmartNews Blue
#329fe7
trustworthy news delivery with approachable accessibility
Visual Identity
Hero sections featuring hands holding smartphones displaying colorful news feeds, with soft gradient backgrounds transitioning from light blue to white
Component Style
Rounded rectangular cards with subtle shadows, buttons with moderate 6-8px border radius, clean borders without heavy shadows - everything feels approachable yet authoritative
Spacing Philosophy
Generous vertical spacing between hero sections and content blocks, creating breathing room that emphasizes the mobile device as the focal point while maintaining content density in news cards
Design Principles
- Mobile devices always shown in context with hands for human connection
- Gradient backgrounds transition from colored to white for depth
- News content uses colorful category tags for quick scanning
- Typography scales dramatically from 10px body to 36px headlines
- Rounded corners never exceed 8px for friendly but professional feel
Target Audience
Mobile-first news consumers who value curated content from multiple sources and want personalized news discovery
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 | 10px | 400 | 15px | |
| h2 | 24px | 600 | 37.2px | |
| h3 | 12px | 400 | 18px | |
| p | 36px | 600 | 36px | |
| a | 10px | 400 | 15px | |
| button | 10px | 400 | 15px | |
| input | 12px | 400 | 18.6px | |
| nav | 10px | 400 | 15px | |
| footer | 10px | 400 | 15px | |
| main | 10px | 400 | 15px |
Color Palette
#ffffff#e0e0e0#bebebe#fb9200#0099eb#fd4749#00cc8b#000000#329fe7#f3f7fb#1c1c1c#f9f9f9
