Color

Use shorthand color utility classes to quickly apply or remove colors.

Icon color

Change icon colors with contextual classes.

Brand

Brand icon colors reinforce Lumen's brand. Use primary and secondary as accents, and dark, grey, and light as neutrals.

<!-- For light backgrounds -->
<i class="chi-icon icon-atom -md -icon--dark" aria-hidden="true"></i>
<i class="chi-icon icon-atom -md -icon--primary" aria-hidden="true"></i>
<i class="chi-icon icon-atom -md -icon--grey" aria-hidden="true"></i>
<!-- For dark backgrounds -->
<i class="chi-icon icon-atom -md -icon--secondary" aria-hidden="true"></i>
<i class="chi-icon icon-atom -md -icon--light" aria-hidden="true"></i>

Semantic

Use semantic text colors to communicate meaning to users. Examples include displaying alerts, form field validation, user status, application state and more. Use green (success) for positive, blue (info) for informative, red (danger) for negative, yellow (warning) for needs attention, and grey (muted) for neutral. Semantic colors should never be used for decorative purposes.

<i class="chi-icon icon-atom -md -icon--success" aria-hidden="true"></i>
<i class="chi-icon icon-atom -md -icon--info" aria-hidden="true"></i>
<i class="chi-icon icon-atom -md -icon--warning" aria-hidden="true"></i>
<i class="chi-icon icon-atom -md -icon--danger" aria-hidden="true"></i>
<i class="chi-icon icon-atom -md -icon--muted" aria-hidden="true"></i>

Brand complimentary

More icon colors that can be used to compliment the primary brand palette.

<i class="chi-icon icon-atom -md -icon--navy" aria-hidden="true"></i>
<i class="chi-icon icon-atom -md -icon--orange" aria-hidden="true"></i>

Background-color

Define background-color classes using the format -bg-{breakpoint}--{value}. Breakpoints supported are sm, md, lg, and xl.

Brand

Brand background-colors reinforce Lumen's brand.

Color Class	Value	Result
`-bg--primary`	`background-color:#0075C9`
`-bg--secondary`	`background-color:#38C6F4`
`-bg--black`	`background-color:#000000`
`-bg--white`	`background-color:#FFFFFF`

Brand complimentary

More background-colors that can be used to compliment the primary brand palette.

Color Class	Value	Result
`-bg--navy`	`background-color:#083176`
`-bg--grey`	`background-color:#3F4145`

Neutral

Neutral background-colors provide low-contrast backgrounds for application containers, cards, and more.

Color Class	Value	Result
`-bg--grey-20`	`background-color:#EDF0F2`
`-bg--grey-15`	`background-color:#F4F5F6`
`-bg--grey-25`	`background-color:#DADEE2`
`-bg--grey-30`	`background-color:#D0D4D9`

Semantic

Use semantic background-colors to communicate meaning to users. Examples include displaying alerts, form field validation, user status, application state and more. Use green (success) for positive, blue (info) for informative, red (danger) for negative, yellow (warning) for needs attention, and grey (muted) for neutral. Semantic colors should never be used for decorative purposes.

Color Class	Value	Result
`-bg--success`	`background-color:#007E44`
`-bg--success-light`	`background-color:#DBFAEE`
`-bg--success-lighter`	`background-color:#F1FEF8`
`-bg--info`	`background-color:#0075C9`
`-bg--info-light`	`background-color:#F5F9FC`
`-bg--info-lighter`	`background-color:#E0F3FF`
`-bg--warning`	`background-color:#A15C00`
`-bg--warning-light`	`background-color:#FAECD9`
`-bg--warning-lighter`	`background-color:#FFF8ED`
`-bg--danger`	`background-color:#D62015`
`-bg--danger-light`	`background-color:#FFE8E5`
`-bg--danger-lighter`	`background-color:#FFF5F5`
`-bg--muted`	`background-color:#53565A`
`-bg--muted-light`	`background-color:#EDF0F2`
`-bg--muted-lighter`	`background-color:#F8F9F9`

Brand

Brand background-colors reinforce CenturyLink's brand.

Color Class	Value	Result
`-bg--primary`	`background-color:#0047BB`
`-bg--secondary`	`background-color:#48D597`
`-bg--black`	`background-color:#000000`
`-bg--white`	`background-color:#FFFFFF`

Brand complimentary

More background-colors that can be used to compliment the primary brand palette.

Color Class	Value	Result
`-bg--navy`	`background-color:#083176`
`-bg--grey`	`background-color:#3F4145`

Neutral

Neutral background-colors provide low-contrast backgrounds for application containers, cards, and more.

Color Class	Value	Result
`-bg--grey-20`	`background-color:#EDF0F2`
`-bg--grey-15`	`background-color:#F4F5F6`
`-bg--grey-25`	`background-color:#DADEE2`
`-bg--grey-30`	`background-color:#D0D4D9`

