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

#3B6E8F

rgba(59, 110, 143, 1.0)

$cr-blue-dark

#2B5169

rgba(43, 81, 105, 1.0)

$cr-blue-light

#A5BDCC

rgba(165, 189, 204, 1.0)

$cr-blue-lighter

#DBE4EA

rgba(219, 228, 234, 1.0)

$cr-cyan

#0095D9

rgba(0, 149, 217, 1.0)

$cr-cyan-dark

#006D9E

rgba(0, 109, 158, 1.0)

$cr-cyan-light

#8BCEED

rgba(139, 206, 237, 1.0)

$cr-cyan-lighter

#D8EBF8

rgba(208, 235, 248, 1.0)

$cr-teal

#57AFA9

rgba(87, 175, 169, 1.0)

$cr-teal-dark

#41807B

rgba(65, 128, 123, 1.0)

$cr-teal-light

#B3DAD7

rgba(179, 218, 215, 1.0)

$cr-teal-lighter

#E0F0EF

rgba(224, 240, 239, 1.0)

$cr-orange

#C05C04

rgba(192, 92, 4, 1.0)

$cr-orange-dark

#8C4303

rgba(140, 67, 3, 1.0)

$cr-orange-light

#E2B48C

rgba(226, 180, 140, 1.0)

$cr-orange-lighter

#F3E1D1

rgba(243, 225, 209, 1.0)

$cr-gold

#E09E06

rgba(224, 158, 6, 1.0)

$cr-gold-dark

#A37304

rgba(163, 115, 4, 1.0)

$cr-gold-light

#F0D28C

rgba(240, 210, 140, 1.0)

$cr-gold-lighter

#F9EDD1

rgba(249, 237, 209, 1.0)

$cr-gray-darker

#151515

rgba(21, 21, 21, 1.0)

$cr-gray-dark

#4D4D4D

rgba(77, 77, 77, 1.0)

$cr-gray

#737373

rgba(115, 115, 115, 1.0)

$cr-gray-light

#979797

rgba(151, 151, 151, 1.0)

$cr-gray-lighter

#E7E7E7

rgba(231, 231, 231, 1.0)

$cr-black

#000000

rgba(0, 0, 0, 1.0)

$cr-white

#FFFFFF

rgba(255, 255, 255, 1.0)