Colors

MixPay's colors purposefully to communicate how things function in the interface. This helps us create visual patterns that can make interacting with our product easier and more predictable for merchants.

Brand colors

#164AFF
rgb(22,74,255)

#1E1E22

rgb(22,74,255)

#004098
CMYK(100%,80%,0,0)
For printing materials

Brand Mark

Logo

The ideal presentation of our logo is full color. This version works best on a white or light background. Use the full logo whenever possible.

MixPay Logo Blue

Use the following logo when displaying our logo on dark backgrounds.

MixPay Logo White

Mark

The MixPay mark should only be used in cases where a company icon or avatar is required (traditionally constrained to a perfect square or circle). In all other cases, use the logo. 

Square

MixPay-logo-square

MixPay-mark-square

Circle

MixPay-logo-square

MixPay-mark-square

Clear space

The logo must always be surrounded by open space, free from any other element. The minimum spacing is equivalent to the width of the “M” in MixPay on all four sides.

Payment Button

After the user has chosen MixPay as a payment method, the following button should be used to view the MixPay invoice.
You should use this format regardless if the invoice displays as a modal or opens in a new tab.
Ensure the checkout button matches the width and height of your standard checkout button.

For checkout

Use this button in your checkout experience

For donations

If you accept donations as a nonprofit organization, use this button in your checkout experience

Clear space

Always maintain the minimum clear space of 8 dp on all sides of the payment button. Ensure the clear space is never broken with graphics or text.

Payment Mark

MixPay Accepted Mark

Use this graphic to communicate that MixPay is an available payment option when showing other payment options in a similar manner.

MixPay Accepted

Pay with MixPay

Alternative MixPay Accepted Marks

Use this graphic as a secondary option to communicate that MixPay is an available payment option when displaying other payment methods. 

MixPay-Accepted-Card

MixPay-Accepted-Card-Alt

MixPay-Accepted-Card-Alt

MixPay-Accepted-Card-GrayScale

Pay With-MixPay-Card

Pay With-MixPay-Card-Alt

MixPay-Accepted-Card-GrayScale

Size

Adjust the height to match the other brand identities displayed in your payment flow. Don't make the MixPay mark smaller than other brand identities.

MixPay Accepted Mark(Dark Modes)

Use this graphic to communicate that MixPay is an available payment option when showing other payment options in a similar manner.

MixPay-Accepted-CardGroup-DarkMode

Pay-with-MixPay-CardGroup-DarkMode

Alternative MixPay Accepted Marks(Dark Modes)

Use this graphic as a secondary option to communicate that MixPay is an available payment option when displaying other payment methods. 

Examples

Displaying in footer of website 

It is preferred to display MixPay as a card alongside other payment method mark on a white or light background. The mark can also appear on a marketing layout that features a dark background.

Alternative ways to display MixPay alongside other payment method marks 

Displaying at checkout

MixPay Pay in text

You may use text to indicate  MixPay as a payment option, and to promote MixPay in your marketing communication.

Capitalize the letters “M” and "P"

Always use an uppercase "M" and an uppercase "P" followed by lowercase letters. Don't capitalize the full name "MIXPAY" unless it's to match the typographic style on your website. Never use an uppercase "MIXPAY" in your marketing communication.

Don't abbreviate MixPay

Always write out the words "MixPay."

Match the style on your website

Set "MixPay" in the same font and typographic style as the rest of the text on your website. Don't mimic MixPay's typographic style.

Don't translate MixPay

Always write "MixPay" in English. Don't translate it into another language.

Colors
Brand Mark
Payment Button
Payment Mark
MixPay Pay in text
Download

Colors

MixPay's colors purposefully to communicate how things function in the interface. This helps us create visual patterns that can make interacting with our product easier and more predictable for merchants.

Brand colors

#164AFF
rgb(22,74,255)

#1E1E22

rgb(22,74,255)

#004098
CMYK(100%,80%,0,0)
For printing materials

Brand Mark

Logo

The ideal presentation of our logo is full color. This version works best on a white or light background. Use the full logo whenever possible.

Use the following logo when displaying our logo on dark backgrounds.

Mark

The MixPay mark should only be used in cases where a company icon or avatar is required (traditionally constrained to a perfect square or circle). In all other cases, use the logo. 

Square

Circle

Clear space

The logo must always be surrounded by open space, free from any other element. The minimum spacing is equivalent to the width of the “M” in MixPay on all four sides.

Payment Button

After the user has chosen MixPay as a payment method, the following button should be used,
Ensure the checkout button matches the width and height of your standard checkout button.

For checkout

Use this button in your checkout experience

For donations

If you accept donations as a nonprofit organization, use this button in your checkout experience

Clear space

Always maintain the minimum clear space of 8 dp on all sides of the payment button. Ensure the clear space is never broken with graphics or text.

Payment Mark

MixPay Accepted Mark

Use this graphic to communicate that MixPay is an available payment option when showing other payment options in a similar manner.

Alternative MixPay Accepted Marks

Use this graphic as a secondary option to communicate that MixPay is an available payment option when displaying other payment methods. 

Size

Adjust the height to match the other brand identities displayed in your payment flow. Don't make the MixPay mark smaller than other brand identities.

MixPay Accepted Mark(Dark Modes)

Use this graphic to communicate that MixPay is an available payment option when showing other payment options in a similar manner.

Alternative MixPay Accepted Marks(Dark Modes)

Use this graphic as a secondary option to communicate that MixPay is an available payment option when displaying other payment methods. 

Examples

Displaying in footer of website 

It is preferred to display MixPay as a card alongside other payment method mark on a white or light background. The mark can also appear on a marketing layout that features a dark background.

Alternative ways to display MixPay alongside other payment method marks 

Displaying at checkout

MixPay Pay in text

You may use text to indicate MixPay as a payment option, and to promote MixPay in your marketing communication.

Capitalize the letters “M” and "P"

Always use an uppercase "M" and an uppercase "P" followed by lowercase letters. Don't capitalize the full name "MIXPAY" unless it's to match the typographic style on your website. Never use an uppercase "MIXPAY" in your marketing communication.

Don't abbreviate MixPay

Always write out the words "MixPay."

Match the style on your website

Set "MixPay" in the same font and typographic style as the rest of the text on your website. Don't mimic MixPay's typographic style.

Don't translate MixPay

Always write "MixPay" in English. Don't translate it into another language.

Payment Button

Download

MixPay Accepted Mark

Download