Application Guidelines
Practical guidance for applying CLAIR's visual identity across mobile app, marketing materials, and product features.
Mobile App UI
Interface Principles
- 1.Clarity First: Prioritize readability and usability over visual decoration
- 2.Generous Spacing: Use whitespace to create breathing room and hierarchy
- 3.Consistent Patterns: Reuse components and interactions for familiarity
- 4.Brand Moments: Strategic use of brand colors for key actions and feedback
Color Usage
Primary actions, active states, key insights
Highlights, notifications, positive feedback
Body text, primary content
Secondary text, metadata
Backgrounds, cards, subtle divisions
Marketing Materials
Social Media
- •Use horizontal logo lockup in profile images
- •Brand colors for backgrounds and accents
- •DM Sans for all text overlays
- •Maintain 20% minimum clear space around logo
Email Templates
- •White background with brand color accents
- •Generous line height (1.6) for readability
- •Primary CTA in Deep Purple (#5B3A8F)
- •Footer logo in mark-only format
Presentations
- •White slides with brand color headers
- •Large, readable typography (minimum 24pt body)
- •Concentric arc graphics as subtle backgrounds
- •Logo in top-left or bottom-right
Print Collateral
- •Use CMYK color values for accurate reproduction
- •Minimum logo size: 0.5 inches width
- •High-resolution images (300 DPI minimum)
- •Maintain brand color ratios
Feature Implementation
Conversation Analysis
Use Tech Forward palette (teal accents) for analytical features. Display insights with clean data visualizations using brand colors.
Coaching Suggestions
Use Warm Intelligence palette (coral accents) for coaching. Present suggestions in friendly, conversational tone with supportive visuals.
Success Stories
Use Romantic Depth palette (pink accents) for connection-focused content. Emphasize authentic photography and emotional resonance.