Урок 1: Дизайн-токены — от жёстко заданных значений к системе токенов

Каждый экран может выбрать цвет, значение отступа и шрифт, которые сами по себе «выглядят правильно», — но после десятков экранов эти небольшие различия накапливаются: чуть другой синий здесь, чуть другой отступ там, пока весь продукт не начинает ощущаться несогласованным. А затем наступает момент,

Токен — как рецептурная карточка для цвета в лаборатории: вы один раз записываете «фирменный фиолетовый = такая-то смесь», и затем каждый, кому нужен этот цвет, обращается к карточке, вместо того чтобы снова угадывать смесь.

дизайн-токен: Именованное дизайн-решение — цвет, отступ или радиус — хранящееся в одном месте и используемое повсюду, вместо жёстко заданного значения, повторяемого вручную.
Тема Tailwind: Объект `theme` внутри `tailwind.config.ts`, где вы определяете токены проекта, — Tailwind генерирует из них служебные (utility) классы.
семантический цвет: Токен, названный по своей роли, а не по оттенку — `brand` или `danger` вместо `purple-500`, — так что смена оттенка никогда не требует переименований в коде.
произвольное значение: Синтаксис Tailwind вроде `bg-[#6c5ce7]`, который обходит тему и внедряет жёстко заданное значение прямо в класс, — быстрый путь, возвращающий вас к той самой проблеме, которую решают токены.