Color
Chi colors are designed to comply with U.S. Section 508 federal requirements. Section 508 follows the Web Content Accessibility Guidelines (WCAG 2.0) Level AA standards which require text and background color contrast ratios of 4.5:1 or higher. All Chi colors either meet (AA) or exceed (AAA) these standards and have been marked below accordingly.
Brand
Primary Accent
#0047BB
Secondary Accent
#48D597
Supporting Colors
#000000
#001E60
#53565A
#FFFFFF
Neutral
Neutral palette is an extension of CenturyLink Brand's Dark Grey swatch (Grey 70).
#000000
Used to brand business and corporate content (mastheads, heroes, etc.).
#242526
Used for primary text color on white and low-contrast backgrounds on black.
#313336
Used for low-contrast borders on black and medium-contrast backgrounds on black.
#3F4145
Used for medium-contrast borders on black and high-contrast backgrounds on black.
#53565A
Used for secondary text on white and high-contrast borders on black.
#72767A
Used for muted or disabled text and icons on white.
#8E9399
Used for muted or disabled text and icons on black.
#ACB0B5
Used for high-contrast borders on white.
#D0D4D9
Used for medium-contrast borders on white.
#EDF0F2
Used for low-contrast borders and medium-contrast backgrounds on white.
#F8F9F9
Used for low-contrast backgrounds on white.
#FFFFFF
Used as body background color and primary text color on black.
Semantic
Use semantic colors to communicate meaning to users. Examples include displaying alerts, form field validation, user status, application state and more. Use mint (success) for positive, blue (info) for informative, red (danger) for negative, and yellow (warning) for needs attention. Semantic colors should never be used for decorative purposes.
Text
Use to color semantic text in all components.
#007E46
#0060FA
#D81820
#A15C00
Icons, Borders
Use to color semantic icons and semantic accent borders in all components.
#009E5C
#2580FF
#F0363C
#CA7300
Borders
Use for low-contrast borders such as highlighting semantic messaging in an Alert or Card.
#ABE0C9
#C0D7FA
#FCC7C9
#F5CC93
Backgrounds
Use for low-contrast backgrounds such as highlighting semantic messaging in an Alert or Card.
#DAF5E9
#E6F0FF
#FCE8E9
#FAECD9
Backgrounds
Use for subtle, low-contrast backgrounds such as a highlighting rows in a Table or lines in a Diff.
#EDFAF3
#F5F8FC
#FFF5F5
#FFF8ED