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.

EAP Red
Value: #ee202eBlend: normalSass: $color-primary-eap-red
EAP Red - darker
Value: #aa212aBlend: normalSass: $color-primary-eap-red-darker
EA Red Compliant
Value: #e3202dBlend: normalSass: $color-primary-ea-red-compliant

Secondary Colors

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

EA Gray
Value: #54575aBlend: normalSass: $color-secondary-ea-gray
Purple - darker
Value: #3b2794Blend: normalSass: $color-secondary-purple-darker
Purple - lighter
Value: #7158ddBlend: normalSass: $color-secondary-purple-lighter
Blue - darker
Value: #103e62Blend: normalSass: $color-secondary-blue-darker
Blue - lighter
Value: #2e6a99Blend: normalSass: $color-secondary-blue-lighter
Red Light
Value: #fff3f3Blend: normalSass: $color-secondary-red-light
EA+ Yellow
Value: #efe373Blend: normalSass: $color-secondary-ea-yellow

Extra Colors

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

Info
Value: #307abfBlend: normalSass: $color-extra-info
Info - darker
Value: #286aa7Blend: normalSass: $color-extra-info-darker
Info - lighter
Value: #4a98e0Blend: normalSass: $color-extra-info-lighter
Success
Value: #198754Blend: normalSass: $color-extra-success
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: #e2e2e2Blend: normalSass: $color-border-base
Dark
Value: #e0e0e0Blend: normalSass: $color-border-dark

Neutral Colors

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

Transparent
Value: rgba(0, 0, 0, 0)Blend: normalSass: $color-neutral-transparent
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 850
Value: #27282cBlend: normalSass: $color-neutral-gray-850
Gray 900
Value: #191919Blend: normalSass: $color-neutral-gray-900
Black
Value: #000000Blend: normalSass: $color-neutral-black

Text Colors

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

Hard
Value: #000000Blend: normalSass: $color-text-hard
Base
Value: #333333Blend: normalSass: $color-text-base
Soft
Value: #505050Blend: normalSass: $color-text-soft
Muted
Value: #767676Blend: 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