Как использовать дизайн-токены для цветов и отступов сайта

Дизайн-токены связывают названия с цветами, отступами и другими решениями оформления. Начните с повторяющихся значений и проверьте их применение на сайте.

Зачем это нужно

В одном разделе кнопка синяя, в другом — почти такая же, но немного темнее. Внутренние поля карточек похожи, однако различаются без причины. Когда оформление меняется, приходится искать отдельные значения в макетах и стилях. Часть правок легко пропустить.

Дизайн-токен даёт решению устойчивое имя и значение. Вместо случайного цвета в каждом месте появляется согласованное обозначение его назначения. Это помогает обсуждать правки и видеть, какие элементы должны измениться вместе.

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

Как это работает

У токена есть имя и значение, а также могут быть тип и пояснение. Тип помогает отличить цвет от размера или длительности. Пояснение отвечает на практический вопрос: где применять это решение и какие похожие случаи относятся к другому имени.

Базовые значения и значения по назначению

В основе может находиться палитра цветов или набор расстояний. Поверх неё удобно обозначать назначения: основной текст, фон панели, расстояние внутри карточки. Это разные уровни обсуждения. Дизайнер выбирает, какое решение нужно элементу, а конкретное значение берётся из согласованного набора.

Значение токена может ссылаться на другой токен. Такая ссылка позволяет двум назначениям использовать один источник без ручного копирования. Однако одинаковый цвет сегодня не означает, что назначения всегда должны быть связаны: текст и граница могут потребовать разных изменений позже.

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

Токен и переменная в CSS

CSS-переменная — один из способов использовать именованное значение в коде. Дизайн-токен описывает решение шире: оно может применяться в макете, документации и разных технических представлениях. Наличие нескольких переменных само по себе ещё не означает, что эти части согласованы.

В небольшом проекте можно начать с понятного набора CSS-переменных и документации. В более сложной работе источником может стать файл токенов, из которого готовятся нужные представления. Формат обмена DTCG описывает передачу данных между инструментами, но совместимость конкретных инструментов нужно проверять отдельно.

Изменение в макете не обязано автоматически попадать на сайт. Нужен определённый путь: кто меняет источник, как готовится код и как проверяется выпуск. Ручной обмен тоже возможен, если команда понимает ограничения и не принимает две разные копии за один источник.

Как это сделать по шагам

1. Соберите повторяющиеся решения. Возьмите несколько реальных страниц и выпишите цвета, расстояния и другие свойства, которые должны быть согласованы. Отделите намеренные различия от случайных.
2. Выберите небольшой набор назначений. Начните с тех, которые уже повторяются. Для каждого имени запишите смысл и места применения, не пытаясь описать весь будущий сайт.
3. Определите значения и типы. Сверьте цвета, размеры и единицы. Если используете ссылки между токенами, проверьте, что они ведут к существующим значениям и не образуют замкнутый круг.
4. Назначьте источник изменений. Решите, где хранится согласованная версия и кто отвечает за её обновление. Опишите, как дизайнер и разработчик получают актуальные данные.
5. Подключите один повторяющийся компонент. Замените нужные отдельные значения ссылками на согласованный набор. Проверьте обычный вид, длинное содержимое и состояния.
6. Испытайте изменение. На тестовой площадке измените выбранное значение и посмотрите, какие места затронуты. Сравните результат с ожидаемым списком применений.
7. Расширяйте после проверки. Добавляйте новые назначения, когда для них есть реальная причина. Фиксируйте исключения и удаляйте устаревшие связи по согласованному порядку.

Как называть значения

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

Для расстояний договоритесь, что означает каждое имя: размер из общей шкалы или конкретный отступ компонента. Не смешивайте оба принципа случайно. Одинаковое значение у двух расстояний ещё не доказывает, что их нужно навсегда связать.

Добавьте короткое правило выбора. Например, объясните, когда использовать расстояние между частями карточки, а когда — между самостоятельными карточками. Без такого пояснения участники команды могут выбрать разные имена для одинаковой задачи.

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

Минимальный пример связи с CSS

Следующий учебный пример показывает принцип, а не готовую палитру сайта. В нём заданы фон действия и внутреннее поле карточки. Значения нужно выбирать по своему оформлению и проверять вместе с остальными свойствами.

