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.
Only the primary colors is mandatory to define a set of brand colors.
primary
| HEX | #0080ab |
| RGBA | 0, 128, 171, 0 |
secondary
| HEX | #ffda1a |
| RGBA | 255, 218, 26, 255 |
accent
| HEX | #f6a6b3 |
| RGBA | 246, 166, 179, 246 |
primary--ultra-light
| HEX | #f3f7f8 |
| RGBA | 243, 247, 248, 243 |
primary--light
| HEX | #dfeef1 |
| RGBA | 223, 238, 241, 223 |
primary--semi-light
| HEX | #7fbfd5 |
| RGBA | 127, 191, 213, 127 |
primary--semi-dark
| HEX | #027298 |
| RGBA | 2, 114, 152, 2 |
primary--dark
| HEX | #004c66 |
| RGBA | 0, 76, 102, 0 |
secondary--ultra-light
| HEX | #fff8d1 |
| RGBA | 255, 248, 209, 255 |
secondary--light
| HEX | #ffec8c |
| RGBA | 255, 236, 140, 255 |
secondary--semi-light
| HEX | #ffe55e |
| RGBA | 255, 229, 94, 255 |
secondary--semi-dark
| HEX | #eac90a |
| RGBA | 234, 201, 10, 234 |
secondary--dark
| HEX | #cbaf19 |
| RGBA | 203, 175, 25, 203 |
accent--ultra-light
| HEX | #fef2f4 |
| RGBA | 254, 242, 244, 254 |
accent--light
| HEX | #fce0e5 |
| RGBA | 252, 224, 229, 252 |
accent--semi-light
| HEX | #f9c5cd |
| RGBA | 249, 197, 205, 249 |
accent--semi-dark
| HEX | #e37d8e |
| RGBA | 227, 125, 142, 227 |
accent--dark
| HEX | #cb596c |
| RGBA | 203, 89, 108, 203 |
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.
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 |
| RGBA | 255, 255, 255, 255 |
black
| HEX | #000000 |
| RGBA | 0, 0, 0, 0 |
grey--ultra-light
| HEX | #f6f6f6 |
| RGBA | 246, 246, 246, 246 |
grey--light
| HEX | #eeeeee |
| RGBA | 238, 238, 238, 238 |
grey--semi-light
| HEX | #d3d9dd |
| RGBA | 211, 217, 221, 211 |
grey
| HEX | #92a1a9 |
| RGBA | 146, 161, 169, 146 |
grey--semi-dark
| HEX | #7a7776 |
| RGBA | 122, 119, 118, 122 |
grey--dark
| HEX | #333333 |
| RGBA | 51, 51, 51, 51 |
grey--ultra-dark
| HEX | #000000 |
| RGBA | 0, 0, 0, 0 |
white--transparent
| HEX | #ffffff |
| RGBA | 255, 255, 255, 255 |
black--transparent
| HEX | #000000 |
| RGBA | 0, 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.
The state colors does not represent the brand but general functional user experience.
success
| HEX | #81d4ac |
| RGBA | 129, 212, 172, 129 |
info
| HEX | #71aed1 |
| RGBA | 113, 174, 209, 113 |
danger
| HEX | #e56957 |
| RGBA | 229, 105, 87, 229 |
success--ultra-light
| HEX | #e7f8f4 |
| RGBA | 231, 248, 244, 231 |
success--light
| HEX | #cff0e9 |
| RGBA | 207, 240, 233, 207 |
success--semi-light
| HEX | #a1dfc1 |
| RGBA | 161, 223, 193, 161 |
success--semi-dark
| HEX | #5ac792 |
| RGBA | 90, 199, 146, 90 |
success--dark
| HEX | #3eaa75 |
| RGBA | 62, 170, 117, 62 |
info--ultra-light
| HEX | #e6f4fa |
| RGBA | 230, 244, 250, 230 |
info--light
| HEX | #d8e9f2 |
| RGBA | 216, 233, 242, 216 |
info--semi-light
| HEX | #b1d3e6 |
| RGBA | 177, 211, 230, 177 |
info--semi-dark
| HEX | #5295bc |
| RGBA | 82, 149, 188, 82 |
info--dark
| HEX | #397ca4 |
| RGBA | 57, 124, 164, 57 |
warning--ultra-light
| HEX | #fef6e9 |
| RGBA | 254, 246, 233, 254 |
warning--light
| HEX | #fce4bd |
| RGBA | 252, 228, 189, 252 |
warning--semi-light
| HEX | #f8c065 |
| RGBA | 248, 192, 101, 248 |
warning--semi-dark
| HEX | #e08c02 |
| RGBA | 224, 140, 2, 224 |
warning--dark
| HEX | #e08c02 |
| RGBA | 224, 140, 2, 224 |
danger--ultra-light
| HEX | #fde0db |
| RGBA | 253, 224, 219, 253 |
danger--light
| HEX | #fac0b7 |
| RGBA | 250, 192, 183, 250 |
danger--semi-light
| HEX | #f4806f |
| RGBA | 244, 128, 111, 244 |
danger--semi-dark
| HEX | #d94b36 |
| RGBA | 217, 75, 54, 217 |
danger--dark
| HEX | #cb2b13 |
| RGBA | 203, 43, 19, 203 |
theme colors
Theme colors are defined to differentiate some abstract concepts like package collections.
diamond
| HEX | #8cd5e4 |
| RGBA | 140, 213, 228, 140 |
gold
| HEX | #fddd00 |
| RGBA | 253, 221, 0, 253 |
springbreak
| HEX | #9ee1d4 |
| RGBA | 158, 225, 212, 158 |
budget
| HEX | #f6a6b3 |
| RGBA | 246, 166, 179, 246 |
gogo-toppers
| HEX | #ffdd00 |
| RGBA | 255, 221, 0, 255 |
gogo-suggestions
| HEX | #f6a6b3 |
| RGBA | 246, 166, 179, 246 |
adults-only
| HEX | #8cd5e5 |
| RGBA | 140, 213, 229, 140 |
other colors
This colors are useful to highlight certain information or to increase the wealth of the UI.
digital-blue
| HEX | #0070d2 |
| RGBA | 0, 112, 210, 0 |
flow
| HEX | #f70080 |
| RGBA | 247, 0, 128, 247 |
neutral-alternate
| HEX | #fafafa |
| RGBA | 250, 250, 250, 250 |
vendor colors
These colors are used to represent external services or social networks.
facebook
| HEX | #3b5998 |
| RGBA | 59, 89, 152, 59 |
twitter
| HEX | #00aced |
| RGBA | 0, 172, 237, 0 |
accessibility colors
Accessibility colors are defined to be used to improve accessibility in some cases.
grey
| HEX | #797676 |
| RGBA | 121, 118, 118, 121 |