Surfaces
DWC defines three levels of surfaces which are used to organize the UI hierarchy combined with shadows. All palette colors are tested to have enough contrast with these surfaces.
Surfaces pick up a subtle tint from the primary hue and adapt automatically to light and dark modes.
Example
.element {
background: var(--dwc-surface-2);
}
Variables
| Variable | Usage |
|---|---|
--dwc-surface-1 | Page and body background. |
--dwc-surface-2 | Toolbars, menubars, cards. |
--dwc-surface-3 | Windows, menus, popovers, dialogs. |