Как описать цветовую систему, по которой новый цвет попадает в продукт без вас

Пока палитра — привычка одного человека, новый цвет попадает в продукт, потому что понравился.

Через три месяца работы втроём в макетах магазина нашлись:

• оранжевый для баннера акции;
• второй зелёный для статуса «Доставлен»;
• синий кнопки, вписанный в оптовый раздел прямо кодом цвета.

По отдельности каждое решение разумно. Вместе они ломают тёмную тему и контраст, а на вопрос «можно ли взять этот цвет» отвечает только автор палитры.

Цветовая система отвечает на этот вопрос сама. В ней пять частей:

1. Примитивы — все цвета продукта со шкалами оттенков.
2. Роли — зачем цвет на экране: фон, текст, действие, ошибка.
3. Две темы — у каждой роли значение для светлой и для тёмной.
4. Таблица контраста — какие пары ролей проходят нормы и насколько.
5. Правило добавления — как в систему попадает новый цвет.

Примитив говорит, какой это цвет. Роль говорит, зачем он.

• Примитив — blue-600, gray-50. Это значение со своим местом в шкале. Он не знает, где будет стоять, и не меняется от темы.
• Роль — action, surface, error. Она ссылается на примитив, и ссылка зависит от темы: в светлой action — это blue-600, в тёмной — blue-300.

«Серый-100» живёт внутри системы. Наружу — в макеты и в код экранов — выходит только роль: «поверхность», «вторичный текст».

Экран говорит, зачем ему цвет, а система решает, какой он.

Названия разные, устройство общее: слой значений и слой смысла.

У Atlassian есть ещё третий тип цвета — акценты: десять цветов без смысла, для меток и категорий, которые выбирает сам человек.

Их нельзя брать там, где у цвета есть значение, например для предупреждения.

Это ответ на вопрос «а какой цвет дать тегу»: не роль статуса, а отдельный набор без смысла.

Экран на примитивах выглядит правильно ровно до смены темы.

Две карточки заказа выглядят одинаково. Левая собрана на ролях, правая — на тех же цветах, вписанных значениями. Включите тёмную тему.

Что ещё ломает прямой примитив

• Смену палитры. Бренд решил сделать синий чуть теплее. Роль action меняется в одном месте, а каждый вписанный #1D5FD1 надо искать по всем макетам и всему коду.
• Смысл. По #C23030 в коде не понять, ошибка это или просто красный заголовок акции. По error понятно сразу, и его можно найти поиском.
• Совпадение цветов. Сегодня у разделителя и у неактивной рамки один серый. Если взять для рамки «роль разделителя, раз цвет тот же», следующая правка разделителя сломает рамку. Atlassian об этом прямо предупреждает.

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

У info и action один примитив, но роли разные. Сегодня они совпадают по цвету, завтра info может стать бирюзовым, и кнопки это не заденет.

Контраст считают не для цветов, а для пар ролей, которые встречаются на экране.

Material Design 3 строит роли парами — primary и on-primary, surface и on-surface. И обещает у пар минимум 3 : 1, если их использовать в задуманных сочетаниях.

Этого хватает для крупного текста и значков, но не для обычного текста. Поэтому свою таблицу пар стоит считать самим и держать под обычный текст 4,5 : 1.

Новый цвет попадает в продукт по порядку.

Дизайнер промо-страниц хочет оранжевый #FF8A3D для кнопки акции. Вот как это решается по правилу:

1. Сначала роль, потом цвет. Зачем оранжевый? «Выделить кнопку акции». Это действие, и роль action уже есть. Если нужна вторая, заметная кнопка, это новая роль с именем по смыслу, например action-promo.
2. Проверить, что роль правда новая. Может быть, хватит существующей: крупный баннер с кнопкой action выделится и без нового цвета.
3. Предложение коротко: имя роли, где она стоит, почему существующие не подходят, снимок экрана.
4. Значения для обеих тем из шкалы. Нет подходящего оттенка — в шкалу добавляется новый примитив.
5. Пары контраста для обеих тем. Белый на #FF8A3D даёт 2,34 : 1 — кнопка с такой надписью не проходит. Проходит, например, #B34700: 5,50 : 1. Или оставить яркий оранжевый, но с тёмной надписью: 7,06 : 1. Выбор между ними — за брендом, а не за одним макетом.
6. Роль появляется в Figma и в коде одновременно, с датой в журнале изменений системы, и команда о ней узнаёт.

