Основа

Отступы и сетка

Шкала отступов, радиусы и правило внутреннего и внешнего

Внутреннее меньше внешнего

По М. Ильяхову: расстояние между связанными элементами меньше, чем от них до соседней группы и до края контейнера. Группы задаёт пустота, а не рамки и линии. Правило 13 в DESIGN.md, раздел «Сетка и отступы»

Ступени

Каждая ступень заметно больше предыдущей, соседние ступени не равны. Если подпись стоит в 8 от поля, следующее поле не ближе 16

4–12

Пара

подпись и поле, заголовок и описание, иконка и текст

8–16

Пункты группы

поля формы, строки, карточки с подписью

24–32

Группы

разделы страницы, блоки плитки

20

Край плитки

от содержимого до края

Плохо и хорошо

Одно и то же содержимое, разные отступы. В плохом глаз склеивает чужие элементы

Подпись и поле

Плохо: поля через 8, подпись в 12 от своего поля: она ближе к полю сверху
Хорошо: подпись в 8 от своего поля, поля через 24

Заголовок раздела

Итоги собраны автоматически, проверьте имена

Задачи

Бета в пятницу, тексты к четвергу

Плохо: заголовок на равном расстоянии от текста сверху и снизу, непонятно, к чему он относится

Итоги собраны автоматически, проверьте имена

Задачи

Бета в пятницу, тексты к четвергу

Хорошо: заголовок в 8 от своего текста, от предыдущего раздела 32

Подпись карточки

Синк дизайна

Ревью беты

Плохо: подпись в 12 от своей карточки, карточки через 8: подпись тянется к соседней

Синк дизайна

Ревью беты

Хорошо: подпись в 8 от карточки, карточки с подписью через 24

Иконка в кнопке

Начать запись
Плохо: иконка в 16 от текста и в 8 от края: она отрывается от подписи
Начать запись
Хорошо: иконка в 8 от текста, от края 20

Исключение: залитые контейнеры

Край залитого контейнера сам отделяет группу. Плитки с отступом 20 стоят через 8, и это не ошибка. Правило действует внутри плитки: заголовок и описание в 4, до края 20

Встречи

12 за неделю

Итоги

Готовы для 9

Записи

3 ч 40 мин

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

Радиусы

rounded-chip
8 · метки, миниатюры 40
rounded-nested
16 · вложенное
rounded-window
17 · окно macOS
rounded-tile
24 · плитка
rounded-panel
40 · панель
rounded-frame
56 · рамка сайта
rounded-pill
таблетка · кнопки, поля, чипы

Шкала отступов

8 / 12 / 16 / 20 / 24 / 32, других значений нет; 4 только для оптических поправок

4
8
12
16
20
24
32

Плитка, вложенное и зазоры

Плитка: отступ 20, радиус 24

Вложенное: радиус 16 = 24 − 8

Между плитками и от края окна 8

Воздух вместо линий: рамок и разделителей нет