Задачи
Дизайн-система создавалась с нуля на основе существующих стилевых гайдов компании с ключевым ограничением: интерфейс должен оставаться привычным для существующих пользователей
Систематизировать токены
Определить сквозные принципы (Guiding Principles)
Создание паттернов взаимодействия
Документация дизайн-системы
Процесс
Типографика
IBM Plex Sans
Для дизайн-системы выбран IBM Plex Sans — гуманистический гротеск, разработанный IBM. Его нейтральный, но не безликий характер хорошо подходит для корпоративных интерфейсов, сохраняя профессиональный вид без излишней формальности
токены
Цветовая система
Цветовая палитра построена на четырех группах, обеспечивающих визуальную иерархию и функциональную ясность интерфейса. Нейтральные серые формируют основу интерфейса и текстовый контраст. Primary-цвет используется для ключевых действий и навигации. Семантические цвета передают системный статус (успех, ошибка, предупреждение). Акцентные цвета выделяют второстепенные элементы и поддерживают визуальное разнообразие. Все цвета протестированы на доступность с минимальным контрастом 4.5:1 для нормального текста.
Графика
Система иконок
Иконки выполнены в геометрическом стиле с единой толщиной штриха и согласованными пропорциями, что обеспечивает визуальную целостность интерфейса
Компоненты
Библиотека компонентов
Компоненты дизайн-системы построены по атомарной методологии, начиная с базовых элементов (атомов) и объединяя их в сложные интерфейсные блоки. Каждый компонент проектировался с учетом состояний (default, hover, active, disabled), доступности (a11y) и адаптивности. Система включает как простые элементы ввода (кнопки, поля, переключатели), так и комплексные паттерны (формы, таблицы, навигация), обеспечивая консистентность и предсказуемость поведения во всех продуктах