Токены, а не цвета

Дизайн-токен — это именованная переменная, которая хранит дизайн-решение. Вместо того чтобы писать hex-цвет #0a0a0e везде в коде, вы пишете --color-surface-primary. Вместо того чтобы жёстко задавать 16px как отступ, вы пишете --spacing-md. Разница кажется небольшой, пока вам не нужно что-то изменить — и тогда она становится огромной. Токены превращают полный день правки в однострочное изменение.

Токены работают в два слоя. Primitive-токены хранят сырые значения: каждый цвет бренда, каждый шаг отступа, каждый радиус скругления. Semantic-токены ссылаются на примитивы и придают им смысл в контексте. --color-surface-primary не описывает цвет — он описывает роль. Когда вы переключаетесь со светлой темы на тёмную, компоненты не трогаете. Вы меняете то, во что разрешается --color-surface-primary. Сами компоненты остаются неизменными.

Эта модель напрямую соответствует тому, как работают Figma Variables. Primitive-токены становятся базовой палитрой в Figma. Semantic-токены становятся переменными переключения режимов. Когда дизайнер делает тёмную тему, он создаёт второй маппинг семантических токенов на примитивы — а не второй набор компонентов. Передача от дизайна к коду становится структурированным процессом, а не угадыванием. Разработчики всегда точно знают, какой токен применить к конкретному элементу.

Накопительный эффект проявляется со временем. На проектах, где все компоненты уже используют семантические токены, мы реализовывали тёмную тему полностью за один день. Обновление фирменного цвета занимало 20 минут вместо двух дней. Инвестиция в систему токенов окупается при первом серьёзном изменении — и при каждом последующем.