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 接收標誌

下載