Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Calendly
ProductivityCalendly embodies approachable professionalism through its signature azure blue palette that suggests trustworthy efficiency. The Gilroy typeface creates a warm, human-centered feel that balances business functionality with personal approachability.
Design Identity
Signature Color
Calendly Blue
#006BFF
scheduling reliability and professional trust
Visual Identity
Generous whitespace with azure blue accents creates an uncluttered, breathing room aesthetic that makes complex scheduling feel effortless and stress-free.
Component Style
Softly rounded corners (6-8px radius) with subtle shadows and gentle blue fills - everything feels approachable yet professional, like a friendly handshake in digital form.
Spacing Philosophy
Abundant whitespace creates calm breathing room with generous 48px+ gaps between sections, while maintaining comfortable 16-24px internal padding that never feels cramped.
Design Principles
- Border radius stays between 6-8px for gentle approachability
- Typography hierarchy uses 16px, 18px, 24px, 28px progression
- Blue accent color appears sparingly for maximum impact
- Whitespace ratios favor 3:1 breathing room over content density
- Gilroy font weight never exceeds 700 to maintain friendliness
Target Audience
Busy professionals and service providers who value efficiency but want their scheduling tools to feel human and approachable rather than sterile
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 | 16px | |
| h2 | 18px | 400 | 28.8px | |
| h3 | 28px | 600 | 39.2px | |
| h4 | 24px | 600 | 33.6px | |
| h5 | 18px | 700 | 28.8px | |
| h6 | 16px | 600 | 25.6px | |
| p | 20px | 400 | 28px | |
| a | 18px | 600 | 28.8px | |
| button | 16px | 400 | 16px | |
| nav | 16px | 400 | 16px |
Color Palette
#f3edfe#d8d0fe#ffe7ba#f79009#6f3f00#476788#a6bbd1#ededed#e7edf6#f1fef8#f0f3f8#b8dcff
