.png)
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)
We built a multi-platform design system that aligned product, design, and engineering and turned scattered UI into a coherent language.
development time reduced by about 20%, rework on UI specs reduced by about 35%, higher accessibility compliance and easier onboarding for new team members.
Multiple teams shipped screens with slightly different styles, spacing, and states. Engineers duplicated similar components, designers re-created patterns per feature, and accessibility fixes were made ad-hoc. This slowed delivery and made the product harder to maintain.
• Create a single source of truth that scales across products and teams.
• Cut delivery time and UI defects by standardizing components and states.
• Raise accessibility to WCAG-aligned defaults.
• Make adoption easy with clear documentation and examples.
• UI inventory. Collected real product screens, tagged inconsistencies and prioritized gaps.
• Token strategy. Mapped brand colors to semantic roles, normalized type scale and spacing.
• Architecture. From primitives to composite components, each with anatomy and states.
• Accessibility. Contrast audits, focus rings, hit areas, keyboard flows, ARIA guidance.
• Pilot and rollout. Rebuilt two real user flows using the system, fixed friction, then migrated teams.
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
• About 20% faster delivery for common UI tasks thanks to ready patterns and specs.
• About 35% fewer design handoff issues and back-and-forth with engineering.
• Fewer visual and behavior inconsistencies across products.New designers and engineers onboarded quicker using the docs and examples.