Дизайн-токены из референса
Извлечь систему цветов, типографики, теней, радиусов и spacing из примера и оформить как токены.
Документация компонента
Документация по компоненту: API, варианты, состояния, доступность, использование.
Иконочная система
Набор, вес, размеры, правила использования, accessibility — иконки как система, не разнобой.
План внедрения тёмной темы
Не «инвертируй цвета», а отдельная палитра: токены, контраст, тени, иллюстрации.
Построение цветовой системы
От raw-палитры к семантическим токенам, темам и контрасту — с проверкой на edge-кейсах.
Spacing scale и вертикальный ритм
Базис 4/8, шкала отступов, вертикальный ритм типографики и допустимые исключения.
Конвенция имён компонентов
Система имён: Button / IconButton / ButtonGroup, префиксы Base/With/As, namespacing, борьба с MyButton2 и дубликатами.
Процесс депрекации компонента
Пометить deprecated (badge, console warn, types), дать миграцию (codemod, before/after), удалить. Версии, support window, коммуникация.
Темизация дальше тёмной темы
Multi-theme: бренд-темы, density modes, accessibility modes. Стратегия токенов, переключение, что не масштабируется.
Чеклист ревью нового компонента
Что проверить перед мержем компонента в design system: API, a11y, RTL, тёмная тема, минимизация props, docs, story, тесты.
План миграции дизайн-токенов
Рефактор существующих токенов без поломок прод-компонентов: codemod, opt-in flag, deprecation window, коммуникация.
Дизайн-система от нуля до Storybook
Orchestrator: дизайн-система за один проход. 7 фаз: audit → tokens → primitives → components → docs → Storybook → governance. Готовый стартер на TypeScript + Tailwind.
Полировка поверхностей: бордеры, тени, радиусы как у премиум-сайтов
Конкретные значения, которые отличают «сделано в Figma за час» от премиума. Subtle borders 1px, тени с низким blur, шкала радиусов 4/8/12, никаких неоновых градиентов.