Colors

Color system built out of main brand colors and adjusted for variety of interfaces.

Primary Colors

Colors that are used most frequently across all pages and components.

Blue
HEX: #0073e6RGBa: 0,45,90,1Sass: $color-primary-blue
Blue - darker
HEX: #0f69c1RGBa: 6,41,75,1Sass: $color-primary-blue--darker
Blue - lighter
HEX: #258cf2RGBa: 14,54,94,1Sass: $color-primary-blue--lighter

Secondary Colors

Colors that are used most frequently across all pages and components.

Purple
HEX: #4c34b6RGBa: 29,20,71,1Sass: $color-secondary-purple
Purple - darker
HEX: #3b2794RGBa: 23,15,57,1Sass: $color-secondary-purple--darker
Purple - lighter
HEX: #7158ddRGBa: 44,34,86,1Sass: $color-secondary-purple--lighter
Blue
HEX: #134872RGBa: 7,28,44,1Sass: $color-secondary-blue
Blue - darker
HEX: #103e62RGBa: 6,24,38,1Sass: $color-secondary-blue--darker
Blue - lighter
HEX: #2e6a99RGBa: 18,41,60,1Sass: $color-secondary-blue--lighter

Extra Colors

Colors that are used most frequently across all pages and components.

Info
HEX: #307abfRGBa: 18,47,74,1Sass: $color-extra-info
Success
HEX: #198754RGBa: 9,52,32,1Sass: $color-extra-success
Info - darker
HEX: #286aa7RGBa: 15,41,65,1Sass: $color-extra-info--darker
Info - lighter
HEX: #4a98e0RGBa: 28,59,87,1Sass: $color-extra-info--lighter
Success - darker
HEX: #167b4cRGBa: 8,48,29,1Sass: $color-extra-success--darker
Success - lighter
HEX: #2fa870RGBa: 18,65,43,1Sass: $color-extra-success--lighter
Warning
HEX: #ffc107RGBa: 100,75,2,1Sass: $color-extra-warning
Warning - darker
HEX: #e0aa09RGBa: 87,66,3,1Sass: $color-extra-warning--darker
Warning - lighter
HEX: #ffce39RGBa: 100,80,22,1Sass: $color-extra-warning--lighter
Danger
HEX: #dc3545RGBa: 86,20,27,1Sass: $color-extra-danger
Danger - darker
HEX: #c32b3aRGBa: 76,16,22,1Sass: $color-extra-danger--darker
Danger - lighter
HEX: #f35d6cRGBa: 95,36,42,1Sass: $color-extra-danger--lighter

Border Colors

Colors that are used most frequently across all pages and components.

Gradient test
HEX: #d9d9d9RGBa: 85,85,85,1Sass: $color-border-gradient-test
Dark
HEX: #b3b3b3RGBa: 70,70,70,1Sass: $color-border-dark
Darker
HEX: #929292RGBa: 57,57,57,1Sass: $color-border-darker
Darkest
HEX: #000000RGBa: 0,0,0,1Sass: $color-border-darkest
Invert
HEX: #c8c8c8RGBa: 78,78,78,1Sass: $color-border-invert
Light
HEX: #c8c8c8RGBa: 78,78,78,1Sass: $color-border-light
Lighter
HEX: #ffffffRGBa: 100,100,100,1Sass: $color-border-lighter
Lightest
HEX: #ffffffRGBa: 100,100,100,1Sass: $color-border-lightest
Base
HEX: #e8e8e8RGBa: 90,90,90,1Sass: $color-border-base

Neutral Colors

Colors that are used most frequently across all pages and components.

White
HEX: #ffffffRGBa: 100,100,100,1Sass: $color-neutral-white
Gray 100
HEX: #f8f8f8RGBa: 97,97,97,1Sass: $color-neutral-gray-100
Gray 200
HEX: #e5e5e5RGBa: 89,89,89,1Sass: $color-neutral-gray-200
Gray 300
HEX: #ccccccRGBa: 80,80,80,1Sass: $color-neutral-gray-300
Gray 400
HEX: #aaaaaaRGBa: 66,66,66,1Sass: $color-neutral-gray-400
Gray 500
HEX: #888888RGBa: 53,53,53,1Sass: $color-neutral-gray-500
Gray 600
HEX: #6e6e6eRGBa: 43,43,43,1Sass: $color-neutral-gray-600
Gray 700
HEX: #555555RGBa: 33,33,33,1Sass: $color-neutral-gray-700
Gray 800
HEX: #333333RGBa: 20,20,20,1Sass: $color-neutral-gray-800
Gray 900
HEX: #191919RGBa: 9,9,9,1Sass: $color-neutral-gray-900
Black
HEX: #000000RGBa: 0,0,0,1Sass: $color-neutral-black
Transparent
HEX: #000000RGBa: 0,0,0,1Sass: $color-neutral-transparent

Text Colors

Colors that are used most frequently across all pages and components.

Hard
HEX: #000000RGBa: 0,0,0,1Sass: $color-text-hard
Base
HEX: #000000RGBa: 0,0,0,1Sass: $color-text-base
Soft
HEX: #555555RGBa: 33,33,33,1Sass: $color-text-soft
Muted
HEX: #777777RGBa: 46,46,46,1Sass: $color-text-muted
Hard [invert]
HEX: #ffffffRGBa: 100,100,100,1Sass: $color-text-hard-invert-
Base [invert]
HEX: #ffffffRGBa: 100,100,100,1Sass: $color-text-base-invert-
Soft [invert]
HEX: #ffffffRGBa: 100,100,100,1Sass: $color-text-soft-invert-
Muted [invert]
HEX: #ffffffRGBa: 100,100,100,1Sass: $color-text-muted-invert-