Colors

Guidance around color usage is essential to ensure consistent and engaging user interfaces throughout the Emplifi Platform.

On-layer

Use on-layer color as a fill color for texts and icons placed on top of the layer (e.g., box, widget, table, etc...) or background.

On-layer
#24242b
Primary
Primary color for text layers or icons on top of Layer
Syntax: Web
var(--color-on-layer-primary)
Collection
UI colors
#505057
Secondary
Secondary color for text layers or icons on top of Layer
Syntax: Web
var(--color-on-layer-secondary)
Collection
UI colors
#9d9da0
Tertiary
Color for tertiary text layers or icons used mostly as a placeholders
Syntax: Web
var(--color-on-layer-tertiary)
Collection
UI colors
#f9f9fa
Inverse
Color on high contrast moments (e.g. tooltips)
Syntax: Web
var(--color-on-layer-inverse)
Collection
UI colors
#003beb
Interactive
Color represents interactive elements on top of Layer
Syntax: Web
var(--color-on-layer-interactive)
Collection
UI colors
#e1ab11
Warning
Color for text layers or icons on top of Layer represents warning state
Syntax: Web
var(--color-on-layer-warning)
Collection
UI colors
#da2828
Danger
Color for text layers or icons on top of Layer represents danger or error state
Syntax: Web
var(--color-on-layer-danger)
Collection
UI colors
#15a43e
Success
Color for text layers or icons on top of Layer represents success state
Syntax: Web
var(--color-on-layer-success)
Collection
UI colors
#691cd4
Recent
Color for text layers or icons on top of Layer represents recent state
Syntax: Web
var(--color-on-layer-recent)
Collection
UI colors

Layer colors

Use layer color as a fill color for page, containers and boxes used in the design.

Layer
#f3f3f5
Level 0
Default page and dialog background
Syntax: Web
var(--color-layer-level-0)
Collection
UI colors
#ffffff
Level 1
Default container background color on layer 0
Syntax: Web
var(--color-layer-level-1)
Collection
UI colors
#f3f3f5
Level 2
Container background color on layer 1
Syntax: Web
var(--color-layer-level-2)
Collection
UI colors
#e7e7e7
Level 3
Container background color on layer 1
Syntax: Web
var(--color-layer-level-3)
Collection
UI colors
rgba(0,0,0,0.05)
Hover
Hover state color for Layers on level 0 - 2
Syntax: Web
var(--color-layer-hover)
Collection
UI colors
rgba(0,0,0,0.1)
Active
Active state color for Layers on level 0 - 2
Syntax: Web
var(--color-layer-active)
Collection
UI colors
#d5efff
Info
Background color for Info container
Syntax: Web
var(--color-layer-info)
Collection
UI colors
#fcf6c5
Warning
Background color for Warning container
Syntax: Web
var(--color-layer-warning)
Collection
UI colors
#fee2e2
Danger
Background color for Error container
Syntax: Web
var(--color-layer-danger)
Collection
UI colors
#dcfce4
Success
Background color for Success container
Syntax: Web
var(--color-layer-success)
Collection
UI colors
#f0e7ff
Recent
Background color for Recent container
Syntax: Web
var(--color-layer-recent)
Collection
UI colors
#111114
Main navigation
Color on Background reserved only for main navigation
Syntax: Web
var(--color-layer-main-navigation)
Collection
UI colors
#f6d84e
Highlight
Highlight color for the text layers
Syntax: Web
var(--color-layer-highlight)
Collection
UI colors
rgba(255,255,255,0.01)
Transparent
Syntax: Web
var(--color-layer-transparent)
Collection
UI colors

Border colors

