Color Scheme

There are four configurations that determine the color scheme of a site: navigation bar color, selected tab color, accent color, and loading bar color.

Navigation Bar Color

Based on the configured navigation bar color, a dark gray or white color is automatically applied to the text and icons in the navigation bar. Avoid a medium-brightness navigation bar color which may not provide sufficient contrast with the text and icon color.

Selected Tab Color

The selected tab color should be distinguishable enough from the navigation bar color so that users can easily tell which tab is highlighted.

For a clean, monochromatic look, configure a selected tab color that is a darker or lighter shade of the navigation bar color.

Selected tab colors that are easily distinguishable from the navigation bar color allow users to quickly know which tab they are on. In this example, the selected tab color is a lighter shade of the blue navigation bar.

Accent Color

A configurable accent color is used to highlight key UI elements such as "Primary" style buttons, links, and section headings.

Avoid accent colors that are:

• Too close to the standard, black text color
• Too close to the red destructive button and error message color
• Too low in contrast against the white page background. The accent color should have a minimum contrast ratio of 4.5:1. Use a contrast checker to ensure your selected color meets the requirement.

Loading Bar Color

The loading bar, which appears above the navigation bar, gives users an idea of how long it will take the system to load a page or process an action. Select a loading bar color with sufficient contrast against the navigation bar color to ensure that users notice it.

The loading bar color should stand out from the navigation bar color so that users notice it

Site Logo

The site logo configuration allows you to display your brand. Use a site logo with a transparent background and sufficient contrast against the navigation bar color.

Buttons

You can select a button shape to match your brand and site's style. The button shape will be applied to buttons on every page of a site, including record view tabs and record actions. There are three options for button shape: squared, semi-rounded, and rounded. Squared is the default selection.