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

Базовая палитра

Я использую двухуровневую систему токенов цветов. Первый уровень — это базовая палитра, каждый цвет в которой имеет имя вида Blue 800, где слово Blue обозначает оттенок, а номер 800 — тон цвета. Выше номер — темнее тон. Все цвета с одинаковым номером дадут одинаковый контраст относительно фона, что позволяет следить за контрастом в интерфейсе.

Базовая палитра используется многими, и ничего особенного в ней нет. Обычно интерес представляет второй уровень токенов, который часто строится по принципу «название компонента + его состояние», например #button-primary-hover. Этот способ ведёт к появлению дубликатов цветов и более сложной поддержке гаммы проекта в консистентном состоянии, поэтому я решил сделать второй уровень чуть более абстрактным.

Разделение токенов по принципу контраста

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

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

Затем я определил семантические цвета (Primary, Accent, Danger и другие), получив, в итоге, токены вида #glyph-primary и #spot-danger.

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

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

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