Colors

Primary colors

These are our primary brand colors that should be used the majority of the time in branded assets.

Secondary colors

The secondary colors are used to complement the primary colors. They should be used in conjunction with the primary colors, but should not overpower or distort the color perception of the brand — which is Green.

Monochromatic colors

The monochromatic palette is used to define text and background colors.

Implementation and SASS example

Each color has its own shading between 100-900. The 500 color is the main and default color to use in elements/assets. The remaining shades (100, 200, etc.) must be used as accent colors.

When defining color variables, use the variable names starting with bc- as prefix, which stands for "brand color". This will improve consistency across products. Or simply download the colors stylesheet from our repository.

Example of usage:

Let's say we are creating a new primary button that requires darker borders. We should use the 500 shade of the "Green" color for the background, and the shade 700 of the same color for the borders:

.btn-primary{
  background: $bc-green-500;
  border: 1px solid $bc-green-700;
}