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.
Usage
Use the bg-{color} utility
classes to apply these background patterns to any element. Choose from nine values: black, gray-1 through gray-7,
and white.
black
gray-1
gray-2
gray-3
gray-4
gray-5
gray-6
gray-7
white
Background Colors
<div class="bg-black">Black</div>
<div class="bg--gray-1">Gray 1</div>
<div class="bg--gray-2">Gray 2</div>
<div class="bg--gray-3">Gray 3</div>
<div class="bg--gray-4">Gray 4</div>
<div class="bg--gray-5">Gray 5</div>
<div class="bg--gray-6">Gray 6</div>
<div class="bg--gray-7">Gray 7</div>
<div class="bg-white">White</div>Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | Density 2x | 4/8/16-bit |
|---|---|---|---|---|
| Semantic | ||||
--black
|
#000000 | — | — | — |
--color-error
|
var(--red) | — | — | — |
--color-primary
|
var(--blue) | — | — | — |
--color-success
|
var(--green) | — | — | — |
--color-warning
|
var(--orange) | — | — | — |
--white
|
#FFFFFF | — | — | — |
| Grayscale | ||||
--gray-10
|
#111111 | — | — | — |
--gray-15
|
#222222 | — | — | — |
--gray-20
|
#333333 | — | — | — |
--gray-25
|
#444444 | — | — | — |
--gray-30
|
#555555 | — | — | — |
--gray-35
|
#666666 | — | — | — |
--gray-40
|
#777777 | — | — | — |
--gray-45
|
#888888 | — | — | — |
--gray-50
|
#999999 | — | — | — |
--gray-55
|
#AAAAAA | — | — | — |
--gray-60
|
#BBBBBB | — | — | — |
--gray-65
|
#CCCCCC | — | — | — |
--gray-70
|
#DDDDDD | — | — | — |
--gray-75
|
#EEEEEE | — | — | — |
| Legacy Grayscale | ||||
--gray-1
|
#111111 | — | — | — |
--gray-2
|
#333333 | — | — | — |
--gray-3
|
#555555 | — | — | — |
--gray-4
|
#777777 | — | — | — |
--gray-5
|
#999999 | — | — | — |
--gray-6
|
#BBBBBB | — | — | — |
--gray-7
|
#DDDDDD | — | — | — |