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: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?
Rate this page
Don’t want to answer
Thank you for your feedback!
Found a typo or other text error? Select the text and press Ctrl+Enter.