Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Sendgrid
MarketingSendGrid presents a bold, nocturnal aesthetic with deep navy backgrounds that create dramatic contrast against bright whites and electric blues. The Whitney SSm typography feels authoritative yet approachable, while playful red illustrations inject warmth into an otherwise corporate-serious foundation.
Design Identity
Signature Color
SendGrid Midnight
#1E293B
Enterprise reliability with developer sophistication - the darkness suggests powerful backend infrastructure working behind the scenes
Visual Identity
The dramatic dark navy backgrounds with floating red illustrated characters create an unmistakable 'powerful yet human' dichotomy that no other email service uses.
Component Style
Generously rounded buttons (24px+ radius) with solid fills and no visible borders create a friendly, approachable feel. Cards and sections use subtle shadows (8-16px blur) to create depth against the dark backgrounds, making everything feel elevated and premium.
Spacing Philosophy
Luxurious breathing room with large 80-120px section gaps that let each message breathe. Content is center-aligned with wide margins, creating focus and reducing cognitive load - very different from dense dashboard-style layouts.
Design Principles
- Dark backgrounds dominate with 80%+ coverage for drama
- Red accent color only for illustrations and heart symbols
- Button radius always 24px+ for maximum friendliness
- Whitney SSm typography exclusively at 16px body, 48px+ headers
- Shadows use consistent 18,28,45 RGB base with 10-15% opacity
Target Audience
Technical decision-makers at scale-up companies who need enterprise email reliability but want to avoid the sterile aesthetics of traditional B2B software
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 | 48px | 700 | 60px | |
| h2 | 40px | 700 | 52px | |
| h5 | 18px | 700 | 28px | |
| p | 16px | 400 | 28px | |
| a | 16px | 400 | 28px | |
| button | 12px | 500 | 21px | |
| header | 16px | 400 | 28px | |
| footer | 16px | 400 | 28px | |
| main | 16px | 400 | 28px |
Color Palette
#007aff
