Design
Status
Up to date
React
Review required
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 usage of color is purposely bound to a specific meaning. For instance, red signifies dangerous situations, e.g., critical errors, green represents success messages, and purple draws attention to news and offers.
Using color as decoration is exclusive to illustrations.
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 ensure proper legibility and understanding when it comes to 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 Gray 10 background, and the dark mode uses 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
Light mode in Soul primarily uses the color range of Gray 10 to Gray 40 with White 100 for background layers, and for text and icons uses the color range between Gray 110 and Gray 60.
Each color is represented by a specific variable named by the purpose.
Layer variables preview
Level 0
Default page and dialog background
Syntax: Web
var(--color-layer-level-0)
Collection
UI colors
Mixin
-
Variable
var(--color-layer-level-0)
Token set
-
Level 1
Default container background color on layer 0
Syntax: Web
var(--color-layer-level-1)
Collection
UI colors
Mixin
-
Variable
var(--color-layer-level-1)
Token set
-
Level 2
Container background color on layer 1
Syntax: Web
var(--color-layer-level-2)
Collection
UI colors
Mixin
-
Variable
var(--color-layer-level-2)
Token set
-
Level 3
Container background color on layer 1
Syntax: Web
var(--color-layer-level-3)
Collection
UI colors
Mixin
-
Variable
var(--color-layer-level-3)
Token set
-
On layer variables preview
Primary
Primary color for text layers or icons on top of Layer
Syntax: Web
var(--color-on-layer-primary)
Collection
UI colors
Mixin
-
Variable
var(--color-on-layer-primary)
Token set
-
Secondary
Secondary color for text layers or icons on top of Layer
Syntax: Web
var(--color-on-layer-secondary)
Collection
UI colors
Mixin
-
Variable
var(--color-on-layer-secondary)
Token set
-
Tertiary
Color for tertiary text layers or icons used mostly as a placeholders
Syntax: Web
var(--color-on-layer-tertiary)
Collection
UI colors
Mixin
-
Variable
var(--color-on-layer-tertiary)
Token set
-
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 uses Gray 10, Gray 70, and Gray 80 colors.
Each color is represented by a specific variable named by the purpose.
Dark mode variables will be specified soon.
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.
