Контакт

Дизайн-токены: цвета, отступы и темы в одном источнике

Что такое дизайн-токены, три уровня от палитры до компонентов, как их называть, одна карточка в трёх темах, виды токенов и код — с живыми примерами.

Дизайн-системы Обновлено

Коротко

Дизайн-токены — это дизайн-решения с именами: цвета, отступы, радиусы, размеры шрифта, тени и длительности, которые хранятся в одном месте и используются и макетом, и кодом. Вместо «#E4FF4E» кнопка берёт «color.accent», вместо «24 px» карточка берёт «space.5». Обычно токены строят в три уровня: базовые — сырые значения палитры и шкал; смысловые — роли вроде фона, текста и акцента; токены компонентов — роли, применённые к конкретной кнопке или карточке. Именно поэтому тёмная тема, второй бренд или редизайн становятся сменой значений в одном файле, а не поиском по сотням стилей.

Три уровня токенов

Базовые токены говорят, что это за цвет, роли — для чего он, токены компонентов — где он используется.

1Базовые

lime-400#E4FF4E
olive-700#9CAF2B
sage-200#E1E3DF
sage-400#BBC0B5
graphite-800#323231
graphite-950#171817

2Роли

color.bg→ sage-200
color.surface→ white
color.text→ graphite-950
color.accent→ lime-400
color.border→ sage-400

3Компоненты

button.bg→ color.accent
button.text→ color.text
card.bg→ color.surface
card.border→ color.border
Кнопка

Ключевой уровень — средний. Компоненты ссылаются на роли, а не на сырые цвета: кнопка берёт «color.accent», а не «lime-400». Тогда новая тема просто переназначает роли на другие базовые значения — компоненты ничего не замечают.

Как называть токены

Хорошее имя говорит о роли, а не о внешнем виде. Внешний вид изменится, роль останется.

ЧтоПлохое имяХорошее имяПочему
Главный акцент green color.accent акцент может перестать быть зелёным
Фон страницы gray-light color.bg в тёмной теме он тёмный
Текст ошибки red-500 color.danger роль понятна в любом компоненте
Поля карточки padding-24 space.5 число может измениться, ступень останется
Размер заголовка font-39 font.step-4 у плавных размеров нет одного числа
Цвет кнопки button-lime button.bg → color.accent компонент ссылается на роль

Одна карточка, три темы

Переключите тему: код карточки остаётся прежним, меняются только значения четырёх ролей.

Новинка

Стол из массива дуба

Код карточки не меняется — меняются только значения ролей: фон, поверхность, текст, акцент.

ПодробнееВ избранное
  • color.bg
  • color.surface
  • color.text
  • color.accent

Тот же механизм даёт тёмную тему, второй бренд на том же коде, сезонную акцию или версию с высоким контрастом. Без уровня ролей каждая из них — отдельная копия стилей.

Виды токенов: не только цвета

Всё, что в дизайне повторяется и имеет значение, становится токеном.

Цвет

color.accent

Отступы

space.5 = 24px

Радиусы

radius.sm = 8px

Шрифт

AaAaAa
font.step-3

Тени

shadow.md

Движение

duration.base = 280ms

Токены в коде: источник и результат

Токены хранят в JSON — в формате с $value и $type, который читают Style Dictionary и Tokens Studio, — и превращают в CSS-переменные.

Источник

Роли ссылаются на базовые значения в фигурных скобках — меняете базовое, и за ним идут все роли.

tokens.json 
{
  "color": {
    "lime-400":     { "$type": "color", "$value": "#E4FF4E" },
    "sage-200":     { "$type": "color", "$value": "#E1E3DF" },
    "graphite-950": { "$type": "color", "$value": "#171817" },

    "bg":        { "$type": "color", "$value": "{color.sage-200}" },
    "text":      { "$type": "color", "$value": "{color.graphite-950}" },
    "accent":    { "$type": "color", "$value": "{color.lime-400}" },
    "on-accent": { "$type": "color", "$value": "{color.graphite-950}" }
  },
  "space": {
    "4": { "$type": "dimension", "$value": "16px" },
    "5": { "$type": "dimension", "$value": "24px" }
  },
  "duration": {
    "base": { "$type": "duration", "$value": "280ms" }
  }
}

CSS-переменные и тема

Тёмная тема переназначает две роли; кнопка не меняется.

tokens.css 
/* Собрано из tokens.json: базовые значения один раз, роли — для каждой темы */
:root {
  --lime-400: #E4FF4E;
  --sage-200: #E1E3DF;
  --graphite-950: #171817;

  --color-bg: var(--sage-200);
  --color-text: var(--graphite-950);
  --color-accent: var(--lime-400);
  --color-on-accent: var(--graphite-950);
}

[data-theme="dark"] {
  --color-bg: var(--graphite-950);
  --color-text: #F8F8F8;
}

/* Компоненты используют только роли, никогда базовые значения */
.button {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

6 правил системы токенов

  1. 01

    Один источник

    Токены живут в одном файле, и макет, и код берут их оттуда.

  2. 02

    Компоненты — только через роли

    Сырой цвет внутри компонента — будущая ошибка тёмной темы.

  3. 03

    Имена по роли

    «accent», «danger», «surface» — а не «green», «red», «white».

  4. 04

    Пара для каждого фона

    Для каждой роли фона есть роль текста, которая на нём читается.

  5. 05

    Мало уровней

    Трёх уровней достаточно; четвёртый обычно только добавляет путаницы.

  6. 06

    Правки — через источник

    Собранный CSS никто не правит руками; его пересобирают из токенов.

Частые ошибки с дизайн-токенами

  1. Токены только в макете

    В коде свои цвета, и через месяц они уже не совпадают.

  2. Сотни токенов

    Токен на каждый случай превращает систему в словарь, который никто не читает.

  3. Имена по цвету

    «blue-button» остаётся синим в имени, когда после редизайна кнопка стала лаймовой.

  4. Пропуск ролей

    Компоненты ссылаются прямо на палитру, и тёмная тема требует их переписать.

  5. Нет ролей для текста

    Текст на акценте становится нечитаемым в одной из тем.

  6. Ручные правки результата

    Следующая сборка их затирает, и ошибка возвращается.

Вопросы о дизайн-токенах

Что такое дизайн-токены простыми словами?

Значения дизайна с именами — цвета, отступы, размеры, — общие для макета и кода.

Чем токены отличаются от CSS-переменных?

Токены — источник; CSS-переменные — один из форматов, в которые их превращают, наравне с iOS, Android и макетом.

Где хранить токены?

В JSON-файле в репозитории; переменные Figma и Tokens Studio связывают его с макетом.

Сколько токенов нужно сайту?

Обычно несколько десятков: палитра, 10–15 ролей, шкалы отступов и шрифтов, радиусы и длительности.

Нужны ли токены небольшому сайту?

Короткий набор CSS-переменных — да, он ничего не стоит; полный конвейер — когда продуктов или тем несколько.

Что такое Style Dictionary?

Инструмент, который превращает один набор токенов в файлы для CSS, JavaScript, iOS и Android.

Форма

Токены
для бренда

Собираю системы токенов, которые связывают макет и код: палитра, роли, темы и значения компонентов в одном источнике. Расскажите о проекте — отвечу в течение рабочего дня.

Или пишите на [email protected]