VKUI Design System

Context and the push to merge

It all started as the company was entering a phase of large-scale ecosystem rebranding. At the time, we had two fundamental design systems:

• VKUI — a React component library maintained by a dedicated team specifically for VKontakte's mobile app and web version.
• Paradigm — a system that had been evolving since 2012 and served as the visual core for Mail products (Mail, Cloud, the homepage).

Maintaining and developing two independent design systems in parallel demanded enormous frontend resources and created a visual gap whenever users moved between services. To fix both problems, we decided to merge the systems into one — making VKUI the company's core technical and component standard, and integrating Paradigm as one of its base themes.

Unifying the tokens

You can't merge two mature systems by decree in Jira. To reach common ground, we got together with VKontakte's development and design team at their office and started a complex process of joint alignment.

The core task was to drop down to the lowest level — color and typography tokens. We literally went through every shade by hand, compared naming, looked for overlaps, and removed duplicates.

After 4 days of continuous discussion and analysis, we agreed on an MVP token set. It included around 160 tokens across light and dark themes, fully covering the visual needs of Mail and VKontakte products.

I was trusted to put together the very first version of the library and fill it with colors. Together with Vanya Baryshev and Lesha Zaytsev from VKontakte, I designed the logic behind how tokens relate to each other, set the naming convention, and then wrote the documentation myself. That became the foundation for a shared token repository supporting both global themes (light/dark) and custom themes for individual products.

Building the components and a shared language (design × dev)

Once the token layer was locked in, we moved on to the component base. As a pilot, we took the Button and, step by step, built out all of its possible states, sizes, icon variations, and effects. It's where we refined our approach to naming parameters. It was critical for us to establish a single source of truth — a shared vocabulary so that a designer in Figma and an engineer in React code worked with exactly the same props and terms.

From there the library grew rapidly:

• Basic UI primitives: Input, Checkbox, Switch, Radio, Avatar, Badge.
• Complex elements: Modal Card, Action Sheet, Segmented Control, Tabs.

Throughout the build we worked in very close coordination with the VKUI platform team. We strictly checked how well each new component matched the token system we'd built, and reviewed spacing.

Scaling and rolling out to Mail products

My key hands-on task during the rollout phase was scaling the updated VKUI to Mail products (Mail, Cloud). We structured the migration in stages so we wouldn't have to pause product feature work:

1. Migrating layouts to tokens: first we moved existing Figma files and screens onto the new token system.
2. Rolling out product themes: there were cases where the standard palette wasn't enough for specific scenarios. In those cases I added and defined product themes directly in the shared token repository myself.
3. Swapping components in code: during development, engineers gradually replaced outdated interface elements with base components from the VKUI library (Button, Input, Checkbox, etc.).

The biggest upside of the new foundation was that Mail products got built-in responsiveness and automatic light/dark theme switching out of the box, with no need to write custom code for every screen. Throughout the process I acted as the connecting link, keeping up steady communication between the VKUI engineers and the Mail product teams.

Results

• Unified ecosystem: two isolated design systems turned into a single platform standard, available as Open Source and on Figma Community.
• Unified token architecture: built a structure of 160+ tokens supporting dark, light, and the company's product themes.
• Faster development: Mail products gained flexible theming and a ready-made component base, meaningfully cutting time-to-market for new features.
• Shared vocabulary: Mail and VK design and engineering teams aligned their terminology and interface-assembly processes.