The color system is designed to be clear, accessible, consistent, and to reinforce the BSC brand.

For more information about color accessibility, refer to Anatomy.

Do not mix the colors from this palette with the legacy colors on the same page or even in the same site section.

Style naming

We follow a consistent naming logic for style options within the core components.

  • Default — this is the most used color for that component
  • Accent — this is the style that uses an accent color to emphasize the component
  • Assertive — this is the style that emphasizes the component
  • Subtle — this is the style that de-emphasizes the component

Color ranges

Refer to the Color range section in Anatomy.

Gradients

Refer to the Gradient section in Anatomy.