«Район» — дизайн-система

Как этим пользоваться

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

Цвета

Токены переворачиваются по теме: переключите её сверху, и образцы поедут сами. Правило: на брендовом и категорийном фоне знак светлый в светлой теме и тёмный в тёмной — за это отвечает парный токен --*-ink.

Поверхности
Текст и линии
Типы событий
Бренд и необратимое

Типографика

Кегль и интерлиньяж — одна пара, менять их можно только вместе. Правило контраста: над текстом S заголовок не мельче H60, над текстом M — не мельче H50.

Заголовочные--f-h20 … --f-h60 26/30 заглавие 21/26 карточка события 18/22 имя в профиле 16/20 строка списка 14/18 мелкий заголовок
Наборные--f-m10 … --f-xs10 15/22 текст по умолчанию 15/20 списки и контролы 13/18 второстепенный 13/16 в плотных блоках 11/14 надзаголовок

Отступы и полосы

Лестница: 4 внутри пары, 8 внутри группы, 16 между группами, 24 внешнее поле блока. Внешнее всегда больше внутреннего. У пары «заголовок и подпись» 4 — но только при нормальном интерлиньяже подписи: тесную 13/16 под заголовок не ставим вовсе.

Полос две. 78 — содержательная: зона поиска и шапка профиля, её высоту диктует поле ввода. 56 — заголовочная и вкладочная: шапка раздела, вкладки, счётчик станции, шаги создания.

Кнопки

Основная кнопка в паре всегда справа. Красное осталось за необратимым: удалить, сбросить, пожаловаться.

Основная.btn.btn--primary
Тихая.btn.btn--ghost
Контурная.btn.btn--line
Необратимая.btn.btn--danger-solid
Выключенная.btn[disabled]
Пара: основная справа.row > .btn
Мелкая.btn--sm
Текстовая.linkbtn

Чипы и теги

Чип со срезанным углом называет, что это за объект: тип события, станция, ваша роль. Тег говорит о состоянии или числе — он мельче и без фирменного угла.

Тип события.chip--act / --offer / --find Встреча Вещь Находка
Роль и место.chip--brand / .chip--muted Вы автор Курская ~7 мин
Теги.tag / .tag--solid авторвы 11 сентября9/10

Поля и контролы выбора

Поле стоит на белом и обведено настоящей рамкой — серая заливка отдана выключенному состоянию. Обязательные поля идут первыми, необязательные после.

Поле с подписью.field > label + .input Подсказка под полем
Поиск.searchfield
Выключенное.input[disabled]
Тумблер.switch.is-on Считать расстояние от меня Выключено — считаем от станции до события
Варианты выбора.opts > .radio.is-on
Карточка типа.typecard.is-on
Сегментед.segctl

Строки и карточки списков

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

Карточка ленты.fcard — feedCard
Карточка: открыта рядом.fcard.is-sel
Строка переписки.listrow--chat — viewChats
Строка профиля.listrow--chat — viewProfile
Строка человека.person — viewPeople
Строка-кнопка карточки.author

Обращения сервиса

Всё, что сервис говорит или просит лично у вас, живёт одним слоем: одно место, одно оформление. Фон контекстный — в карточке белое с рамкой, в канале уведомлений новое залито, прочитанное белое.

Обращение в карточке.cardnote Подтвердите участие

Без ответа место уйдёт другому соседу
Уведомление прочитанное.sysmsg.sysmsg--go Рядом пропажа пропал рыжий кот, зовут рыжик ищет Дима С., Сокольники 12:08
Уведомление новое.sysmsg.is-new Подтвердите участие Утренняя пробежка, темп 6:00 завтра, 09:30. Подтвердите за 6 часов до начала 14:10
Тост и тост-действие.toast / .toast--bare Изменения сохранены

Полосы экрана

Первая полоса: поиск.panel__top — 78
Вторая полоса: вкладки.tabs — 56
Вторая полоса: счётчик.scoperow — 56
Заголовок группы.eyebrow Опубликовано · 3

Полоса с прокруткой

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

Начало ряда.hscroll.is-end — hscrollEdges
Середина ряда.hscroll.is-start.is-end
Ряд контролов.ctlrow > .ctl — viewMine

Пустые состояния

У пустого экрана всегда есть выход, и единственное действие на нём — основная кнопка.

Ничего нет.empty Здесь пока пусто

Нет активных событий с выбранными фильтрами

Ничего не нашлось.empty Ничего не нашлось

Попробуйте другое слово или проверьте фильтры категорий

Карта

Булавки.pin--act / --offer / --find / --mine
Кластер и станция.cluster / .metrodot 4

Правила

На брендовом фоне — только светлоеБелый текст и значки на заливке бренда и категорий. В тёмной теме заливки светлеют, и знак на них темнеет парным токеном.
Основная кнопка в паре всегда справаИ в подвалах, и в модальных окнах.
Одно значение — один текстОдин факт называется одинаково везде и считается одним кодом. Разным бывает только оформление, когда у мест разные задачи.
Лестница отступов 4 / 8 / 16 / 24Внешнее поле всегда больше внутренних разрывов. Полосы, заданные числом, обязаны сходиться с содержимым в арифметике.
У шторок и разделов теней нетГраницу держит линия и заливка, а не тень.
Точки в конце нетПодписи и подсказки — не предложения. Вторую фразу-пересказ убираем: если сказанное уже видно на экране, повторять его нечем.
Обязательные поля первымиНеобязательные после. Погашенная кнопка называет, чего не хватает.
Меняешь высоту от действия внутри блока — анимируйРаскрытие и схлопывание идут по высоте, а не рывком.
Формы безличные«Провёл» и «сходила» требуют знать род человека, а мы его не знаем и по имени угадывать не станем.
Подсветка строки означает «открыто рядом»А не «отсюда вы пришли». Список, который сам лежит в цепочке, ничего рядом с собой не показывает.
В архиве чип опознаёт объектПока событие живо — зовёт к действию: «Отдаю» превращается в «Вещь», расстояние уходит, станция остаётся.