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"></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>

Brand complimentary

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

<i class="chi-icon icon-atom -md -icon--navy"></i>
<i class="chi-icon icon-atom -md -icon--orange"></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--primarybackground-color:#0075C9
-bg--secondarybackground-color:#38C6F4
-bg--blackbackground-color:#000000
-bg--whitebackground-color:#FFFFFF

Brand complimentary

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

Color Class
Value
Result
-bg--navybackground-color:#083176
-bg--greybackground-color:#3F4145

Neutral

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

Color Class
Value
Result
-bg--grey-20background-color:#EDF0F2
-bg--grey-15background-color:#F4F5F6
-bg--grey-25background-color:#DADEE2
-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:#007E44
-bg--success-lightbackground-color:#DBFAEE
-bg--success-lighterbackground-color:#F1FEF8
-bg--infobackground-color:#0075C9
-bg--info-lightbackground-color:#F5F9FC
-bg--info-lighterbackground-color:#E0F3FF
-bg--warningbackground-color:#A15C00
-bg--warning-lightbackground-color:#FAECD9
-bg--warning-lighterbackground-color:#FFF8ED
-bg--dangerbackground-color:#D62015
-bg--danger-lightbackground-color:#FFE8E5
-bg--danger-lighterbackground-color:#FFF5F5
-bg--mutedbackground-color:#53565A
-bg--muted-lightbackground-color:#EDF0F2
-bg--muted-lighterbackground-color:#F8F9F9

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-20Visible only from sm
-bg-sm--grey-20Visible only from sm
-bg-sm--grey-30Visible 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-20Visible only from md
-bg-md--grey-20Visible only from md
-bg-md--grey-30Visible 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-20Visible only from lg
-bg-lg--grey-20Visible only from lg
-bg-lg--grey-30Visible 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-20Visible only from xl
-bg-xl--grey-20Visible only from xl
-bg-xl--grey-30Visible 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>