Design guidelines

Follow these guidelines for the Xsolla logo and buttons to display correctly when choosing a payment method.

Use cases

Colored logo

Monochrome logo (black)

Monochrome logo (white)

Download logos


Keep in mind that you cannot:
Stretch the logo.
Use an outdated or unofficial Xsolla logo.
Change logo color — use official colors indicated in the table below.
Display logo against a colored background — use a white background instead.


Depending on a payment UI theme, Xsolla logo can be the following colors:

ThemeLogo colorLogo
Light (colored logo)Magenta:
  • Hex: #ff05b
  • RGB: 255 0 91
  • CMYK: 0 100 55 0
Color logo
Light (monochrome logo)Black:
  • Hex: #18171c
  • RGB: 24 23 28
  • CMYK: 50 50 50 100
Black logo
Dark (monochrome logo)White:
  • Hex: #ffffff
  • RGB: 255 255 255
  • CMYK: 0 0 0 0
White logo


You can implement displaying a list of payment methods corresponding to your needs. To maintain the consistency, follow the guidelines below on the design of the button that redirects users to the Xsolla payment UI.

Colored logo

Monochrome logo (black)

Monochrome logo (white)


Guidelines on displaying texts on the button:
  • vertical and horizontal center alignment
  • 40% button height

Corner radius

You can adjust button corner radius.


You can add a shadow to the button.

Examples of displaying in list of payment methods

Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Rate this page
Rate this page
Is there anything we can improve?

Don’t want to answer

Thank you for your feedback!
Last updated: July 2, 2024

Found a typo or other text error? Select the text and press Ctrl+Enter.

Report a problem
We always review our content. Your feedback helps us improve it.
Provide an email so we can follow up
Thank you for your feedback!