Продуктовая колористика: сборка тоновых растяжек в примитивах дизайн-систем

Проблема
Как тоновые растяжки решают проблему
Тоновые растяжки в Primitives (три уровня переменных)
Некорректные методы сборки
Корректные методы сборки
Лайфхаки
Выводы

Проблема
Как тоновые растяжки решают проблему
Тоновые растяжки в Primitives (три уровня переменных)
Некорректные методы сборки
Корректные методы сборки
Лайфхаки
Выводы

Я изучаю информационный мусор, как явление в дизайне, уже более 10 лет — в дизайне интерфейсов он представляет собой избыточный, нерелевантный или конкурирующий визуальный и текстовый контент, который нарушает когнитивные процессы восприятия и затрудняет эффективное взаимодействие пользователя с системой, поскольку человеческое внимание, обладая ограниченной пропускной способностью, не способно одновременно обрабатывать большое количество равнозначных стимулов без потери качества интерпретации этих стимулов.
Информационный мусор может содержаться: в тексте, в навигационных структурах, в колористике, в формах и в избыточности визуальных метафор (иконок) внутри интерфейса.

Есть набор рабочих инструментов для работы с колористикой: часть из них — достаточно простые, часть — могут показаться на первый взгляд сложными. Я постараюсь в этой статье сделать начало работы с инстументами чуть проще, чтобы ты смог быстрее разобраться и главное — постарался применить их в своей работе, чтобы работать с цветом стало проще, быстрее и качественнее.
Этот набор инструментов будет полезен дизайнерам, потому что превращает работу с цветом из «на глаз» в системный процесс. Также часть из этих инструментов могут работать с OKLCH и помогать в сборке палитры, пока Фигма нам даёт только расширенный гамут в виде переключателя на P-3, но не обзавелась переключателем на OKLCH внутри окна цветовой палитры.

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