UI токены дизайн системы: принципы, паттерны и чек-листы

UI-токены — это атомарные переменные интерфейса (цвет, размер, интерлиньяж, радиус, тень, скорость анимации и т. п.), которые служат единственным источником правды для дизайна и кода. Токены позволяют централизованно управлять темой и брендом, держать доступность в допуске, ускорять разработку и сокращать расхождения между макетами и продуктом. Правильно построенные токены помогают масштабировать продукт, не превращая его в «лоскутное одеяло». Ниже — рабочая методика, как спроектировать токены, провести темизацию, зафиксировать доступность форм/таблиц и обложить всё перфоманс-аудитом. Сроки/стоимость разработки уточняйте по контактам на сайте.

1) Зачем нужны токены: эффекты для бизнеса и команды

Скорость изменений. Обновление бренда или сезонной темы делается через пару переменных, а не массовый поиск/замену по проекту.
Консистентность. H1, CTA, инпуты и таблицы используют одну шкалу размеров/цветов и ведут себя одинаково в любом продукте.
Доступность по умолчанию. Контрасты, размеры кликабельных зон, фокус-стили — задаются на уровне токенов и не «ломаются» локальными правками.
Перфоманс. CSS-переменные позволяют переключать темы без пересборки; уменьшение кастомных правил снижает вес стилей и риски CLS/INP.

2) Таксономия: от core до семантических токенов

В основе — core-токены (raw-значения) и семантические токены (значения «с смыслом»). Такой слой позволяет не привязываться к конкретному цвету/размеру, а работать через назначение (primary, success, error, subtle и т. п.). Сверху — alias-токены для компонентов (например, button.primary.bg).

Core-слой (примеры)

color.base.gray.50…900 — нейтральная палитра;
color.base.blue/green/red — акцентные семена;
font.family.sans/mono — семейства;
font.size.12…60, line.16…70 — шкалы типографики;
space.4/8/12/16/24/32 — шкала отступов;
radius.0/4/8/12, shadow.100/200;
motion.fast/normal/slow — длительности анимаций.

Семантический слой

color.text.primary/secondary/muted/inverse
color.bg.canvas/surface/subtle/elevated
color.border.default/focus/error/warn
color.intent.success/warning/danger/info
typography.h1/h2/h3/body/small — связка {font-size, line-height, weight}
focus.ring.width/color/offset, hitarea.min

3) Типографика: из токенов — в предсказуемые заголовки

Токены типографики избавляют от «магических» значений в макетах и коде. Мы фиксируем шкалу для заголовков и текста, сразу привязывая межстрочное. Для H1 на материалке — 60/70, для H2 — 28/34, для основного текста — 18/28–30. Все размеры лежат в токенах, а класс компонента лишь «ссылается» на них. Так проще держать консистентность на десятках страниц и в разных продуктах.

typography.h1 = {size: 60, line: 70, weight: 600}
typography.h2 = {size: 28, line: 34, weight: 600}
typography.body = {size: 18, line: 28, weight: 400}
typography.small = {size: 14, line: 20, weight: 400}

4) Цвет и контраст: доступность по умолчанию

Палитра проектируется от контрастных пар «текст ↔ фон» и состояний элементов (hover/active/disabled/focus). Контрастные комбинации фиксируются в семантических токенах — и переиспользуются в компонентах. Изменение оттенка в теме не ломает доступность, потому что парные значения пересчитываются вместе.

Паттерны для форм и таблиц (доступность)

Инпуты. Размер кликабельной области ≥ 44×44, контраст текста и плейсхолдера ≥ AA, focus-ring видим у клавиатуры и мыши.
Ошибки. Цвет ошибки + иконка + текст, статус в aria-live.
Таблицы. Чёткий порядок фокуса, гибкая высота строки, токен row.zebra для чередования фона, повышенный контраст у активных ячеек/сортировки.
Ховер ≠ единственный сигнал. То, что видно на ховере, должно иметь альтернативу (иконка, подпись, явная кнопка).

5) Пространство, радиусы, тени: материальность интерфейса

Отступы и сетка — это ритм. Мы задаём единую шкалу space, применяем её для вертикальных ритмов карточек, секций и форм. Радиусы и тени формируют «ощущение» продукта: миксовать разные радиусы в одном сценарии нельзя — пользователь читается по контуру компонента.

space: 4/8/12/16/24/32/40/60 — «живёт» в токенах и утилитах Tailwind.
radius: 8 как базовый, 12 — для крупных карточек/модалок.
shadow: 100/200 — мягкие, без «жирных» размытий, чтобы не снижать контраст.

