Configure logo, colors, and system defaults for Core UI
You can use the Basic Configuration Core UI module to brand your instance with your company logo and colors and set basic system defaults. This place is the best starting point if you are setting up your instance for the first time or if you have recently enabled Core UI.
Before you begin
Gather the following:
- Obtain the company banner image to use in the header. The image can be high resolution, but when it displays it’s scaled based on the aspect ratio. It scales to a maximum of 20 px high.
- Get the brand color hex or RGB numbers of your company, typically from your marketing department. Use them to decide how to configure the UI background colors.
Role required: admin
About this task
Each color selection option provides a color picker to select a color. The text box beside the color picker lets you enter the value of the color as any of the following CSS formats:
- Name: predefined color names, such as red, green, or blue
- RGB decimal: RGB (102, 153, 204)
- RGB hex: #223344
Refer to HTML Color Names (W3CSchools) for information about HTML color names.
Note: This information is only applicable for instances that do not have Next Experience enabled. For theming information for Next Experience, see Working with themes in Next Experience.
Procedure
-
Navigate to All > System Properties > Basic Configuration UI16.
-
Complete the configuration by changing any of the following settings:
|
Label |
Property |
Description |
|---|---|---|
|
Page header caption |
glide.product.description |
Change the text that appears next to your logo. |
|
Browser tab title |
glide.product.name |
Change the text that appears on the browser tab. |
|
System timezone for all users unless overridden in the user's record |
glide.sys.default.tz |
Select the time zone in the list.Select Configure available time zones to select the time zones that your users can select from in user preferences. |
|
Banner image for Core UI |
glide.product.image.light |
Select + next to the image and upload your logo. |
|
Date formatTime format |
glide.sys.date_formatglide.sys.time_format |
Select the date and time format from the choice lists. |
|
Header background color |
css.$navpage-header-bg |
Select or enter the color.[Omitted image "HeaderBGColor.png"] Alt text: Header background This color is also used as part of the theme preview on the Themes tab under system settings. |
|
Banner text color |
css.$navpage-header-color |
Select or enter the color.[Omitted image "BannerTextColor.png"] Alt text: Banner text color This color is also used as part of the theme preview on the Themes tab under system settings. |
|
Header divider stripe color |
css.$navpage-header-divider-color |
Select or enter the color.[Omitted image "BannerDividerColor.png"] Alt text: Header divider striper |
|
Navigation header/footer |
css.$navpage-nav-bg |
Select or enter the color. [Omitted image "NavigationBGColor.png"] Alt text: Navigation |
|
Navigation background expanded items |
css.$subnav-background-color |
Select or enter the color.[Omitted image "ExpandedBackgroundColor.png"] Alt text: Application with expanded modules to show the difference in color |
|
Module text color for the Core UI application navigator |
css.$navpage-nav-color-sub |
Select or enter the color. [Omitted image "ModuleTextColor.png"] Alt text: Favorites, Connect list |
|
Navigation selected tab background color |
css.$navpage-nav-selected-bg |
Select or enter the color. [Omitted image "NavigationSelectedTabBGColor.png"] Alt text: Selected tab |
|
Navigation selected tab divider bar color |
css.$nav-highlight-bar-active |
[Omitted image "NavBarActive.png"] Alt text: Application navigator with the All Applications tab selected and an arrow indicating the fact that the line under the tab is blue This color is also used as part of the theme preview on the Themes tab under system settings. |
|
Navigation unselected tab divider bar color |
css.$nav-highlight-bar-inactive |
[Omitted image "NavBarInactive.png"] Alt text: Application navigator with the All Applications tab selected and an arrow point to the other tabs to indicate that the line is a different color |
|
Navigation separator color |
css.$nav-hr-color |
Select or enter the color. [Omitted image "NavigationSeparatorColor.png"] Alt text: Separators |
|
Background for navigator and sidebars |
css.$navpage-nav-bg-sub |
Select or enter the color. [Omitted image "FavoritesConnectBGColor.png"] Alt text: Navigator, sidebars |
|
Currently selected Navigation tab icon color for Core UI |
css.$navpage-nav-selected-color |
Select or enter the color. [Omitted image "NavigationIconColor.png"] Alt text: Navigation icon |
|
Unselected navigation tab icon and favorite icons color |
css.$navpage-nav-unselected-color |
Select or enter the color.[Omitted image "UnselectedNavIconColor.png"] Alt text: Unselected favorites icon |
|
Border color for Core UI |
css.$navpage-nav-border |
Select or enter the color. Also affects the border of the Filter conversations search box in the Connect Chat sidebar.[Omitted image "BorderColor.png"] Alt text: Filter navigator |
|
Selected base theme |
glide.ui.base_theme.selected_theme |
Switches the main content (everything other than the application navigator and the header) between the La Jolla and Cobalt themes. |
- Select Save at the top or bottom of the page.
Result
After you save the configuration changes, all users who select the System theme in their UI personalization options see the new configuration colors.
Parent Topic:Customizing instance appearance
La Jolla and cobalt theme comparison
The La Jolla theme is the new brand theme for ServiceNow. When you upgrade to Madrid, your theme is automatically upgraded to the La Jolla theme. Any customizations you have made to the system theme will not be upgraded. Use the styles in the list below to upgrade or revert any styles to the new or old theme.
Make changes to any of these styles by navigating to System Properties > Basic Configuration UI16.
|
Property |
La Jolla style |
Cobalt style |
|---|---|---|
|
Header background color css.$navpage-header-bg |
#ffffff |
#303a46 |
|
Header divider stripe color css.$navpage-header-divider-color |
#5a7f71 |
#455464 |
|
Navigation header/footer css.$navpage-nav-bg |
#293e40 |
#303A46 |
|
Navigation background expanded itemscss.$subnav-background-color |
#213234 |
#303a46 |
|
Module text color for UI16 css.$navpage-nav-color-sub |
#bec1c6 |
#bec1c6 |
|
Navigation selected tab background colorcss.$navpage-nav-selected-bg |
#2f4fe |
#4b545f |
|
Navigation selected tab divider bar colorcss.$nav-highlight-bar-active |
#82c9b8 |
#278efc |
|
Navigation unselected tab divider bar colorcss.$nav-highlight-bar-inactive |
#213234 |
#81878e |
|
Navigation separator color css.$nav-hr-color |
#293e40 |
#303a46 |
|
Background for navigator and sidebarscss.$navpage-nav-bg-sub |
#293e40 |
#455464 |
|
Currently selected Navigation tab icon color for UI16 css.$navpage-nav-selected-color |
#82c9b8 |
#ffffff |
|
Unselected navigation tab icon and favorite icons color css.$navpage-nav-unselected-color |
#bec1c6 |
#bec1c6 |
|
Border color for UI16 css.$navpage-nav-border |
#7a828a |
#ddd |
|
Selected Base Themeglide.ui.base_theme.selected_theme |
La Jolla SysID: c92c1ee153002300dda1ddeeff7b125b |
Cobalt SysID: 6f3c9ae153002300dda1ddeeff7b124a |
--- title: Configure logo, colors, and system defaults for Core UI description: You can use the Basic Configuration Core UI module to brand your instance with your company logo and colors and set basic system defaults. This place is the best starting point if you are setting up your instance for the first time or if you have recently enabled Core UI.The La Jolla theme is the new brand theme for ServiceNow. When you upgrade to Madrid, your theme is automatically upgraded to the La Jolla theme. Any customizations you have made to the system theme will not be upgraded. Use the styles in the list below to upgrade or revert any styles to the new or old theme. locale: en-US canonical_url: https://www.servicenow.com/docs/r/australia/platform-user-interface/t\_ConfigureLogoColorsSysDfltsUI16.html release: australia topic_type: task last_updated: "2026-09-10" reading_time_minutes: 4 breadcrumb: [Customizing instance appearance, User interface configuration, Working in Core UI, Configure UIs and portals, Configure user experiences] --- # Configure logo, colors, and system defaults for Core UI You can use the Basic Configuration Core UI module to brand your instance with your company logo and colors and set basic system defaults. This place is the best starting point if you are setting up your instance for the first time or if you have recently enabled Core UI. ## Before you begin Gather the following: - Obtain the company banner image to use in the header. The image can be high resolution, but when it displays it’s scaled based on the aspect ratio. It scales to a maximum of 20 px high. - Get the brand color hex or RGB numbers of your company, typically from your marketing department. Use them to decide how to configure the UI background colors. Role required: admin ## About this task Each color selection option provides a color picker to select a color. The text box beside the color picker lets you enter the value of the color as any of the following CSS formats: - Name: predefined color names, such as red, green, or blue - RGB decimal: RGB \(102, 153, 204\) - RGB hex: \#223344 Refer to [HTML Color Names \(W3CSchools\)](http://www.w3schools.com/tags/ref_colornames.asp) for information about HTML color names. **Note:** This information is only applicable for instances that do not have Next Experience enabled. For theming information for Next Experience, see [Working with themes in Next Experience](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/next-experience-theming.md). ## Procedure 1. Navigate to **All** > **System Properties** > **Basic Configuration UI16**. 2. Complete the configuration by changing any of the following settings: <table id="table_n1g_xty_pt"><thead><tr><th> Label </th><th> Property </th><th> Description </th></tr></thead><tbody><tr><td> Page header caption </td><td> glide.product.description </td><td> Change the text that appears next to your logo. </td></tr><tr><td> Browser tab title </td><td> glide.product.name </td><td> Change the text that appears on the browser tab. </td></tr><tr><td> System timezone for all users unless overridden in the user's record </td><td> glide.sys.default.tz </td><td> Select the time zone in the list.Select **Configure available time zones** to select the time zones that your users can select from in user preferences. </td></tr><tr><td> Banner image for Core UI </td><td> glide.product.image.light </td><td> Select **+** next to the image and upload your logo. </td></tr><tr><td> Date formatTime format </td><td> glide.sys.date\_formatglide.sys.time\_format </td><td> Select the date and time format from the choice lists. </td></tr><tr><td> Header background color </td><td> css.$navpage-header-bg </td><td> Select or enter the color.\[Omitted image "HeaderBGColor.png"\] Alt text: Header background This color is also used as part of the theme preview on the Themes tab under system settings. </td></tr><tr><td> Banner text color </td><td> css.$navpage-header-color </td><td> Select or enter the color.\[Omitted image "BannerTextColor.png"\] Alt text: Banner text color This color is also used as part of the theme preview on the Themes tab under system settings. </td></tr><tr><td> Header divider stripe color </td><td> css.$navpage-header-divider-color </td><td> Select or enter the color.\[Omitted image "BannerDividerColor.png"\] Alt text: Header divider striper </td></tr><tr><td> Navigation header/footer </td><td> css.$navpage-nav-bg </td><td> Select or enter the color. \[Omitted image "NavigationBGColor.png"\] Alt text: Navigation </td></tr><tr><td> Navigation background expanded items </td><td> css.$subnav-background-color </td><td> Select or enter the color.\[Omitted image "ExpandedBackgroundColor.png"\] Alt text: Application with expanded modules to show the difference in color </td></tr><tr><td> Module text color for the Core UI application navigator </td><td> css.$navpage-nav-color-sub </td><td> Select or enter the color. \[Omitted image "ModuleTextColor.png"\] Alt text: Favorites, Connect list </td></tr><tr><td> Navigation selected tab background color </td><td> css.$navpage-nav-selected-bg </td><td> Select or enter the color. \[Omitted image "NavigationSelectedTabBGColor.png"\] Alt text: Selected tab </td></tr><tr><td> Navigation selected tab divider bar color </td><td> css.$nav-highlight-bar-active </td><td> \[Omitted image "NavBarActive.png"\] Alt text: Application navigator with the All Applications tab selected and an arrow indicating the fact that the line under the tab is blue This color is also used as part of the theme preview on the Themes tab under system settings. </td></tr><tr><td> Navigation unselected tab divider bar color </td><td> css.$nav-highlight-bar-inactive </td><td> \[Omitted image "NavBarInactive.png"\] Alt text: Application navigator with the All Applications tab selected and an arrow point to the other tabs to indicate that the line is a different color </td></tr><tr><td> Navigation separator color </td><td> css.$nav-hr-color </td><td> Select or enter the color. \[Omitted image "NavigationSeparatorColor.png"\] Alt text: Separators </td></tr><tr><td> Background for navigator and sidebars </td><td> css.$navpage-nav-bg-sub </td><td> Select or enter the color. \[Omitted image "FavoritesConnectBGColor.png"\] Alt text: Navigator, sidebars </td></tr><tr><td> Currently selected Navigation tab icon color for Core UI </td><td> css.$navpage-nav-selected-color </td><td> Select or enter the color. \[Omitted image "NavigationIconColor.png"\] Alt text: Navigation icon </td></tr><tr><td> Unselected navigation tab icon and favorite icons color </td><td> css.$navpage-nav-unselected-color </td><td> Select or enter the color.\[Omitted image "UnselectedNavIconColor.png"\] Alt text: Unselected favorites icon </td></tr><tr><td> Border color for Core UI </td><td> css.$navpage-nav-border </td><td> Select or enter the color. Also affects the border of the **Filter conversations** search box in the Connect Chat sidebar.\[Omitted image "BorderColor.png"\] Alt text: Filter navigator </td></tr><tr><td> Selected base theme </td><td> glide.ui.base\_theme.selected\_theme </td><td> Switches the main content \(everything other than the application navigator and the header\) between the La Jolla and Cobalt themes. </td></tr></tbody> </table> For most of the settings, as you make changes, the page refreshes with a preview of the change. Only you see these changes. Some settings require you to log out and log back in again to see the change. 3. Select **Save** at the top or bottom of the page. ## Result After you save the configuration changes, all users who select the **System** theme in their UI personalization options see the new configuration colors. **Parent Topic:**[Customizing instance appearance](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/customizing-instance-appearance.md) ## La Jolla and cobalt theme comparison The La Jolla theme is the new brand theme for ServiceNow. When you upgrade to Madrid, your theme is automatically upgraded to the La Jolla theme. Any customizations you have made to the system theme will not be upgraded. Use the styles in the list below to upgrade or revert any styles to the new or old theme. Make changes to any of these styles by navigating to **System Properties** > **Basic Configuration UI16**. <table id="table_jhh_yv5_yfb"><thead><tr><th> Property </th><th> La Jolla style </th><th> Cobalt style </th></tr></thead><tbody><tr><td> Header background color css.$navpage-header-bg </td><td> \#ffffff </td><td> \#303a46 </td></tr><tr><td> Header divider stripe color css.$navpage-header-divider-color </td><td> \#5a7f71 </td><td> \#455464 </td></tr><tr><td> Navigation header/footer css.$navpage-nav-bg </td><td> \#293e40 </td><td> \#303A46 </td></tr><tr><td> Navigation background expanded itemscss.$subnav-background-color </td><td> \#213234 </td><td> \#303a46 </td></tr><tr><td> Module text color for UI16 css.$navpage-nav-color-sub </td><td> \#bec1c6 </td><td> \#bec1c6 </td></tr><tr><td> Navigation selected tab background colorcss.$navpage-nav-selected-bg </td><td> \#2f4fe </td><td> \#4b545f </td></tr><tr><td> Navigation selected tab divider bar colorcss.$nav-highlight-bar-active </td><td> \#82c9b8 </td><td> \#278efc </td></tr><tr><td> Navigation unselected tab divider bar colorcss.$nav-highlight-bar-inactive </td><td> \#213234 </td><td> \#81878e </td></tr><tr><td> Navigation separator color css.$nav-hr-color </td><td> \#293e40 </td><td> \#303a46 </td></tr><tr><td> Background for navigator and sidebarscss.$navpage-nav-bg-sub </td><td> \#293e40 </td><td> \#455464 </td></tr><tr><td> Currently selected Navigation tab icon color for UI16 css.$navpage-nav-selected-color </td><td> \#82c9b8 </td><td> \#ffffff </td></tr><tr><td> Unselected navigation tab icon and favorite icons color css.$navpage-nav-unselected-color </td><td> \#bec1c6 </td><td> \#bec1c6 </td></tr><tr><td> Border color for UI16 css.$navpage-nav-border </td><td> \#7a828a </td><td> \#ddd </td></tr><tr><td> Selected Base Themeglide.ui.base\_theme.selected\_theme </td><td> La Jolla SysID: c92c1ee153002300dda1ddeeff7b125b </td><td> Cobalt SysID: 6f3c9ae153002300dda1ddeeff7b124a </td></tr></tbody> </table>
| title | Configure logo, colors, and system defaults for Core UI |
| description | You can use the Basic Configuration Core UI module to brand your instance with your company logo and colors and set basic system defaults. This place is the best starting point if you are setting up your instance for the first time or if you have recently enabled Core UI.The La Jolla theme is the new brand theme for ServiceNow. When you upgrade to Madrid, your theme is automatically upgraded to the La Jolla theme. Any customizations you have made to the system theme will not be upgraded. Use the styles in the list below to upgrade or revert any styles to the new or old theme. |
| locale | en-US |
| canonical_url | https://www.servicenow.com/docs/r/australia/platform-user-interface/t\_ConfigureLogoColorsSysDfltsUI16.html |
| release | australia |
| topic_type | task |
| last_updated | 2026-09-10 |
| reading_time_minutes | 4 |
| breadcrumb | Customizing instance appearanceUser interface configurationWorking in Core UIConfigure UIs and portalsConfigure user experiences |