---
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


---

# Customize the colors for empty state illustrations and custom images

# Customize the colors for empty state illustrations and custom images {#ariaid-title1}

Release version: Yokohama  
Updated March 19, 2025  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read  
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.

## Before you begin

Before you can edit the colors of your custom image, you must append two design tokens to your image code before uploading the image to Theme Builder. For information, see [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.").

Role required: admin

## About this task

As a category, all empty state illustrations share color hook mappings. As a result, the colors that you apply to one empty state illustration type are also applied to the entire empty state illustration category.  
Important:  
Customization of empty state illustration colors applies to Workspaces and is not supported in the Core UI.

## Procedure

1. Navigate to AllNow Experience FrameworkThemesTheme Builder.  
   The Theme Builder landing page opens in a new tab and is displayed in the Home page view.
2. Use the Page drop-down list to select the Editor page view.  
   Figure 1. Editor page view
3. From the Theme drop-down list, select the theme that you want to edit.
4. Select the Image styles tab from the general styles panel.  
   The empty state illustrations available for editing are displayed on the main stage and grouped by type.Figure 2. Image styles tab selected
5. Select any empty state illustration type from the main stage.  
   Note:  
   Customizing the colors of any empty state illustration type will apply the color change to the entire empty state category, regardless of which type you select.  
   The property panel opens automatically.
6. From the property panel, select the Colors tab.  
   Figure 3. Property panel Colors tab
7. Select an image color to edit the color using the Color picker.  
   Figure 4. Color picker  
   Note:  
   By default, the My Colors tab shows all of the available colors for the illustration. You can also use the Custom tab to select a new color.
8. When you have completed your changes, select Save changes.  
   Note:  
   After you have saved changes to any of the color hooks, a Remove override symbol appears. The Remove override symbol enables you to revert your color changes back to the original auto-generated colors. ![Remove override symbol.]()

## Result

The new colors are applied to all empty state illustration types including any custom images you've previously uploaded with design tokens applied.

If your theme is published, your empty state illustration edits are visible to users who have your theme applied upon refresh. For information about publishing themes, see [Publish your themes with Theme Builder](https://servicenow-prod.fluidtopics.net/W5uD0XSblTxIjcUPxAXNSw "Publish multiple themes to your web instance or a single theme to your mobile instance to reflect your company's brand.").

*[\>]: and then