Color
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--primary | background-color:#0047BB | |
-bg--secondary | background-color:#48D597 | |
-bg--black | background-color:#000000 | |
-bg--blue-90 | background-color:#001E60 | |
-bg--grey | background-color:#53565A | |
-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--blue-80 | background-color:#00308A | |
-bg--teal | background-color:#03808C |
Neutral
Neutral background-colors provide low-contrast backgrounds for application containers, cards, and more.
Color Class | Value | Result |
---|---|---|
-bg--grey-10 | background-color:#F8F9F9 | |
-bg--grey-20 | background-color:#EDF0F2 | |
-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:#007E46 | |
-bg--info | background-color:#0060FA | |
-bg--warning | background-color:#A15C00 | |
-bg--danger | background-color:#D81820 | |
-bg--muted | background-color:#72767A |
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-10 | Visible only from sm |
-bg-sm--grey-20 | Visible only from sm |
-bg-sm--grey-30 | Visible only from sm |
-bg-sm--blue-60 | Visible only from sm |
-bg-sm--blue-70 | Visible only from sm |
-bg-sm--blue-80 | Visible only from sm |
-bg-sm--blue-90 | Visible only from sm |
-bg-sm--teal | 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-10 | Visible only from md |
-bg-md--grey-20 | Visible only from md |
-bg-md--grey-30 | Visible only from md |
-bg-md--blue-60 | Visible only from md |
-bg-md--blue-70 | Visible only from md |
-bg-md--blue-80 | Visible only from md |
-bg-md--blue-90 | Visible only from md |
-bg-md--teal | 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-10 | Visible only from lg |
-bg-lg--grey-20 | Visible only from lg |
-bg-lg--grey-30 | Visible only from lg |
-bg-lg--blue-60 | Visible only from lg |
-bg-lg--blue-70 | Visible only from lg |
-bg-lg--blue-80 | Visible only from lg |
-bg-lg--blue-90 | Visible only from lg |
-bg-lg--teal | 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-10 | Visible only from xl |
-bg-xl--grey-20 | Visible only from xl |
-bg-xl--grey-30 | Visible only from xl |
-bg-xl--blue-60 | Visible only from xl |
-bg-xl--blue-70 | Visible only from xl |
-bg-xl--blue-80 | Visible only from xl |
-bg-xl--blue-90 | Visible only from xl |
-bg-xl--teal | 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
<!-- 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>