Skip to main content
Design System

Background Colors

Black

Background Color Black

Background Color Black Overlay 20

<!-- bg color black -->
<div class="u-bg-color-black">
  <p>Background Color Black</p>
</div>
						
<!-- bg color black overlay 20 -->
<div class="u-bg-color-black-overlay-20">
  <p>Background Color Black Overlay 20</p>
</div>

Back to top

White

Background Color White

Background Color White Overlay 75

<!-- bg color white -->
<div class="u-bg-color-white">
  <p>Background Color White</p>
</div>
						
<!-- bg color white overlay 75 -->
<div class="u-bg-color-white-overlay-75">
  <p>Background Color White Overlay 75</p>
</div>

Back to top

Transparent

Background Color Transparent

<!-- bg color transparent -->
<div class="u-bg-color-transparent">
  <p>Background Color Transparent</p>
</div>

Back to top

Gray

Background Color Light Gray

Background Color Gray

Background Color Medium Gray

Background Color Dark Gray

<!-- bg color light gray -->
<div class="u-bg-color-light-gray">
  <p>Background Color Light Gray</p>
</div>
	
<!-- bg color gray -->
<div class="u-bg-color-gray">
  <p>Background Color Gray</p>
</div>
						
<!-- bg color medium gray -->
<div class="u-bg-color-medium-gray">
  <p>Background Color Medium Gray</p>
</div>
						
<!-- bg color dark gray -->
<div class="u-bg-color-dark-gray">
  <p>Background Color Dark Gray</p>
</div>

Back to top

Red

Background Color Red

Background Color Red Dark 10

Background Color Red Dark 20

Background Color Red Overlay 05

Background Color Red Overlay 15

<!-- bg color red -->
<div class="u-bg-color-red">
  <p>Background Color Red</p>
</div>
	
<!-- bg color red dark 10 -->
<div class="u-bg-color-red-dark-10">
  <p>Background Color Red Dark 10</p>
</div>
						
<!-- bg color red dark 20 -->
<div class="u-bg-color-red-dark-20">
  <p>Background Color Red Dark 20</p>
</div>
						
<!-- bg color red overlay 05 -->
<div class="u-bg-color-red-overlay-05">
  <p>Background Color Red Overlay 05</p>
</div>
	
<!-- bg color red overlay 15 -->
<div class="u-bg-color-red-overlay-15">
  <p>Background Color Red Overlay 15</p>
</div>

Back to top

Blue

Background Color Blue

Background Color Blue Dark 10

Background Color Blue Dark 20

Background Color Blue Overlay 10

Background Color Blue Overlay 20

Background Color Light Blue

<!-- bg color blue -->
<div class="u-bg-color-blue">
  <p>Background Color Blue</p>
</div>
	
<!-- bg color blue dark 10 -->
<div class="u-bg-color-blue-dark-10">
  <p>Background Color Blue Dark 10</p>
</div>
						
<!-- bg color blue dark 20 -->
<div class="u-bg-color-blue-dark-20">
  <p>Background Color Blue Dark 20</p>
</div>
						
<!-- bg color blue overlay 10 -->
<div class="u-bg-color-blue-overlay-10">
  <p>Background Color Red Overlay 05</p>
</div>
	
<!-- bg color blue overlay 20 -->
<div class="u-bg-color-blue-overlay-20">
  <p>Background Color Blue Overlay 05</p>
</div>
	
<!-- bg color light blue -->
<div class="u-bg-color-light-blue">
  <p>Background Color Light Blue 15</p>
</div>

Back to top

Yellow

Background Color Yellow Overlay 10

Background Color Yellow Overlay 20

<!-- bg color yellow overlay 10 -->
<div class="u-bg-color-yellow-overlay-10">
  <p>Background Color Yellow Overlay 10</p>
</div>
	
<!-- bg color yellow overlay 20 -->
<div class="u-bg-color-yellow-overlay-20">
  <p>Background Color Yellow Overlay 20</p>
</div>

Back to top

Alerts

Background Color Danger Alert

Background Color Info Alert

Background Color Info Success

Background Color Info Warning

<!-- bg color danger -->
<div class="u-bg-color-danger">
  <p>Background Color Danger Alert</p>
</div>
	
<!-- bg color info -->
<div class="u-bg-color-info">
  <p>Background Color Info Alert</p>
</div>
	
<!-- bg color success -->
<div class="u-bg-color-success">
  <p>Background Color Info Success</p>
</div>
	
<!-- bg color warning -->
<div class="u-bg-color-warning">
  <p>Background Color Info Warning</p>
</div>

Back to top