Colors
Color helps users interpret and interact with app content by establishing a hierarchy of information, highlighting actions, indicating states, and conveying meaning.
Colors
Color helps users interpret and interact with app content by establishing a hierarchy of information, highlighting actions, indicating states, and conveying meaning.
Primary colors
These are the primary colors of the navigation tabs. When necessary, use white #FFFFFF text over these colors.
 Blue |  Periwinkle |  Pink |  Teal |  Yellow |
|---|---|---|---|---|
#63A2C6 | #7193EE | #F47B63 | #76B0B0 | #E9AA22 |
rgb(99, 162, 198) | rgb(113, 147, 238) | rgb(244, 123, 99) | rgb(118, 176, 176) | rgb(233, 170, 34) |
| Messages | Tasks | People | Targets | Reports |
Secondary colors
These are the secondary (highlight) colors of the navigation tabs.
 Blue Highlight |  Periwinkle Highlight |  Pink Highlight |  Teal Highlight |  Yellow Highlight |
|---|---|---|---|---|
#EEF5F9 | #F0F4FD | #FDF1EF | #DFEAEA | #FCF6E7 |
rgb(238, 245, 249) | rgb(240, 244, 253) | rgb(253, 241, 239) | rgb(223, 234, 234) | rgb(252, 246, 231) |
Status colors
These are the status indication colors of the system. When necessary, use white #FFFFFF text over these colors.
 Teal Dark |  Blue Dark |  Yellow Dark |  Red |
|---|---|---|---|
#218E7F | #007AC0 | #C78330 | #E33030 |
rgb(33, 142, 127) | rgb(0, 122, 192) | rgb(199, 131, 48) | rgb(227, 48, 48) |
| Completed, verified, sent actions | Primary button, link, info | Delayed, incomplete actions | Overdue, unmet, error, delete, failed, denied actions |
Backgrounds
 Gray Dark |  Gray Light |  Gray Medium |  Gray Ultra Dark |  Gray Ultra Light |  White |
|---|---|---|---|---|---|
#777777 | #E0E0E0 | #A0A0A0 | #333333 | #F2F2F2 | #FFFFFF |
rgb(119, 119, 119) | rgb(224, 224, 224) | rgb(160, 160, 160) | rgb(51, 51, 51) | rgb(242, 242, 242) | rgb(255, 255, 255) |
| Disabled statuses, secondary body text | 1px line borders, action bar icons | Muted or deceased contacts, cleared messages | Overdue, unmet, error, delete, failed, denied actions | App background, list and dropdown highlights | Form background |
For more information on how these colors are applied in the app, see the color variables file.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.
Last modified 28.01.2025: fix(#1751): fix 404 links (#1752) (48af56df)