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.

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.

Brand complimentary #

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

Background-color

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

Brand

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

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.

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`

None

Use to render an element with no background-color.

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

Target specific breakpoints

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

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