Pæan™ Visual Design Guidelines
A unified design language centered on blue and purple, conveying technology, trust, and emotional connection
Color System
Primary Colors · Paean Cyan
Paean Cyan (#06B6D4) conveys technology, trust, and intelligence, reinforcing our life + technology + fashion personality. Use it for primary CTAs, core features, and high-signal messaging.
Accent Colors · Accent Violet
Accent Violet (#8B5CF6) speaks to emotion, insight, and innovation. It stays close to the primary hue for a unified cool palette, powering emotional features, secondary CTAs, and emphasis.
Blue-Purple Color Usage Principles
- ✓Keep blue (primary) and purple (accent) as dominant colors, comprising 90%+ of page colors
- ✓Purple is close to blue, forming a harmonious cool-to-neutral transition, avoiding visual conflicts
- ✓Functional colors (success/warning/error) should use semantic colors, not part of theme palette
- ✗Avoid introducing warm colors like red, orange, yellow that disrupt color harmony
- ✗Avoid purple overuse causing visual fatigue; maintain blue dominance with purple accents
Typography
Brand Font
Poppins · font-logo
Poppins font for brand identity and special headings, conveying modernity and professionalism.
Body Font
Default · sans-serif
Inter font for all body text and UI elements, providing excellent readability and modernity.
Component Patterns
Button Hierarchy
Primary uses blue-purple gradient, secondary uses pure purple, tertiary uses outline style
Icon Containers
Primary
Accent
Icon containers use corresponding color light backgrounds with consistent border radius and style
Badges
Badges use semi-transparent backgrounds and thin borders with backdrop-blur for depth
Paean Emojis
A comprehensive set of 51 expressive emojis that bring the Paean mascot to life across different emotional and functional states. Use these to add personality and visual feedback throughout the interface.
Core States
Positive Emotions
Negative Emotions
Cognitive States
Sleepy & Tired
Special Expressions
Functional States
Creative & Magic
Usage Guidelines
When to Use
- •Agent feedback states (listening, thinking, responding)
- •Empty states and onboarding illustrations
- •Status indicators and notifications
Technical Notes
- •Available in monochrome (/paean-emoji/) and colorful (/paean-emoji-colorful/) variants
- •SVG format for scalability, recommended size 24-64px
- •Use colorful variants for primary UI, monochrome for subtle contexts
Dark Mode Adaptation
Background Layers
Opacity Standards
- •Colored backgrounds in dark mode: /40
- •Borders in dark mode: /50
- •Card backgrounds in dark mode: /80
- •Use backdrop-blur-sm for glassmorphism