Работает, когда в макете и в коде одни и те же имена ролей, а примитивы спрятаны внутри системы.

/* Примитивы — только внутри системы, экраны их не видят */
:root {
  --gray-0: #FFFFFF;   --gray-50: #F4F6F8;  --gray-100: #E8EBEE;
  --gray-300: #A3ADB8; --gray-600: #5B6570; --gray-900: #1B1F24;
  --gray-950: #15181C;
  --blue-300: #7AA7F0; --blue-600: #1D5FD1; --blue-950: #0B1B33;
  --red-300: #F07C7C;  --red-600: #C23030;
}

/* Роли — светлая тема по умолчанию */
:root {
  color-scheme: light dark;
  --color-bg: var(--gray-0);
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-600);
  --color-action: var(--blue-600);
  --color-on-action: var(--gray-0);
  --color-error: var(--red-600);
}

/* Тёмная тема — те же имена, другие значения */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--gray-950);
    --color-text: var(--gray-100);
    --color-text-muted: var(--gray-300);
    --color-action: var(--blue-300);
    --color-on-action: var(--blue-950);
    --color-error: var(--red-300);
  }
}

/* Экраны берут только роли */
.button { background: var(--color-action); color: var(--color-on-action); }
.error  { color: var(--color-error); }

В Figma

• Две коллекции переменных. «Примитивы» — шкалы цветов. «Роли» — переменные, которые ссылаются на примитивы: в Figma это называется alias, и ссылаться можно только на переменную того же типа.
• Два режима в коллекции ролей — Light и Dark. Переключение режима на фрейме перекрашивает весь экран. Режимы есть на тарифах Professional и выше: до 10 на коллекцию в Professional, до 20 в Organization; на бесплатном Starter их нет.
• Области применения. У переменной можно ограничить, куда её разрешено ставить: заливка фрейма, фигуры, текста, обводка, эффекты. Роли текста — только в заливку текста, роли фона — только в заливку фреймов.
• Формат для разработчиков. Сообщество W3C по дизайн-токенам в октябре 2025 года выпустило первую стабильную версию формата — 2025.10, и Figma умеет импортировать токены в нём.

С системой замечание звучит так: «Ц1: кнопка залита значением, нужна роль action». Без неё — «какой-то не наш синий».

Строки системы магазина, на которые ссылается ревью:

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

Часть 1 · Примитивы и роли, 60 минут

1. Соберите примитивы из того, что уже есть в продукте, и разложите по шкалам: серые, основной цвет, статусы.
2. Выпишите роли с назначением и значениями для обеих тем — только именами примитивов.
3. Роль без тёмного значения — первая находка: допишите значение.

ЦВЕТ · ПРОДУКТ: ______________   Версия: __  Дата: __.__.____
Кто отвечает: ______________   Как предложить правку: ______________

1. ПРИМИТИВЫ (шкалы)
   gray:   ___ #______  ___ #______  ___ #______  ...
   ______: ___ #______  ___ #______  ___ #______  ...

2. РОЛИ
   роль          | зачем                      | светлая     | тёмная
   bg            | __________________________ | ___________ | ___________
   text          | __________________________ | ___________ | ___________
   text-muted    | __________________________ | ___________ | ___________
   action        | __________________________ | ___________ | ___________
   on-action     | __________________________ | ___________ | ___________
   error / -surf | __________________________ | ___________ | ___________

3. ТАБЛИЦА КОНТРАСТА (пары ролей)
   пара                  | норма | светлая | тёмная
   text на bg            | 4,5   | ___ : 1 | ___ : 1
   ______ на ______      | ___   | ___ : 1 | ___ : 1

4. СТРОКИ СИСТЕМЫ
   Ц1 ____________________________________________
   Ц2 ____________________________________________

5. НОВЫЙ ЦВЕТ
   роль → проверить, что новая → предложение → значения двух тем
   → пары контраста → Figma и код одновременно → журнал

Часть 2 · Контраст и правило, 30 минут

1. Выпишите все пары ролей, которые встречаются на экранах, и замерьте их в обеих темах.
2. Запишите порядок добавления нового цвета и строки системы с номерами.

Часть 3 · Чужой макет, 30 минут

