Background Color
Convey meaning through background and add decoration with gradients.
Available colors
This design system is all about making your website look amazing. Colors are an important aspect of it so we took the time to create a comprehensive color system, supporting different usage scenarios, and make it super-friendly to future changes and dark mode.
Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set color, so in some cases you’ll want to use .text-* color utilities.
Theme colors (Semantic)
Semantic colors denote standard value states (such as good, bad, or warning). Each color has the same basic meaning in all contexts. It also helps you set your brand's colors and remain consistent when using it throughout the website using the .bg-primary, .bg-secondary, and .bg-tertiary classes.
Gradients
By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
If you need to build more complex gradients, see the dedicated utility class for gradients.
Gray Colors
Surface Colors
Start using these surface colors to add a background color on large areas, such the body or sections. This is extremely helpful, especially when you want to make use of light/dark mode. With a few variables all your website adapts to any theme you might use.
Usage
<div class="bg-primary"></div>
Customizing
Learn how to change the default colors in the styleguide section.