Background

The Background system creates the illusion of grayscale through carefully designed dither patterns. When rendered on 1-bit (black and white only) displays, these patterns create an illusion of different shades of gray by using specific arrangements of black and white pixels.

Color Palette

The complete range of background shades available in the framework, from pure black to pure white.

black
bg--black
10
bg--gray-10
15
bg--gray-15
20
bg--gray-20
25
bg--gray-25
30
bg--gray-30
35
bg--gray-35
40
bg--gray-40
45
bg--gray-45
50
bg--gray-50
55
bg--gray-55
60
bg--gray-60
65
bg--gray-65
70
bg--gray-70
75
bg--gray-75
white
bg--white

Usage

Use the bg--{shade} utility classes to apply these background patterns to any element. Choose from sixteen values: black, gray-10 through gray-75, and white.

black
10
15
20
25
30
35
40
45
50
55
60
65
70
75
white
Background shades
<div class="bg--black">Black</div>
<div class="bg--gray-10">Gray 10</div>
<div class="bg--gray-15">Gray 15</div>
<div class="bg--gray-20">Gray 20</div>
<div class="bg--gray-25">Gray 25</div>
<div class="bg--gray-30">Gray 30</div>
<div class="bg--gray-35">Gray 35</div>
<div class="bg--gray-40">Gray 40</div>
<div class="bg--gray-45">Gray 45</div>
<div class="bg--gray-50">Gray 50</div>
<div class="bg--gray-55">Gray 55</div>
<div class="bg--gray-60">Gray 60</div>
<div class="bg--gray-65">Gray 65</div>
<div class="bg--gray-70">Gray 70</div>
<div class="bg--gray-75">Gray 75</div>
<div class="bg--white">White</div>

Backward Compatibility

For backward compatibility, the original shade names (gray-1 through gray-7) are still supported but deprecated. These map to equivalent extended shades:

<!-- Deprecated (but still works) -->
<div class="bg--gray-1">Gray 1 (deprecated)</div>
<div class="bg--gray-2">Gray 2 (deprecated)</div>

<!-- Preferred (new naming) -->
<div class="bg--gray-10">Gray 10 (preferred)</div>
<div class="bg--gray-20">Gray 20 (preferred)</div>