Mobile theme color guidelines

  • Release version: Yokohama
  • Updated January 30, 2025
  • 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 Mobile theme color guidelines

    This guide explains how the colors you select for your mobile themes are applied across ServiceNow mobile applications, helping you design visually effective and accessible apps. It distinguishes between legacy mobile theming for Tokyo and earlier releases and the Next Experience theming for Utah and later releases.

    Show full answer Show less

    Key Considerations for Color Selection

    • Harmonize Colors: Choose colors that coordinate well with other app elements such as screen icons and UI styles to maintain visual consistency.
    • Simplicity: Limit your color palette to two or three colors to create cleaner, more accessible layouts.
    • Compatibility: Avoid color schemes that clash with other elements that may appear in your app, like knowledge articles or service portal pages.
    • User Focus: Use higher contrast and complementary colors strategically to highlight important areas and guide user attention.
    • Accessibility: Ensure high contrast between text and background colors to enhance readability for low-vision and color-blind users.
    • Technical Note: Android apps currently do not support the shorthand #RGB color code; use #RRGGBB notation instead, which is supported on both iOS and Android.

    Practical Application Areas

    The guide provides visual guidance on how your color choices impact various parts of the mobile app interface, including:

    • Application launch page and navigation bar
    • Lists, virtual agent, search, and actions
    • Record screens and components such as checklists, activity streams, links, and e-signatures
    • Screen templates including calendar and map (with pin colors linked to list stream records)
    • Settings and notifications screens covering offline mode, geolocation, PIN, and iOS Siri shortcuts settings
    • Modals for both Android and iOS platforms

    Benefits for ServiceNow Customers

    By following these guidelines, you can create mobile themes that not only look cohesive and professional but also improve user experience through enhanced accessibility and usability. This results in mobile applications that are visually appealing, easy to navigate, and compliant with accessibility standards, thereby supporting diverse user needs effectively.

    Learn how the colors that you select in your mobile themes are applied on your mobile applications.

    Important:
    Use legacy mobile theming on Tokyo and earlier ServiceNow® instances. For Utah and later releases, see Next Experience theming for mobile.

    Color choice considerations

    Consider the following information when you select colors for your mobile applications:
    • How your color choices look with colors in other parts of the app, such as your screen icons and UI styles. Avoid using too many colors. Simple designs of two to three colors result in a cleaner, more accessible layout.
    • How your color choices look with colors in other elements that may display within your app. Elements like knowledge articles and service portal pages may appear in your apps. Avoid color schemes that don't work well with your existing elements.
    • How higher contrast, complementary colors can guide your user’s focus. Use color selection to highlight areas of your apps that require your user’s attention.
    • How color can be used to provide contrast for greater readability. In areas where text appears, ensure that your text and background colors have a high level of contrast to accommodate both low-vision and color-blind users.
    Important:
    Currently, ServiceNow® mobile Android apps do not support using #RGB notation to specify theme colors for the apps. However, #RRGGBB notation is supported by both iOS and Android apps.

    Theme color locations in mobile apps

    This example shows the colors that are used in the default mobile app theme. Use the numbers in this image to see where these colors appear in the different areas of your mobile apps. Colors used in the default mobile theme

    Mobile Features

    Use the following figures to see how your color choices affect the elements within your mobile apps.

    Application Launch Page
    Diagram of where theme colors are applied in an application launch page.
    Navigation Bar
    Diagram of where theme colors are applied in the navigation bar.
    List
    Diagram of where theme colors are applied in a list.
    Virtual Agent
    Diagram of where theme colors are applied in virtual agent.
    Search
    Diagram of where theme colors are applied in search components.
    Actions
    Diagram of where theme colors are applied in action cards.

    Record screen and components

    Use the following figures to see how your color choices affect a record screen and its components within your mobile apps.

    Record screen
    Diagram of where theme colors are applied in a record screen.
    Checklist
    Diagram of where theme colors are applied in a checklist.
    Activity stream
    Diagram of where theme colors are applied in an activity stream.
    Links
    Diagram of where theme colors are applied in links.
    E-signature
    Diagram of where theme colors are applied in e-signatures.

    Screen templates

    Use the following figures to see how your color choices affect the various screen templates within your mobile apps.

    Calendar
    Diagram of where theme colors are applied in calendar screens.
    Map
    Diagram of where theme colors are applied in map screens.
    Note:
    The Pin color field in the list stream record that is associated to your map screen determines the color of the pins on your maps.
    URL template
    Diagram of where theme colors are applied in URL template screens.

    Settings and notifications

    Use the following figures to see how your color choices affect the various settings and notification screens within your mobile apps.

    Notifications
    Diagram of where theme colors are applied in the notifications screen.
    Settings
    Diagram of where theme colors are applied in the settings screen.
    Offline mode settings
    Diagram of where theme colors are applied in the offline mode settings screen.
    Geolocation settings
    Diagram of where theme colors are applied in the geolocation settings screen.
    PIN settings
    Diagram of where theme colors are applied in the PIN settings screen.
    Siri shortcuts settings (iOS Only)
    Diagram of where theme colors are applied in the Siri shortcuts settings screen.

    Modals

    Use the following figures to see how your color choices display in your Android and iOS modals.

    Android modals
    Diagram of where theme colors are applied in Android modals.
    iOS modals
    Diagram of where theme colors are applied in iOS modals.