Colors

Guidance around color usage is essential to ensure consistent and engaging user interfaces throughout 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 dander 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

 

Border colors

Border
#cececf
Default
Border color on background and surface for lines and borders
Syntax: Web
var(--color-border-default)
Collection
UI colors
rgba(255,255,255,0.4)
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
#ffffff
Ghost
Secondary button background gradient on top of Layer-1
Syntax: Web
var(--color-button-ghost)
Collection
UI colors
#ffffff
Invisible
Tertiary button background color
Syntax: Web
var(--color-button-invisible)
Collection
UI colors
#ffffff
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
#000000
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
#000000
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
#000000
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