Design guidelines
Follow these guidelines for the Xsolla logo and buttons to display correctly when choosing a payment method.
Xsolla logo
Use cases
Colored logo
Monochrome logo (black)
Monochrome logo (white)
Limitations
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.
Colors
Depending on a payment UI theme, Xsolla logo can be the following colors:| Theme | Logo color | Logo |
|---|---|---|
| Light (colored logo) | Magenta:
|  |
| Light (monochrome logo) | Black:
|  |
| Dark (monochrome logo) | White:
|  |
Buttons
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)
Proportions
Guidelines on displaying texts on the button:- vertical and horizontal center alignment
- 40% button height
Corner radius
You can adjust button corner radius.
Shadow
You can add a shadow to the button.
Examples of displaying in list of payment methods
Was this article helpful?
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.Found a typo or other text error? Select the text and press Ctrl+Enter.
