Дизайн-токены — это набор базовых переменных визуального языка — отступы, цвета, типографика, стили объектов, анимация — представленный в виде данных. В них цвет представляется как значение RGB, прозрачность как число, анимация как координаты Безье. Токены используют вместо жестко запрограммированных значений, чтобы было легко управлять визуальным стилем  и обеспечивать единство во всех продуктах.

Мы используем общий открытый репозиторий с токенами VKUI. Дизайн-токены интегрированы в наши библиотеки компонентов и UI-киты. Они охватывают разные платформы, цветовые темы, состояния компонентов и многое другое. Название цветов и типографики в наших библиотеках в Figma соответствуют названию токена в репозитории. Это упрощает разработку: например, если изменить цвет в репозитории, он изменится одновременно в разных продуктах. 

Благодаря токенам мы поддерживаем и развиваем сразу темную и светлую темы интерфейса. Используя Variables в Figma переключать темы очень просто.

Для описания токенов используется TypeScript. Дизайн-токены собраны в один npm-пакет для быстрой установки и подключения к проекту. Генератор позволяет экспортировать токены в разных форматах: scss, less, css in JS и т.п.

Разные продукты используют свои темы оформления. Любая тема наследуется от базовой, но меняет значения некоторых переменных. Например, есть отдельные темы для продуктов productivity и media, но все они основаны на базовой теме. 

Такой подход помог в разработке темной темы интерфейса. Токены темной темы тонируют цветовые токены базовой темы.    

Наши токены реализованы с учётом адаптивности: отдельные переменные и классы имеют разные значения на разных вьюпортах. Такой подход облегчает работу, потому что переносит часть адаптивности на уровень переменных.