Border
rgba(0,0,0,0.2)
Primary
Border color on background and surface for lines and borders
Syntax: Web
var(--color-border-primary)
Collection
UI colors
rgba(0,0,0,0.1)
Secondary
Border color on background and surface for lines and borders
Syntax: Web
var(--color-border-secondary)
Collection
UI colors
rgba(255,255,255,0.2)
Inverse
Border color on high contrast moments (e.g. tooltips)
Syntax: Web
var(--color-border-inverse)
Collection
UI colors
#56a0ff
Info
Border color for containers within a "info" type of content
Syntax: Web
var(--color-border-info)
Collection
UI colors
#003beb
Info emphasis
Syntax: Web
var(--color-border-info-emphasis)
Collection
UI colors
#f6d84e
Warning
Border color for containers within a "warning" type of content, such as warnings
Syntax: Web
var(--color-border-warning)
Collection
UI colors
#f1c21b
Warning emphasis
Syntax: Web
var(--color-border-warning-emphasis)
Collection
UI colors
#f67373
Danger
Border color for containers within a "danger" type of content, such as errors
Syntax: Web
var(--color-border-danger)
Collection
UI colors
#da2828
Danger emphasis
Syntax: Web
var(--color-border-danger-emphasis)
Collection
UI colors
#85f0a3
Success
Border color for containers within a "success" type of content
Syntax: Web
var(--color-border-success)
Collection
UI colors
#20c54f
Success emphasis
Syntax: Web
var(--color-border-success-emphasis)
Collection
UI colors
#b180ff
Recent
Border color for containers within a "recent" type of content
Syntax: Web
var(--color-border-recent)
Collection
UI colors
#7c2df0
Recent emphasis
Syntax: Web
var(--color-border-recent-emphasis)
Collection
UI colors
Border / Focus ring
#24242b
Focus button [Deprecated]
Border color for button’s Focus state
Syntax: Web
var(--color-border-focus-button)
Collection
UI colors
#003beb
Focus ring
Border color for text inputs, checkboxes and radiobuttons Focus state
Syntax: Web
var(--color-border-focus-ring)
Collection
UI colors
rgba(255,255,255,0.95)
Focus ring inner
Border color for text inputs, checkboxes and radiobuttons Focus state
Syntax: Web
var(--color-border-focus-ring-inner)
Collection
UI colors
#85c7ff
Focus ring inverse
Border color for text inputs, checkboxes and radiobuttons Focus state
Syntax: Web
var(--color-border-focus-ring-inverse)
Collection
UI colors
rgba(0,0,0,0.7)
Focus ring inner inverse
Border color for text inputs, checkboxes and radiobuttons Focus state
Syntax: Web
var(--color-border-focus-ring-inner-inverse)
Collection
UI colors
#003beb
Focus form
Border color for text inputs, checkboxes and radiobuttons Focus state
Syntax: Web
var(--color-border-focus-form)
Collection
UI colors

Overlay colors

Overlay
rgba(0,0,0,0.7)
Default
Default background overlay for dialogs
Syntax: Web
var(--color-overlay-default)
Collection
UI colors
rgba(255,255,255,0.8)
Inverse
Inversed background overlay use inside a dialogs
Syntax: Web
var(--color-overlay-inverse)
Collection
UI colors

Link colors

Link
#003beb
Primary
Primary links and Link button
Syntax: Web
var(--color-link-primary)
Collection
UI colors
#24242b
Secondary
Secondary link color
Syntax: Web
var(--color-link-secondary)
Collection
UI colors
#505057
Tertiary
Tertialy link color
Syntax: Web
var(--color-link-tertiary)
Collection
UI colors
#f9f9fa
Inverse
Links on high contrast backgrounds
Syntax: Web
var(--color-link-inverse)
Collection
UI colors
#691cd4
Visited
Visited links, but not for link buttons
Syntax: Web
var(--color-link-visited)
Collection
UI colors

Button colors

