# Payment Method Styling

Let's take a closer look at each styling setting.

```javascript
module.exports = {
  theme: {
    extend: {
      borderRadius: {
        none: '0px',
        full: '99999px',
        'sm': '0.5rem',
        'md': '1.25rem',
        'lg': '2rem',
      },
      
      colors: {
        warn: '#FF594F',
        'warn-bg': 'rgba(255, 89, 79, 0.05)',
        danger: '#F5A623',
        'danger-bg': 'rgba(245, 165, 35, 0.05)',
        success: '#4FD18B',
        'success-bg': 'rgba(79, 209, 139, 0.05)',
        primary: 'indigo',
        secondary: '#6B68EC',
        black: '#171717',
        'dark-gray': '#737373',
        'light-gray': '#A9A9A9',
        light: '#F8F9FD',
        white: '#FFFFFF',
        'transparent-3': 'rgba(145, 148, 159, 0.2)',
        'transparent-2': 'rgba(0, 0, 0, 0.05)',
      },
    },
  },
}
```

**borderRadius:**

* `none`: No corner rounding, meaning sharp angles.
* `full`: Maximum rounding, making the element circular.
* `sm`: Small rounding, suitable for input elements, notifications, labels, buttons.
* `md`: Medium rounding, for information cards.
* `lg`: Large rounding, for the top of a page with rounded bottom corners.

**colors:**

* `warn`: Color for critical error messages and notifications.
* `warn-bg`: Background color to indicate critical notifications.
* `danger`: Color for indicating non-critical notifications.
* `danger-bg`: Background color to indicate non-critical notifications.
* `success`: Color for indicating successful actions and notifications.
* `success-bg`: Background color to indicate successful notifications.
* `primary`: Main design color, used for the right button.
* `secondary`: Secondary color, used in the gradient at the top of the page.
* `black`: Color for text and the top background of the page.
* `dark-gray`: Color for labels and text in darker shades.
* `light-gray`: Color for disabled input elements.
* `light`: Color for the page background and the left button.
* `white`: Color for white background and text on a dark background.
* `transparent-3`: Transparent color for the border above the total line.
* `transparent-2`: Transparent color for the background of a disabled element when hovering over the right button.

Each of these settings allows you to flexibly customize the appearance of your payment method according to your brand's design and your preferences.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://e-gates.gitbook.io/crypto-payments-ot-e-gates-eng/payment-method-styling.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.