Colors
Use color for communication over decoration. Use of color should be purposeful, accessible, and help focus attention to what matters most.
On this page
Colors for Communication
We strive to establish recognizable patterns to guide users through the UI. CommCare uses similar palettes on both the mobile and server side.
When combining colors, use light text on a dark or medium background
and dark text on a light background. We make use of Bootstrap 5's
$min-contrast-ratio setting at a value of
3 to automatically determine when to show dark or light text on a background when using
the text-bg-<$color> class on an element.
As described in Accessibility, many people are affected by various types of color blindness. It is important to make sure that colors are never the source of critical information. Also, when colors are used to compare information (legend of a bar or line chart) it is important that the colors used can be differentiated by people with each type of color blindness, and when color separation is not easily possible, distinguishable patterns are used in their place.
Interaction and Attention
Note: The subtle shades provided are present so that hex values of "subtle" colors are easily accessible for design purposes. These lighter subtle colors are intended to be coupled with darker text on top and are used as default backgrounds for Molecules like Alerts.
Call to Action
Referred to as 'CommCare Blue'. Use for buttons, checkmarks, radio buttons or actionable primary icons. Links are a slightly darkened shade of this color ($blue-600) to improve contrast.
Download / Upload
Used typically for buttons indicating a download or upload action. Corresponds with 'info' classes
Success
Use when an action has been completed successfully, primarily for messaging. Rarely used for interactive elements like buttons.
Attention
Use for warning-level information, less severe than an error but still in need of attention.
Error, Negative Attention
Use to highlight an error, something negative or a critical risk. Use as text, highlights, banners or destructive buttons.
Neutral Colors, Text and Backgrounds
Text
Used for the main text color.
Neutral
Use for neutral visual indicators, typically borders or backgrounds.
Background
Used for backgrounds that are light but distinct from the default white background, such as cards.
Colors for Design
Sometimes there is a need for additional colors when designing a new component which don't fall into any
of the communication categories above. The simple requirement is a color that meets our branding requirements.
For this we have several theme colors accessible through SCSS variables that follow
the Dimagi brand guidelines and Bootstrap 5 shading rules.
CommCare Blue aka Blue
The CommCare "cornflower blue" is what's applied to the $primary, and therefore $blue
or $blue-500 shade. Below are approved gradations from light to dark based on this color.
Gray
While $dark, $secondary, and $light are the preferred shades
of gray for the theme, it is also possible to choose additional shades listed below.
Dimagi Gradient
Dimagi's branding has a gradient of color going from $dimagi-indigo (aka $indigo)
to $dimagi-mango (aka $orange).
We sliced this gradient into 25% intervals due to a decent contrast ratio of colors between intervals.
However, since $orange often has an emotional conection between danger and warning, we leave that
out of the usable "design" colors, preferring to include shades from $indigo to $salmon.
Gradient Shades
Below are the above four design-friendly gradient colors divided further into Bootstrap 5 interval shades,
where the $*-500 color is equivalent to the main color listed above.
Dimagi Palette
Below are the six colors named in the Dimagi color palette. The ones in use by our theme are marked.
However, since $dimagi-deep-purple feels very similar to $indigo-800 and
$dimagi-sky similar to $blue-400, we prefer to avoid use of those colors.