Архитектура токена семантического дизайна: глобальные, семантические и компонентные токены

Три уровня

Material Design описывает три класса токенов: эталонные, системные и компонентные. Многие команды называют их глобальными, семантическими и компонентными. Названия различаются, но идея одна: отделить необработанные значения от решений о том, как они будут использоваться.

• Глобальный (ссылка): каждое необработанное значение в системе, например синий-600, пробел-4, размер шрифта-16, пружинный-нежный.
• Семантический (системный): для чего предназначено значение, например color.text.primary, color.action.primary, motion.enter.
• Компонент: как один компонент использует систему, например button.background или Dialog.motion.open.

Почему семантические токены имеют значение

Если кнопка напрямую использует blue-600, каждое изменение темы означает редактирование каждого компонента. Если он использует color.action.primary, темный режим, высокую контрастность или новый бренд, измените только то, на что указывает color.action.primary. В материале отмечается, что токены позволяют применить высококонтрастную палитру или изменить масштаб шрифта в масштабе всей системы именно таким образом.

Темы и несколько брендов

Для мультибрендовых продуктов или продуктов с белой этикеткой сохраняйте один набор семантических и компонентных токенов и одну глобальную палитру для каждого бренда. Каждая тема представляет собой сопоставление семантических токенов с глобальными значениями. В первую стабильную версию спецификации W3C Design Tokens (2025.10), выпущенную в октябре 2025 года, добавлена ​​поддержка тем и нескольких брендов, современные цветовые пространства, такие как Display P3 и OKLCH, а также псевдонимы и ссылки на уровне компонентов.

Токены движения тоже сюда относятся

Длительность, кривые замедления и пружины соответствуют одним и тем же уровням. Глобальный токен может быть пружинистым благодаря своей жесткости и демпфированию; на него указывает семантический токен motion.enter; токен компонентаsheet.motion.open указывает на motion.enter. Добавьте тему с уменьшенным движением, которая преобразует токены движения в короткие затухания.

Доставка токенов на каждую платформу

Храните токены в репозитории как DTCG JSON, единственном источнике правды. Инструмент сборки, такой как Style Dictionary, преобразует их в переменные CSS, Swift, Kotlin, Flutter или другие форматы. Инструменты проектирования, читающие один и тот же формат, могут оставаться синхронизированными, а инструменты кодирования искусственного интеллекта могут напрямую читать JSON.

• Источник истины: DTCG JSON в Git, рассмотренный как код.
• Сборка: трансформируйтесь на каждую платформу при каждом изменении.
• Синхронизация инструментов проектирования: импортируйте или подключайте, значения никогда не копируются вручную.
• Линтинг: запретить необработанные значения в компонентах