We use icons of two sizes: 24 and 16px. For large icons, the stroke is 2px, while for small ones, it is 1.5px. To create icons, we use a grid, and the margins should be 1–2px on each side. We use a linear style when creating icons.

We use the Euclid Circular B font for the main vehicle because its letters are easy to read in any size. In the space itself, we use the Inter font. We set the smallest font size to 12px for signatures and the largest to 68px for headings.

The shadows to be applied to several different interface elements, including buttons, input fields, and dropdown menus. The shadows are also used to create a sense of hierarchy and differentiation between different layers and elements in the interface, with deeper and more pronounced shadows applied to elements that need to stand out, such as primary buttons or selected items in a dropdown menu.

The grid is divided into columns, with each column being of equal width, which allows for a consistent and balanced layout across the entire interface.the grid in this design system appears to be a simple and effective tool for creating a clear and organized user interface that is both visually appealing and easy to use.

The buttons are rectangular in shape and have rounded corners, which creates a soft and approachable visual style. The buttons also have a subtle gradient effect, which adds depth and dimensionality to the design without overwhelming the user. The text within the buttons is clear and easy to read, with a font size and weight that is appropriate for the button size and hierarchy within the interface.

Over the course of a year, my colleague and I built a design system for SpatialChat from scratch, introducing 50+ unique components and ensuring consistency across 80% of the platform's interfaces. This foundation increased development speed by 40%, reduced prototyping time by 30%, and enhanced user satisfaction by 15%, while minimizing interaction errors by 20%.