Colors
The way we highlight information.
Last updated
Was this helpful?
The way we highlight information.
Last updated
Was this helpful?
Colors are elements that can define a brand. Besides that, colors in Ecco System have functions purposed. Please follow this guide to keep color consistency.
Ecco system has 2 main colors: blue and gray. They are functionally opposed, creating a notion of hierarchy between the information and functions of the interface.
Blue is the tone that characterizes the FCA brand, so it must be associated with just outstanding information, such as titles, and main actions.
Due to accessibility issues, the need to create a variant color of the brand, $color-brand-accessible, used in text styles and components. This blue tone substitutes the Primary color to keep Text styles more accessible. You can confirm it comparing the with the .
Color name
#
Token
Blue FCA Accessible
:: must use in text styles ::
#3A65D3
$color-brand-accessible
Blue FCA
#597DDA
$color-brand-primary
Dark Blue FCA
#1751A8
$color-brand-150
Light Blue FCA
#8EACFF
$color-brand-050
Glow Blue FCA
most used in
status hover
#EBEFFA
$color-brand-010
FCA Gray is the tone that lets the FCA Blue highlights and has a more neutral performance.
Color name
#
Token
Gray FCA 050
#B9BCBD
$color-brand-gray-050
Gray FCA 100
#898C8D
$color-brand-gray-100
Gray FCA 150
#5C5F60
$color-brand-gray-150
Gray FCA 200
#1D1D1B
$color-brand-gray-200
The colors below are used for Background. Do not use in borders or text styles.
Color name
#
Token
Light Background
#EBEDF2
$color-background-light
Dark Background
#14162C
$color-background-dark
The complementary palette consists of colors with a functional signaling tone (attention, success, error ...), as well as different blue shades for use in illustrations or graphics.
These colors must follow specific functional parameters, never serving as a substitute for the main or secondary information in FCA applications.
Color names
#
Token
White
#FFFFFF
$color-white
Green FCA 050
#6ACC4D
$color-green-050
Green FCA 100
#409E68
$color-green-100
Green FCA 150
#00572D
$color-green-150
Yellow FCA 100
#FABA12
$color-yellow-100
Orange FCA 100
#EA7D22
$color-orange-100
Red FCA 100
#F7473C
$color-red-100
Color names
#
Token
Heavy Blue 040
#99A2B2
$color-support-blue-heavy-040
Heavy Blue 060
#66738C
$color-support-blue-heavy-060
Heavy Blue 080
#334565
$color-support-blue-heavy-080
Heavy Blue 100
#00163F
$color-support-blue-heavy-100
Color names
#
Token
Dark Blue 040
#A2B0CB
$color-support-blue-dark-040
Dark Blue 060
#7388B1
$color-support-blue-dark-060
Dark Blue 080
#456197
$color-support-blue-dark-080
Dark Blue 100
#16397D
$color-support-blue-dark-100
Color names
#
Token
Medium Blue 040
#BBD2EA
$color-support-blue-medium-040
Medium Blue 060
#98BBE0
$color-support-blue-medium-060
Medium Blue 080
#76A5D5
$color-support-blue-medium-080
Medium Blue 100
#548ECB
$color-support-blue-medium-100
Color names
#
Token
Regular Blue 040
#BED9EF
$color-support-blue-regular-040
Regular Blue 060
#9DC7E8
$color-support-blue-regular-060
Regular Blue 080
#7DB4E0
$color-support-blue-regular-080
Regular Blue 100
#5CA1D8
$color-support-blue-regular-100
Color names
#
Token
Light Blue 040
#D6ECF9
$color-support-blue-light-040
Light Blue 060
#C1E3F7
$color-support-blue-light-060
Light Blue 080
#ADD9F4
$color-support-blue-light-080
Light Blue 100
#98D0F1
$color-support-blue-light-100
Color names
#
Token
Glow Blue 040
#D7E8F7
$color-support-blue-glow-040
Glow Blue 060
#C4DDF4
$color-support-blue-glow-060
Glow Blue 080
#B0D1F0
$color-support-blue-glow-080
Glow Blue 100
#9CC6EC
$color-support-blue-glow-100
Any FCA experience created must guarantee the contrast between background and font. Below is an example of background colors with possible font color applications that would be appropriate. On the right side, applications should be avoided.