Button
#0c4bff
Primary
Primary button background color
Syntax: Web
var(--color-button-primary)
Collection
UI colors
rgba(255,255,255,0.7)
Light
Secondary button background gradient on top of Background
Syntax: Web
var(--color-button-light)
Collection
UI colors
rgba(255,255,255,0)
Ghost
Secondary button background gradient on top of Layer-1
Syntax: Web
var(--color-button-ghost)
Collection
UI colors
rgba(255,255,255,0)
Invisible
Tertiary button background color
Syntax: Web
var(--color-button-invisible)
Collection
UI colors
rgba(255,255,255,0)
Inverse
Inverse button background color
Syntax: Web
var(--color-button-inverse)
Collection
UI colors
#15a43e
Request
Request button background color
Syntax: Web
var(--color-button-request)
Collection
UI colors
#da2828
Danger
Danger button background color
Syntax: Web
var(--color-button-danger)
Collection
UI colors
#f6d84e
Purchase
Purchase button background color
Syntax: Web
var(--color-button-purchase)
Collection
UI colors
rgba(0,0,0,0.05)
Ghost hover
Hover background color for button Ghost
Syntax: Web
var(--color-button-ghost-hover)
Collection
UI colors
rgba(0,0,0,0.05)
Invisible hover
Hover background color for button Invisible
Syntax: Web
var(--color-button-invisible-hover)
Collection
UI colors
rgba(255,255,255,0.05)
Inverse hover
Hover background color for button Inverse
Syntax: Web
var(--color-button-inverse-hover)
Collection
UI colors
rgba(0,0,0,0.1)
Ghost active
Active background color for button Ghose
Syntax: Web
var(--color-button-ghost-active)
Collection
UI colors
rgba(0,0,0,0.1)
Invisible active
Active background color for button Invisible
Syntax: Web
var(--color-button-invisible-active)
Collection
UI colors
rgba(255,255,255,0.1)
Inverse active
Active background color for button Inverse
Syntax: Web
var(--color-button-inverse-active)
Collection
UI colors
rgba(208,226,255,0.5)
Invisible applied
Syntax: Web
var(--color-button-invisible-applied)
Collection
UI colors
Button / Gradient
rgba(0,0,0,0)
Gradient enabled start
Syntax: Web
var(--color-button-gradient-enabled-start)
Collection
UI colors
rgba(0,0,0,0.1)
Gradient enabled end
Syntax: Web
var(--color-button-gradient-enabled-end)
Collection
UI colors
rgba(0,0,0,0)
Gradient hover start
Syntax: Web
var(--color-button-gradient-hover-start)
Collection
UI colors
rgba(0,0,0,0.2)
Gradient hover end
Syntax: Web
var(--color-button-gradient-hover-end)
Collection
UI colors
rgba(0,0,0,0.1)
Gradient active start
Syntax: Web
var(--color-button-gradient-active-start)
Collection
UI colors
rgba(0,0,0,0)
Gradient active end
Syntax: Web
var(--color-button-gradient-active-end)
Collection
UI colors

Tooltip colors

Tooltip
#24242b
Default
Background color for Brief and Explanatory tooltips, and snackbars
Syntax: Web
var(--color-tooltip-default)
Collection
UI colors
#0791f0
Guide
Background color for Guiding tooltip or snackbar
Syntax: Web
var(--color-tooltip-guide)
Collection
UI colors
#f6d84e
Caveat
Background color for Caveat tooltip or snackbar
Syntax: Web
var(--color-tooltip-caveat)
Collection
UI colors
#da2828
Danger
Background color for Danger tooltip or snackbar represented error situation.
Syntax: Web
var(--color-tooltip-danger)
Collection
UI colors

Table colors

Table
#ffffff
Row odd
Background color for odd rows, header and footer
Syntax: Web
var(--color-table-row-odd)
Collection
UI colors
#f9f9fa
Row even
Background color for even rows
Syntax: Web
var(--color-table-row-even)
Collection
UI colors
#d5efff
Row hover
Background color for table row hover state
Syntax: Web
var(--color-table-row-hover)
Collection
UI colors
#85c7ff
Row hover border
Border color for table row hover state
Syntax: Web
var(--color-table-row-hover-border)
Collection
UI colors

Platform colors

