Colors

Primary color is $blue. It is mostly used for text, but also some background elements images.

Color for anchors is $link-color.

Try to use very light background colors such as $white or $gray-100. You can use box-shadows such as $box-shadow-sm on a component if the component and background both have $white as a background-color.

$blue

$black

$gray-900

$gray-800

$gray-700

$gray-600

$gray-500

$gray-400

$gray-300

$gray-200

$gray-100

$white

There are also secondary colors to use whenwe want to highlight something special or different. Not to overruse.

$c-color-blue-5

$c-color-blue-4

$c-color-blue-3

$c-color-blue-2

$c-color-green-5

$c-color-green-4

$c-color-green-3

$c-color-green-2

$c-color-yellow-5

$c-color-yellow-4

$c-color-yellow-3

$c-color-yellow-2

$c-color-red-5

$c-color-red-4

$c-color-red-3

$c-color-red-2