Атлас
Способ компоновки

Bento-компоновка

Bento Grid

Модульная плитка разноразмерных скруглённых карточек, как ячейки коробки бенто: каждая ячейка — одна мысль.

Принцип расположения блоков на экране. Сочетается с любым визуальным направлением. Направления, приёмы оформления и способы компоновки — разные уровни решений, и их можно сочетать: например, Bento-компоновка в минималистичном стиле или стеклянные панели в технологичном интерфейсе.

Использовать Все направления
Сайт Приложение Веб-платформа
Учебная демонстрация
Демонстрация, а не реальный проект: веб-платформа в стиле «Bento-компоновка». Тексты и данные вымышлены и показывают структуру, типографику и характер элементов.

О стиле

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

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

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

Основные признаки

  • Плотная модульная сетка из прямоугольных ячеек разного размера: 1×1, 2×1, 1×2, 2×2.
  • Одинаковые промежутки между всеми ячейками (обычно 8–20 px) и общий внешний контур блока.
  • Заметные одинаковые скругления ячеек (16–32 px).
  • Одна ячейка — одна мысль: функция, показатель, цитата, график, иллюстрация или действие.
  • Размер ячейки отражает важность содержания: главное — в самой крупной плитке.
  • Ячейки различаются фоном или наполнением, создавая ритм, но остаются частью одной системы.
  • Мини-интерфейсы внутри ячеек: маленькие графики, календари, переключатели, списки.

Композиция и визуальная иерархия

Композиция

  • Основа — сетка из 3–6 колонок и 2–4 рядов с фиксированной высотой ряда; ячейки занимают 1–2 колонки и 1–2 ряда.
  • Блок собирается без «дыр»: ячейки полностью заполняют прямоугольник, внешние края ровные.
  • Одна крупная ведущая ячейка (обычно 2×2) задаёт точку входа; вокруг неё — 4–8 ячеек поменьше.
  • Соседние ячейки чередуют характер: текст — число — иллюстрация — список, светлая — тёмная — акцентная.
  • На узких экранах сетка перестраивается в 1–2 колонки, сохраняя порядок важности и разницу высот.

Визуальная иерархия

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

Цвета и примеры палитр

  • Цвет определяется выбранным направлением; bento лишь задаёт роли: фон-«коробка», нейтральные ячейки, 1–2 акцентные и одна тёмная ячейка.
  • Фон под сеткой отличается от ячеек на 3–8% светлоты, чтобы промежутки читались как «перегородки» коробки.
  • Акцентные ячейки занимают не больше 20–30% площади сетки.
  • Текст в каждой ячейке подбирается к её фону отдельно и проверяется на контраст не ниже 4.5:1.

Палитры — примеры, а не обязательный набор. Нажмите на цвет, чтобы скопировать HEX-код.

Светлая коробка

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

Тёмная коробка

Для технологичных продуктов и дашбордов: глубокий фон, графитовые ячейки, один тёплый акцент.

Пастельная коробка

Мягкие разноцветные ячейки для лайфстайл-сервисов и личных кабинетов.

Типографика

  • Шрифт определяется выбранным направлением; для bento важно, чтобы он хорошо работал и в крупных числах, и в мелких подписях.
  • Внутри ячейки 2–3 уровня: метка 12–13 px, заголовок или число 20–56 px, пояснение 14–16 px.
  • Крупные числа и короткие заголовки — главный приём выразительности маленьких ячеек.
  • Тексты в ячейках короткие: заголовок до 6 слов, пояснение до 2 строк.

Все шрифты в примерах поддерживают кириллицу.

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Unbounded
    Текст
    Onest

    Широкий выразительный гротеск для чисел и заголовков ячеек и спокойный Onest для подписей.

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Manrope
    Текст
    Manrope

    Один аккуратный гротеск для сдержанной минималистичной bento-сетки.

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Geologica
    Текст
    Inter

    Технологичная пара для дашбордов и продуктовых обзоров в тёмной теме.

Кнопки, поля, карточки и навигация

Кнопки

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

Поля ввода

Поля встраиваются в ячейку как её единственное содержание (поиск, подписка) и повторяют скругление ячейки с уменьшенным радиусом.

Карточки

Ячейка — главная единица: скругление 16–32 px, внутренние отступы 20–32 px, один смысловой блок; оформление поверхности берётся из выбранного направления.

Навигация

Навигация компактная и не спорит с сеткой: плавающая панель-пилюля, узкая боковая панель или отдельная ячейка-меню того же скругления.

Рекомендации по применению

Где подходит

  • Страницы возможностей продукта, презентации и промо-лендинги.
  • Личные кабинеты и главные экраны приложений со сводкой по разным темам.
  • Дашборды и обзорные экраны платформ.
  • Портфолио и страницы «обо мне», где нужно показать много разнородных фактов сразу.

Как применять

  • Сначала составьте список мыслей и расставьте их по важности, потом назначайте размеры ячеек.
  • Нарисуйте сетку и фиксированную высоту ряда до наполнения — так блок не развалится при правках.
  • Задайте одно значение промежутка и одно скругление и не меняйте их внутри сетки.
  • Продумайте перестроение на телефоне: какие ячейки становятся полноширинными, какие остаются парами.
  • Выберите визуальное направление (минимализм, плоский, стекло, необрутализм) и оформляйте ячейки по его правилам.

Ограничения и типичные ошибки

Ограничения

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

Типичные ошибки

  • Все ячейки одного размера — получается обычная сетка карточек, а не bento.
  • Разные промежутки и скругления у соседних ячеек.
  • Несколько мыслей в одной ячейке: заголовок, три абзаца, список и две кнопки.
  • «Дыры» и рваный край сетки из-за неудачного распределения размеров.
  • Каждая ячейка своего яркого цвета без системы ролей — пестрота.
  • Мелкий текст в маленьких ячейках ради того, чтобы уместить больше.

Сочетания с другими направлениями

Направления, приёмы оформления и способы компоновки — разные уровни решений, и их можно сочетать: например, Bento-компоновка в минималистичном стиле или стеклянные панели в технологичном интерфейсе.

  • Минимализм

    Белые ячейки на тёплом сером фоне, крупные числа и много воздуха внутри — самая чистая версия bento.

    Направление

  • Плоский дизайн

    Плоские цветные плитки разных размеров с геометрическими иконками — яркая инфографическая сетка.

    Направление

  • Глассморфизм

    Стеклянные полупрозрачные ячейки поверх градиентного фона; следите за контрастом текста в каждой плитке.

    Приём

  • Необрутализм

    Ячейки с толстой чёрной обводкой и жёсткой тенью, яркие заливки — дерзкая и очень заметная сетка.

    Направление

Применить стиль «Bento-компоновка»

Получите промпт для ИИ-разработчика: выберите тип продукта — и инструкция будет собрана с учётом стиля и особенностей сайта, приложения или веб-платформы.

Использовать