# Custom Checkout Appearance API

You can change the visual customization of Elements created with Custom Checkout using the [Appearance API](https://docs.stripe.com/elements/appearance-api).

```javascript
checkout.changeAppearance(appearance: object)
```

- `appearance`: Match the design of your site with the [appearance option](https://docs.stripe.org/elements/appearance-api). The layout of each Element stays consistent, but you can modify colors, fonts, borders, padding, and more.

### Example

```javascript
// Example of changing the appearance of Elements
checkout.changeAppearance({
  theme: 'flat',
  variables: {
    colorPrimary: '#0570f0',
    colorBackground: '#ffffff',
    colorText: '#30313d',
    colorDanger: '#df1b4c',
    fontFamily: 'ideal-sans-serif',
    spacingUnit: '4px',
    borderRadius: '4px',
  },
  rules: {
    '.Input': {
      backgroundColor: '#f0f0f0',
      color: '#30313d',
    },
  },
});
```