Ранг

Контракт

Доступность

Шкала

Три значения, список закрыт.

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

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

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

Вся лестница стоит ниже базы, и ничто не растёт, чтобы обозначить важность. Имя ведущей области доходит до --text-sm — размера обычного интерфейсного текста; имя обычной стоит ступенью ниже, тихой — двумя.

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

Иерархию делает то, что вокруг становится тише, а не то, что важное становится громче. Заодно оформление не дотягивается до содержания: --text-md принадлежит прозе и ответу агента, и имя области не достаёт до него ни при каком ранге.

lead двигает одно — имя, на ступень. Поднимать область некуда: --surface-raised во всех светлых темах потолок шкалы, так что поднимающийся lead нашёл бы запас в двух темах из пяти и молча ничего не делал бы в трёх.

support может потратить больше: снятие — дешёвое направление, поэтому ступень вниз, ярус тона вниз, плёнка и никакой рамки.

Токены за этим

Ступени — ссылки в шкалу кегля, а не числа, поэтому шкала несёт их вместе со всем остальным. Плотность их не трогает: она не трогает кегль.

Токен заводится только там, где ранг отличается от default. Своих токенов фона и рамки у lead нет, и это модель, а не упущение: lead не поднимает, и называть нечего.

Поведение

Ранг не наследуется

Область внутри ведущей области, если у неё нет своего ранга, — default. Ведущая область ведёт экран, а не своё содержимое: наследующийся ранг был бы общим регулятором яркости под красивым именем.

<div class="inst-panel" data-rank="lead">
  <div class="inst-panel-header"><span class="inst-panel-title">Ведущая панель</span></div>
  <div class="inst-panel-body inst-stack inst-stack--tight">
    <div class="inst-card"><div class="inst-card-title">Обычная карточка</div></div>
    <div class="inst-card" data-rank="support"><div class="inst-card-title">Тихая</div></div>
  </div>
</div>

Ранг — не глубина

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

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

Ранг — не тон

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

<div class="inst-panel" data-rank="lead" data-tone="error">
  <div class="inst-panel-header">
    <span class="inst-panel-title">База недоступна</span>
    <span class="inst-panel-actions"><span class="inst-badge" data-tone="error"><span class="inst-dot"></span>P1</span></span>
  </div>
  <div class="inst-panel-body">Началось в 03:12. Три попытки, ни одной удачной.</div>
</div>

Тон идёт на фон, но не на рамку — ровно так же, как баннер: он оставляет --border и кладёт тон на фон. Тонированный бокс ещё и в тонированной рамке говорит один факт дважды.

На фоне тон старше ранга. Тихая область, которая при этом в ошибке, — это ошибка, нарисованная тихо: ступень, тон текста и снятая рамка по-прежнему говорят support, а фон говорит error. Смысл выигрывает то единственное свойство, за которое они спорят.

Не наследуется — по той же причине, что и ранг. Карточка внутри тонированной панели показывает её тон, только если попросит сама.

Правила

Что брать, а что нет

Когда не брать вовсе

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

API

Связанное

Высота и поверхности Типографика Плотность Шкала Панель Карточка Секция