Самая частая ошибка при запуске дизайн-системы — начать с компонентов, а не с токенов. Тогда через полгода у вас три оттенка «основного синего» в разных местах.

Порядок слоёв#

  1. Токены: цвет, типографика, отступы, радиусы, тайминги анимаций.
  2. Примитивы: кнопка, поле ввода, чип, карточка.
  3. Композиты: форма, карточка проекта, модальное окно.
  4. Паттерны страниц: как композиты складываются в реальные экраны.

Контраст — не опция

Каждая пара «текст на фоне» в токенах должна проходить минимум AA (4.5:1) — иначе доступность придётся чинить точечно на каждой странице.

Пример карточки, собранной из примитивов дизайн-системы
Карточка — это композиция из уже существующих токенов и примитивов, не новый набор стилей.

Документация#

Живой пример с переключателем состояний экономит часы созвонов «а как это должно выглядеть при ошибке».

Ключевые выводы

  • Дизайн-токены — это первый слой, а не последний штрих: без них компоненты негде переиспользовать согласованно.
  • Начинать стоит с 5–7 самых частых компонентов, а не пытаться описать всё сразу.
  • Доступность (контраст, фокус-состояния) дешевле заложить в токены, чем чинить постфактум.
  • Документация с живыми примерами используется чаще, чем статичный PDF-гайдлайн.