Когда использовать компонент и когда выбрать другой. Все визуальные образцы — в разделе «Компоненты».
Варианты, состояния и правила сборки. Действия меняют только примеры.
Одна гарнитура, шкала отступов и общий словарь цветов. Цвет раздела — небольшая метка, действие — общий акцент.
tokens.css--paper--paper-2--control--accent--note--dangerНе заливать раздел его цветом. Оттенок живёт в корешке, точке и метке; светлая и тёмная темы используют одни имена токенов.
ManropeВ значениях сначала телефон, затем ≥ 700 px. Поля не мельче 16 px. Второго семейства и капса для обычных заголовков нет.
4 → 64 px8 между частями строки · 12 от заголовка до списка · 16 между полями · 32 между блоками. Рамки образцов относятся к этому каталогу.
390 / 1280Колонки выражают смысловые связи. Главное действие не перекрывает ввод. Системные safe area и клавиатуру подтверждают на настоящем устройстве.
Порядок блоков сверху вниз. Семейство экрана выбирается по задаче человека; предметные части остаются своими.
Приоритет определяет день или неделя. Фильтры коллекции автоматически сюда не переносятся.
Строка добавления связана с текущим списком. Пустой раздел и отсутствие совпадений объясняются по-разному.
История не вытесняет содержимое. Перенос и удаление не конкурируют с главным действием.
Событие и интервал сохраняются целиком. Дело или покупка могут начинаться с короткой строки.
Одна секция — одна область сохранения. Выбор темы не отправляет пароль и не сбрасывает другое поле.
Без навигации в недоступные разделы. У пароля есть имя пользователя и корректный autocomplete.
Кнопка выполняет действие. Ссылка ведёт на адрес. Видимый акцент соответствует приоритету.
.btnНажатия относятся только к этому образцу.
Одна главная кнопка на форму. Глагол описывает результат; повтор во время запроса блокируется, подпись не исчезает.
.btn-iconЗначок имеет доступное имя.
Значок без текста годится для знакомого действия. Ссылку не подменяет кнопка сохранения.
.checkЦель касания — 44 px. После успеха меняются итог и группа; при ошибке оптимистичная отметка возвращается.
Выбор контрола зависит от значения. Момент сохранения — от сценария: создание, правка свойства или настройка.
.inputНе сохранилось. Попробуй ещё раз.
Подпись → поле → подсказка или ошибка. Placeholder не заменяет имя; readonly и disabled имеют разный смысл.
radio / selectЧипы — короткий сравнимый набор. Select — длинный. Поиск — когда человек знает название. Это выбор значения, не меню команд.
checkboxПосле первого человека выбор остаётся доступен.
Участников может быть несколько. Независимый флажок — отдельное булево свойство; это не назначение ответственного.
dateПресет и поле задают одно значение. Начало и конец связаны; неверный порядок оставляет ввод для исправления.
textarea / inputКлавиатура соответствует значению. Многострочный текст не заменяется коротким полем ради плотности.
секция формыИзменяется одна строка настройки.
Управление набором ≠ выбор значения. Новая категория не переносит в неё карточку автоматически.
Чтение значения отличается от приглашения его изменить. Цвет поддерживает имя, а не заменяет его.
.pill · .stampОбычная пилюля читается; кнопка открывает правку.
Дата, человек и категория обновляются без загрузки документа, вместе с зависимыми подписями.
.dot · .dotsОдин ответственный — radio/select. Несколько участников — checkbox. «Никто» и «по очереди» различаются; авторство не меняется.
.chipУдаление метки не удаляет карточку.
Теги — свободные метки. Категория группирует записи; список определяет назначение. Фильтр лишь меняет выборку.
Быстрая запись в известном контексте и полная форма со связанными полями используют одинаковые базовые контролы.
.quickПопробуй добавить запись.
Одна точка добавления над списком. Успех очищает отправленный текст; ошибка оставляет его. Отправка не переносит в другой раздел.
.formДобавить фильм в коллекцию, запланировать вечер и записать просмотр — разные действия. Кнопка называет конкретный результат.
Плотность меняется по задаче. Строка помогает обработать список, листок — оглядеть полку, открытый лист — прочитать и изменить.
.rowСетка: действие / время → текст → люди / тихое действие. Длинный заголовок переносится, не выталкивая правый край.
.slipНебольшая поверхность на полке. Цветная точка обозначает раздел; постоянная тень не нужна.
.sheetПроверить запасной фильтр в шкафу под раковиной.
Одна ось названия, свойств и текста. Предметные части идут до комментариев и истории.
Временный выбор не двигает соседние блоки. Меню и выбор свойства открываются поверх страницы; у окна свои ожидание, ошибка и прокрутка. Раскрытие раздела и добавление строки могут менять поток — это ожидаемый результат. Проверить на интерактивном примере →
Сходная рамка не делает меню, фильтр и форму одинаковыми. Способ закрытия определяется контрактом содержимого.
details[data-menu]Открой и нажми рядом или Esc.
Мимо · Esc · выбор команды. Фокус после Esc — у инициатора. Открыто одно меню; фон остаётся доступен.
details.foldКлик мимо не сворачивает форму. Сохранить и отменить — явные действия; несохранённый ввод не исчезает.
dialog.dlgФон блокируется, Tab остаётся внутри, Esc закрывает. На телефоне — снизу; на широком экране — отдельная форма.
на местеПривезти чай в субботу
Обе версии видны; автоматической перезаписи нет.
Новая правка ждёт завершения изменённой старой. Запоздавший ответ не стирает более новый ввод.
Обратная связь относится к действию. Наличие частичного ответа само по себе не доказывает сохранность ввода.
.emptyДобавь первую покупку в строке выше.
Попробуй другое название или убери фильтр.
Пустой раздел приглашает начать. Пустой результат помогает изменить поиск; эти состояния не взаимозаменяемы.
Повтор этого действия заблокирован.
Не сохранилось. Попробуй ещё раз.
Ошибку читают у действия. Тост дополняет результат. Возврат после успеха и отмена до сохранения — разные операции.
локальная областьУчебный пример частичного обновления.
Меняются свободные части и зависимые подписи. Соседний текст, файл, выделение и фокус сохраняются. Открытая правка защищена.
Общие части собираются вокруг предметного содержимого. Они не заставляют фильм, покупку и поездку выглядеть одинаково.
.file-pick--image
Выбор показывает превью без отправки формы. Ошибка даёт повтор; замена не скрывает контекст записи.
.commentОбсуждение идёт после содержимого. Авторство не меняется вместе с ответственным или составом семьи.
поиск → выборОтсутствие результата не создаёт запись само.
Поиск существующего с учётом доступа, затем явное выбрать или создать. Связь не означает скрытую копию.
Овощи в духовке и рис.
ИИ-черновик отличается от сохранённой карточки. Ожидание, устаревший ответ и конфликт называются прямо.
Записка — единственный «стикер». Баланс описывает вклад; благодарность — отдельное действие, не оценка человека.
Переход, переключение вида, фильтр и значение поля имеют разные роли, даже если подписи похожи.
.nav · .tabbarОсь заголовка сохраняется между разделами.
Верхняя навигация — от 700 px, нижняя — телефон. Здесь обе показаны в потоке образцов; в приложении нижняя закреплена.
| Запись | Срок | Кто |
|---|---|---|
| Заменить фильтр | 28 окт | Аня |
Это виды одного набора, не новые копии карточек. Доска может прокручиваться внутри; документ по горизонтали не прокручивается.
Одинаковые элементы решают разные действия. Состав, порядок и граница сохранения следуют сценарию.
Название сначала. Категория и количество — когда нужны. Добавление обновляет список и оставляет человека в его контексте.
Свойства перед содержимым. Правка даты и человека не перезагружает страницу и не стирает соседний комментарий.
Сохраняется эта секция. Настройки темы, профиля и доступа не объединяются в один случайный запрос.
e3290032. Актуальные проверки сайта и приложения — в полном отчёте ниже.fix/design-system-map; основной «Очаг» этой публикацией не обновляется.
CI local: e3290032 fix/design-system-map — ok (1996 passed in 437s)