Project
VKUI Comm Kit
The VKUI Comm Kit is a product developed by the VK design team to improve the time-to-market (T2M) of design projects. The components in the VKUI Comm Kit are not linked to global tokens or VK’s core design libraries. Instead, the library and its documentation serve as a foundational reference for creating communication design materials.
The VKUI Comm Kit is a library of components and design parameters used to create communication landing pages and websites for all VK brands. This includes the VK megabrand, sub-brands, business projects (such as VK Tech and VK Commercial Department), and audience-focused products like VK Education.
The VKUI Comm Kit is not used in projects related to Yandex Zen, Mail.ru, or OK.
The VKUI Comm Kit is not used in projects related to Yandex Zen, Mail.ru, or OK.
Usage
Architecture
Architecture
VKUI Comm Kit components can be copied into product design systems, and duplicates can be linked to global tokens without altering their values. In this setup, art directors and design team leads are responsible for maintaining and updating local versions of the components.
The more design projects are created using the VKUI Comm Kit, the more the main design system becomes enriched with new tokens, components, and styles.
The more design projects are created using the VKUI Comm Kit, the more the main design system becomes enriched with new tokens, components, and styles.
VK Sans Display
Font Family
Font Family
Typography is one of the key elements that connects VK’s branding with its web communications. All components in the library use VK Sans exclusively, ranging from VK Sans Regular to VK Sans Demibold.
Colors
Each VK product has its own color palette or signature color pair, which defines the product’s image and look & feel. VKUI Comm Kit duplicates these colors from the official brand guidelines and adapts them for use on the web.
The "UI + Neutrals" and "Effects" groups contain universal values that are especially useful when designing new landing pages. We recommend using these values to maintain consistency with the VK megabrand identity.
The "UI + Neutrals" and "Effects" groups contain universal values that are especially useful when designing new landing pages. We recommend using these values to maintain consistency with the VK megabrand identity.
Grids
VK is home to many teams — both large and small. Each team has its own approach to design and development. Many of these teams mistakenly used parameters from the VKUI Common design system (intended for product interfaces), which led to inconsistencies with brand guidelines and design guides. This happened because the VKUI base relied on system fonts and a default palette, rather than brand-specific assets.
The VK Central Marketing Communication Design Team oversees art direction and acts as a quality control body in the production of major corporate communications.
By setting general parameters and documentation for web communications, the team ensured that the VKUI Comm Kit architecture operated as originally designed.
By setting general parameters and documentation for web communications, the team ensured that the VKUI Comm Kit architecture operated as originally designed.
ecosystem
right grids
equals
General
navigation
navigation
Grids are the foundation. To ensure that all products feel like part of the VK main brand, it was essential to create a universal navigation solution — including the main menu and site footer.
We defined logo sizes, font styles, and spacing to create an ideal reference component for all teams.
We defined logo sizes, font styles, and spacing to create an ideal reference component for all teams.
Similar to the main menu component, the site footer is mandatory for use, as it is also part of the end-to-end navigation across VK products. By using these three elements — grids, menus, and footers — websites achieve visual and structural continuity with the VK megabrand.
Result
Web communications including landing pages, websites, and web products — now undergo a minimal design review process.
Standard
Components
Components
Standard components are designed in the style of the VK main brand and can be customized to meet project requirements. All modifications must be approved by the Communication Design team of the VK Central Marketing department.
Standard components are assembled in the style of the VK main brand and can be modified to suit individual project needs. All modifications require approval from the Communication Design team of the VK Central Marketing Department.
Customization of components for your product is encouraged. Components can be recolored using the appropriate brand palette colors. You may adjust corner rounding and, of course, customize micro-animations as desired.
Customization of components for your product is encouraged. Components can be recolored using the appropriate brand palette colors. You may adjust corner rounding and, of course, customize micro-animations as desired.
Micro-
animations
animations
We understand that every detail matters. Precise examples of animations and interactions for each component will help make our landing pages not only visually appealing but also functionally intuitive.
Feedback
VK designers share their experiences using the VKUI Comm Kit in their projects.
Client
Type of Project
Credits
VK Company
Design System
VK Brand Design Team
