Open systems from Russia, and what a language does to an interface

Gravity UI, VKUI, Taiga UI and Plasma are open design systems from Russia. A second language tests an interface: plurals, number formats and label length.

Why Russian systems get a lesson of their own

Most of the systems you have met were written in English, for English. That hides a difficulty: much of what they do “by default” works only for English. The design systems of Russian companies are worth a look for two reasons. They are open, large and in daily use, built by teams at big companies such as Yandex, VK, Tinkoff (now T-Bank) and Sber. And they had to deal with a language that’s not English from their very first day.

We take four open systems from Russian companies. Each has public documentation and open code.

• Gravity UI. A set of libraries and a design system for complex web services, from Yandex. UIKit holds the base components and tokens; it has three themes (light, dark, high contrast), support for right-to-left writing and built-in localization. Separate packages solve separate tasks: charts, a Markdown editor, navigation, a landing-page builder, calendar components. The code is under the MIT license.
• VKUI. A library of React components from VK, based on VK’s design system. The components are made to follow the platform they run on, so the look adapts. The license is MIT.
• Taiga UI. A library for Angular. It began as an internal product at Tinkoff (the bank is now called T-Bank), and is now an open project with dozens of tokens on CSS variables, a dark theme out of the box and more than a hundred components. The license is Apache-2.0.
• Plasma. A system from Sber’s ecosystem (the organization salute-developers): a common core and “verticals”, that is, sets of components and themes for particular products. Themes and tokens live in separate packages. The license is MIT.

All four are made for a framework (React or Angular). So for a simple site you won’t install them, but they are worth reading: take ideas, not code. For example, three themes out of the box at Gravity UI, the “core plus verticals” approach at Plasma, separate packages at Taiga UI.

What a language does to an interface: four pitfalls

Whatever system you choose, an interface breaks in four places when it meets another language. Russian is a good worked example, because it differs from English in all four. Move the diagram: the numbers, prices and dates are all worked out by the browser’s built-in Intl.

1. The form of the word after a number. English has two forms (“1 service”, “2 services”); Russian has three: “1 услуга”, “2 услуги”, “5 услуг”, and Arabic has six. The choice depends on the number, and in Russian on its last digit, with numbers from 11 to 14 always “many”. It’s easy to get wrong by hand, so the browser does it for you: Intl.PluralRules('ru') answers with a category (one, few, many) by which you pick the word. A good design system stores words in all the forms a language needs and puts in the right one.

2. A price and a date. Each place has its own habits. In the UK it’s “£12,500”, with a comma between the thousands, a point for decimals and the sign before the number. In Russia it’s “12 500 ₽”: a space between the thousands, a comma for decimals, the sign after the number. That space must be non-breaking ( ), or the line will break in the middle of the number. A date is “27 October 2026” in the UK, “27 октября 2026” in Russia, and in markup, for machines, it’s wrapped in <time datetime="2026-10-27"> everywhere. Beware of numbers-only dates: 03/04/2026 is the third of April in the UK and the fourth of March in the US.

3. The length of words. Labels in other languages are often noticeably longer than the English ones. A button 9rem wide looks fine with the English “Book a call” and cuts off the Russian “Записаться на консультацию”. Don’t set a width as a number: use min-width and padding. For long words in narrow columns turn on hyphenation: hyphens: auto works when the page states its language with lang.

4. Typography. English uses curly quotation marks, “like this”, with ‘single’ ones inside, and never the straight marks of a typewriter. Russian uses «guillemets» with „low-high“ marks inside them. A dash and a hyphen are different characters in both. The details of Russian typography are collected in the “Kovodstvo” by Art. Lebedev Studio (in the sources), and for English in Matthew Butterick’s Practical Typography, but it’s enough to remember these three.

Systems that care about localization (Gravity UI, for one, includes internationalization) do such details for you. For the others you do them by hand, as in the practice.

Practice

Your page has the usual signs of a text that nobody has looked after: a plural form that is wrong for one, a price without a thousands separator, a date in digits, straight quotation marks and a button with a rigid width. Fix them. It’s the same set of fixes that a Russian reader needs on a Russian page, only with English forms. Then choose one of the four Russian systems and write down what you would take from it and why you wouldn’t take it whole.

What was wrong with 2014

In 2014 most design systems were written in English only, and localization was “translate the strings”. Plural forms were glued together by hand (“1 item(s)”), prices were joined to currency signs in ad hoc ways, and a design with a button of a fixed width was handed to a translator. Today the browser has Intl for all of this, and the best systems take it into account from the start.