Российские открытые системы и русский язык в интерфейсе

Gravity UI, VKUI, Taiga UI и Plasma — открытые российские дизайн-системы. Русский интерфейс требует трёх форм слова после числа, «ёлочек» и цен вида 12 500 ₽.

Почему о российских системах отдельно

Большинство систем, с которыми вы знакомились, написаны на английском для английского языка. Это скрытая трудность: многое в них «работает по умолчанию» только для английского. А у российских систем есть два преимущества: они учитывают русский язык с самого начала, а документацию можно читать на родном языке.

Выберем четыре открытые системы российских компаний. У каждой публичная документация и открытый код.

• Gravity UI. Набор библиотек и дизайн-система для сложных веб-сервисов. UIKit содержит базовые компоненты и токены; есть три темы (светлая, тёмная, высококонтрастная), поддержка письма справа налево и встроенная локализация. Отдельные пакеты решают отдельные задачи: графики, редактор Markdown, навигация, конструктор лендингов, календарные компоненты. Код под лицензией MIT.
• VKUI. Библиотека React-компонентов VK, основанная на дизайн-системе VK. По замыслу компоненты «внешне неотличимы» от приложений VK для iOS и Android, а вид подстраивается под платформу. Лицензия MIT.
• Taiga UI. Библиотека для Angular. Начиналась как внутренний продукт компании (обычно её связывают с Тинькофф, ныне Т-Банк), теперь это открытый проект с десятками токенов на CSS-переменных, тёмной темой из коробки и более чем сотней компонентов. Лицензия Apache-2.0.
• Plasma. Система из экосистемы Сбера (организация salute-developers): общее ядро и «вертикали», то есть наборы компонентов и тем под конкретные продукты. Темы и токены вынесены в отдельные пакеты. Лицензия MIT.

Все четыре рассчитаны на фреймворк (React или Angular). Поэтому для простого сайта вы их не поставите, но читать стоит: берите идеи, а не код. Например, три темы из коробки у Gravity UI, подход «ядро плюс вертикали» у Plasma, отдельные пакеты у Taiga UI.

Русский язык в интерфейсе: четыре подводных камня

Вне зависимости от выбранной системы, интерфейс по-русски ломается в четырёх местах. Подвигайте схему: все три цифры и даты считает сам браузер встроенными средствами Intl.

1. Формы слова после числа. По-английски две формы («1 item», «2 items»), по-русски три: «1 услуга», «2 услуги», «5 услуг». Выбор зависит от последней цифры, а числа от 11 до 14 всегда «много». Вручную легко ошибиться, поэтому браузер умеет сам: Intl.PluralRules('ru') отвечает категорией (one, few, many), по которой вы выбираете слово. Хорошая дизайн-система хранит слова в трёх формах и подставляет нужную.

2. Цена и дата. Тысячи в русском отделяют пробелом, десятичную часть запятой, а знак рубля ставят после суммы: «12 500 ₽». Пробел должен быть неразрывным ( ), иначе строка оборвётся посреди числа. Дату пишут «27 октября 2026» или «27.10.2026», а в разметке для машин оборачивают в <time datetime="2026-10-27">.

3. Длина слов. Русские подписи обычно заметно длиннее английских. Кнопка шириной «9rem» с английским «Book a call» выглядит хорошо, а «Записаться на консультацию» обрезается. Не задавайте ширину числом, а используйте min-width и внутренние отступы. Для длинных слов в узких колонках включайте переносы: hyphens: auto работает, когда у страницы указан lang="ru".

4. Типографика. Кавычки только «ёлочки» (а внутри них „лапки“), прямые кавычки пишущей машинки неуместны. Тире и дефис разные символы; перед тире ставят неразрывный пробел. Подробные правила собраны в «Ководстве» Артемия Лебедева (в источниках), но достаточно запомнить эти три.

Системы, которые заботятся о локализации (например, у Gravity UI в состав входит интернационализация), делают такие мелочи за вас. Для остальных их нужно сделать вручную, как в практике.

Как выбрать, у кого учиться

Теперь у вас есть карточки всех систем, которые мы разобрали в этой части. Поставьте галочки у того, что нужно вашему проекту, и посмотрите, чьи идеи ближе. Очки подсчитаны вручную и служат подсказкой.

Практика

Исправьте на странице пять русских мелочей и запишите, что вы взяли бы у российской системы. Заметьте, как каждая правка маленькая и как легко их забыть: поэтому хорошие системы хранят эти правила в одном месте.

Что было не так с 2014 годом

В 2014 году русские сайты нередко набирали прямыми кавычками, цены писали обычными пробелами, а кнопки делали шириной по макету, нарисованному с английскими подписями. Российских открытых дизайн-систем почти не было: компании строили их для себя и не публиковали. Сегодня несколько крупных систем открыты, и по ним можно учиться на родном языке.