Core styles, colors, variants, and alternate color palettes

  • Release version: Australia
  • Updated March 12, 2026
  • 2 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Core styles, colors, variants, and alternate color palettes

    ServiceNow's Next Experience UI allows you to customize the user interface by configuring core styles, variants, and alternate color palettes. This flexibility helps you create a tailored look and feel for different user needs, enhancing both aesthetic appeal and accessibility.

    Show full answer Show less

    Key Features

    • Core Styles: These are the foundational elements including color, typography, shape, and imagery, which define the base theme.
    • Variants: Alternate versions of a theme designed primarily for accessibility, such as the Dark variant, which aids visually impaired users by providing higher contrast.
    • Alternate Color Palettes: Cosmetic modifications that let users switch between styles like light and dark without altering the core theme. You can define primary, secondary, and neutral colors for these palettes.
    • Theme Builder: A tool for editing components, where you can visualize changes in real-time and check contrast ratios for accessibility compliance.

    Key Outcomes

    By leveraging these customization options, you can enhance user experience through improved accessibility and aesthetic choices. Users can expect a more personalized interface, with the ability to select themes that best suit their visual preferences, all while maintaining the integrity of the core theme.

    You can tailor the look and feel of the Next Experience UI for different users by configuring the core styles, variants, and alternate color palettes. Core styles define the base theme, variants support accessibility needs, and alternate color palettes provide cosmetic customization options for end users.

    Core styles in Theme Builder

    A core style is the base version of a style. Core styles include color, shape and form, typography, and imagery.

    Theme colors in Theme Builder

    When editing components, use the color picker to change the background color of the canvas to view how the component colors will render on different backgrounds.
    Note:
    Updating the canvas color doesn't apply to the instance. Only hooks specific to components are applied on the instance if you publish an edited theme to the instance.
    When editing theme colors, you can view the contrast ratio in the color picker. The value updates when you change the color from the palette or My colors view.

    Variants and Alternate color palettes in Theme Builder

    Variants and alternate color palettes are both UX style records categorized as Variant, but they serve different purposes.

    A variant is an alternate version of an existing theme, usually designed for accessibility, that your users can select in preferences. An example of a variant is the Dark version of the default Polaris or Coral theme that is shipped with Next Experience. The Dark variant can be used to enhance accessibility for visually impaired users by replacing light backgrounds with darker ones and contrasting the text colors accordingly.

    An alternate color palette is a modification that you can make to a theme's colors and is designed for cosmetic purposes. Alternate color palettes allow users to toggle between different visual styles like light and dark options without affecting the core theme. You can define this palette in the Theme Builder Manager page for any theme, except for the default Polaris or default Coral themes. When you create an alternate color palette from an existing theme, it is grouped with the primary theme and initially shares the same logo, color, typography, and shape styles. The only initial difference is the unique name you assign to the palette.

    Next, you define the primary color for the alternate color palette. This color is used to identify the navigation bar, menus, and other common components. Likewise, define a secondary color, if needed. If your interface doesn't require a secondary color, the primary color is used. Lastly, you define a neutral color to help define divider lines and containers. There are two base palettes available, light and dark.
    Note:
    Secondary and neutral colors cannot be edited in the dark alternate color palette.

    When the palette is created using the colors you selected, you have the option of renaming it. You can preview all the UI assets available on the ServiceNow AI Platform to visualize how they are rendered when you apply them to your instance.

    Note:
    Dark variants don’t apply to the Core UI, previously referred to as UI16. The Core UI is the interface you use if Next Experience is inactive. However, dark variants extend to most aspects of the Next Experience.