Platform
#0866ff
Facebook
Default color for Facebook
Syntax: Web
var(--color-platform-facebook)
Collection
UI colors
#d73676
Instagram
Default color for Instagram
Syntax: Web
var(--color-platform-instagram)
Collection
UI colors
#000000
X
Default color for Twitter
Syntax: Web
var(--color-platform-x)
Collection
UI colors
#ff0000
YouTube
Default color for YouTube
Syntax: Web
var(--color-platform-youtube)
Collection
UI colors
#bb0f23
Pinterest
Default color for Pinterest
Syntax: Web
var(--color-platform-pinterest)
Collection
UI colors
#1078b3
Linkedin
Default color for Linkedin
Syntax: Web
var(--color-platform-linkedin)
Collection
UI colors
#f57e02
Google analytics
Default color for Google Analytics
Syntax: Web
var(--color-platform-google-analytics)
Collection
UI colors
#4c8bf5
Google my business
Syntax: Web
var(--color-platform-google-my-business)
Collection
UI colors
#4e76a1
VKontakte
Default color for VKontakte
Syntax: Web
var(--color-platform-vkontakte)
Collection
UI colors
#e6e300
Snapchat
Default color for Snapchat
Syntax: Web
var(--color-platform-snapchat)
Collection
UI colors
#000000
TikTok
Default color for TikTok
Syntax: Web
var(--color-platform-tiktok)
Collection
UI colors
#0bd0ca
TikTok splash
Secondary color for TikTok
Syntax: Web
var(--color-platform-tiktok-splash)
Collection
UI colors
#00a1e0
Salesforce
Default color for Salesforce
Syntax: Web
var(--color-platform-salesforce)
Collection
UI colors
#354da3
News
Default color for News
Syntax: Web
var(--color-platform-news)
Collection
UI colors
#dd470f
Forum
Default color for Forum
Syntax: Web
var(--color-platform-forum)
Collection
UI colors
#4b3827
Blog
Default color for Blog
Syntax: Web
var(--color-platform-blog)
Collection
UI colors
#f57e02
Web
Default color for Web
Syntax: Web
var(--color-platform-web)
Collection
UI colors
#6e50dc
Audience
Default color for Audience
Syntax: Web
var(--color-platform-audience)
Collection
UI colors
#ff5700
Reddit
Default color for Reddit
Syntax: Web
var(--color-platform-reddit)
Collection
UI colors
#25d366
Whatsapp
Default color for Whatsapp
Syntax: Web
var(--color-platform-whatsapp)
Collection
UI colors
#000000
Threads
Default color for Threads
Syntax: Web
var(--color-platform-threads)
Collection
UI colors
#9c27b0
Threads purple
Secondary color for Threads
Syntax: Web
var(--color-platform-threads-purple)
Collection
UI colors
#406dd3
Organic
Default color for Organic metrics
Syntax: Web
var(--color-platform-organic)
Collection
UI colors
#26bca6
Paid
Default color for Paid metrics
Syntax: Web
var(--color-platform-paid)
Collection
UI colors

Chart colors

Chart
#3f51b5
Indigo
Syntax: Web
var(--color-chart-indigo)
Collection
UI colors
#2196f3
Blue
Syntax: Web
var(--color-chart-blue)
Collection
UI colors
#00bcd4
Cyan
Syntax: Web
var(--color-chart-cyan)
Collection
UI colors
#009688
Teal
Syntax: Web
var(--color-chart-teal)
Collection
UI colors
#4caf50
Green
Syntax: Web
var(--color-chart-green)
Collection
UI colors
#8bc34a
Light green
Syntax: Web
var(--color-chart-light-green)
Collection
UI colors
#cddc39
Lime
Syntax: Web
var(--color-chart-lime)
Collection
UI colors
#ffcc02
Yellow
Syntax: Web
var(--color-chart-yellow)
Collection
UI colors
#ff9800
Orange
Syntax: Web
var(--color-chart-orange)
Collection
UI colors
#f43636
Red
Syntax: Web
var(--color-chart-red)
Collection
UI colors
#b01e1e
Deep red
Syntax: Web
var(--color-chart-deep-red)
Collection
UI colors
#795548
Brown
Syntax: Web
var(--color-chart-brown)
Collection
UI colors
#e91e63
Deep pink
Syntax: Web
var(--color-chart-deep-pink)
Collection
UI colors
#cd3497
Pink
Syntax: Web
var(--color-chart-pink)
Collection
UI colors
#9c27b0
Purple
Syntax: Web
var(--color-chart-purple)
Collection
UI colors
#622cc2
Deep purple
Syntax: Web
var(--color-chart-deep-purple)
Collection
UI colors
#9f9f9f
Gray
Syntax: Web
var(--color-chart-gray)
Collection
UI colors

Operator colors

