Nova
Формат: кейс по публичным материалам (промо-сайт + доступные загрузки ассетов + косвенные ссылки на внутренние ресурсы). Дата обращения: апрель 2026.
- Компания/продукт: Сбер
- экосистема продуктов (в т.ч. СберБанк Онлайн).
Главное
- Компания/продукт: Сбер
- экосистема продуктов (в т.ч. СберБанк Онлайн).
- Масштаб (заявлено публично): 200+ команд, 75 млн клиентов.
- Платформы: iOS/Android + адаптивный web + внутренние B2B-продукты.
- Уровень открытости: публичная витрина и foundations (палитра/типографика/иконки/иллюстрации) частично; инженерный слой закрыт.
- Фокус кейса: как показывать глубину дизайн-системы публично, не раскрывая инфраструктуру (код/токены/Storybook).
Контекст
Контекст и позиционирование
Nova позиционируется как кросс-платформенная дизайн-система для экосистемы: единый визуальный язык и единые принципы для мобильных и веб-интерфейсов, а также для внутренних продуктов. Публичная коммуникация построена так, чтобы система воспринималась как масштабный продукт: под интерфейсом скрыт «клубок сложных систем», а компоненты должны подходить для любого устройства и продукта.
В описании ценности Nova явно разделяет аудитории: дизайн (UI-kit, паттерны, визуальный язык), бизнес (процессы, стандарты качества, документация, поддержка), код (витрина компонентов, тестирование, релизный процесс, доступность). Это важная «продуктовая рамка»: система продаётся как инфраструктура.
Состав системы
Foundations: темы суббрендов, типографика и иконки
3.1 Именованные палитры для суббрендов
В Nova виден сильный признак зрелости: темизация реализована не только как light/dark, но и как набор именованных палитр под суббренды экосистемы (например, Lunar, Pink, Emerald, Lavender, Old Pink). На витрине можно переключать тему и смотреть, как один и тот же компонент меняется визуально. Практическая ценность: продукты могут сохранять характер, оставаясь на единой базе.
3.2 Собственная супергарнитура SB
Типографика оформлена как часть дизайн-системы на уровне визуального языка: собственная шрифтовая супергарнитура SB (50 начертаний), включая несколько подсемейств Sans/Serif и вариации для разных задач (Text/Display/Interface/Mono). Для исследования это маркер «уровня зрелости»: DS доходит до уровня системного типографического продукта.
3.3 Иконки и скачиваемые ассеты
Иконки представлены в нескольких размерах и доступны для скачивания архивом. Это показатель того, что foundations распространяются как продуктовые артефакты, а не остаются «внутри Figma».
Компоненты как система: интерактивное демо вместо открытой документации
На промо-сайте Nova есть интерактивные демо компонентов (например, Card, Text field, Button), где можно переключать платформу, тему и состояния. Это сильный коммуникационный ход: показывается глубина и вариативность без раскрытия исходников.
Ограничение: демо не заменяет документацию уровня «anatomy / states / do-don’t / corner cases / правила использования». Поэтому внешний наблюдатель видит «как выглядит» и «что умеет», но не видит «как применять».
Процессы развития
Управление изменениями и контроль качества (что видно публично)
Публично фиксируется принцип: компоненты отрисованы во всех состояниях и учитывают платформенную верстку. Тестирование и релизный процесс упоминаются как часть ценности для кода, но конкретные практики (Definition of done, sandbox, тестовые атрибуты, миграции) не раскрыты.
Документация
Карта материалов: промо-сайт как витрина, не как документация
Публичный сайт устроен как лендинг с якорями. Разделение на foundations и компоненты присутствует, но неявно: есть блоки про палитру, типографику, иконки и иллюстрации, а также блоки про принципы, удобство и гайдлайны. При этом «как начать», «установка», публичные API и токены в форматах CSS/JSON не раскрываются.
- Разделы-ориентиры: Палитра
- Типографика
- Иконки
- Иллюстрации
- Гайдлайны
- Команда
- Контакты.
- Публичная страница — витрина продукта; реальная карта DS (внутренний сайт) закрыта доступом.
- Важное ограничение для исследования: нельзя восстановить инженерную архитектуру по публичным материалам.
Синхронизация дизайна и кода
Инженерный слой: закрытая инфраструктура
Инженерный слой публично недоступен: нет npm-пакетов, нет публичного Storybook, нет открытых токенов в CSS/JSON и правил именования. В публичной коммуникации упоминаются тестирование и релизный процесс, а также существуют косвенные ссылки на внутренние ресурсы (витрина компонентов и changelog), но детали извне не проверяются.
Контроль качества
Доступность как стандарт (WCAG AA по умолчанию)
Одна из ключевых публичных заявок Nova — доступность как базовый стандарт: соответствие WCAG AA, поддержка VoiceOver (iOS) и TalkBack (Android). Важный смысл: a11y описана как часть definition of done компонента, а не как доп. требование по запросу. Даже для крупных дизайн-систем это редкость в открытой коммуникации.
Уникальные практики и «фишки» кейса
Уникальные практики (в логике исследования)
- Именованные темы под суббренды как продуктовая необходимость экосистемы (не только light/dark).
- Доступность (WCAG AA + VoiceOver + TalkBack) как стандарт для всех компонентов.
- Промо-сайт как живое интерактивное демо: переключение платформы/темы/состояний на месте.
- Собственная супергарнитура (50 начертаний) как часть визуального языка DS.
- Коммуникация о DS как о продукте: аудитории дизайн/бизнес/код выделены явно.
Выводы и принципы
Ограничения кейса
- Для внешнего разработчика Nova — визуальный референс, а не инфраструктура: инженерный слой закрыт.
- Нет публичных токенов/форматов поставки (CSS/JSON), нет публичного Storybook и релизной политики.
- Гайдлайны существуют, но публично не раскрыты — нельзя проверить правила применения компонентов.
Источники
- Промо-сайт Nova (публичная витрина)
- Загрузки ассетов (иконки) на сайте
- Косвенные ссылки на внутренние ресурсы (витрина компонентов/релизы), если доступны
«Под каждым интерфейсом — целый клубок сложных систем: работа с контентом, аналитика и настройки. Компоненты Nova подойдут для любого устройства и продукта.»
«С нашей палитрой может потягаться разве что Pantone. Оттенков хватит на светлую или тёмную тему для любого финансового сервиса или суббренда экосистемы Сбера.»
«Поддержка WCAG, тёмная тема, единая логика компонентов для iOS и Android и Web. Всё это уже есть в Nova.»