Status

Anatomy

Soul uses the gray color palette as a dominant color in the default mode, using subtle shifts in value to organize content into distinct zones.

The core blue family is the primary action color across all Emplifi products and experiences. Additional colors beyond these families are used sparingly and purposefully.

Purpose

The purpose of using color has to be precise and clear. Each color needs to support a message, status, or action that needs to be easily identifiable by users.

Each use of color is purposely bound to a specific meaning. For instance, red signifies dangerous situations, such as critical errors, green represents success messages, and purple draws attention to news and offers.

Accessibility

Soul offers consistent color palettes for each color role. This means that each color is assigned a specific relationship within the overall palette.

These relationships ensure that color contrasts remain consistent across every application of color and that proper legibility and understanding are achieved when combining texts with color and interactive shapes with various backgrounds.

Colors are meant to be easily understood and read by all users. Sufficient contrast makes things easier to find, identify, and interact with.

Modes

Modes serve as an organizational framework for color in Soul, with each mode based on a specific appearance. And they get their names from their appearance. Soul defines two modes: light and dark.

The light mode is based on the Gray 10 background, and the dark mode uses the Gray 110 background. Within each mode, the values for the color variables use the primary background color as the base of its layering model.

Light mode

The light mode in Soul primarily uses the color range of Gray 10 to Gray 40 with White 100 for background layers, and text and icons use the color range between Gray 110 and Gray 60.

Each color is represented by a specific variable named by the purpose.

Layer variables preview

On layer variables preview

Dark mode

Dark mode in Soul primarily uses the color range of Gray 120 to Gray 90 for background layers and for text and icons, use Gray 10, Gray 70, and Gray 80 colors.

Each color is represented by a specific variable named by the purpose.

Layer variables preview

On layer variables preview

Layering

Colors in the neutral gray palette are layered on each other to create depth and spatial associations. The layering defines the logic of how colors stack on top of each other in a UI.

The layering differs between the light and dark modes.