Surfaces

There are three levels of surfaces used to organize the UI hierarchy, often combined with shadows. All palette colors are tested to provide sufficient contrast against these surfaces.

Example

.element {
  background: var(--dwc-surface-2);
}

Variables

Variable	Usage	Example
--dwc-surface-1	The darkest surface. Used for body background.
--dwc-surface-2	Used for components (e.g. cards).
--dwc-surface-3	The lightest and highest surface. Used for menus, popovers, dialogs ...