Signal Commerce
Единая дизайн-система для маркетинговых и продуктовых сценариев розничной платформы: от баннеров до личного кабинета покупателя.
Ключевой результат
×2 быстрее разработка фич
47
Компонентов в системе
94%
Покрытие тестами
3
Поддерживаемых тем
−68%
Сокращение дублирования кода
Контекст
Команда платформы работала с двумя несвязанными кодовыми базами: маркетинговый сайт и веб-приложение. Это создавало постоянный визуальный разрыв и удваивало затраты на поддержку. Мы разработали единую дизайн-систему с общими токенами, компонентами и паттернами взаимодействия, которая закрывает оба контура.
Как мы это сделали
Три этапа, которые превратили задачу в работающий продукт.
Инвентаризация и аудит
01Собрали все существующие компоненты из двух кодовых баз. Выявили дублирование, несоответствия в отступах и типографике. Определили приоритеты — что унифицировать первым.
Токены и архитектура
02Выстроили трёхуровневую систему токенов: глобальные → семантические → компонентные. Это позволило поддерживать светлую, тёмную и брендовую тему без дублирования стилей.
Документация и внедрение
03Запустили Storybook с живыми примерами для каждого компонента. Провели онбординг команды и написали гайдлайны по добавлению новых компонентов в систему.
Стек
ReactTypeScriptStorybookRadix UICSS VariablesЕсли задача понятна, можно обсудить проект уже сейчас.
Напишите на почту или в Telegram — кратко опишите задачу, сроки и контекст. Вернёмся с понятным следующим шагом: оценкой, структурой работ или предложением по запуску.