Дизайн-система для сервиса защиты от DDoS

Интерфейс личного кабинета сервиса защиты от DDoS со временем оброс разнородными стилями:
— разные кнопки, таблицы, поля, модалки, отступы, типографика
— фрагментарная визуальная система, мешающая быстрому развитию продукта.
У продукта не было дизайн-системы, а был только небольшой UI-кит.

• Нет единой визуальной системы: всё рисовалось под конкретные задачи
• Дублирование компонентов и UI-решений
• Сложности при масштабировании и поддержке
• UX-паттерны отличаются в каждом разделе

• Нельзя было резко переходить на новый UI-фреймворк
• Компоненты уже были реализованы по-разному
• Ограниченные ресурсы (2 дизайнера из разных команд)
• Большая legacy-база
• Внедрение шло через реальные задачи, без «выделенного» времени на DS

• Унифицировать визуальный язык: цвета, шрифты, сетка, отступы, поведение компонентов
• Ускорить сборку новых фич и сократить баги за счёт переиспользуемых компонентов
• Выстроить систему токенов и документации
• Поддерживать консистентный UX во всех сценариях

Провел аудит всех разделов кабинета: снял скриншоты, выявил дубли, визуальный шум и разные UX-паттерны. Это помогло выделить ядро интерфейса — самые часто используемые элементы: кнопки, поля, таблицы, модалки и дропдауны. Дальше я создал систему токенов и на их основе сделал компоненты с Variants и логикой состояний. Подготовил документацию и обучающий файл для команды:

1. Гайды по использованию компонентов и состояний
2. Примеры внедрения токенов и компонентов
3. Рекомендации для дизайнеров и разработчиков

Компоненты начали внедрять через реальные продуктовые задачи, с проверкой реализации и адаптацией под кодовую базу