Primary Colors
Colors that are used most frequently across all pages and components.
GCX Blue
Value: #003da5Blend: normalSass: $color-primary-gcx-blueWhite
Value: rgba(255, 255, 255, 0.961)Blend: normalSass: $color-primary-white
Colors
Color system built out of main brand colors and adjusted for variety of interfaces.
Secondary Colors
Colors that are used most frequently across all pages and components.
Light Blue
Value: #66c8eeBlend: normalSass: $color-secondary-light-blueGold
Value: #faa61aBlend: normalSass: $color-secondary-goldExtra Colors
Colors that are used most frequently across all pages and components.
Info
Value: #5bc0deBlend: normalSass: $color-extra-infoInfo - lighter
Value: #4a98e0Blend: normalSass: $color-extra-info-lighterInfo - darker
Value: #41b6d9Blend: normalSass: $color-extra-info-darkerSuccess
Value: #779744Blend: normalSass: $color-extra-successSuccess - lighter
Value: #779744Blend: normalSass: $color-extra-success-lighterSuccess - darker
Value: #617c38Blend: normalSass: $color-extra-success-darkerWarning
Value: #f0ad4eBlend: normalSass: $color-extra-warningWarning - lighter
Value: #ffce39Blend: normalSass: $color-extra-warning-lighterWarning - darker
Value: #e0aa09Blend: normalSass: $color-extra-warning-darkerDanger
Value: #d95345Blend: normalSass: $color-extra-dangerDanger - lighter
Value: #f35d6cBlend: normalSass: $color-extra-danger-lighterDanger - darker
Value: #c32b3aBlend: normalSass: $color-extra-danger-darkerBorder Colors
Colors that are used most frequently across all pages and components.
Dark
Value: #b3b3b3Blend: normalSass: $color-border-darkDarkest
Value: rgba(0, 0, 0, 0.6)Blend: normalSass: $color-border-darkestInvert
Value: rgba(200.00000327825546, 200.00000327825546, 200.00000327825546, 0.2)Blend: normalSass: $color-border-invertLight
Value: rgba(200.00000327825546, 200.00000327825546, 200.00000327825546, 0.4)Blend: normalSass: $color-border-lightLighter
Value: rgba(255, 255, 255, 0.4)Blend: normalSass: $color-border-lighterLightest
Value: rgba(255, 255, 255, 0.75)Blend: normalSass: $color-border-lightestBase
Value: #e8e8e8Blend: normalSass: $color-border-baseBorder- Colors
Colors that are used most frequently across all pages and components.
Darker
Value: #929292Blend: normalSass: $color-border---darkerNeutral Colors
Colors that are used most frequently across all pages and components.
White
Value: #ffffffBlend: normalSass: $color-neutral-whiteGray 100
Value: #f8f8f8Blend: normalSass: $color-neutral-gray-100Gray 200
Value: #e5e5e5Blend: normalSass: $color-neutral-gray-200Gray 300
Value: #ccccccBlend: normalSass: $color-neutral-gray-300Gray 400
Value: #aaaaaaBlend: normalSass: $color-neutral-gray-400Gray 500
Value: #888888Blend: normalSass: $color-neutral-gray-500Gray 600
Value: #6e6e6eBlend: normalSass: $color-neutral-gray-600Gray 700
Value: #555555Blend: normalSass: $color-neutral-gray-700Gray 800
Value: #333333Blend: normalSass: $color-neutral-gray-800Gray 900
Value: #191919Blend: normalSass: $color-neutral-gray-900Black
Value: #000000Blend: normalSass: $color-neutral-blackTransparent
Value: rgba(0, 0, 0, 0)Blend: normalSass: $color-neutral-transparentText Colors
Colors that are used most frequently across all pages and components.
Base
Value: rgba(0, 0, 0, 0.8)Blend: normalSass: $color-text-baseHard
Value: #000000Blend: normalSass: $color-text-hardMuted
Value: #777777Blend: normalSass: $color-text-mutedMuted [invert]
Value: rgba(255, 255, 255, 0.45)Blend: normalSass: $color-text-muted-invertText- Colors
Colors that are used most frequently across all pages and components.
Soft
Value: #555555Blend: normalSass: $color-text---softHard [invert]
Value: #ffffffBlend: normalSass: $color-text---hard-invertBase [invert]
Value: rgba(255, 255, 255, 0.85)Blend: normalSass: $color-text---base-invertSoft [invert]
Value: rgba(255, 255, 255, 0.65)Blend: normalSass: $color-text---soft-invertTooltip Colors
Colors that are used most frequently across all pages and components.
Green
Value: #63b567Blend: normalSass: $color-tooltip-greenWarning
Value: #f0ad4eBlend: normalSass: $color-tooltip-warningLt. Orange
Value: #f0ad4eBlend: normalSass: $color-tooltip-lt-orangeOrange
Value: #d97039Blend: normalSass: $color-tooltip-orangeDanger
Value: #d9534fBlend: normalSass: $color-tooltip-dangerMedium Blue
Value: #006fb8Blend: normalSass: $color-tooltip-medium-blueBlue
Value: #67c8efBlend: normalSass: $color-tooltip-bluePrimary
Value: #003e69Blend: normalSass: $color-tooltip-primaryPurple
Value: #61599bBlend: normalSass: $color-tooltip-purpleMagenta
Value: #88336cBlend: normalSass: $color-tooltip-magentaDk. Red
Value: #9d2121Blend: normalSass: $color-tooltip-dk-red