Colors

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

Icon for hero-colors

Primary Colors

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

Blue - lighter
Value: #5781b2Blend: normalSass: $color-primary-blue-lighter
Green
Value: #39b725Blend: normalSass: $color-primary-green
Blue - darker
Value: #2b3e54Blend: normalSass: $color-primary-blue-darker

Secondary Colors

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

Purple - lighter
Value: #7158ddBlend: normalSass: $color-secondary-purple-lighter
Purple
Value: #4c34b6Blend: normalSass: $color-secondary-purple
Purple - darker
Value: #3b2794Blend: normalSass: $color-secondary-purple-darker
Blue - lighter
Value: #75c9e3Blend: normalSass: $color-secondary-blue-lighter
Blue
Value: #56b4d1Blend: normalSass: $color-secondary-blue
Blue - darker
Value: #56b4d1Blend: normalSass: $color-secondary-blue-darker

Extra Colors

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

Info
Value: #307abfBlend: normalSass: $color-extra-info
Success
Value: #198754Blend: normalSass: $color-extra-success
Info - darker
Value: #286aa7Blend: normalSass: $color-extra-info-darker
Info - lighter
Value: #4a98e0Blend: normalSass: $color-extra-info-lighter
Success - darker
Value: #167b4cBlend: normalSass: $color-extra-success-darker
Success - lighter
Value: #2fa870Blend: normalSass: $color-extra-success-lighter
Warning
Value: #ffc107Blend: normalSass: $color-extra-warning
Warning - darker
Value: #e0aa09Blend: normalSass: $color-extra-warning-darker
Warning - lighter
Value: #ffce39Blend: normalSass: $color-extra-warning-lighter
Danger
Value: #d01a92Blend: normalSass: $color-extra-danger
Danger - darker
Value: #9e146fBlend: normalSass: $color-extra-danger-darker
Danger - lighter
Value: #e52ca6Blend: normalSass: $color-extra-danger-lighter

Border Colors

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

Gradient test
Value: linear-gradient(180deg, rgba(194, 37, 94) 0%, rgba(27, 172, 204) 100%), #d9d9d9Blend: normal, normalSass: $color-border-gradient-test
Dark
Value: #b3b3b3Blend: normalSass: $color-border-dark
Darker
Value: #929292Blend: normalSass: $color-border-darker
Darkest
Value: rgba(0, 0, 0, 0.6)Blend: normalSass: $color-border-darkest
Invert
Value: rgba(200.00000327825546, 200.00000327825546, 200.00000327825546, 0.2)Blend: normalSass: $color-border-invert
Light
Value: rgba(200.00000327825546, 200.00000327825546, 200.00000327825546, 0.4)Blend: normalSass: $color-border-light
Lighter
Value: rgba(255, 255, 255, 0.4)Blend: normalSass: $color-border-lighter
Lightest
Value: rgba(255, 255, 255, 0.75)Blend: normalSass: $color-border-lightest
Base
Value: #e8e8e8Blend: normalSass: $color-border-base

Neutral Colors

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

White
Value: #ffffffBlend: normalSass: $color-neutral-white
Gray 100
Value: #f8f8f8Blend: normalSass: $color-neutral-gray-100
Gray 200
Value: #e5e5e5Blend: normalSass: $color-neutral-gray-200
Gray 300
Value: #ccccccBlend: normalSass: $color-neutral-gray-300
Gray 400
Value: #aaaaaaBlend: normalSass: $color-neutral-gray-400
Gray 500
Value: #888888Blend: normalSass: $color-neutral-gray-500
Gray 600
Value: #6e6e6eBlend: normalSass: $color-neutral-gray-600
Gray 700
Value: #555555Blend: normalSass: $color-neutral-gray-700
Gray 800
Value: #333333Blend: normalSass: $color-neutral-gray-800
Gray 900
Value: #191919Blend: normalSass: $color-neutral-gray-900
Black
Value: #000000Blend: normalSass: $color-neutral-black
Transparent
Value: rgba(0, 0, 0, 0)Blend: normalSass: $color-neutral-transparent

Tertiary Colors

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

Salmon
Value: #df402fBlend: normalSass: $color-tertiary-salmon
Salmon - lighter
Value: #ff4e3bBlend: normalSass: $color-tertiary-salmon-lighter
Salmon - darker
Value: #c22817Blend: normalSass: $color-tertiary-salmon-darker

Text Colors

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

Hard
Value: #000000Blend: normalSass: $color-text-hard
Base
Value: rgba(0, 0, 0, 0.8)Blend: normalSass: $color-text-base
Soft
Value: #555555Blend: normalSass: $color-text-soft
Muted
Value: #777777Blend: normalSass: $color-text-muted
Hard [invert]
Value: #ffffffBlend: normalSass: $color-text-hard-invert
Base [invert]
Value: rgba(255, 255, 255, 0.85)Blend: normalSass: $color-text-base-invert
Soft [invert]
Value: rgba(255, 255, 255, 0.65)Blend: normalSass: $color-text-soft-invert
Muted [invert]
Value: rgba(255, 255, 255, 0.45)Blend: normalSass: $color-text-muted-invert