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.

颜色
品牌标志
支付按钮
付款标志
文本中的 MixPay
下载

颜色

MixPay 的颜色是有目的性的,以传达事物在界面中的功能。这有助于我们创造视觉模式,使商户与我们的产品互动更容易、更可预测。

品牌颜色

#164AFF
rgb(22,74,255)

#1E1E22

rgb(22,74,255)

#004098
CMYK(100%,80%,0,0)
用于印刷材料

品牌标志

Logo

我们的标志的理想表现形式是全彩色,这个版本在白色或浅色背景上效果最好,尽可能地使用完整的标志。

在深色背景上显示我们的标识时,请使用以下标识。

标志

MixPay 标志只应在需要公司图标或头像的情况下使用(传统上被限制在一个完美的方形或圆形)。在所有其他情况下,使用标志。 

方形

圆形

留白

标志必须始终被开放的空间所包围,不受任何其他元素的影响。最小间距相当于 MixPay 中的 "M "在四边的宽度。

支付按钮

在用户选择 MixPay 作为支付方式后,应使用以下按钮,确保结账按钮与你的标准结账按钮的宽度和高度一致。

用于结账

在你的结账体验中使用这个按钮。

用于捐赠

如果你作为一个非营利组织接受捐赠,请在你的结账体验中使用这个按钮。

留白

始终保持支付按钮各面的最小留白为8dp,确保留白的空间不被图形或文字所破坏。

付款标志

MixPay 接收标志

在以类似的方式显示其他支付选项时,使用这个图形来传达 MixPay 是一个可用的支付选项。

MixPay 其他的接收标志

在显示其他支付方式时,使用此图形作为次要选项,以传达 MixPay 是一个可用的支付选项。 

尺寸

调整高度以配合你的支付流程中显示的其他品牌标识,不要让 MixPay 的标志比其他品牌标识小。

MixPay 接收标志(暗黑模式)

在以类似的方式显示其他支付选项时,使用这个图形来传达 MixPay 是一个可用的支付选项。

MixPay 其他的接收标志(暗黑模式)

在显示其他支付方式时,使用此图形作为次要选项,以传达 MixPay 是一个可用的支付选项。 

实例

显示在网站的页脚 

最好是在白色或浅色背景上将 MixPay 作为卡片与其他支付方式的标记一起显示,该标记也可以出现在具有深色背景的营销布局上。

将 MixPay 与其他支付方式标记一起显示的其他方法 

结账时显示

文本中的 MixPay

您可以使用文字来表明 MixPay 是一种支付方式,并在您的市场交流中推广 MixPay。

将字母 "M "和 "P "大写

始终使用大写的 "M "和大写的 "P",后面是小写字母。不要将全名 "MIXPAY "大写,除非是为了配合您网站上的排版风格。不要在你的营销传播中使用大写的 "MIXPAY"。

不要简写 MixPay

始终写出 "MixPay "字样。

匹配您网站上的风格

将 "MixPay "设置为与您网站上其他文字相同的字体和排版风格,不要模仿 MixPay 的排版风格。

不要翻译 MixPay

总是用英语写 "MixPay",不要把它翻译成其他语言。

Logo

下载

支付按钮

下载

MixPay 接收标志

下载