The Mango Voice
Design System
Everything you need to represent Mango Voice consistently and beautifully.
Logo
The Mango Voice logo is the primary brand identifier. Use it consistently across all touchpoints.
Use on light backgrounds. This is the default logo variant.
Use on dark backgrounds like Soft Black, Purple, or Dark Blue.
Use when color printing is unavailable or for single-color applications.
Minimum Size
120px width for digital, 1 inch for print. Never scale below this to maintain legibility.
Clear Space
Maintain padding equal to the height of the lowercase "m" on all sides of the logo.
Placement
Top-left for headers and footers. Centered when used as a standalone element.
Don't
Rotate, stretch, add effects, change colors, or place on busy backgrounds.
Colors
Our color palette balances warmth and professionalism. Click any swatch to copy the hex code.
Primary Colors
Secondary — Medium Tones
Secondary — Light Tones
Depth & Accent
Neutrals
Brand Gradient
linear-gradient(to right, #702B83, #484193, #3E4C9A, #327FBE, #6BC7D1)Use sparingly for hero accents, decorative elements, or special emphasis.
Typography
We use two typefaces: Lora for headlines and Inter for body text.
Type Scale
Buttons
Buttons use consistent styling across the platform for a cohesive experience.
Spacing
Consistent spacing creates visual rhythm and hierarchy.
96px vertical, 56px horizontal
24px - 32px
16px - 24px
8px - 16px
Voice & Tone
How we communicate is as important as what we communicate.
Confident, Not Arrogant
We know what we've built. We share results, not boasts. Let the outcomes speak.
Clear, Not Clinical
Healthcare is complex. Our communication isn't. Plain language, direct points.
Warm, Not Casual
We're approachable and human, but we're professionals serving professionals.
Focused, Not Feature-Heavy
Lead with outcomes, not capabilities. What does it mean for the practice?
Need brand assets or have questions?
Contact our team for additional materials, custom requests, or brand partnership inquiries.
Contact Brand Team