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 CenturyLink'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"></i>
<i class="chi-icon icon-atom -md -icon--primary"></i>
<i class="chi-icon icon-atom -md -icon--grey"></i>
<!-- For dark backgrounds -->
<i class="chi-icon icon-atom -md -icon--secondary"></i>
<i class="chi-icon icon-atom -md -icon--light"></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"></i>
<i class="chi-icon icon-atom -md -icon--info"></i>
<i class="chi-icon icon-atom -md -icon--warning"></i>
<i class="chi-icon icon-atom -md -icon--danger"></i>
<i class="chi-icon icon-atom -md -icon--muted"></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 CenturyLink's brand.

Color Class
Value
Result
-bg--primarybackground-color:#0047BB
-bg--secondarybackground-color:#48D597
-bg--blackbackground-color:#000000
-bg--blue-90background-color:#001E60
-bg--greybackground-color:#53565A
-bg--whitebackground-color:#FFFFFF

Brand complimentary

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

Color Class
Value
Result
-bg--blue-80background-color:#00308A
-bg--tealbackground-color:#03808C

Neutral

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

Color Class
Value
Result
-bg--grey-10background-color:#F8F9F9
-bg--grey-20background-color:#EDF0F2
-bg--grey-30background-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--successbackground-color:#007E46
-bg--infobackground-color:#0060FA
-bg--warningbackground-color:#A15C00
-bg--dangerbackground-color:#D81820
-bg--mutedbackground-color:#72767A

None

Use to render an element with no background-color.

Color Class
Value
Result
-bg--nonebackground: none;

Target specific breakpoints

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

Color Class
Value
-bg-sm--noneVisible only from sm
-bg-sm--primaryVisible only from sm
-bg-sm--secondaryVisible only from sm
-bg-sm--whiteVisible only from sm
-bg-sm--blackVisible only from sm
-bg-sm--mutedVisible only from sm
-bg-sm--greyVisible only from sm
-bg-sm--grey-10Visible only from sm
-bg-sm--grey-20Visible only from sm
-bg-sm--grey-30Visible only from sm
-bg-sm--blue-60Visible only from sm
-bg-sm--blue-70Visible only from sm
-bg-sm--blue-80Visible only from sm
-bg-sm--blue-90Visible only from sm
-bg-sm--tealVisible only from sm
-bg-sm--successVisible only from sm
-bg-sm--infoVisible only from sm
-bg-sm--warningVisible only from sm
-bg-sm--dangerVisible only from sm
-bg-md--noneVisible only from md
-bg-md--primaryVisible only from md
-bg-md--secondaryVisible only from md
-bg-md--whiteVisible only from md
-bg-md--blackVisible only from md
-bg-md--mutedVisible only from md
-bg-md--greyVisible only from md
-bg-md--grey-10Visible only from md
-bg-md--grey-20Visible only from md
-bg-md--grey-30Visible only from md
-bg-md--blue-60Visible only from md
-bg-md--blue-70Visible only from md
-bg-md--blue-80Visible only from md
-bg-md--blue-90Visible only from md
-bg-md--tealVisible only from md
-bg-md--successVisible only from md
-bg-md--infoVisible only from md
-bg-md--warningVisible only from md
-bg-md--dangerVisible only from md
-bg-lg--noneVisible only from lg
-bg-lg--primaryVisible only from lg
-bg-lg--secondaryVisible only from lg
-bg-lg--whiteVisible only from lg
-bg-lg--blackVisible only from lg
-bg-lg--mutedVisible only from lg
-bg-lg--greyVisible only from lg
-bg-lg--grey-10Visible only from lg
-bg-lg--grey-20Visible only from lg
-bg-lg--grey-30Visible only from lg
-bg-lg--blue-60Visible only from lg
-bg-lg--blue-70Visible only from lg
-bg-lg--blue-80Visible only from lg
-bg-lg--blue-90Visible only from lg
-bg-lg--tealVisible only from lg
-bg-lg--successVisible only from lg
-bg-lg--infoVisible only from lg
-bg-lg--warningVisible only from lg
-bg-lg--dangerVisible only from lg
-bg-xl--noneVisible only from xl
-bg-xl--primaryVisible only from xl
-bg-xl--secondaryVisible only from xl
-bg-xl--whiteVisible only from xl
-bg-xl--blackVisible only from xl
-bg-xl--mutedVisible only from xl
-bg-xl--greyVisible only from xl
-bg-xl--grey-10Visible only from xl
-bg-xl--grey-20Visible only from xl
-bg-xl--grey-30Visible only from xl
-bg-xl--blue-60Visible only from xl
-bg-xl--blue-70Visible only from xl
-bg-xl--blue-80Visible only from xl
-bg-xl--blue-90Visible only from xl
-bg-xl--tealVisible only from xl
-bg-xl--successVisible only from xl
-bg-xl--infoVisible only from xl
-bg-xl--warningVisible only from xl
-bg-xl--dangerVisible 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>