Отступы и сетка
Пространство между элементами определяет восприятие интерфейса не меньше, чем сами элементы. Сетка 8 пикселей, шкала отступов и правила иерархии пространства.
Сетка 8 пикселей
Все отступы кратны 8 пикселям (4 пикселя допустимы как полушаг для мелких деталей). Число 8 делится нацело при всех плотностях экрана (1x, 1.5x, 2x, 3x) — элементы рендерятся без субпиксельных артефактов, линии остаются чёткими.
Шкала отступов
12 фиксированных шагов покрывают все сценарии — от микродеталей (4 px) до секционных отступов (96 px).
4pxИконка ↔ подпись, микродетали8pxМежду элементами формы12pxВнутри компактных компонентов16pxОтступы карточки (мобильный)20pxОтступы карточки (планшет)24pxОтступы карточки (десктоп)32pxИнтервал между группами карточек40pxМежду группами компонентов48pxМежду секциями (мобильный)64pxМежду секциями (планшет)80pxБольшие секции96pxМежду секциями (десктоп)Иерархия пространства
Три уровня пространства — никогда не нарушать порядок. Внутренний отступ всегда меньше внешнего. Это создаёт визуальную группировку без дополнительных обрамлений.
Внутри компонента: иконка ↔ подпись, внутренние отступы карточки, расстояние между строками формы.
Между компонентами: интервалы между карточками, между полями формы и кнопкой, между заголовком и списком.
Между секциями страницы: герой ↔ каталог, каталог ↔ подвал. Крупные вертикальные промежутки.
Правило близости
Внутренний отступ компонента всегда меньше расстояния между компонентами. Отступ карточки < интервал между карточками < интервал между секциями.
Вертикальный ритм
Базовая единица: размер основного текста 16px × межстрочный интервал 1.6 ≈ 24 пикселя — это единица ритма. Вертикальные промежутки между секциями кратны 24: 24 · 48 · 72 · 96 · 120.
Контейнер
Максимальная ширина контента — 1440 пикселей. Боковые отступы увеличиваются с размером экрана. 160 пикселей на десктопе — осознанный выбор в пользу люксового ощущения белого пространства.