Structure and grid

All elements of the system are built on the principle of minimal load of information, content, atoms, dots. The elements have length, width and height. These parameters can change - stretch and adapt - depending on the purpose of the UI element. Elements visually respond when interacted with.

For example: the user scrolls the page to the end with a sharp motion, the elements on the page stretch, following the user's action, thus simulating elasticity to indicate that the user has reached the end of the page. Elements are not clipped or reshaped (For example: from square to circle) and can only stretch, shrink and move.

Interface elements have different purposes or are located at different levels of the semantic hierarchy. Separate them into information layers.

Information layers are flat but have depth relative to each other. This helps quickly understand the hierarchy and function of interface elements.

Negative space. Use negative space in the grid as a visual hierarchy tool.

Separators. We resort to using separators only when not having them impairs information readability and disrupts the visual hierarchy.

On a multi-column layout, separators are used only when cognitive load is significantly increased without them.

On lists, we use separators only for highly loaded elements.

The entire design system is built on the modular principle. The main purpose of the modules is to create an integral chain of system elements and build a multi-level architecture. This principle is designed for infinite products' scalability, from the primary elements to secondary and so on.

For example: main modules of the site / application, which are to be displayed first in the chain of user interaction with the system. The first level modules nest the second level modules, and so on. This principle can be reflected both in the IA [information architecture] (the main page containing blocks (modules) of secondary pages, etc.) and in the visual display of UI elements (content card, title, image and CTA button).

Use white space abundantly. Use white space to improve the user perception of content and UI elements. There should be more negative space than positive.

Use the pre-defined indentation system for the integrity of the design system and a consistent user experience. The indentation system reflects the basic principle of the system design - a dot (4-5px depending on the platform) is the minimum unit for building all elements and indents.

Use the principle of 'proximity' to indicate relationships between elements. It is used to ensure proper joint placement of related design elements. It is necessary so as to convey to the user the relationship of elements with each other and accelerate the understanding of the interface during scanning a website or application.

Clarity and usability should be achieved by maximizing the signal and minimizing noise, ensuring a high signal-to-noise ratio. In order to achieve this, one needs to make sure that relevant information (signal) is presented efficiently while irrelevant information (noise) is reduced or completely removed.

Depending on the type of product, we use variable approaches to adaptability. In one case, it will make more sense to rearrange interface elements. In another, it will be easier to create adaptive interface variations (for example, a header turns into a burger menu on tablet and mobile). A combination of the two adaptation methods helps to achieve the most user-friendly interface.