UI kit is a set of all the elements on which the UI of your site is built (UI elements). In essence, it is a visualization of each of the elements at any stage of the user’s contact with the interface.

• Unification. UI Kit helps create an interface in a uniform style, which makes all elements visually consistent.
• Structuring. Thanks to the UI Kit, all interface elements are collected in one place. The designer and developer always know where to find the right color, button, or style for the link.
• Improving usability. Ensures the correct logic of interaction with the interface. The components are designed so that their behavior is intuitive and consistent with the platform.
• Consistency. In the design system, UI Kit plays a key role, providing a common ecosystem for the project. This allows the entire team to work synchronously using ready-made elements.
• Speeding up and simplifying work. If necessary, the component can be quickly taken from the UI Kit without creating it from scratch and without copying it from other parts of the layout.
• Simplification of teamwork. UI Kit is especially useful when working on a project by several designers or developers, allowing any participant to easily find and use the desired element without having to create it again.

Basis

• Colors
• Typography (for all resolutions)
• Grids (for all resolutions)
• Spacing system.

Atoms

• Icons
• Tags
• Tooltips (with default, active, hover states)
• Dropdowns (with all states: default, active, hover, disabled)
• Inputs (with all states: default, active, hover, disabled)
• Search field (with all states: default, active, hover, disabled)

Molecules (various composite blocks of atoms)

• Banners
• Sliders
• Accordions
• Filters (with all states: default, active, hover, disabled)
• Tabs (with default, active, hover states)

Organisms

• Header (with link states: default, active, hover)
• Footer (with link states: default, active, hover)
• Menu (with hover states on items)
• Modals

• Use components and auto layouts. Assemble all elements based on components and auto layouts to ensure flexibility and uniformity.

• Structure by sections. Group and place elements in the appropriate sections for ease of navigation and work.
• Create a library if necessary. If the project is large and does not fit into one file, take the UI Kit out to a separate file and turn it into a library. You can pull components from this library into other files.
• Take into account the states of the components. Do not forget about the different states of the components (active, inactive, etc.) and to display them.
• Show components for all resolutions. Draw components for different screen resolutions. If you need to show intermediate states, create a separate frame with them and add comments for the developer.