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.

PE Green
Value: #005646Blend: normalSass: $color-primary-pe-green
PE Green - lighter
Value: #276656Blend: normalSass: $color-primary-pe-green-lighter
PE Green - darker
Value: #004a3cBlend: normalSass: $color-primary-pe-green-darker

Secondary Colors

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

Green
Value: #0b866eBlend: normalSass: $color-secondary-green
Green - lighter
Value: #37927bBlend: normalSass: $color-secondary-green-lighter
Green - darker
Value: #08745fBlend: normalSass: $color-secondary-green-darker
Light Green
Value: #7ecbb6Blend: normalSass: $color-secondary-light-green
Light Green - lighter
Value: #8cd0bdBlend: normalSass: $color-secondary-light-green-lighter
Light Green - darker
Value: #6db09eBlend: normalSass: $color-secondary-light-green-darker
Blue
Value: #003663Blend: normalSass: $color-secondary-blue
Blue - lighter
Value: #1e4972Blend: normalSass: $color-secondary-blue-lighter
Blue - darker
Value: #002e55Blend: normalSass: $color-secondary-blue-darker
Light Blue
Value: #d1ebffBlend: normalSass: $color-secondary-light-blue
Light Blue - lighter
Value: #daefffBlend: normalSass: $color-secondary-light-blue-lighter
Light Blue - darker
Value: #b5ccdeBlend: normalSass: $color-secondary-light-blue-darker
Yellow
Value: #e6da00Blend: normalSass: $color-secondary-yellow
Yellow - lighter
Value: #e8de44Blend: normalSass: $color-secondary-yellow-lighter
Yellow - darker
Value: #c8bd00Blend: normalSass: $color-secondary-yellow-darker
Light Yellow
Value: #fff299Blend: normalSass: $color-secondary-light-yellow
Light Yellow - lighter
Value: #fff5afBlend: normalSass: $color-secondary-light-yellow-lighter
Light Yellow - darker
Value: #ded284Blend: normalSass: $color-secondary-light-yellow-darker

Extra Colors

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

Info
Value: #4e5ed8Blend: normalSass: $color-extra-info
Info - lighter
Value: #5d70ddBlend: normalSass: $color-extra-info-lighter
Info - darker
Value: #4351bcBlend: normalSass: $color-extra-info-darker
Success
Value: #0b866eBlend: normalSass: $color-extra-success
Success - lighter
Value: #37927bBlend: normalSass: $color-extra-success-lighter
Success - darker
Value: #08745fBlend: normalSass: $color-extra-success-darker
Warning
Value: #e6da00Blend: normalSass: $color-extra-warning
Warning - lighter
Value: #e8de44Blend: normalSass: $color-extra-warning-lighter
Warning - darker
Value: #c8bd00Blend: normalSass: $color-extra-warning-darker
Danger
Value: #dc3545Blend: normalSass: $color-extra-danger
Danger - lighter
Value: #f35d6cBlend: normalSass: $color-extra-danger-lighter
Danger - darker
Value: #c32b3aBlend: normalSass: $color-extra-danger-darker

Colors

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

Transparent
Value: rgba(0, 0, 0, 0)Blend: normalSass: $color--transparent

Border Colors

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

Base
Value: rgba(100.00000163912773, 100.00000163912773, 100.00000163912773, 0.15)Blend: normalSass: $color-border-base
Dark
Value: rgba(100.00000163912773, 100.00000163912773, 100.00000163912773, 0.3)Blend: normalSass: $color-border-dark
Darker
Value: rgba(0, 0, 0, 0.3)Blend: 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: #919195Blend: normalSass: $color-neutral-gray-500
Gray 550
Value: #767676Blend: normalSass: $color-neutral-gray-550
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

Tertiary Colors

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

Purple
Value: #3d1063Blend: normalSass: $color-tertiary-purple
Light Purple
Value: #b0a6d2Blend: normalSass: $color-tertiary-light-purple
Light Blue
Value: #1283c6Blend: normalSass: $color-tertiary-light-blue
Red
Value: #811235Blend: normalSass: $color-tertiary-red

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