Visual form

Visual form, or the material quality of your UI, is about the background images, gradients, and textures, shadows and elevation (z-indexes), rounded corners, and borders. These are visual qualities that help emphasize and decorate elements to add visual hierarchy and aesthetics. In any case, all are examples of ornamentation that need to be standardized.

Elevation

Elevation is measured as the distance between the components and the surface. An example is the use of shadows as a visual cue to help differentiate between the various levels of an interface. Shadow is helpful for hover states as you can create an elevated effect creating a shadow or eliminating a shadow as a pressed down effect.

https://material.io/design/environment/elevation.html#elevation-in-material-design

Corners and edges

Unless you decide to go with sharp corners, you’ll want to think about rounded edges in a tokenised way. Often graphic designers like to use rounded corners on buttons, but corners could extend to tables, cards, drop-downs, tooltips and various other components. You may also decide to treat corners differently depending on their use-case.

Overlay

https://design.firefox.com/photon/patterns/overlay.html

 

http://v7.carbondesignsystem.com/style/layer/usage

 

https://ics-design-system.us-east.mybluemix.net/style/elevation-shadows

 

https://design.firefox.com/photon/motion/principles.html

 

https://material.io/design/environment/elevation.html