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
AAA

Secondary Accent

Mint 40
#48D597
AAA

Supporting Colors

Black
#000000
AAA
Blue 90
#001E60
AAA
Mint 70
#097A49
AA
Grey 70
#53565A
AAA

Neutral

Neutral palette is an extension of CenturyLink Brand's Dark Grey swatch (Grey 70). Each shade is based off the original hue.

Black
#000000
AAA

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

Grey 100
#242526
AAA

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

Grey 90
#313336
AAA

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

Grey 80
#3F4145
AAA

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

Grey 70
#53565A
AA

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

Grey 60
#72767A
AA

Used for muted or disabled text and icons on white.

Grey 50
#8E9399
AA

Used for muted or disabled text and icons on black.

Grey 40
#ACB0B5
AAA

Used for high-contrast borders on white.

Grey 30
#D0D4D9
AAA

Used for medium-contrast borders on white.

Grey 20
#EDF0F2
AAA

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

Grey 10
#F8F9F9
AAA

Used for low-contrast backgrounds on white.

White
#FFFFFF
AAA

Used as body background color and primary text color on black.

Semantic

Success

Mint 70
#097A49
AA
Mint 30
#ABE0C9
AAA
Mint 20
#DAF5E9
AAA
Mint 10
#EDFAF3
AAA

Info

Blue 70
#0047BB
AAA
Blue 30
#C0D7FA
AAA
Blue 20
#E6F0FF
AAA
Blue 10
#F5F8FC
AAA

Danger

Red 70
#B50D12
AA
Red 30
#FCC7C9
AAA
Red 20
#FCE8E9
AAA
Red 10
#FFF5F5
AAA

Warning

Yellow 60
#A66102
AA
Yellow 30
#F5CC93
AAA
Yellow 20
#FAECD9
AAA
Yellow 10
#FFF8ED
AAA

SASS

Chi defines colors with Sass language variables.

$colorscheme: (
  grey: (
    100: #242526,
    90: #313336,
    80: #3f4145,
    70: #53565a,
    60: #72767a,
    50: #8e9399,
    40: #acb0b5,
    30: #d0d4d9,
    20: #edf0f2,
    10: #f8f9f9,
  )
);

A utility function has been created to reference them.

set-color($scheme, $tone)

To use it, add chi through npm and import the variables and mixins sass files.

@import '@centurylink/chi/src/chi/_variables';
@import '@centurylink/chi/src/chi/_mixins';

.example {
  color: set-color(grey, 60);
}