1. Возьмите макет, который делали не вы.
2. Найдите места, где цвет задан значением, где роль выбрана по виду и где статус передан одним цветом.
3. Каждую находку запишите с номером строки и видом: нарушение, не ошибка, система не покрывает.

Что должно получиться

• Документ системы по шаблону: примитивы, роли в двух темах, таблица пар, строки, порядок добавления.
• Разбор чужого макета с номерами строк.
• Через месяц — хотя бы один цвет, добавленный коллегой по правилу.

План работы: 60 минут на примитивы и роли, 30 на контраст и правило, 30 на разбор. Всего — около двух часов.

Частые сложности

• «В коде сотни прибитых цветов». Не переводите всё сразу. Заведите роли, запретите новые значения в коде и переводите экраны по мере правок.
• «Бренд-гайд даёт шесть фирменных цветов». Они становятся примитивами. Ролью становится только тот, у кого есть работа на экране.
• «Разработчики называют по-своему». Договоритесь об одном списке имён ролей до того, как они появятся в коде. Имена в Figma и в CSS должны совпадать.
• «Роль нужна срочно, ждать некогда». Сделайте исключение с записью в журнале. Порядок добавления для того и нужен, чтобы исключение не превращалось в норму молча.

Система работает, если

• Примитивы собраны в шкалы и не выходят на экраны
• Каждая роль названа по смыслу и описана одной строкой
• У каждой роли два значения, и оба — примитивы
• Таблица пар контраста есть для обеих тем и пересчитывается после правок
• Статусы — слово и значок, цвет помогает
• Имена ролей в Figma и в коде совпадают
• Порядок добавления нового цвета записан, и им пользуются
• У системы есть версия и журнал изменений

Что мешает

• Код цвета на экране. Не переключается с темой, не находится при смене палитры.
• Роль по виду. Взяли чужую роль, потому что цвет совпал.
• Роль без тёмного значения. В тёмной теме показывает цвет светлой.
• Контраст на глаз. Пары статусов на подложках тихо проваливаются.
• Цвет без порядка. Оранжевый «на одну акцию» живёт в продукте годами.
• Роли статусов для категорий. Зелёная метка читается как «успех».

На первой ступени собирали палитру с ролями, на второй — проверяли контраст и собирали тёмную тему. Здесь цвет становится системой, по которой работает вся команда.

• Design tokens и Color rolesMaterial Design 3 · на английском · бесплатноТри класса токенов — reference, system и component — и где переключается тема: на system-токенах. Во второй статье 26 ролей цвета, которые работают парами с обещанным минимумом 3 : 1, и почему рамка поля и разделитель — разные роли. Вкладка How to use tokens с Adobe XD и DSP устарела.
• Color, Accents и Design tokensAtlassian Design System · на английском · бесплатноКак устроено имя токена цвета — свойство, роль, выделение, состояние — и десять ролей от brand до danger. Отдельно десять акцентов для категорий без смысла и почему жёлтый среди них не брать. Правило «не бери токен, потому что совпал цвет» — на третьей странице, Design tokens.
• Color usageGitHub Primer · на английском · бесплатноТри группы токенов — базовые, функциональные, компонентные — и почему базовые не берут напрямую: они не знают про тему. Какие ступени серой шкалы идут на фон, рамки и текст. Роли разведены иначе, чем в уроке: ссылки, фокус и информация у GitHub — одна роль accent, а главная кнопка — зелёная роль success.
• Color и ThemesIBM Carbon Design System · на английском · бесплатноЧетыре темы — White, Gray 10, Gray 90, Gray 100 — на одних токенах: роль не меняется, меняется значение. Модель слоёв, правила состояний по ступеням палитры и таблица, на сколько ступеней должны отстоять цвета для 4,5 : 1 и 3 : 1. Полный список токенов с ролями — на вкладке Tokens.
• Design Tokens Format Module 2025.10 и Resolver ModuleW3C Design Tokens Community Group · на английском · бесплатноСтабильный с октября 2025 года JSON-формат для обмена токенами между инструментами: как записать токен, группу и ссылку на другой токен вида {color.brand}. Цвет описан в отдельном модуле Color, светлая и тёмная темы — во второй ссылке, модуле Resolver. Спецификация для авторов инструментов, дизайнеру хватит разделов 5–8.