The Color System

The Website Builder color system helps you create a color theme that reflects your company's brand and style. We have streamlined the process in order to make color selection as easy as possible.

The Website Builder color system consists of three colors: a Primary color, an Interactive color, and an Accent color. Our system automatically generates a light and dark variant for each color giving your brand a total color palette of nine available colors. This expanded color palette helps to create a beautiful and accessible color scheme for your website.

There is fourth color system option in the current version of Website Builder called the Tertiary color. Currently, the Tertiary color is only used to select a background color for the Quick Search bar on the hero image. Support for the Tertiary color will be phased out over time.

Color Types and their Usage in your Website Design

Below is a detailed description of each Color Type and how it is used across your site. As a general rule, we recommend against using white for color selections on any of these elements.

Primary Color

The primary color is used as the default, non-hovered, color state for most of the UI elements on your website. This includes buttons, links, cards, and icons. Depending on the chosen theme, the H1 headers will also receive this color treatment.

Interactive Color

The interactive color is used to style the interactive states of a UI element. The interactive state is the state of an element whenever a user hovers or selects an element. This includes hovered buttons, links, and search tokens to name a few.

Accent Color

The accent color is used only when an additional color is required to create a more appealing visual experience. It is used sparingly in less frequently used UI items such as badges, sliders, and radio buttons.

Intelligent Color Selection

The Website Builder color system uses intelligent color selection to determine the color of display text and icons against a variety of colored backgrounds. For instance, if a UI element has a dark background color, our system will automatically choose light text in order to stand out against it.