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
Use for main actions like primary buttons, links, hover, and active.
Text , Links, Buttons and Backgrounds Palette
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
Use the red palette to draw attention critical errors and messaging. Seeing this color can be stressful for users. Use sparingly.
Use the yellow palette for warnings or to draw draw attention to content that requires action, but is low priority.
Use the green palette for positive messaging including success or confirmation events.
Use the purple palette for information, help and news.