Чёрное и белое: дизайн-система, построенная ради фокуса

Мы строим каждый продукт OLUWA строго в чёрном и белом. Ни фирменного синего, ни акцентного бирюзового, ни «зелёного успеха», подкрадывающегося в тост-уведомление. Минималистичная чёрно-белая дизайн-система — это не ностальгия по терминалу и не мудборд, в который мы влюбились. Это рабочее ограничение, которое делает наши решения быстрее, интерфейсы разборчивее, а базовый уровень доступности по умолчанию выше. Вот почему мы выбрали монохром, что мы отдали взамен и какие токены и правила вы могли бы принять хоть завтра.

Почему мы намеренно убрали цвет

Цвет — самая злоупотребляемая переменная в дизайне интерфейсов. Его дёшево добавить и дорого им управлять. В тот момент, когда у вас появляется палитра, каждый элемент начинает бороться за один из ваших оттенков, а «какого цвета это должно быть» становится вопросом, на который вы отвечаете сотни раз в неделю — обычно непоследовательно.

Разрушительная кнопка — красная. Но красное и состояние ошибки, и маркер обязательного поля, и значок уведомления, и серия графика для оттёкших пользователей. Красное теперь значит пять вещей, то есть не значит ничего.

Убрать цвет — значит убрать весь этот класс решений. Когда вы не можете потянуться к оттенку, чтобы обозначить важность, вы обозначаете её инструментами, которые действительно несут смысл: положением, размером, насыщенностью и пустым пространством. Эти инструменты честнее. Заголовок читается как важный, потому что он крупный и стоит наверху с воздухом вокруг, а не потому что кто-то покрасил его в фиолетовый.

Вывод: если вы используете цвет, чтобы починить проблему иерархии, у вас проблема иерархии, а не проблема цвета. Монохром не даёт вам её замазать.

Иерархия без цвета: три рычага

Когда оттенок снят со стола, всю работу делают три рычага.

Типографская шкала. Мы используем модульную шкалу с явными скачками, а не непрерывный градиент размеров. Ступени, стоящие слишком близко, читаются как шум; глазу нужен недвусмысленный ранг. Наша рабочая шкала — примерно 12 / 14 / 16 / 20 / 28 / 40 / 64px. Основной текст сидит на 16, вторичные метаданные на 14, а всё выше 20 — структурное. Если две вещи должны ощущаться разными по важности, они получают разные ступени, а не одну и ту же ступень в двух оттенках серого.

Насыщенность и регистр. С одним шрифтом и без цвета насыщенность становится главным сигналом. Мы используем максимум три начертания: обычное, среднее и единственное жирное, приберегаемое для настоящего акцента. Верхний регистр с разреженным трекингом делает работу «цвета метки», отмечая строку как категорию или надзаголовок без всякого оттенка.

Пространство. Пустое пространство — несущая стена монохромной вёрстки. Близость группирует связанное; расстояние разделяет. В MadaiOps, нашем приложении для криптозаказов, ордерный тикет полностью опирается на это: цена, размер и сторона сидят плотно сгруппированными, а действие подтверждения отодвинуто намеренным пространством, чтобы по нему нельзя было промахнуться пальцем рядом с полем ввода. Никакой красной стилизации «опасность» не требуется. Защиту делают отступы.

Контраст — это система, а не настроение

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

--ink-000: #000000   /* primary text, headings */
--ink-700: #3d3d3d   /* body on light, secondary headings */
--ink-500: #6b6b6b   /* metadata, captions, disabled-adjacent */
--ink-300: #b0b0b0   /* borders, dividers, placeholder */
--ink-100: #e6e6e6   /* subtle fills, hover backgrounds */
--paper:   #ffffff   /* base surface */

Шесть значений. Это вся система целиком, плюс её инверсия для тёмной темы. Правило, которое мы соблюдаем на ревью: не может существовать серого, которого нет на шкале. В тот миг, когда кто-то пипеткой достаёт #8a8a8a, потому что «граница показалась чуть тяжеловатой», система начинает гнить. Замкнутый набор значений — вот что удерживает монохромный интерфейс от сползания в мутную однообразность.

Текст проходит 4.5:1, структура проходит 3:1

Каждая пара «текст на поверхности» проверяется по коэффициентам контраста WCAG перед выпуском. --ink-500 на --paper даёт около 5.7:1, комфортно за порогом 4.5:1 для основного текста. --ink-300 не проходит как текст и потому разрешён только для границ и разделителей, где применяется нетекстовый порог 3:1. Закодировать правило в разрешённые применения токена, а не только в его значение, — вот что заставляет его держаться.

Дивиденд доступности

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

Эта дисциплина повсюду навязывает более здоровый паттерн: никогда не позволяйте одному-единственному каналу нести смысл в одиночку. Отключённая кнопка в нашей системе не просто светлее. Она теряет границу, а её метка падает до --ink-300, так что состояние переживает и на градациях серого экране, и в ярком солнечном свете, и для дальтоника — одинаково. Youp, наше приложение для дневника, отмечает записи о настроении иконографикой и текстом метки, а не привычным градиентом настроения от красного к зелёному, так что эмоциональная история читается, не полагаясь на спектр, который многие люди видеть не могут.

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

Как ограничение ускоряет решения

Недооценённая выгода — скорость. Палитра — это комбинаторный взрыв: каждый новый компонент умножается на каждый оттенок и каждое состояние. Монохром схлопывает это. Когда решения о цвете принимать не нужно, дизайн компонента сводится к типографской ступени, насыщенности, отступам и тому, какой токен серого взять для границы. Это решение можно принять за секунды и защитить на ревью правилом, а не спором о вкусе.

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

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

Правила, которые можно принять хоть завтра

Если хотите попробовать это, не перестраивая всё:

Замкните вашу шкалу серого. Выберите пять-шесть значений, дайте им имена и запретите на код-ревью всё вне шкалы. Одно это правило делает бо́льшую часть работы.
Сделайте одну типографскую шкалу и используйте только её ступени. Никаких произвольных размеров шрифта. Если вам постоянно нужен новый размер — шкала неправильная; чините шкалу, а не добавляйте разовое исключение.
Кодируйте разрешённые применения в токены. --ink-300 — это «только границы», а не просто hex-значение. Задокументируйте это там, где инженеры это прочтут.
Проверьте каждый несущий смысл сигнал на второй канал. Если удаление цвета сделает состояние неоднозначным, добавляйте форму, метку или положение, пока не перестанет.
Относитесь к пустому пространству как к компоненту. Дайте отступам именованные токены и защищайте их на ревью так же, как в других местах защищаете цвета.

Заключительная мысль

Работать в чёрном и белом — не ограничение, которое мы терпим; это линза, которая проясняет. Уберите самую лёгкую переменную — и структурным (ритму, пропорции, контрасту, пространству) негде спрятаться. У интерфейса либо есть настоящая иерархия, либо нет, и вы узнаёте это немедленно. Эта честность для нас ценнее любой палитры.