--- sourceDocument: Zurich Mobile Configuration and Navigation sourceDocumentLink: https://www.servicenow.com/docs/r/zurich/mobile Release : - zurich ft:locale : - en-US ft:publication_title : - Zurich Mobile Configuration and Navigation ft:clusterId : - mobile bundleId : - mobile workflow : - Development, Data and Analytics --- # Color guidelines # Mobile theme color guidelines {#ariaid-title1} Release version: Zurich Updated July 31, 2025 ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read Summarize ![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) 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 to select and apply colors in mobile themes for ServiceNow mobile applications. It highlights the importance of color choices for usability, accessibility, and visual coherence within your app's interface. Note that legacy mobile theming applies to Tokyo and earlier releases, while Utah and later versions use Next Experience theming for mobile. Show full answer Show less ## Color choice considerations * **Visual harmony:** Choose colors that complement other app elements like icons and UI styles for a consistent look. * **Simplicity:** Limit your palette to two or three colors for a cleaner and more accessible design. * **Compatibility:** Ensure your color scheme works well with embedded content such as knowledge articles and service portal pages. * **User focus:** Use high-contrast, complementary colors to guide user attention to important areas. * **Accessibility:** Maintain high contrast between text and background for readability, aiding users with low vision or color blindness. * **Technical note:** Android apps do not support #RGB color notation, but do support #RRGGBB format, which iOS also supports. ## Theme color application areas The guide provides visual references showing where selected colors appear across various mobile app components, helping you understand the impact of your choices: * Application launch page and navigation bar * Lists, virtual agent interfaces, search, and actions * Record screens and components such as checklists, activity streams, links, and e-signatures * Screen templates including calendar and map views (with map pin colors determined by linked records) * Settings and notifications screens including offline mode, geolocation, PIN, and Siri shortcuts (iOS only) * Modal dialogs on Android and iOS platforms ## Practical impact for ServiceNow customers By following these color guidelines, you can create mobile themes that are visually appealing, coherent with your existing content, and accessible to all users. Proper color choices enhance user experience by improving readability and directing attention to key areas. Understanding where colors are applied within the app allows you to anticipate how your branding and design will appear across different screens and components, ensuring a polished and professional mobile app. 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](https://www.servicenow.com/docs/dwefF2QSVrRCX5bVLiznFg "Use Next Experience theming to give your mobile apps color scheme consistent with your instance web experience."). ## Color choice considerations {#sg-theme-colors__section_rc4_wmv_kjb} 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. {#sg-theme-colors__ul_wdh_xnv_kjb} 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 {#sg-theme-colors__section_nws_bqv_kjb} |-|-| | 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. | | [ ] {#sg-theme-colors__table_zvg_ps1_ljb} ## Mobile Features {#sg-theme-colors__section_ej2_rs1_ljb} Use the following figures to see how your color choices affect the elements within your mobile apps. Application Launch Page : Navigation Bar : List : Virtual Agent : Search : Actions : ## Record screen and components {#sg-theme-colors__section_ykh_ts1_ljb} Use the following figures to see how your color choices affect a record screen and its components within your mobile apps. Record screen : Checklist : Activity stream : Links : E-signature : ## Screen templates {#sg-theme-colors__section_kvf_sv1_ljb} Use the following figures to see how your color choices affect the various screen templates within your mobile apps. Calendar : Map : 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 : ## Settings and notifications {#sg-theme-colors__section_ccd_sy1_ljb} Use the following figures to see how your color choices affect the various settings and notification screens within your mobile apps. Notifications : Settings : Offline mode settings : Geolocation settings : PIN settings : Siri shortcuts settings (iOS Only) : ## Modals {#sg-theme-colors__section_d23_41b_ljb} Use the following figures to see how your color choices display in your Android and iOS modals. Android modals : iOS modals :