Color Palette

A consistent color palette is an essential asset in any design system.

Colors purposefully communicates how things function in the interface. This helps to create visual patterns that can make interacting with our apps easier and more predictable for care teams.

When color is applied it should have a purpose and be meaningful in context of the content. Color should support the hierarchy of the page and bring importance to what needs attention within the page.

Main Actions Palette

#2072BE
#2072BE
#2E82D0
#2E82D0
#3C90DD
#3C90DD
#4E9BE1
#4E9BE1
#65AAEA
#65AAEA
#8FC3F4
#8FC3F4

Use for main actions like primary buttons, links, hover, and active.


Text , Links, Buttons and Backgrounds Palette

#1C1C2B
#1C1C2B
#44444F
#44444F
#92929D
#92929D
#B7B7C1
#B7B7C1
#B7B7C1
#E2E2EA
#F1F1F5
#F1F1F5
#FFFFFF
#FFFFFF

Use for text styling, links, buttons and backgrounds

  • Default active text color #1C1C2B
  • Lighter active text color #44444F
  • Use for empty states or zero results #92929D
  • Use for disabled links/buttons #B7B7C1
  • For backgrounds use #E2E2EA, #F1F1F5, #FAFAFB
  • For white use #FFFFFF

Red Palette

#891818
#891818
#9B2424
#9B2424
#B73232
#B73232
#CA3E3E
#CA3E3E
#E26B6B
#E26B6B
#E7AEAE
#E7AEAE

Use the red palette to draw attention critical errors and messaging. Seeing this color can be stressful for users. Use sparingly.


Yellow Palette

#CC8E17
#CC8E17
#E3A428
#E3A428
#EFB138
#EFB138
#F2BF5B
#F2BF5B
#F9CB72
#F9CB72
#FDDA98
#FDDA98

Use the yellow palette for warnings or to draw draw attention to content that requires action, but is low priority.


Green Palette

#33946B
#33946B
#3FA077
#3FA077
#47A77F
#47A77F
#4FB188
#4FB188
#5EC399
#5EC399
#8BDBB9
#8BDBB9

Use the green palette for positive messaging including success or confirmation events.


Purple Palette

#4D1FAF
#4D1FAF
#602FC7
#602FC7
#6F3FD7
#6F3FD7
#7C4CE2
#7C4CE2
#8F60F1
#8F60F1
#B392F9
#B392F9

Use the purple palette for information, help and news.


Color Application Guidelines

Actions

Primary
#2072BE
Secondary
#E0E0E0
Confirm/Success
#47A77F
Warning
#EFB138
Remove/Delete
#D73030
Info/Help/News
#8F60F1

Messages

Success
#47A77F
Warning
#EFB138
Error
#D73030