---
sourceDocument: Zurich ServiceNow AI Platform user interface
sourceDocumentLink: https://www.servicenow.com/docs/r/zurich/platform-user-interface

 Release :

    - zurich

ft:locale :

    - en-US

ft:publication_title :

    - Zurich ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Theme-able empty state images

# Working with theme-able empty state images {#ariaid-title1}

* Release version: Zurich
* 
* Updated July 31, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read

Add theme-able empty state images to customize empty states and improve the user experience. Empty states include guidance or actions for users to add or create content.

When a component or a part of your Next Experience web page doesn't contain data, an empty state image appears. Empty state images are theme-able, and adapt to the theme colors of your instance.  
Figure 1. Empty state image

There are 12 empty state image types available, each including a small, medium, and large version. When creating a theme using Theme Builder a UX Styles Imagery record is created however, the record is empty. In this case, your theme defaults to using a base system empty state theme-able images. If you choose to override these images, see [Customize theme-able empty state images for your theme](https://www.servicenow.com/docs/XobP3vuleYBRKEAqmbS2iA "Customize default theme-able empty state images for your Next Experience and Theme Builder themes using the theme's Imagery record.").

You can insert an empty state image into your custom experience by using the Illustration component in UI Builder. The Illustration component displays all available empty state images. For more information on the Illustration component, see [Horizon Design System Empty State](https://horizon.servicenow.com/components/now-template-message-empty-state).

You can also add custom images using the Custom Illustration component in UI Builder.

## Theme-able empty state image with theme hooks {#themeable-empty-state-images__section_emd_kmj_4cc}

The following images represent the No Search Results empty state image along with the theme hooks required for each variation.  
Figure 2. No Search Results (accent solid)

The theme hook required for this variation is <kbd class="ph userinput">$now-color_interactive-1</kbd>.  
Figure 3. No Search Results (accent outline)

The theme hook required for this variation is <kbd class="ph userinput">$now-color_interactive-3</kbd>.  
Figure 4. No Search Results (subtle outlines)

The theme hook required for this variation is <kbd class="ph userinput">$now-color_border-secondary</kbd>.  
Figure 5. No Search Results (subject dark detail)

The theme hook required for this variation is <kbd class="ph userinput">$now-color_border-tertiary</kbd>.  
Figure 6. No Search Results (subject light detail)

The theme hook required for this variation is <kbd class="ph userinput">$now-color_background-secondary</kbd>.  
Figure 7. No Search Results (subject fill)

The theme hook required for this variation is <kbd class="ph userinput">$now-color_background-primary</kbd>.  
Figure 8. No Search Results (subject outline)

The theme hook required for this variation is <kbd class="ph userinput">$now-color_border-secondary</kbd>.  
Figure 9. No Search Results (subject shadows)

The theme hook required for this variation is <kbd class="ph userinput">$now-color_border-secondary</kbd>.

## Empty state light mode tokens {#themeable-empty-state-images__section_mmr_hjb_qcc}

Figure 10. Main Object empty state image  
The theme hooks used to override the main object empty state image.

* now-illustration--empty-state--main-object--outline
* now-illustration--empty-state--main-object--fill
{#themeable-empty-state-images__ul_trl_25d_rcc}  
Figure 11. Primary object empty state image  
The theme hooks used to override the primary object empty state image.

* now-illustration--empty-state--primary-object--outline
* now-illustration--empty-state--primary-object--primary-fill
* now-illustration--empty-state--primary-object--tertiary-fill
* now-illustration--empty-state--primary-object--main-detail
* now-illustration--empty-state--primary-object--detail
* now-illustration--empty-state--primary-object--shadow
{#themeable-empty-state-images__ul_lnl_lwd_rcc}  
Figure 12. Tertiary object empty state image  
The theme hooks used to override the tertiary object empty state image.

* now-illustration--empty-state--tertiary-object--outline
* now-illustration--empty-state--tertiary-object--primary-fill
* now-illustration--empty-state--tertiary-object--tertiary-fill
* now-illustration--empty-state--tertiary-object--main-detail
* now-illustration--empty-state--tertiary-object--detail
* now-illustration--empty-state--tertiary-object--shadow
{#themeable-empty-state-images__ul_oll_pyd_rcc}  
Figure 13. Background empty state image  
The theme hooks used to override the background empty state image.

* now-illustration--empty-state--background--lines
* now-illustration--empty-state--background--tertiary-lines
* now-illustration--empty-state--background--object-outline
* now-illustration--empty-state--background--object-detail
* now-illustration--empty-state--background--object-shadow
* now-illustration--empty-state--background--object-fill
{#themeable-empty-state-images__ul_h1h_2b2_rcc}

## Empty state light mode fallbacks {#themeable-empty-state-images__section_g1j_lf2_rcc}

{#themeable-empty-state-images__table_in3_rf2_rcc__entry__2}

| Object | Style declaration |
|-|-|
| Main object | 
 .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 | 
 .main-object--fill {
  fill:rgb(var(--empty-state--main-object--fill), var(--main-object--fill), var(--now-color--interactive-1), 144,146,213);
} |
| Primary object | 
 .primary-object--outline {
  fill:rgb(var(--empty-state--primary-object--outline), var(--primary-object--outline), var(--now-color--border--secondary), 176,181,191);
} |
| Primary object | 
 .primary-object--primary-fill {
 fill:rgb(var(--empty-state--primary-object--primary-fill), var(--primary-object--primary-fill), var(--now-color--background--primary), 255,255,255);
} |
| Primary object | 
 .primary-object--tertiary-fill {
 fill:rgb(var(--empty-state--primary-object--tertiary-fill), var(--primary-object--tertiary-fill), var(--now-color--background--secondary), 246,246,248);
} |
| Primary object | 
 .primary-object--main-detail {
 fill:rgb(var(--empty-state--primary-object--main-detail), var(--primary-object--main-detail), var(--now-color--border--secondary), 176,181,191);
} |
| Primary object | 
 .primary-object--detail {
  fill:rgb(var(--empty-state--primary-object--detail ), var(--primary-object--detail ), var(--now-color--border--tertiary), 211,214,220);
} |
| Primary object | 
 .primary-object--shadow {
  fill:rgb(var(--empty-state--primary-object--shadow), var(--primary-object--shadow), var(--now-color--background--tertiary), 228,230,234);
} |
| Tertiary object | 
 .tertiary-object--outline {
  fill:rgb(var(--empty-state--tertiary-object--outline), var(--tertiary-object--outline), var(--now-color--border--secondary), 176,181,191);
} |
| Tertiary object | 
 .tertiary-object--primary-fill {
 fill:rgb(var(--empty-state--tertiary-object--primary-fill), var(--tertiary-object--primary-fill), var(--now-color--background--primary), 255,255,255);
} |
| Tertiary object | 
 .tertiary-object--tertiary-fill {
 fill:rgb(var(--empty-state--tertiary-object--tertiary-fill), var(--tertiary-object--tertiary-fill), var(--now-color--background--secondary), 246,246,248);
} |
| Tertiary object | 
 .tertiary-object--main-detail {
 fill:rgb(var(--empty-state--tertiary-object--main-detail), var(--tertiary-object--main-detail), var(--now-color--border--secondary), 176,181,191);
} |
| Tertiary object | 
 .tertiary-object--detail {
  fill:rgb(var(--empty-state--primary-object--detail ), var(--primary-object--detail ), var(--now-color--border--tertiary), 211,214,220);
} |
| Tertiary object | 
 .tertiary-object--shadow {
  fill:rgb(var(--empty-state--tertiary-object--shadow), var(--tertiary-object--shadow), var(--now-color--background--tertiary), 228,230,234);
} |
| Background object | 
 .background--lines {
  fill:rgb(var(--empty-state--background--lines), var(--background--lines), var(--now-color--border--tertiary), 211,214,220);
} |
| Background object | 
 .background--tertiary-lines {
 fill:rgb(var(--empty-state--background--tertiary-lines), var(--background--tertiary-lines), var(--now-color--border--tertiary), 211,214,220);
} |
| Background object | 
 .background--object-outline {
 fill:rgb(var(--empty-state--background--object-outline), var(--background--object-outline), var(--now-color--border--tertiary), 211,214,220);
} |
| Background object | 
 .background--object-detail {
  fill:rgb(var(--empty-state--background--object-detail), var(--background--object-detail), var(--now-color--border--tertiary), 211,214,220);
} |
| Background object | 
 .background--object-shadow {
  fill:rgb(var(--empty-state--background--object-shadow), var(--background--object-shadow), var(--now-color--background--tertiary), 228,230,234);
} |
| Background object | 
 .background--object-fill {
  fill:rgb(var(--empty-state--background--object-fill), var(--background--object-fill), var(--now-color--background--primary), 255,255,255);
} |
[Table 1. Empty state light mode fallback style declarations]

{#themeable-empty-state-images__table_in3_rf2_rcc}
* **[Customize theme-able empty state images for your theme](https://www.servicenow.com/docs/XobP3vuleYBRKEAqmbS2iA)**   
  Customize default theme-able empty state images for your Next Experience and Theme Builder themes using the theme's Imagery record.