eliza

Colors

foundations colors

Definition


The colours are used to give personality and reflect the brand into the design.
Every colour has dark and light shades, that can be also applied to the UI in order to increase its effectivity. Are divided in these categories:


brand colors
The primary and secondary colour, that are selected to represent the brand identity. The accent color is used to emphasize.
Only the primary colors is mandatory to define a set of brand colors.
primary
HEX#ff0059
RGBA255, 0, 89, 255
secondary
HEX#eabf73
RGBA234, 191, 115, 234
primary--ultra-light
HEX#ffe5ee
RGBA255, 229, 238, 255
primary--light
HEX#ffacc9
RGBA255, 172, 201, 255
primary--semi-light
HEX#ff81ad
RGBA255, 129, 173, 255
primary--semi-dark
HEX#b10144
RGBA177, 1, 68, 177
primary--dark
HEX#2d0221
RGBA45, 2, 33, 45
secondary--ultra-light
HEX#f9f6f0
RGBA249, 246, 240, 249
secondary--light
HEX#eee5d3
RGBA238, 229, 211, 238
secondary--semi-light
HEX#e0d1af
RGBA224, 209, 175, 224
secondary--semi-dark
HEX#f4ad36
RGBA244, 173, 54, 244
secondary--dark
HEX#e9980c
RGBA233, 152, 12, 233

neutral colors
Is formed by white, black and grey, but also includes light and dark grey shades.
These colours are used to represent softness and lightness, typically used as backgrounds or borders.
They also give more possibilities and readability to the UI.
white
HEX#ffffff
RGBA255, 255, 255, 255
black
HEX#000000
RGBA0, 0, 0, 0
grey--ultra-light
HEX#f3f4f7
RGBA243, 244, 247, 243
grey--light
HEX#e8eaee
RGBA232, 234, 238, 232
grey--semi-light
HEX#d8dbe0
RGBA216, 219, 224, 216
grey
HEX#959aa4
RGBA149, 154, 164, 149
grey--semi-dark
HEX#626975
RGBA98, 105, 117, 98
grey--dark
HEX#313a49
RGBA49, 58, 73, 49
white--transparent
HEX#ffffff
RGBA255, 255, 255, 255
black--transparent
HEX#000000
RGBA0, 0, 0, 0

state colors
These colors increase the usability by giving clear messages about the status, such as success, error, failure and reminder.
The state colors does not represent the brand but general functional user experience.
success
HEX#2ab17d
RGBA42, 177, 125, 42
info
HEX#0074fc
RGBA0, 116, 252, 0
warning
HEX#fc870e
RGBA252, 135, 14, 252
danger
HEX#e73737
RGBA231, 55, 55, 231
success--ultra-light
HEX#effbf6
RGBA239, 251, 246, 239
success--light
HEX#bee9d8
RGBA190, 233, 216, 190
success--semi-light
HEX#75cdab
RGBA117, 205, 171, 117
success--semi-dark
HEX#1a6f4e
RGBA26, 111, 78, 26
success--dark
HEX#13533a
RGBA19, 83, 58, 19
info--ultra-light
HEX#ebf4ff
RGBA235, 244, 255, 235
info--light
HEX#c0dcff
RGBA192, 220, 255, 192
info--semi-light
HEX#4b9eff
RGBA75, 158, 255, 75
info--semi-dark
HEX#005fcc
RGBA0, 95, 204, 0
info--dark
HEX#004ca3
RGBA0, 76, 163, 0
warning--ultra-light
HEX#fff5eb
RGBA255, 245, 235, 255
warning--light
HEX#ffdab4
RGBA255, 218, 180, 255
warning--semi-light
HEX#febe7d
RGBA254, 190, 125, 254
warning--semi-dark
HEX#c56908
RGBA197, 105, 8, 197
warning--dark
HEX#8d4a01
RGBA141, 74, 1, 141
danger--ultra-light
HEX#fdeded
RGBA253, 237, 237, 253
danger--light
HEX#f8c0c0
RGBA248, 192, 192, 248
danger--semi-light
HEX#f07c7c
RGBA240, 124, 124, 240
danger--semi-dark
HEX#bd2424
RGBA189, 36, 36, 189
danger--dark
HEX#921111
RGBA146, 17, 17, 146

theme colors
Theme colors are defined to differentiate some abstract concepts like package collections.
boutique
HEX#3a6372
RGBA58, 99, 114, 58
child
HEX#fda932
RGBA253, 169, 50, 253
culinary
HEX#eb581f
RGBA235, 88, 31, 235
honeymoon
HEX#aa121b
RGBA170, 18, 27, 170
sustainable
HEX#167d6b
RGBA22, 125, 107, 22
pearls
HEX#1e2d84
RGBA30, 45, 132, 30
newest-discoveries
HEX#611d97
RGBA97, 29, 151, 97

other colors
This colors are useful to highlight certain information or to increase the wealth of the UI.
digital-blue
HEX#0070d2
RGBA0, 112, 210, 0
flow
HEX#ffe066
RGBA255, 224, 102, 255
neutral-alternate
HEX#fafafa
RGBA250, 250, 250, 250

vendor colors
These colors are used to represent external services or social networks.
facebook
HEX#3b5998
RGBA59, 89, 152, 59
twitter
HEX#00aced
RGBA0, 172, 237, 0

accessibility colors
Accessibility colors are defined to be used to improve accessibility in some cases.
grey
HEX#797676
RGBA121, 118, 118, 121