Контур.Гайды

Формат: кейс по публичным материалам (guides.kontur.ru + Storybook + npm). Дата обращения: апрель 2026.

Компания/продукт: СКБ Контур — B2B веб‑сервисы для бизнеса и бухгалтерии.

Главное

Компания/продукт: СКБ Контур — B2B веб‑сервисы для бизнеса и бухгалтерии.
Уровень открытости: публичные гайдлайны (guides.kontur.ru) + Storybook (tech.skbkontur.ru/kontur-ui) + npm (@skbkontur/react-ui, @skbkontur/icons).
Платформа: web-first (React UI как основная реализация); мобильные принципы описаны отдельно.
Фокус кейса: DS как нормативный документ и система управления (governance): принципы → требования → компоненты → процессы и роли.

Состав системы

Карта системы: сначала принципы, потом компоненты

Структура сайта показывает ключевую идею: «сначала принципы, потом компоненты». Раздел Principles включает основы (layout, стиль, цвет, адаптивность, модуль, отступы), текст (типографика, глоссарий), доступность, взаимодействие, таблицы. И только после этого идут Components, сгруппированные по функциональным семействам (поля, действия, выбор, навигация и т.д.).

Отдельная особенность: в гайдлайнах встроены разделы «Продуктовый дизайнер» и «Пользовательские исследования». Это выводит систему за пределы UI: описываются роли, процессы и способы проверки качества решений.
Foundations: 8‑пиксельный модуль как базовая архитектура

Ключевой фундаментальный принцип — 8‑пиксельный модуль как единая базовая единица размеров всех интерфейсов Контура. До введения модуля у каждого продукта была своя сетка, что порождало несоответствия. В гайдлайнах честно задокументирован переход: продукты будут поэтапно переезжать на единый модуль. Это редкий публичный пример governance: архитектурное решение принято и прозрачно внедряется.

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

Инженерный слой: React UI, Storybook и отдельные пакеты

Реализация требований в коде — библиотека @skbkontur/react-ui. Отдельно вынесены иконки (@skbkontur/icons), что позволяет обновлять их независимо от компонентов. Для фронтендеров есть живой Storybook (playground) с примерами и документацией. Так формируется понятная цепочка: требования → компоненты → витрина для разработки.

npm install @skbkontur/react-ui
npm install @skbkontur/icons
Storybook: tech.skbkontur.ru/kontur-ui/

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

Доступность как стандарт, а не опция

Доступность оформлена как отдельный раздел с принципами и управлением клавиатурой. Это означает, что a11y воспринимается как стандарт качества интерфейсов в экосистеме, а не как «добавка по желанию».

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

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

Позиционирование DS как регламента: требования первичны, код — реализация.
Сначала принципы, потом компоненты: governance встроен в структуру.
Публичный переход на единую сетку (8px) с явной поэтапностью внедрения.
Встроенные разделы «Продуктовый дизайнер» и «Пользовательские исследования» как часть DS.
Открытые принципы при защите визуала — воспроизводимая модель открытости.
Маркер ⚡️ для актуальных библиотек как простой механизм управления версиями и файлами.

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

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

Web-first: нет публичных компонентных библиотек для iOS/Android.
Figma-библиотеки закрыты — внешним дизайнерам сложно «потрогать» систему руками.
Нет явного публичного раздела токенов/Variables (в отличие от кейсов VKUI/Intergalactic).

Источники