Backgrounds
Grouping and sectioning
Consider using a box component before making a custom box.
Background and spacing are the main ways to indicate what belongs together. Use spacing before resorting to backgrounds in a layout.
| Class | Declaration | Colour | Usage | hex |
|---|---|---|---|---|
| bg-gray2 | background-color: hsl(0, 0%, 95%); |
Standard sectioning background colour. Useful for grouping related inputs in a form. | #f2f2f2 | |
| bg-gray1 | background-color: hsl(0, 0%, 98%); |
Should only be used with disclosure. | #fafafa | |
| bg-white | background-color: hsl(0, 0%, 100%); |
When sectioning within a grey area or you need to override defaults. For instance a transparent element that needs to be white, but it’s placed on a grey background. | #ffffff |