Operator
#24242b
IF
Default color for “IF” operator
Syntax: Web
var(--color-operator-if)
Collection
UI colors
#20c54f
AND
Default color for “AND” operator
Syntax: Web
var(--color-operator-and)
Collection
UI colors
#691cd4
OR
Default color for “OR” operator
Syntax: Web
var(--color-operator-or)
Collection
UI colors
#ff5a1f
NEAR
Default color for “NEAR” operator
Syntax: Web
var(--color-operator-near)
Collection
UI colors
#da2828
NOT
Default color for “NOT” operator
Syntax: Web
var(--color-operator-not)
Collection
UI colors

Sentiment colors

Sentiment
#148134
Positive strongly
Main color to represent strongly positive sentiments. This color is used mainly in visualisations.
Syntax: Web
var(--color-sentiment-positive-strongly)
Collection
UI colors
#20c54f
Positive
Main color to represent positive sentiments
Syntax: Web
var(--color-sentiment-positive)
Collection
UI colors
#858589
Neutral
Main color to represent neutral sentiment
Syntax: Web
var(--color-sentiment-neutral)
Collection
UI colors
#da2828
Negative
Main color to represent negative sentiment
Syntax: Web
var(--color-sentiment-negative)
Collection
UI colors
#c52020
Negative strongly
Main color to represent strongly negative sentiments. This color is used mainly in visualisations.
Syntax: Web
var(--color-sentiment-negative-strongly)
Collection
UI colors
#ff5a1f
Mixed
Main color to represent mixed sentiment
Syntax: Web
var(--color-sentiment-mixed)
Collection
UI colors
#cececf
No
Syntax: Web
var(--color-sentiment-no)
Collection
UI colors

Grade colors

Grade
#8fd363
A+
Default color for A+ Grade
Syntax: Web
var(--color-grade-a-plus)
Collection
UI colors
#3a922b
A
Default color for A Grade
Syntax: Web
var(--color-grade-a)
Collection
UI colors
#ffcc26
B
Default color for B Grade
Syntax: Web
var(--color-grade-b)
Collection
UI colors
#f09e5b
C
Default color for C Grade
Syntax: Web
var(--color-grade-c)
Collection
UI colors
#d3d3d3
D
Default color for D Grade
Syntax: Web
var(--color-grade-d)
Collection
UI colors

Approval flow colors

Approval flow
#3f51b5
Stage 1
Syntax: Web
var(--color-approval-flow-stage-1)
Collection
UI colors
#4caf50
Stage 2
Syntax: Web
var(--color-approval-flow-stage-2)
Collection
UI colors
#ffc107
Stage 3
Syntax: Web
var(--color-approval-flow-stage-3)
Collection
UI colors
#e91e63
Stage 4
Syntax: Web
var(--color-approval-flow-stage-4)
Collection
UI colors
#2196f3
Stage 5
Syntax: Web
var(--color-approval-flow-stage-5)
Collection
UI colors
#8bc34a
Stage 6
Syntax: Web
var(--color-approval-flow-stage-6)
Collection
UI colors
#cddc39
Stage 7
Syntax: Web
var(--color-approval-flow-stage-7)
Collection
UI colors
#009688
Stage 8
Syntax: Web
var(--color-approval-flow-stage-8)
Collection
UI colors
#ffeb3b
Stage 9
Syntax: Web
var(--color-approval-flow-stage-9)
Collection
UI colors
#00bcd4
Stage 10
Syntax: Web
var(--color-approval-flow-stage-10)
Collection
UI colors
#795548
Stage 11
Syntax: Web
var(--color-approval-flow-stage-11)
Collection
UI colors
#ff9800
Stage 12
Syntax: Web
var(--color-approval-flow-stage-12)
Collection
UI colors
#ff5722
Stage 13
Syntax: Web
var(--color-approval-flow-stage-13)
Collection
UI colors
#9c27b0
Stage 14
Syntax: Web
var(--color-approval-flow-stage-14)
Collection
UI colors
#673ab7
Stage 15
Syntax: Web
var(--color-approval-flow-stage-15)
Collection
UI colors

Scrollbar colors

