sunweb

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#ed2924
RGBA237, 41, 36, 237
primary--ultra-light
HEX#feeded
RGBA254, 237, 237, 254
primary--light
HEX#facac9
RGBA250, 202, 201, 250
primary--semi-light
HEX#f05451
RGBA240, 84, 81, 240
primary--semi-dark
HEX#ce241f
RGBA206, 36, 31, 206
primary--dark
HEX#ad1e1a
RGBA173, 30, 26, 173

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#f6f6f6
RGBA246, 246, 246, 246
grey--light
HEX#eeeeee
RGBA238, 238, 238, 238
grey--semi-light
HEX#d3d9dd
RGBA211, 217, 221, 211
grey
HEX#92a1a9
RGBA146, 161, 169, 146
grey--semi-dark
HEX#7a7776
RGBA122, 119, 118, 122
grey--dark
HEX#333333
RGBA51, 51, 51, 51
grey--ultra-dark
HEX#000000
RGBA0, 0, 0, 0
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#21b788
RGBA33, 183, 136, 33
info
HEX#008fcb
RGBA0, 143, 203, 0
warning
HEX#f4be14
RGBA244, 190, 20, 244
danger
HEX#ed2924
RGBA237, 41, 36, 237
success--ultra-light
HEX#eefaf6
RGBA238, 250, 246, 238
success--light
HEX#a6e2cf
RGBA166, 226, 207, 166
success--semi-light
HEX#64cdac
RGBA100, 205, 172, 100
success--semi-dark
HEX#198966
RGBA25, 137, 102, 25
success--dark
HEX#126148
RGBA18, 97, 72, 18
info--ultra-light
HEX#ebf6fb
RGBA235, 246, 251, 235
info--light
HEX#a7def9
RGBA167, 222, 249, 167
info--semi-light
HEX#87c9ec
RGBA135, 201, 236, 135
info--semi-dark
HEX#006996
RGBA0, 105, 150, 0
info--dark
HEX#004563
RGBA0, 69, 99, 0
warning--ultra-light
HEX#fff4ea
RGBA255, 244, 234, 255
warning--light
HEX#fdefb8
RGBA253, 239, 184, 253
warning--semi-light
HEX#f7cb14
RGBA247, 203, 20, 247
warning--semi-dark
HEX#ff9933
RGBA255, 153, 51, 255
warning--dark
HEX#f66e20
RGBA246, 110, 32, 246
danger--ultra-light
HEX#feeded
RGBA254, 237, 237, 254
danger--light
HEX#facac9
RGBA250, 202, 201, 250
danger--semi-light
HEX#f05451
RGBA240, 84, 81, 240
danger--semi-dark
HEX#ce241f
RGBA206, 36, 31, 206
danger--dark
HEX#ad1e1a
RGBA173, 30, 26, 173

theme colors
Theme colors are defined to differentiate some abstract concepts like package collections.
boutique
HEX#1f448d
RGBA31, 68, 141, 31
cycling
HEX#333333
RGBA51, 51, 51, 51
excellent
HEX#5e2f7e
RGBA94, 47, 126, 94
famfun
HEX#ed2924
RGBA237, 41, 36, 237
secrets
HEX#00bfd4
RGBA0, 191, 212, 0
selections
HEX#f66e20
RGBA246, 110, 32, 246
villages
HEX#147a58
RGBA20, 122, 88, 20
xperience
HEX#ed2924
RGBA237, 41, 36, 237

other colors
This colors are useful to highlight certain information or to increase the wealth of the UI.
citrus
HEX#f5e800
RGBA245, 232, 0, 245
digital-blue
HEX#0070d2
RGBA0, 112, 210, 0
flow
HEX#ed2924
RGBA237, 41, 36, 237
neutral-alternate
HEX#fafafa
RGBA250, 250, 250, 250
lime
HEX#bef200
RGBA190, 242, 0, 190
petrol
HEX#017789
RGBA1, 119, 137, 1
turquoise
HEX#1dccc3
RGBA29, 204, 195, 29

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