Colors - Swatches | Crossroads Digital Design Kit

UI Components / Colors

When referencing color in your stylesheet overrides, please ensure you're using one of the following variables. These values provide the core color palette for Crossroads' brand identity and have been used to override the Bootstrap defaults, where noted below.

$cr-blue

#253746

rgba(37, 55, 70, 1.0)

$cr-blue-dark

#102230

rgba(16, 34, 48, 1.0)

$cr-blue-lighter

#DBE4EA

rgba(219, 228, 234, 1.0)

$cr-orange

#FF8200

rgba(255, 130, 0, 1.0)

$cr-orange-dark

#BB4900

rgba(187, 73, 0, 1.0)

$cr-tan

#D8CFB9

rgba(216, 207, 185, 1.0)

$cr-tan-light

#E7E2D0

rgba(231, 226, 208, 1.0)

$cr-gray-darkest

#212120

rgba(33, 33, 32, 1)

$cr-gray-darker

#4A4948

rgba(74, 73, 72, 1)

$cr-gray-dark

#575654

rgba(87, 86, 84, 1.0)

$cr-gray

#6E6D6B

rgba(110, 109, 107, 1)

$cr-gray-light

#82817F

rgba(130, 129, 127, 1)

$cr-gray-lighter

#969592

rgba(150, 149, 146, 1)

$cr-gray-lightest

#EBE9E4

rgba(235, 233, 228, 1)

$cr-black

#000000

rgba(0, 0, 0, 1.0)

$cr-white

#FFFFFF

rgba(255, 255, 255, 1.0)