Backgrounds
Sectioning interfaces
Sectioning
Backgrounds, along with spacing, is the prime way to section parts of the interface. Background colour can be used to group smaller parts and communicate relation. If you need to multiple levels of colour, move towards the light before turning to the dark.
See also rounded corners and shadows for more tools and examples.
| Class | Declaration | Colour | Usage | hex |
|---|---|---|---|---|
| bg-gray2 | background-color: hsl(0, 0%, 95%); |
Standard sectioning background colour. | #f2f2f2 | |
| bg-gray1 | background-color: hsl(0, 0%, 98%); |
When sectioning within another gray section. | #fafafa | |
| bg-gray4 | background-color: hsl(0, 0%, 86%); |
When you need a third level of sectioning. | #dbdbdb | |
| bg-green1 | background-color: hsl(86, 47%, 94%); |
Alternative sectioning background. For when there’s need to differentiate sections with different backgrounds. | #f1f7e9 | |
| bg-white | background-color: hsl(0, 0%, 100%); |
When you need to override defaults. For instance a transparent element that needs to be white, but it’s placed on a grey background. | #ffffff |
Alert boxes and messages
Confirmation boxes, info messages, warnings and errors are built by using the corresponding components.
Deprecated
These have been deprecated and are not to be used as backgrounds in new interfaces.
| Class | Declaration | Colour | hex |
|---|---|---|---|
| bg-gray9 | background-color: hsl(0, 0%, 27%); |
#444444 | |
| bg-gray3 | background-color: hsl(0, 0%, 93.5%); |
#eeeeee |