Дизайн-система

Цвет

Вёрстка не знает про фиолетовый и белый, она знает про фон, поверхность, текст и акцент. Имена одни, значения разные, поэтому один класс одевается по сайту сам.

Каркас

Ширина содержимого и поля страницы заданы раз: .ds-container держит витрину до 1200, .ds-container--text сужает до 720, чтобы строка была 60-75 знаков. Вертикальный ритм секций даёт .ds-section. Поверхность без внутренних отступов, это .ds-surface, а .ds-rule разделяет, не обводя.

Текст

Модульная шкала от 16. Ступень 13 оставлена намеренно: на ней стоят плотные таблицы медиахаба, где 14 ломает ширину колонок.

Отступы

Сетка 8, мелкий шаг 4. Новое расстояние берём из шкалы, а не из глазомера.

Шкала раскладки

Крупные расстояния страницы, каждое вдвое больше предыдущего: промежуток между плитками вдвое меньше поля снаружи. Уже 640 точек вся шкала вдвое меньше.

Радиусы

Семь ступеней. Мелкие метки 4, поля 8, кнопки 12, карточки 16, панели 24 и 32, пилюли круглые.

Высота

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

Кнопки

Три высоты (36, 44, 52) и четыре роли. Главная кнопка на экране одна, остальные тише. На тач-устройствах любая дорастает до 44 пикселей.

Поля

Подложка вместо рамки, фокус показывает кольцо акцента, ошибка красное кольцо.

Родные элементы формы

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

Значки

Весь набор целиком: и взятые из библиотеки, и нарисованные нами. Прежде чем добавлять новый, посмотрите сюда: рядом уже жили Home и House, Sparkle и Sparkles. Нажатие копирует имя. Подключаются они из app/_ds/icons, напрямую из библиотеки проверка тянуть не даёт.

Оценка

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

Крутилка

Пилюли-переключатели

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

Выбор из списка

Замена нативному select. Его закрытую часть оформить можно, а открытый список рисует операционная система, и до него не дотягивается ни один класс. Поэтому список рисуем сами: вид тот же, что у остальных полей, а закрытие по щелчку мимо и по Escape дописано руками, потому что нативный элемент давал их даром.

Меню действий

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

Чекбокс и радио

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

Аватар

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

prokhor.me, бумага

ПИПИПИКнопка рядом

fleypo.com, ночь

ПИПИПИКнопка рядом

Пилюли и метки

Пилюля несёт слово целиком, метка мелкий капслок, точка показывает состояние.

Островок

Форма одна на три состояния: точка, капсула, панель. Место постоянное, силуэт непрерывный, значок переживает переход, и по нему видно, что предмет тот же.

Ростер

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

Поверхности

Карточка держится тенью, не обводкой. Стеклянная размывает то, что под ней, и живёт поверх картинок и фона.

Шапка

Один компонент на оба сайта. Разметка не меняется, тему выбирает модификатор: стеклянная пилюля по тону страницы или чёрный островок со сплошной заливкой и тёмной палитрой внутри.

Окно подтверждения

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

Сайт обновился

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

Режим админа

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