Colors

Learn how to change the color of elements.

Backgrounds

Note, that primary colors are unique for each customer.

CSS Class Result
.bg-white
.bg-n1
.bg-n2
.bg-n5
.bg-n6
.bg-primary
.bg-primary-d1
.bg-primary-l
.bg-green
.bg-green-l
.bg-yellow
.bg-yellow-l
.bg-red
.bg-red-l

Text Colors

Text color classes can also be used to change the color of icons. Learn how to add vector icons here.

CSS Class Result
.text-base Default text color
.text-quiet Quiet text color
.text-muted Muted text color
.text-white White color with a subtle shadow
.text-brand Brand text color
.text-green Green text color
.text-yellow Yellow text color
.text-red Red text color

Icon Colors

Icon color classes should be used to change the color of icons. They must be used together with the .icon class. Learn how to add vector icons here.

CSS Class Result
.color-brand
.color-green
.color-yellow
.color-red
.color-n1
.color-n1-transp
.color-n2
.color-n2-transp
.color-n3
.color-n3-transp
.color-n4
.color-n4-transp
.color-n5-transp

Colors

Learn how to change the color of elements.

Backgrounds

Note, that primary colors are unique for each customer.

CSS Class Result
.bg-white
.bg-n1
.bg-n2
.bg-n5
.bg-n6
.bg-primary
.bg-primary-d1
.bg-primary-l
.bg-green
.bg-green-l
.bg-yellow
.bg-yellow-l
.bg-red
.bg-red-l

Text Colors

Text color classes can also be used to change the color of icons. Learn how to add vector icons here.

CSS Class Result
.text-base Default text color
.text-quiet Quiet text color
.text-muted Muted text color
.text-white White color with a subtle shadow
.text-brand Brand text color
.text-green Green text color
.text-yellow Yellow text color
.text-red Red text color

Icon Colors

Icon color classes should be used to change the color of icons. They must be used together with the .icon class. Learn how to add vector icons here.

CSS Class Result
.color-brand
.color-green
.color-yellow
.color-red
.color-n1
.color-n1-transp
.color-n2
.color-n2-transp
.color-n3
.color-n3-transp
.color-n4
.color-n4-transp
.color-n5-transp