SpatialChat is a virtual platform that mimics real-world interactions with spatial audio and private chat areas, enabling immersive meetings, collaboration, and networking.
There were about 60 employees, including 5 members in the design team. This team consisted of a design lead, a graphic designer, and three product designers.
2021-2023
Product Designer
.png)
In our design system, we have developed color palettes for both dark and light themes. We use the HSL color model, which is based on three key concepts: hue (H), saturation (S), and lightness (L).
.png)
Primary and secondary colors
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.
.png)
Icons 24px and 16px
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.
.png)
Typography
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.
.png)
4 types of elevation
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.
.png)
Grids
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.
.png)
3 types of buttons
.png)
Inputs, dropdowns, selectors
This project helped me to understand how to structure a design system, to study different approaches to creation, to learn the criteria for using elements.Here you can read more about the process of creating a design system.
Link to figma