bizztravel
Brand
Dev mode

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#067cc0
RGBA6, 124, 192, 6
secondary
HEX#ff6600
RGBA255, 102, 0, 255
primary--ultra-light
HEX#e8f6ff
RGBA232, 246, 255, 232
primary--light
HEX#cceaf8
RGBA204, 234, 248, 204
primary--semi-light
HEX#6eb3db
RGBA110, 179, 219, 110
primary--semi-dark
HEX#00579c
RGBA0, 87, 156, 0
primary--dark
HEX#003762
RGBA0, 55, 98, 0
secondary--ultra-light
HEX#fff1e7
RGBA255, 241, 231, 255
secondary--light
HEX#ffc29a
RGBA255, 194, 154, 255
secondary--semi-light
HEX#ff944d
RGBA255, 148, 77, 255
secondary--semi-dark
HEX#e44600
RGBA228, 70, 0, 228
secondary--dark
HEX#b13600
RGBA177, 54, 0, 177
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.
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