:root { --color-action-background: #2563eb; --space-card: 1rem; }

.action { background-color: var(--color-action-background); } .card { padding: var(--space-card); }

Имя связывает место применения с определённым значением. Если в другом правиле фон действия по-прежнему записан отдельно, изменение переменной его не затронет. Поэтому проверяйте фактические подключения, а не только наличие списка переменных.

Обычные CSS-переменные с двойным дефисом участвуют в наследовании и могут переопределяться в отдельных областях. Если один компонент выглядит иначе, проверьте область действия, переопределения и применённое правило. Не меняйте общий токен до выяснения локальной причины.

Как проверять цвета и отступы

Цвет нужно оценивать в сочетании с фоном, текстом и состоянием элемента. Одно значение не гарантирует читаемость во всех местах. После правки проверьте сочетания, в которых оно используется, включая наведение, фокус и недоступное действие.

Отступ проверяют вместе с содержимым. Увеличение внутреннего поля может сделать карточку просторнее, но оставить меньше места длинному заголовку. Сравните короткий и длинный текст, узкий экран и несколько карточек в ряду.

Если на сайте есть разные темы оформления, назначение должно сохранять смысл в каждой из них. Нельзя считать тёмную тему простой заменой одного фонового цвета. Проверьте согласованные пары текста и фона, границы и состояния.

Для контроля полезен небольшой набор страниц с характерными элементами: карточка, форма, меню, уведомление. После изменения значения проверьте этот набор и места с известными исключениями. Он должен отражать настоящий сайт, а не только аккуратную витрину компонентов.

Когда не нужно

Необязательно начинать одноразовый небольшой экран с большой системы токенов. Если повторяющихся решений мало и нет задачи согласовывать несколько представлений, достаточно понятных стилей и аккуратных правил. Усложнение должно решать наблюдаемую проблему.

Не превращайте каждый уникальный размер в отдельный токен без причины. Перечень из множества случайных значений не создаёт согласованное оформление. Сначала выясните, какие различия нужны, какие можно объединить и кто будет поддерживать результат.

Токены также не заменяют компоненты, правила размещения и проверку текста. Общий отступ не определит число колонок, а единый цвет не объяснит назначение кнопки. Эти решения нужно проектировать и проверять вместе.

Ошибки, которые мешают поддержке

• Считать источником одновременно макет, таблицу и код без порядка обновления. Определите, какая версия согласована и как изменения передаются дальше.
• Связывать несвязанные назначения только из-за одинакового значения. Проверьте, должны ли они меняться вместе.
• Менять общий токен ради одного исключения. Сначала оцените все места применения и локальную причину.
• Создавать ссылки по кругу. Значение должно разрешаться в понятный результат, а не зависеть от самого себя.
• Оставлять отдельные значения в обход набора. Зафиксируйте исключения и проверьте, почему они необходимы.
• Удалять имя, не проверив использование. Согласуйте замену и убедитесь, что зависимые компоненты обновлены.

После внедрения должно быть понятно, где меняют значение, какие элементы его используют и как обнаружить неожиданную правку. Если эти ответы остаются неясными, сначала упростите правила и документацию, затем расширяйте набор.

Термины можно сверить по словарю Design Tokens Community Group, формат обмена — по публикации модуля формата DTCG. Применение переменных описано в руководстве MDN по CSS custom properties.

Цветовые правки проверяйте вместе с контрастом сайта, применение значений — с подключением CSS, а расстояния в макете — с выбором Flexbox или Grid. Помощь с системой оформления можно искать в разделе Сайты.

Прежде чем закреплять цветовые значения в токенах, подбор цветовой палитры сайта помогает проверить сочетания на настоящих блоках интерфейса.

Вопросы и ответы

Дизайн-токен — это обычная CSS-переменная?

CSS-переменная может быть способом применения токена в коде. Само решение включает имя, значение и правила использования и может передаваться между макетом, документацией и техническими представлениями.

Нужен ли специальный сервис для начала?

Не обязательно. Начните с понятного набора, места хранения и порядка изменений. Автоматизацию выбирайте после того, как определены задачи обмена и проверена совместимость используемых инструментов.

Стоит ли объединить все одинаковые цвета?

Сначала выясните их назначения. Если элементы должны меняться независимо, одинаковое текущее значение не причина связывать их навсегда. Общий источник подходит там, где связь действительно нужна.

Можно ли назвать токен по оттенку?

Для базовой палитры это может быть уместно. Для назначения лучше проверить, останется ли имя правдивым после смены цвета. Команде нужно различать значение палитры и роль элемента.

Почему после изменения токена часть сайта не обновилась?

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

Можно ли сразу перенести в токены все свойства?

Лучше начать с повторяющихся решений и проверить их на реальном компоненте. Большой перенос без понятных правил может закрепить случайные различия и усложнить последующие изменения.

Как понять, что набор помогает команде?

Участники выбирают нужное имя без догадок, понимают последствия правки и могут проверить результат. Очередное изменение не требует искать множество несвязанных копий одного решения.