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 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.

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.