Convey meaning through background and add decoration with gradients.
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
Each theme color has a lighter or darker variant. Use
.bg-shade-COLOR to use it.
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.
Start using these surface colors to add a background color on large areas, such the
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.
Learn how to change the default colors in the styleguide section.