Система · Обзор

Бенто-система

Бенто-система — не «сетка с плитками», а метод управления вниманием через композицию. Плитки разного размера формируют визуальный ритм и иерархию: крупные акценты, средние истории, мелкие заполнители.

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

Система · Формулы

Пропорции от X

X — меньшая сторона контейнера. В вебе: ширина видимой области (ограничена 1440px). Все параметры сетки вычисляются пропорционально X.

Стандартные форматы (16:9, 6:3, 2×1, 2×3)

Параметр	Формула	При 1440px
--bento-pad	X × 0.02	28.8px
--bento-radius	X × 0.04	57.6px
--bento-gap	X × 0.01	14.4px
--bento-inner	X × 0.04	57.6px

В вебе применяется только первая формула (стандартные форматы), но с ограничениями clamp() — чтобы радиусы не раздувались на широких экранах и не плющились на мобильных.

Как это в коде

Токен	Значение в АУ!
--bento-x	min(100vw, 1440px)
--bento-pad	clamp(20px, X×0.02, 32px)
--bento-gap	clamp(8px, X×0.01, 16px)
--bento-inner	clamp(16px, X×0.04, 32px)

Радиусы не дублируем — берём из основной шкалы: --r-tile (24px).

Система · Сетка

12 колонок

Кратно 2, 3, 4 — даёт максимальную вариативность пропорций: полширины, треть, четверть, две трети.

grid-template-columns: repeat(12, 1fr)
grid-auto-flow: dense — плитки сами заполняют «дырки»
Разрешается трансформировать только квадраты и прямоугольники
Пропорциональное растягивание по сетке — можно

Система · Модули

4 типа бенто-модулей

🔵 Круг

Только в паре с квадратом или прямоугольником
Никогда не растягивается
Для: лого, акции, цены, иконки, изображения

АУ

Круг + прямоугольник

Круг только в паре. Никогда не растягивается.

⬛ Квадрат / ▭ Прямоугольник

Изображения, графика, основное сообщение
Можно пропорционально растянуть по сетке
Для диджитал-баннеров допустимо 3:1

⬭ Овал (pill)

Только как кнопка. Никогда — для контента

Записаться

Система · Правила

Что можно, что нельзя

Можно

Внешнее поле равно во всех направлениях
Скругления одинаковые у плиток одного уровня
Отступ между бенто и внутри — единый
Бенто-модули стоят в связке друг с другом
Стремиться к разнообразию пропорций

Нельзя

Растягивать круг
Разрывать связку модулей
Менять пропорции модулей относительно друг друга
Создавать свои бенто-модули вне системы
Использовать овал как контент

Система · Пример

Живая композиция

Разные размеры, единый стиль. Крупный акцент + мелкие заполнители.

Главное

Плитка 3×1 — полширины

Крупный акцент. Тёмный фон + градиентный glow.

1 248

объявлений

96%

возвращаются

Плитка с кругом

Круг в паре с прямоугольником — правильная связка.

Плитка 2×1

Треть ширины.

Плитка 2×1

Треть ширины.

Плитка 2×1

Треть ширины.