Дизайн-токены и UI-кит: как передать макет в вёрстку без сюрпризов
Частая боль: макет «красивый в PDF», а на проде другие отступы, шрифт подгружается иначе, кнопки пляшут на мобилке. Причина почти всегда в том, что визуальная система не была оформлена как набор правил — только как набор экранов.
Дизайн-токены — это именованные значения (цвет, радиус, шаг сетки), из которых собираются компоненты. UI-кит — библиотека этих компонентов с состояниями: hover, disabled, ошибка формы, пустая корзина.
---
## Что зафиксировать до вёрстки
Палитра: primary, фон, текст, бордер, состояния ошибки и успеха — в HEX и с контрастом под WCAG для кнопок и ссылок.
Типографика: семейство, кегли для H1–H4, lead, body, caption; межстрочные и letter-spacing для заголовков дисплейного шрифта.
Сетка: max-width контейнера, боковые поля на 360 / 768 / 1280, шаг между карточками в каталоге.
Компоненты первого приоритета: кнопки, поля ввода, карточка товара, шапка, футер, модалка — с мобильной и десктопной версией.
---
## Передача разработчикам
Экспортируем токены в CSS-переменные или JSON — студия кладёт их в index.css / тему, а не переписывает «на глаз» из скриншота.
Для иконок — SVG-спрайт или набор React-компонентов; для фото hero — ссылка на сток и crop, как в материале про бесплатные фотостоки.
В брифе отмечаем исключения: страницы без шаблона, кастомные анимации, блоки с CMS-редактируемым HTML — их согласуем отдельно до сметы.