6) Состояния и фокус: предсказуемость действий

Для каждого интерактива фиксируем набор: default, hover, active, focus-visible, disabled, loading. Фокус-кольцо — не «убирается», а приводится к бренду через токены focus.ring.color /focus.ring.width. Это и доступность, и предсказуемость.

Фокус видим на клавиатуре и мыши (не скрываем outline для мыши).
Disabled-состояния не используют только прозрачность — нужен явный цвет и курсор.
Loading имеет собственные токены (размер спиннера, цвет, отступы).

7) Темы, режимы, брэнд-оверлеи

Токены живут в CSS-переменных. Тема (light/dark/high-contrast) — это набор переопределений семантических токенов. Брэнд-оверлей (white-label) — слой переопределений поверх темы: логотип, акцент, иллюстрации, но без изменения размеров и ритмов. Переключение происходит на уровне класса или data-атрибута — без пересборки фронта.

8) Пайплайн «Figma → код»

Источник правды — репозиторий токенов. Figma «подписывается» на них через плагины/импорт, а не наоборот. Сборка генерирует CSS vars/TS-константы, публикует пакет, обновляет документацию и playground с примерами.

Шаги

Определяем таксономию токенов, заводим репозиторий (JSON/TS).
Генератор собирает CSS-переменные и экспорты для компонентов.
Компоненты используют только семантические токены (не core напрямую).
CI публикует пакет и прогоняет визуальные/axe-тесты.

9) Перфоманс-аудит интерфейсов: где «течёт» скорость

Токены — инструмент перфоманса: единые размеры/типографика уменьшают число кастомных правил, ускоряют отрисовку и снижают риск CLS. В аудите мы проверяем LCP/CLS/INP на шаблонах и связываем их с токенами: заголовочный шрифт предзагружается, изображения имеют резерв, интерактивы не вешают «тяжёлых» обработчиков.

LCP: критичный текст рендерится сразу; hero-изображение оптимизировано.
CLS: все медиа с фиксированными размерами/резервами; шрифты с fallback.
INP: debounce на вводе, мелкие обработчики, никаких блокирующих тасков.
CSS budget: компоненты тянут только свои стили; нет «всё-в-одном» файла.

10) Доступность форм и таблиц: чек-листы

Формы

Лейбл связан с полем; плейсхолдер не заменяет лейбл.
Хинты и ошибки рядом с полем; статус объявляется в aria-live.
Кнопки формы имеют понятные подписи (не «ОК», а «Отправить заявку»).
Hit-area ≥ 44 px; фокус-кольцо контрастное и непрерывное.

Таблицы

<th scope="col/row">, заголовки описательные, сортировка с aria-sort.
Зебра-фон и hover — семантические токены, читаемые в обеих темах.
Состояния «нет данных», «ошибка загрузки», «пустой фильтр» — с инструкциями.
Массовые действия — видимая панель с подтверждениями опасных операций.

11) Миграция на токены: план на 4–8 недель

Недели 1–2: инвентаризация стилей, карта цветов/размеров, цели по перфомансу/доступности.
Неделя 3: сборка core/semantic-слоёв, подключение в Figma и код.
Неделя 4: миграция типографики, сетки, радиусов, фокусов.
Недели 5–6: формы/таблицы на семантических токенах, axe-сканы и визуальные регрессии.
Недели 7–8: темы (dark/high-contrast), документация, гайд по вкладкам/ролям.

12) Управление и версия: чтобы система жила

semver и миграционные гайды для изменений токенов.
Changelog с ссылками на PR/issue и пометками breaking.
Contribution-модель: кто вносит, кто ревьюит, как тестируются изменения.
Playground/Storybook с примерами для каждой темы и состояния.

13) Анти-паттерны токенов

Привязка компонентов к «сырым» цветам вместо семантики.
Локальные переменные внутри компонента, не согласованные с системой.
«Выключенный» фокус ради эстетики — убивает доступность.
Единый «толстый» CSS без tree-shaking и модульности.
Токены только в Figma, но не в коде — рассинхрон через неделю.

Вывод: ui токены дизайн системы — это практичный способ зафиксировать язык продукта и ускорить развитие без потери качества. Когда цвет, типографика, отступы, состояния и темы живут в токенах, интерфейс предсказуем, доступен и быстрый. Сначала — таксономия и пайплайн, затем — миграция форм/таблиц и перфоманс-аудит. Сроки/стоимость разработки уточняйте по контактам на сайте.