Верстка по макету: адаптивные страницы B2B SaaS-кабинета с дизайн-токенами и состояниями компонентов

Есть действующий B2B SaaS для управления закупками и складом. Дизайн обновили в Figma, но интерфейс в продукте частично на старой верстке, частично в устаревшем UI-kit. Требуется сверстать по макету набор ключевых экранов личного кабинета так, чтобы их можно было безболезненно подключить к текущему фронтенду.

Техническая среда и исходные данные
- Макеты и прототипы в Figma: desktop 1440, tablet 1024, mobile 375, включая hover-focus-active-disabled, empty-error-loading states
- Текущий стек: React 18, Vite, TypeScript, SCSS Modules, Storybook уже подключен
- В проекте есть базовые компоненты, но они не совпадают с новым дизайном - допускается создание нового слоя UI-компонентов рядом со старым

Объем работ и этапы
1) Аудит макетов и согласование карты экранов-компонентов: выделить переиспользуемые блоки, определить сетку, типографику, цвета, spacing, состояния
2) Настройка дизайн-токенов в коде: CSS variables для цветов, типографики, радиусов, теней, z-index, spacing scale. Поддержка light и dark темы из макета
3) Верстка и интеграция в проект 6 экранов кабинета (с подключением к существующим страницам-роутам без изменения бизнес-логики):
- Дашборд с виджетами и адаптивной перестройкой сетки
- Таблица заказов: липкий header, горизонтальный скролл на узких экранах, состояния empty-loading-error
- Страница заказа: двухколоночная композиция, блоки с коллапсами, адаптив до mobile
- Форма создания заказа: многошаговая раскладка, валидационные состояния полей (визуально), disabled и helper texts
- Центр уведомлений: группировка по датам, виртуализацию не делать, но обеспечить производительную верстку и корректные переносы
- Настройки профиля: секции, toggles, подтверждение действий (модальное окно)
4) Компоненты UI уровня: Button, Input, Select (кастомная стилизация поверх нативного), Checkbox, Toggle, Badge, Tabs, Modal, Tooltip, Skeleton, Toast. Компоненты должны иметь состояния из макета и быть оформлены в Storybook
5) Кроссбраузерная проверка и полировка: Chrome, Firefox, Safari, Edge. Исправление расхождений с Figma

Ограничения
- Не трогать API, бизнес-логику и типы данных - задача именно про верстку, стили, компоновку, состояния и подключение к текущим страницам
- Не использовать тяжелые UI-библиотеки (MUI, AntD и аналоги) - только существующий стек и собственные стили
- Верстка должна быть без привязки к pixel-perfect на уровне 1-2px, но с соблюдением сетки, отступов и типографики в пределах допусков
- Доступность: видимые focus-состояния, корректный tab-order, aria-label для иконок-кнопок, контраст текста не ниже WCAG AA для основного текста

Конкретный результат
- PR в репозитории с готовой версткой 6 экранов и набором UI-компонентов
- Storybook со всеми компонентами и их состояниями
- Краткий README: как запускать, где смотреть страницы, какие токены добавлены

Измеримые критерии приемки
- Визуальное соответствие Figma на контрольных брейкпоинтах 1440-1024-768-375 с допуском по отступам до 4px и по размерам шрифта до 1px
- Нет горизонтального скролла страницы на 375 и 768, кроме таблицы заказов, где он допускается внутри контейнера
- Все интерактивные элементы имеют hover-focus-active-disabled состояния как в макете
- Lighthouse (Chrome) для любой из новых страниц: Accessibility не ниже 90, Best Practices не ниже 90 (без учета бэкенда)
- Нет критичных ошибок в консоли при навигации по новым страницам

Материалы
- Доступ к Figma и репозиторию предоставлю, список страниц и ссылки на макеты перед стартом. В процессе ожидается 2-3 коротких созвона для синхронизации по компонентам и допускам.