Модуль и сетка

Модуль в 8 пикселей — базовая размерная единица интерфейсов Контура. На основе модуля строятся типографика и контролы, выбираются размеры для иконок, высчитываются отступы между элементами.

Мы используем модуль везде, где это не нарушает эстетики и не противоречит здравому смыслу.

Использование модуля делает дизайн вычисляемым и более предсказуемым:

Модуль упрощает выбор размеров

Без модуля шагом становится 1px и выбирать приходится из избыточного количества вариантов. Модуль ограничивает выбор и экономит время на рутинных задачах верстки.

Модуль делает решения объяснимыми

Когда дизайнеры Контура выбирали радиус скругления кнопок, потребовалось провести голосование. Если системы нет, остается руководствоваться мнением большинства — в ретроспективе результаты таких решений выглядят малопонятными.

Модуль ускоряет перенос дизайна в код

Если разработчик знает, что все размеры должны быть кратны 8px, то отступ в 7px в макете не вызовет вопросов. Разработчик сам примет правильное решение и исправит ошибку без обращения к дизайнеру.

Исторически интерфейсы Контура верстались с отступами, кратными 5 и 10px, — стандартный выбор для небольших проектов, где удобство круглых цифр важнее системности. Но шаг 10px проигрывает 8px, когда речь заходит о построении на основе одного модуля всей дизайн-системы.

Модуль 8 пикселей:

• Можно более последовательно использовать во всех элементах дизайна: контролы, иконки, типографика
• Имеет меньший шаг — больше вариативности
• Имеет два подмодуля 4px и 2px, а не один, как у 10px
• Объекты с размером, кратным 0,5m, всегда можно разместить по центру, в отличие от 10px сетки, в которой подмодуль нечетный
• Это отраслевой стандарт

Модуль 8px — основной, обозначается «m». В размерах до 40px допустимо использовать шаг в полмодуля: 0,5m.

Например, у шрифта размером 18px предусмотрено две высоты строки: 24px для коротких подписей, где нужна компактность и 28px для основного набора:

В более мелких размерах этот шаг может быть и 0,25m. Например разница в высоте строки для шрифта 14px — 0,25m: 22px для основного набора и 20px для коротких подписей.

Модуль имеет прикладное значение — является ориентиром для выбора размеров, но самостоятельной ценности у него нет, поэтому макеты не нужно фанатично вписывать в восьмипиксельную сетку.

Подробнее о том, как использовать модуль в верстке, написано в гайде «Отступы и выравнивание».