Design system

A design system is a unified knowledge base about the design of an IT system (platform, website, application, etc.) that connects UX/UI designers (who create and work in it) and developers (who use it to guide their work). It is intended to systematize, standardize and automate interface development, thus speeding up and facilitating this process and stabilizing the quality of the product.

Contains:

¨NBSP;

• all elements of the visual language used in the system interface, from the smallest "atoms" (buttons, search bars, icons, etc.) to groups of templates and the general corporate identity;
• rules of behavior of these artifacts and interaction with them;
• principles of working with design, text, interface architecture and with the design system itself;
• description of the general semantic field.

Combines the contents of more simplified UX/UI design knowledge bases:

• UI kit - visual UI elements;
• framework - if elements are stored as code, allowing developers to use a library of ready-made components;
• guideline - rules and guidelines for working with elements, templates and layouts (working with grid, colors, icons, how and when given parameters can be modified).

Ready interface elements are most often stored as code (which enhances the effect of automation).

In fact, the design system for interface designers is an encyclopedia, and for other developers - instructions. The larger the system being designed or the larger the development team, the more acute is the need for a design system. The design system is most often created in a single version for the entire company to unify the production of all digital products of the organization.