---
sourceDocument: Yokohama ServiceNow AI Platform user interface
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/yokohama/platform-user-interface

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Working with Image styles

# Working with Image styles {#ariaid-title1}

Release version: Yokohama  
Updated March 12, 2025  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read  
Image styles enable you to experiment with different color schemes for illustrations and replace default illustrations with your own custom images. The Image styles feature provides flexibility in customizing the visual elements
of your theme.

## Empty state illustrations {#working-with-image-styles__section_rvy_2yy_t2c}

When a component or a part of your Next Experience web page doesn't contain data, an empty state illustration appears. Empty state illustrations are theme-able, and adapt to the theme colors of your instance.  
Important:  
Empty state illustrations apply to Workspaces and are not supported in the Core UI.  
Figure 1. Empty state illustration  
The Image styles feature offers the following types of empty state illustration types, each including a small, medium, and large version:

* Add attachment
* Add data
* Completed tasks
* Completed tasks
* Error
* First time user
* Interrupted
* No activities
* No data
* Completed tasks
* No permission
* Completed tasks
* No search results
* Completed tasks
* Offline
* Unconfigured
{#working-with-image-styles__ul_k4y_l11_52c}

## Custom images {#working-with-image-styles__section_d4r_kxr_hfc}

Upload your custom images to Theme Builder to replace the default empty state illustrations.  
To override the default empty state illustrations with custom images, upload each image size individually. You can choose to override just one size or all three sizes of an empty state type. The size and format limitations for each of the three file sizes are as follows:{#working-with-image-styles__table_szg_tsz_hfc__entry__2}

| Field | Description |
|-|-|
| Dimensions limit | w56 x h56 px |
| Format | SVG |
| File size limit | 2 MB |
[Table 1. Small image size and format limitations]

{#working-with-image-styles__table_szg_tsz_hfc}{#working-with-image-styles__table_tzg_tsz_hfc__entry__2}

| Field | Description |
|-|-|
| Dimensions limit | w216 x h168 px |
| Format | SVG |
| File size limit | 2 MB |
[Table 2. Medium image size and format limitations]

{#working-with-image-styles__table_tzg_tsz_hfc}{#working-with-image-styles__table_uzg_tsz_hfc__entry__2}

| Field | Description |
|-|-|
| Dimensions limit | w350 x h318 px |
| Format | SVG |
| File size limit | 2 MB |
[Table 3. Large image size and format limitations]

{#working-with-image-styles__table_uzg_tsz_hfc}  
Empty state illustrations are dependent on two design tokens that handle their color:

* --empty-state--main-object--fill
* --empty-state--main-object---outline

{#working-with-image-styles__ul_ygk_x1s_hfc}Custom images don't automatically reflect your theme colors. To make your image theme-able, add these tokens to your code using your preferred text editor before uploading the custom SVG to Theme Builder. After adding these tokens to your image code, the images will adopt your theme colors and enable you to edit the colors when uploaded to Theme Builder.  
The following example shows the design tokens applied.

    <style>
        .main-object--outline {
            fill:rgb(var(--empty-state--main-object--outline, var(--main-object--outline, var(--now-color--interactive-3, 51,53,123))));
        }
        .main-object--fill {
            fill:rgb(var(--empty-state--main-object--fill, var(--main-object--fill, var(--now-color--interactive-1, 144,146,213))));
        }
      </style>

* **[Customize the colors for empty state illustrations and custom images](https://servicenow-prod.fluidtopics.net/g5DOb~XXRrnIJkbBHzS2dw)**   
  Customize and control the colors automatically applied to empty state illustrations and your custom images to keep your visual experience engaging while maintaining brand recognition.
* **[Override empty state illustrations with custom images](https://servicenow-prod.fluidtopics.net/pl4JTPvqprwHhcGTebwueg)**   
  Modify or override the default empty state illustrations with your own custom images to ensure that visual elements reflect your company's branding.