Single-colored Backgrounds

There is a set of predefined colors that you can pick from when styling your element. In addition to the company CI colors and the four signal colors for status reports (confirm, info, etc.), there are some plain colors that are free to use for contrast, focus, or any other application.

All background classes start with the prefix background-, followed by a color (e.g. “white”) or use case (e.g. “warning”).

<div class="background-darkblue">
    Dark-blue background
</div>

Colors

These are the colors you can use.

Plain Colors

White

.background-white

Light gray

.background-lightgray

Dark gray

.background-darkgray

Light blue

.background-lightblue

Dark blue

.background-darkblue

Status Information

Confirmation

.background-confirm

Information

.background-info

Warning

.background-warning

Error

.background-error

CI Colors

Brand orange

.background-brandorange

Brand blue

.background-brandblue

Gradients

There are two gradients defined in the standard set, both fading from a light blue to white.

• The standard gradient (.background-gradient) fades out to white at 100 pixels above the bottom edge of the element.
• The full gradient (.background-gradient-full) runs all the way from the bottom edge to the top edge and is used for small elements, such as tabs or bars.

<div class="background-gradient">
    <p>Standard gradient</p>
</div>

<div class="background-gradient-full">
    <p>Top-to-bottom gradient for small elements</p>
</div>