Visual effects are used to add clarity to the product and reduce cognitive load. It is important to apply effects reasonably and avoid using them unnecessarily.


Shadow is the easiest way to show the visual hierarchy. One layer 'rises' above another, showing their relationship and the hierarchy of components.

Information layers

Information layers are flat but have depth relative to each other. This helps quickly understand the hierarchy and function of interface elements.
We try not to apply shadows in the basic components and use them to highlight the hierarchy or visual emphasis.


When a particular interface block needs to be highlighted, we use darkening. There are three degrees of transparency for toning. The choice of transparency degree depends on how heavily loaded the interface is on top of the darkening.

Hover effect

An intuitive interface should respond to user actions, so it is important that any interactive element responds to hovering.


Tinting an element is a standard feedback technique, and we use colour as a tint. Simple controls like input also change the stroke colour.