Visual Elements & Style
Photography, iconography, and graphic elements that support CLAIR's brand personality and create a cohesive visual system.
Photography Style
Authentic Moments
Use authentic, candid photography showing real people in genuine moments of connection. Avoid overly posed or stock-feeling imagery.
- ✓ Natural lighting and settings
- ✓ Diverse representation
- ✓ Genuine expressions and interactions
- ✓ Warm, inviting color grading
Technical Specifications
Aspect Ratios
16:9 for web, 4:5 for mobile, 1:1 for social
Resolution
Minimum 1920×1080 for web assets
Color Treatment
Slight warmth, avoid oversaturation
Composition
Rule of thirds, generous negative space
Iconography
Icon Style
Use simple, geometric icons with consistent stroke weight. Icons should be clear at small sizes and feel modern without being overly trendy.
- ✓ 2px stroke weight at 24×24px
- ✓ Rounded corners (2px radius)
- ✓ Consistent optical sizing
- ✓ Use brand colors sparingly
Icon Categories
Interface
- • Navigation
- • Actions
- • Status
Features
- • Analysis
- • Coaching
- • Insights
Communication
- • Messages
- • Notifications
- • Sharing
Profile
- • User
- • Settings
- • Privacy
Graphic Elements
Concentric Arcs
Subtle background elements derived from logo concept, suggesting depth and layers of insight
Gradient Overlays
Purple-to-pink gradients at low opacity (10-20%) for visual interest and brand reinforcement
Data Visualizations
Clean charts and graphs using brand colors, emphasizing clarity over decoration