Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Twilio
Dev ToolsTwilio embraces a bold, developer-focused aesthetic that balances electric energy with technical precision. The vibrant red-coral signature color creates an approachable yet powerful atmosphere, while the clean Whitney SSm typography establishes professional credibility with human warmth.
Design Identity
Signature Color
Twilio Coral Red
#F22F46
energetic innovation meets approachable expertise - communicating both technical power and human connection
Visual Identity
The distinctive coral-red geometric shapes combined with conversational UI elements and chat-like interactions create an instantly recognizable 'communications-first' design language.
Component Style
Soft, rounded components with generous padding and subtle shadows - buttons feel pillowy with 24px+ border radius, cards have gentle elevation, and everything prioritizes approachability over sharp precision.
Spacing Philosophy
Asymmetric hero layouts with dramatic white space on the left for content, while the right side features bold geometric shapes - creating dynamic tension between text and visuals.
Design Principles
- Typography uses Whitney SSm exclusively across all weights from 400-700
- Primary CTAs always use high border radius (24px+) for pill-like appearance
- Shadows are consistently soft and subtle using rgba(18,28,45) with low opacity
- Red geometric shapes serve as primary visual anchors
- Conversational UI elements reinforce the communications platform narrative
Target Audience
Technical decision makers and developers who need powerful communications APIs but value human-centered design and approachable documentation
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 | 28px | |
| h1 | 56px | 700 | 66px | |
| h2 | 40px | 700 | 52px | |
| h3 | 28px | 700 | 36px | |
| h4 | 20px | 700 | 32px | |
| p | 14px | 400 | 20px | |
| a | 16px | 400 | 28px | |
| button | 12px | 400 | 21px | |
| input | 18px | 400 | 28px | |
| nav | 14px | 400 | 24.5px |
Color Palette
#007aff