Scrollbar
#9d9da0
Thumb
The draggable scrolling handle
Syntax: Web
var(--color-scrollbar-thumb)
Collection
UI colors
#24242b
Thumb hover
Hover state for the Scrollbar Thumb
Syntax: Web
var(--color-scrollbar-thumb-hover)
Collection
UI colors
#e7e7e7
Track
Progress bar of the scrollbar, where there is a grey bar on top of a white bar.
Syntax: Web
var(--color-scrollbar-track)
Collection
UI colors
#6d6d71
Thumb inverse
The draggable scrolling handle on hight contrast backgrounds
Syntax: Web
var(--color-scrollbar-thumb-inverse)
Collection
UI colors
#b5b5b7
Thumb inverse hover
Hover state for the Scrollbar Thumb on hight contrast backgrounds
Syntax: Web
var(--color-scrollbar-thumb-inverse-hover)
Collection
UI colors
#505057
Track inverse
Progress bar of the scrollbar, where there is a grey bar on top of a white bar on hight contrast backgrounds
Syntax: Web
var(--color-scrollbar-track-inverse)
Collection
UI colors

Brand colors

Brand
#42c9f2
Ocean
Syntax: Web
var(--color-brand-ocean)
Collection
UI colors
#000066
Dark blue
Syntax: Web
var(--color-brand-dark-blue)
Collection
UI colors
#6666ff
Plum
Syntax: Web
var(--color-brand-plum)
Collection
UI colors
#ff5a1f
Coral
Syntax: Web
var(--color-brand-coral)
Collection
UI colors
#111114
Charcoal
Syntax: Web
var(--color-brand-charcoal)
Collection
UI colors
#e3f1ff
Sky blue
Syntax: Web
var(--color-brand-sky-blue)
Collection
UI colors
#ede9e3
Sand
Syntax: Web
var(--color-brand-sand)
Collection
UI colors
#51f7e5
Teal
Syntax: Web
var(--color-brand-teal)
Collection
UI colors
#003beb
Royal blue
Syntax: Web
var(--color-brand-royal-blue)
Collection
UI colors
#ffffff
Inverse
Syntax: Web
var(--color-brand-inverse)
Collection
UI colors

AI colors

The color variable is used solely to complete the AI gradient.

AI / Gradient
#00a19a
Start
Syntax: Web
var(--color-ai-gradient-start)
Collection
UI colors
#7c2df0
End
Syntax: Web
var(--color-ai-gradient-end)
Collection
UI colors

Message colors

Utilize the colors of the messages as the fill and border colors for the message bubble containers.

Message
#e7e7e7
Incoming
Syntax: Web
var(--color-message-incomming)
Collection
UI colors
#b3dfff
Outgoing
Syntax: Web
var(--color-message-outgoing)
Collection
UI colors

Loader colors

Loader
#0791f0
Spinner light
Syntax: Web
var(--color-loader-spinner-light)
Collection
UI colors
#063bcd
Spinner dark
Syntax: Web
var(--color-loader-spinner-dark)
Collection
UI colors
rgba(255,255,255,0.85)
Spinner inverse
Syntax: Web
var(--color-loader-spinner-inverse)
Collection
UI colors
rgba(0,0,0,0.05)
Skeleton
Default color for skeleton loaders
Syntax: Web
var(--color-loader-skeleton)
Collection
UI colors
rgba(255,255,255,0.1)
Skeleton inverse
Default color for skeleton loaders on hight contrast background
Syntax: Web
var(--color-loader-skeleton-inverse)
Collection
UI colors

Shadow colors

Shadow
rgba(0,0,0,0.05)
Inner
Syntax: Web
var(--color-shadow-inner)
Collection
UI colors
rgba(0,0,0,0.1)
Drop 10
Syntax: Web
var(--color-shadow-drop-10)
Collection
UI colors
rgba(0,0,0,0.2)
Drop 20
Syntax: Web
var(--color-shadow-drop-20)
Collection
UI colors
rgba(0,0,0,0.3)
Drop 30
Syntax: Web
var(--color-shadow-drop-30)
Collection
UI colors
Colors
Overview
Colors
Primitive Colors
Soul Design System by Emplifi

Soul is the heart of Emplifi's effort to design the best CX platform for its customers. The design system collects principles, components, patterns, copywriting guidelines, and more.

© 2025 Soul Design System. Page last updated on Feb 5, 2025, 09:42