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

Blue 70

#0047BB

Secondary Accent

Mint 40

#48D597

Supporting Colors

Black

#000000

Blue 90

#001E60

Grey 70

#53565A

White

#FFFFFF

Neutral

Neutral palette is an extension of CenturyLink Brand's Dark Grey swatch (Grey 70).

Black

#000000

Used to brand business and corporate content (mastheads, heroes, etc.).

Grey 100

#242526

Used for primary text color on white and low-contrast backgrounds on black.

Grey 90

#313336

Used for low-contrast borders on black and medium-contrast backgrounds on black.

Grey 80

#3F4145

Used for medium-contrast borders on black and high-contrast backgrounds on black.

Grey 70

#53565A

Used for secondary text on white and high-contrast borders on black.

Grey 60

#72767A

Used for muted or disabled text and icons on white.

Grey 50

#8E9399

Used for muted or disabled text and icons on black.

Grey 40

#ACB0B5

Used for high-contrast borders on white.

Grey 30

#D0D4D9

Used for medium-contrast borders on white.

Grey 20

#EDF0F2

Used for low-contrast borders and medium-contrast backgrounds on white.

Grey 10

#F8F9F9

Used for low-contrast backgrounds on white.

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.

Mint 60

#007E46

Blue 60

#0060FA

Red 60

#D81820

Yellow 60

#A15C00

Icons, Borders

Use to color semantic icons and semantic accent borders in all components.

Mint 55

#009E5C

Blue 55

#2580FF

Red 55

#F0363C

Yellow 55

#CA7300

Borders

Use for low-contrast borders such as highlighting semantic messaging in an Alert or Card.

Mint 30

#ABE0C9

Blue 30

#C0D7FA

Red 30

#FCC7C9

Yellow 30

#F5CC93

Backgrounds

Use for low-contrast backgrounds such as highlighting semantic messaging in an Alert or Card.

Mint 20

#DAF5E9

Blue 20

#E6F0FF

Red 20

#FCE8E9

Yellow 20

#FAECD9

Backgrounds

Use for subtle, low-contrast backgrounds such as a highlighting rows in a Table or lines in a Diff.

Mint 10

#EDFAF3

Blue 10

#F5F8FC

Red 10

#FFF5F5

Yellow 10

#FFF8ED