Semantic

Color Class	Value	Result
`-bg--success`	`background-color:#008000`
`-bg--success-light`	`background-color:#CEF2CE`
`-bg--success-lighter`	`background-color:#E6FAE6`
`-bg--info`	`background-color:#0060FA`
`-bg--info-light`	`background-color:#E6F0FF`
`-bg--info-lighter`	`background-color:#F5F8FC`
`-bg--warning`	`background-color:#946300`
`-bg--warning-light`	`background-color:#F9F5BE`
`-bg--warning-lighter`	`background-color:#FDFBD8`
`-bg--danger`	`background-color:#D81820`
`-bg--danger-light`	`background-color:#FCE8E9`
`-bg--danger-lighter`	`background-color:#FFF5F5`
`-bg--muted`	`background-color:#53565A`
`-bg--muted-light`	`background-color:#EDF0F2`
`-bg--muted-lighter`	`background-color:#F8F9F9`

None

Use to render an element with no background-color.

Color Class	Value	Result
`-bg--none`	`background: none;`

Target specific breakpoints

To target a specific breakpoint, add the breakpoint abbreviation to the class.

Color Class	Value
`-bg-sm--none`	Visible only from `sm`
`-bg-sm--primary`	Visible only from `sm`
`-bg-sm--secondary`	Visible only from `sm`
`-bg-sm--white`	Visible only from `sm`
`-bg-sm--black`	Visible only from `sm`
`-bg-sm--muted`	Visible only from `sm`
`-bg-sm--grey`	Visible only from `sm`
`-bg-sm--grey-20`	Visible only from `sm`
`-bg-sm--grey-20`	Visible only from `sm`
`-bg-sm--grey-30`	Visible only from `sm`
`-bg-sm--success`	Visible only from `sm`
`-bg-sm--info`	Visible only from `sm`
`-bg-sm--warning`	Visible only from `sm`
`-bg-sm--danger`	Visible only from `sm`
`-bg-md--none`	Visible only from `md`
`-bg-md--primary`	Visible only from `md`
`-bg-md--secondary`	Visible only from `md`
`-bg-md--white`	Visible only from `md`
`-bg-md--black`	Visible only from `md`
`-bg-md--muted`	Visible only from `md`
`-bg-md--grey`	Visible only from `md`
`-bg-md--grey-20`	Visible only from `md`
`-bg-md--grey-20`	Visible only from `md`
`-bg-md--grey-30`	Visible only from `md`
`-bg-md--success`	Visible only from `md`
`-bg-md--info`	Visible only from `md`
`-bg-md--warning`	Visible only from `md`
`-bg-md--danger`	Visible only from `md`
`-bg-lg--none`	Visible only from `lg`
`-bg-lg--primary`	Visible only from `lg`
`-bg-lg--secondary`	Visible only from `lg`
`-bg-lg--white`	Visible only from `lg`
`-bg-lg--black`	Visible only from `lg`
`-bg-lg--muted`	Visible only from `lg`
`-bg-lg--grey`	Visible only from `lg`
`-bg-lg--grey-20`	Visible only from `lg`
`-bg-lg--grey-20`	Visible only from `lg`
`-bg-lg--grey-30`	Visible only from `lg`
`-bg-lg--success`	Visible only from `lg`
`-bg-lg--info`	Visible only from `lg`
`-bg-lg--warning`	Visible only from `lg`
`-bg-lg--danger`	Visible only from `lg`
`-bg-xl--none`	Visible only from `xl`
`-bg-xl--primary`	Visible only from `xl`
`-bg-xl--secondary`	Visible only from `xl`
`-bg-xl--white`	Visible only from `xl`
`-bg-xl--black`	Visible only from `xl`
`-bg-xl--muted`	Visible only from `xl`
`-bg-xl--grey`	Visible only from `xl`
`-bg-xl--grey-20`	Visible only from `xl`
`-bg-xl--grey-20`	Visible only from `xl`
`-bg-xl--grey-30`	Visible only from `xl`
`-bg-xl--success`	Visible only from `xl`
`-bg-xl--info`	Visible only from `xl`
`-bg-xl--warning`	Visible only from `xl`
`-bg-xl--danger`	Visible only from `xl`

Responsive background-color examples

-bg--primary

-bg-sm--secondary

-bg-md--warning

-bg-lg--danger

-bg-xl--black

-bg--none

<!-- background-color primary on all breakpoints -->
<div class="-bg--primary"></div>
<!-- background-color secondary from sm -->
<div class="-bg-sm--secondary"></div>
<!-- background-color warning from md -->
<div class="-bg-md--warning"></div>
<!-- background-color danger from lg -->
<div class="-bg-lg--danger"></div>
<!-- background-color black from xl -->
<div class="-bg-xl--black"></div>
<!-- background none on all breakpoints -->
<div class="-bg--none"></div>