Предложить кейс

Nova

Формат: кейс по публичным материалам (промо-сайт + доступные загрузки ассетов + косвенные ссылки на внутренние ресурсы). Дата обращения: апрель 2026.

  1. Компания/продукт: Сбер
  2. экосистема продуктов (в т.ч. СберБанк Онлайн).

Главное

  1. Компания/продукт: Сбер
  2. экосистема продуктов (в т.ч. СберБанк Онлайн).
  3. Масштаб (заявлено публично): 200+ команд, 75 млн клиентов.
  4. Платформы: iOS/Android + адаптивный web + внутренние B2B-продукты.
  5. Уровень открытости: публичная витрина и foundations (палитра/типографика/иконки/иллюстрации) частично; инженерный слой закрыт.
  6. Фокус кейса: как показывать глубину дизайн-системы публично, не раскрывая инфраструктуру (код/токены/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 не раскрываются.

  1. Разделы-ориентиры: Палитра
  2. Типографика
  3. Иконки
  4. Иллюстрации
  5. Гайдлайны
  6. Команда
  7. Контакты.
  8. Публичная страница — витрина продукта; реальная карта DS (внутренний сайт) закрыта доступом.
  9. Важное ограничение для исследования: нельзя восстановить инженерную архитектуру по публичным материалам.

Синхронизация дизайна и кода

Инженерный слой: закрытая инфраструктура

Инженерный слой публично недоступен: нет npm-пакетов, нет публичного Storybook, нет открытых токенов в CSS/JSON и правил именования. В публичной коммуникации упоминаются тестирование и релизный процесс, а также существуют косвенные ссылки на внутренние ресурсы (витрина компонентов и changelog), но детали извне не проверяются.

Контроль качества

Доступность как стандарт (WCAG AA по умолчанию)

Одна из ключевых публичных заявок Nova — доступность как базовый стандарт: соответствие WCAG AA, поддержка VoiceOver (iOS) и TalkBack (Android). Важный смысл: a11y описана как часть definition of done компонента, а не как доп. требование по запросу. Даже для крупных дизайн-систем это редкость в открытой коммуникации.

Уникальные практики и «фишки» кейса

Уникальные практики (в логике исследования)

  1. Именованные темы под суббренды как продуктовая необходимость экосистемы (не только light/dark).
  2. Доступность (WCAG AA + VoiceOver + TalkBack) как стандарт для всех компонентов.
  3. Промо-сайт как живое интерактивное демо: переключение платформы/темы/состояний на месте.
  4. Собственная супергарнитура (50 начертаний) как часть визуального языка DS.
  5. Коммуникация о DS как о продукте: аудитории дизайн/бизнес/код выделены явно.

Выводы и принципы

Ограничения кейса

  1. Для внешнего разработчика Nova — визуальный референс, а не инфраструктура: инженерный слой закрыт.
  2. Нет публичных токенов/форматов поставки (CSS/JSON), нет публичного Storybook и релизной политики.
  3. Гайдлайны существуют, но публично не раскрыты — нельзя проверить правила применения компонентов.

Источники

  1. Промо-сайт Nova (публичная витрина)
  2. Загрузки ассетов (иконки) на сайте
  3. Косвенные ссылки на внутренние ресурсы (витрина компонентов/релизы), если доступны

Хотите поделиться
своим кейсом?