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.

Cobalt Blue
Value: #192e91Blend: normalSass: $color-primary-cobalt-blue
Cement
Value: #eeede8Blend: normalSass: $color-primary-cement

Secondary Colors

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

Asphalt
Value: #232323Blend: normalSass: $color-secondary-asphalt
Slate
Value: #74757dBlend: normalSass: $color-secondary-slate
Azure
Value: #192ef9Blend: normalSass: $color-secondary-azure
Purple
Value: #4c34b6Blend: normalSass: $color-secondary-purple
Purple - darker
Value: #3b2794Blend: normalSass: $color-secondary-purple-darker
Purple - lighter
Value: #7158ddBlend: normalSass: $color-secondary-purple-lighter
Blue
Value: #134872Blend: normalSass: $color-secondary-blue
Blue - darker
Value: #103e62Blend: normalSass: $color-secondary-blue-darker
Blue - lighter
Value: #2e6a99Blend: normalSass: $color-secondary-blue-lighter

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: #dc3545Blend: normalSass: $color-extra-danger
Danger - darker
Value: #c32b3aBlend: normalSass: $color-extra-danger-darker
Danger - lighter
Value: #f35d6cBlend: normalSass: $color-extra-danger-lighter

Border Colors

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

Base
Value: #e8e8e8Blend: normalSass: $color-border-base
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

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

Text Colors

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

Hard
Value: #232323Blend: normalSass: $color-text-hard
Base
Value: #232323Blend: normalSass: $color-text-base
Soft
Value: #74757dBlend: 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