Working with theme-able empty state images

  • Release version: Australia
  • Updated March 12, 2026
  • 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
    No data available 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.

    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.

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

    Theme-able empty state image with theme hooks

    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)
    No Search Results empty state image, accent solid variation. For the text description, refer to the theme hook information that follows.

    The theme hook required for this variation is $now-color_interactive-1.

    Figure 3. No Search Results (accent outline)
    No Search Results empty state image, accent outline variation. For the text description, refer to the theme hook information that follows.

    The theme hook required for this variation is $now-color_interactive-3.

    Figure 4. No Search Results (subtle outlines)
    No Search Results empty state image, subtle outlines variation. For the text description, refer to the theme hook information that follows.

    The theme hook required for this variation is $now-color_border-secondary.

    Figure 5. No Search Results (subject dark detail)
    No Search Results empty state image, subject dark detail variation. For the text description, refer to the theme hook information that follows.

    The theme hook required for this variation is $now-color_border-tertiary.

    Figure 6. No Search Results (subject light detail)
    No Search Results empty state image, subject light detail variation. For the text description, refer to the theme hook information that follows.

    The theme hook required for this variation is $now-color_background-secondary.

    Figure 7. No Search Results (subject fill)
    No Search Results empty state image, subject fill variation. For the text description, refer to the theme hook information that follows.

    The theme hook required for this variation is $now-color_background-primary.

    Figure 8. No Search Results (subject outline)
    No Search Results empty state image, subject outline variation. For the text description, refer to the theme hook information that follows.

    The theme hook required for this variation is $now-color_border-secondary.

    Figure 9. No Search Results (subject shadows)
    No Search Results empty state image, subject shadows variation. For the text description, refer to the theme hook information that follows.

    The theme hook required for this variation is $now-color_border-secondary.

    Empty state light mode tokens

    Figure 10. Main Object empty state image
    Main object empty state image. For the text description, refer to the theme hook information that follows.
    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
    Figure 11. Primary object empty state image
    Primary object empty state image. For the text description, refer to the theme hook information that follows.
    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
    Figure 12. Tertiary object empty state image
    Tertiary object empty state image. For the text description, refer to the theme hook information that follows.
    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
    Figure 13. Background empty state image
    Background empty state image. For the text description, refer to the theme hook information that follows.
    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

    Empty state light mode fallbacks

    Table 1. Empty state light mode fallback style declarations
    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--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-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--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--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--detail {
  fill:rgb(var(--empty-state--primary-object--detail ),
      var(--primary-object--detail ), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .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--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-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--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--detail {
  fill:rgb(var(--empty-state--primary-object--detail ),
      var(--primary-object--detail ), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .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--tertiary-lines {

      fill:rgb(var(--empty-state--background--tertiary-lines), var(--background--tertiary-lines),
      var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .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-detail {
  fill:rgb(var(--empty-state--background--object-detail),
      var(--background--object-detail), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .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-fill {
  fill:rgb(var(--empty-state--background--object-fill),
      var(--background--object-fill), var(--now-color--background--primary),
    255,255,255);
}