Background
Use the color palette defined in Colors. Apply these shades with bg--{token} for backgrounds. On 1-bit displays, grayscale uses dither patterns; on 2-bit and 4-bit+, solid colors render.
Grayscale
Grayscale background shades only, including the center spacer between 40 and 45.
Grayscale backgrounds
Base Colors
Full base palettes for background tokens: grayscale and all chromatic hues with every shade step.
Base background colors
Usage
Use the bg--{shade} utility
classes to apply these background patterns to any element. Grayscale: black, gray-10 through gray-75, and white.
Chromatic: bg--{hue} (pure color, e.g. bg--red, bg--green) or bg--{hue}-{step} (e.g. bg--red-50, bg--blue-40).
Semantic: bg--primary, bg--success, bg--error, etc. (see Colors).
<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>Chromatic tokens
Use bg--{hue}-{step} and text--{hue}-{step} for color backgrounds and text.
<div class="bg--red">Pure red</div>
<div class="bg--red-50">Red 50</div>
<div class="bg--blue-40">Blue 40</div>
<div class="bg--green-60">Green 60</div>
<div class="text--red-50">Red text</div>Semantic tokens
Use bg--{role} and text--{role} for intent-based colors. Roles: primary, success, error, warning. See Colors for the full mapping.
<div class="bg--primary text--white">Primary</div>
<div class="bg--success text--white">Success</div>
<div class="bg--error text--white">Error</div>
<div class="text--warning">Warning text</div>