https://www.youtube.com/watch?v=oSNkZb3AZxA
DESIGN PHILOSOPHY

We design intuitive digital products that simplify the complexity of payment risk management.

We believe in helping businesses get back to business with human-focused design solutions that simplify the complexity of payment dispute management. From marketing to product, we strive to deliver seamless, intuitive user experiences that solve real problems.

Core Design Principles

These four principles establish the foundation of Midigator design. They serve as the guiding light for all design decisions at Midigator. By referencing these principles, we are able to align our product, culture, values, and marketing with our core mission of helping businesses get back to business.

Clarity

Eliminate ambiguity. Enable people to see, understand, and act with confidence.

Efficiency

Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster.

Consistency

Create familiarity and strengthen intuition by applying the same solution to the same problem.

Beauty

Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship.

Core Logo Colors

The icon is comprised of three shades of green and two neutral grays. This gives the icon depth and perspective. The icon can also be displayed flat using the brand green when necessary.

The wordmark is displayed in a deep gray. The dots on the “i” are always displayed using the brand green color.

#AFD25C

#A0C053

#90AF4C

#4C4C4C

#FFFFFF

#F2F2F2

Logo Color Options

The logo works best in full color on a white background. This style should be used whenever possible. Additionally, deep gray (G800) can also be used on light colored backgrounds when a single color is required. For dark backgrounds, the logo should always be white.

Logo Orientation

When necessary, based on space or aspect-ratio, the logo can be displayed in a vertical format. This is a secondary option and can be applied when spacing, content, or aesthetic preference permit. If possible, the horizontal orientation should be used.

Horizontal

Vertical

Grid & Clearance

The logo is designed with a relational grid based on the logo size. The elements should always be displayed with this relationship in mind.

To ensure that logos are clearly visible, surround them with clear space that is free of type, graphics, and other elements that might cause visual clutter. The “M” height of the wordmark is used to define the minimum required free space.

The Icon

The icon can be used as a stand-alone element to represent the Midigator brand. The icon is especially useful when space is limited, as profile images, or paired with complementary sub-text, such as the “Design & Resource Center”.

The icon can be used in full 3D format or flat, single color. The ® should always be displayed when using the icon only.

Full-Color 3D

Flat Single Color

Light Background

Dark or Color Background

Brand Colors

Color is a cornerstone of Midigator design. It distinguishes our brand and helps us to create consistent experiences across marketing and products. We use a bright brand green and neutral gray palette to communicate key messaging without distractions. The green provides the dynamic contrast to draw users attention to meaningful content, actions, or insights.

Primary Palette

Our primary palette uses our bright green to bring a boldness to our brand and is used in logical ways throughout product and marketing to guide the eye and highlight the important bits. The green is complemented with shades of cool gray to add balance and visual hierarchy.

We pepper warmer, pastel-based secondary palette colors throughout to soften the experience and to impart confidence and optimism.

Name
G300 – Brand Green

Hex
#AFD25C

RGB
175, 210, 92

CMYK
36, 0, 82, 0

PMS
Pantone 367C

Name
N500 – Deep Gray

Hex
#4C4C4C

RGB
76, 76, 76

CMYK
66, 58, 57, 37

PMS
Pantone 7540C

Name
N300 – Cool Gray

Hex
#A3A3A3

RGB
163, 163, 163

CMYK
38, 31, 32, 0

PMS
Pantone 7543 C

Name
N50 – Light Grey

Hex
#F6F6F6

RGB
246, 246, 246

CMYK
2, 2, 2, 0

PMS

Secondary Palette

Our secondary palette contains a variety of colors to keep things fresh and interesting. When used in conjunction with our primary palette, these colors make every moment feel exciting without distracting from the core purpose of the product.

Name
R300 – Bittersweet

HEX
#FB8072

RGB
251, 128, 114

CMYK
0, 63, 49, 0

PMS
805C

Name
B300 – Danube

HEX
#80B1D3

RGB
128, 177, 211

CMYK
49, 19, 7, 0

PMS
542C

Name
T300 – Monte Carlo

HEX
#8DD3C7

RGB
141, 211, 199

CMYK
44, 0, 27, 0

PMS
571C

Name
O300 – Texas Rose

HEX
#FDB462

RGB
253, 180, 98

CMYK
0, 34, 69, 0

PMS
714C

Name
Y300 – Portafino

HEX
#FFFFB3

RGB
255, 255, 179

CMYK
2, 0, 36, 0

PMS
Yellow 0131 C

Typography

We use clean, accessible, sans-serif fonts to reduce the friction between people and the product. With a simple, classic font, we’re able to remove distractions and improve the clarity and confidence in which people interact with our brand.

For accessibility, we use the online font, Open Sans. This font is easily displayed across all browsers, devices, and digital applications.

Open Sans Bold

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Open Sans Semi-Bold

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Open Sans Regular

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Open Sans Light

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Icons & Illustrations

We use icons and illustrations to visually convey ideas and tell stories about experiences with our product. These visual graphics have a goal of communicating a key idea and should be used thoughtfully.

We use icons in every aspect of design, from marketing to the product. Our icon suite consists of custom icons and available icon libraries. Illustrations are used for more impactful storytelling and utilize the primary color palette for easy brand recognition.

Icons

Icons are used to add visual emphasis to a key piece of content or functionality. Midigator’s icons are meant to be simple and add visual clarity, without distracting from the overall design. To do this, we use a combination of available icon font libraries such as font-awesome, linecons, linea, or material. Icon style is chosen based on an application basis. Each icon adheres to the core principle of communicating clarity of purpose.

FontAwesome

Linecons

Linea

Icon Size

Icons are designed to be used in a wide-range of sizes. Their purpose should always be clear; this is why we’ve set minimum size requirements. Since icons are complementary graphics, maximum sizes are implemented so icons do not distract from the overall design. If an icon is needed above the maximum size, explore using a custom illustration.

18px

32px

48px

72px

Illustrations

Illustrations are used to convey more complicated ideas or concepts. These graphics are intended to add visual clarity and define a story or narrative. Because of this, illustrations are custom designed and can be used at larger sizes.

Illustrations should use the brand green and neutral cool grays to maintain brand recognition. The brand green should be used as an accent color and draw attention to key parts of any illustration. The majority of the illustration should use different shades of neutrals.

Custom Dispute Response

CRM Software

Transaction Security

Analytics

Midigator Marketing

Explore how Midigator tells stories and crafts content which resonates with audiences in the payments and risk mitigation industry.

Partner Resource Center

Are you a Midigator partner looking to promote your relationship with Midigator? Explore our resource center to find customizable marketing materials.