Core styles, colors, variants, and alternate color palettes

  • Release version: Xanadu
  • Updated August 1, 2024
  • 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

    This content explains how ServiceNow customers can customize the Next Experience UI by configuring core styles, variants, and alternate color palettes using the Theme Builder. These customization options allow you to tailor the look and feel of the platform for different users, improving usability and accessibility.

    Show full answer Show less

    Core styles in Theme Builder

    Core styles serve as the foundational design elements including color, shape, typography, and imagery. They define the basic visual structure of your Next Experience UI and provide the building blocks for further customization.

    Colors in Theme Builder

    • When editing components, you can use the color picker to change the canvas background color to preview how colors render on different backgrounds. Note that changing the canvas color is only for preview and does not apply to the live instance.
    • The color picker shows contrast ratios, which update dynamically to help ensure accessible color combinations.

    Variants and Alternate Color Palettes

    • Variants are alternate versions of a theme designed primarily to improve accessibility. For example, the Dark variant of the Polaris theme replaces light backgrounds with darker ones and adjusts text colors to enhance readability for visually impaired users. Users can select variants in their preferences.
    • Alternate color palettes are cosmetic modifications to a theme’s colors, created from an existing theme (except the default Polaris theme). They initially share the primary theme’s logo, color, typography, and shape styles but allow you to define a unique primary color, secondary color (optional), and neutral color for UI elements such as navigation bars, menus, and dividers.
    • Two base palettes are available: light and dark. Note that in the dark alternate color palette, secondary and neutral colors are fixed and cannot be edited.
    • You can rename alternate color palettes and preview how UI assets will appear when applied to your instance using the ServiceNow AI Platform.

    Important Notes

    • Dark variants do not affect the Core UI (previously UI16), which is used when Next Experience is inactive.
    • Dark variants apply extensively within the Next Experience UI to enhance accessibility and user experience.

    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 in Theme Builder

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

    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/Alternate color palettes in Theme Builder

    Both variants and alternate color palettes are types of UX style records categorized as Variant.

    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 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. You can define this palette in the Theme Builder Manager page for any theme, except for the default Polaris theme. When you use an existing theme to create an alternate color palette, the alternate color palette is grouped with that primary theme, and initially shares its logo, color, typography, and shape styles. At first, the only difference from the primary theme is that you assign it a unique name.

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