Site Branding

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.

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.

DON'T

Don't choose a navigation bar color that makes the text and icons difficult to read


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.

tabColor.png

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.

DON'T


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.

loadingBar.png

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

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.

DO

DON'T


Open in Github

On This Page

FEEDBACK