Дизайн-система для B2B — не про красивые кнопки. Про то, чтобы оператор на 300-м заказе дня не сбился с настройки фильтров. Принципы, выработанные на B2B-порталах и ERP.
Принципы
Минимум цветов, максимум типографики. Каждый статус — с чёткой семантикой. Один акцентный цвет, три уровня текста, четыре размера радиуса. Остальное — вариации. Единообразие важнее разнообразия: кнопка в фильтре и кнопка в форме — одна кнопка.
Обязательные компоненты B2B
DataGrid — таблица с сортировкой, фильтрами, постраничным выводом, массовыми действиями. FilterPanel — панель фильтров с чипами активных. BulkActions — панель массовых операций над выбранными строками. StatusBadge — статус с цветовой семантикой. OrderWizard — многошаговая форма заказа с сохранением состояния.
Каждый — с правилами: когда DataGrid, когда простая таблица. Без правил дизайнеры и разработчики изобретают свои решения, система распадается.
Токены
Три уровня. Примитивы: --gray-100, --blue-500. Семантические алиасы: --color-bg, --color-text, --color-accent. Компонентные: --button-bg-primary, --card-border. Разработчик использует только 2-й и 3-й уровни. Это даёт смену темы без правок в компонентах.
Доступность в B2B
Пользователь проводит 6–8 часов в день. Контраст, размер шрифта, зона клика критичны. Стандарт — WCAG AA: контраст текста 4,5:1, интерактивных элементов 3:1. Состояние фокуса видно всегда.
Чего избегаем
Не используем сторонние наборы готовых компонентов (Material, AntD, Chakra) — тянут чужую эстетику и лишние зависимости. Собираем свои на Radix Primitives + Tailwind. Не делаем анимации ради анимаций: максимум 200–300 мс ease-out на переходы.
Чек-лист внедрения
- Соберите все существующие экраны и компоненты.
- Классифицируйте: сколько разных кнопок, полей, таблиц.
- Согласуйте минимальный набор (не больше 30 компонентов).
- Опишите токены.
- Соберите библиотеку в Figma.
- Синхронизируйте с кодом (Storybook).
- Обучите команду.
- Назначьте ответственного за развитие.
Выводы
Дизайн-система — инвестиция. Первые 2–3 месяца проект идёт медленнее. На втором-третьем проекте команда экономит 30–40% времени на вёрстке и согласованиях.