> This page is for Afterpay Online Developer, version Main (default).
> For other versions, use one of these documentation indexes:
> - Main (default): https://developers.afterpay.com/afterpay-online-developer/main/llms.txt
> - v1: https://developers.afterpay.com/afterpay-online-developer/v-1/llms.txt
> - Chinese: https://developers.afterpay.com/afterpay-online-developer/chinese/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.afterpay.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.afterpay.com/_mcp/server.

# Style Messaging

## Fonts

Afterpay Messaging inherits the font family that is used to style other paragraph elements on the page. If you would like to use a different font, you may specify it in a CSS rule that targets `afterpay-placement`:

```CSS

afterpay-placement {
    font-family: Sans-Serif;
}
```

## Adjust the Size of Afterpay Messaging

Use the `data-size` attribute to change the font-size of the messaging and also to scale the brand logo.

Accepted values for the `data-size` attribute are: **xs**, **sm**, **md** (default), and **lg**. That is extra small, small, medium and large.

To scale the messaging elements beyond these standard options provided by the `data-size` attribute, use the following custom CSS properties:

* `--logo-badge-width`: To change the size of the brand logo only (badge)

* `--messaging-font-size`: To set the font-size of the textual part of the messaging to a custom value

See the code example below:

```CSS

afterpay-placement { 
 --messaging-font-size: 10px; 
 --logo-badge-width: 70px; /* Must be >= 64px */ 
}
```

To ensure your customizations align with our brand guidelines see the following links:

* [Marketing Resources Centre - Brand Collaboration](https://www.afterpay.com/en-AU/business/resources/marketing/brand-tools/brand-collaborations)

* [Marketing resources - Brand Tools - Brand guidelines](https://www.afterpay.com/en-AU/business/resources/marketing/brand-tools/brand-guidelines)

## Logo Types

| Badge | Lockup |
| ----- | ------ |
|       |        |

## Badge Themes

See the [Examples](/afterpay-online-developer/main/guides/afterpay-messaging/examples) page for implementations.

| Badge Theme Name |   |
| ---------------- | - |
| Black on Mint    |   |
| Mint on Black    |   |
| Black on White   |   |
| White on Black   |   |

## Modal Themes

Add the attribute `data-modal-theme` to the `<afterpay-placement>` tag to use an alternate background color on the Afterpay Modal.

```HTML

<afterpay-placement
     data-locale="en_AU"
     data-currency="AUD"
     data-amount="120.00"
     data-modal-theme="white">
</afterpay-placement>
```

Accepted values are: `white`, `mint`

![Accepted modal](/_fern-img/8079ebcad585791c2b1892f6d04a63f6d0128d1388ff43cb1942ea8d9047175e.webp)