Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Mailgun
MarketingMailgun presents a sophisticated developer-first aesthetic with a striking nocturnal atmosphere - dark charcoal backgrounds contrasted by vibrant electric blues and coral accents. The Host Grotesk typography creates a technical yet approachable personality, while the split-screen layout with live code samples positions this as a platform built by developers, for developers.
Design Identity
Signature Color
Mailgun Electric Blue
#5996ff
Technical precision and developer trust - a color that signals both innovation and reliability in the API space
Visual Identity
The signature split-screen composition with live code editor on dark background alongside clean white dashboard mockups - immediately recognizable as a developer-focused platform that bridges code and business metrics.
Component Style
Buttons feature generous rounded corners (approximately 8px) with solid fills and no visible borders. The primary CTA uses the signature electric blue with confident white text, while secondary actions maintain the rounded aesthetic with transparent backgrounds and subtle borders.
Spacing Philosophy
Generous breathing room defines the layout - large 80px+ gaps between major sections create a premium feel, while the left content area uses ample whitespace to let the bold typography dominate without feeling cramped.
Design Principles
- Split-screen layouts maintain 50/50 visual weight between content and code demonstrations
- Rounded corners consistently around 8px across all interactive elements
- Dark code backgrounds (#2a2d3a) always paired with syntax highlighting
- Typography hierarchy jumps dramatically: 48px headlines to 18px body with no intermediate sizes
- Electric blue (#5996ff) reserved exclusively for primary actions and key interactive elements
Target Audience
Senior backend developers and engineering teams at scale-ups who need bulletproof email infrastructure and value developer experience over marketing fluff
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 | 18px | 400 | 28px | |
| h1 | 48px | 600 | 56px | |
| h2 | 40px | 600 | 48px | |
| h3 | 18px | 600 | 28px | |
| h4 | 24px | 600 | 32px | |
| p | 16px | 400 | 24px | |
| a | 12px | 400 | 20px | |
| button | 18px | 400 | 28px | |
| input | 16px | 400 | 24px | |
| nav | 18px | 400 | 28px |
Color Palette
#c9331c#5996ff#4b575e#aeb7bd#368f7d#1750c2#1860f0#f7faff#000000#626c73#ffffff#f7f9fa
