Bento Grid

Contexto Histórico

O Bento Grid é inspirado nas caixas de almoço japonesas Bento, onde cada compartimento tem seu espaço dedicado. Popularizado pela Apple em apresentações de produtos, tornou-se padrão em UI moderna.

Quando Usar

Bento grids shine when you have 4-8 features of unequal importance and need to communicate hierarchy without numbering things. Perfect for product marketing pages where one hero feature deserves twice the visual weight. Use them for SaaS feature overviews, product showcases, and any layout where you'd otherwise resort to a boring alternating left-right section pattern. Skip them for content that's genuinely equal in weight — that's what uniform grids are for.

Princípios de Design

• Size encodes importance — the largest cell carries the primary message, never waste a 2×2 on secondary content
• Each cell is a self-contained composition with its own internal typographic hierarchy, padding, and focal point
• Maintain consistent gap values across the entire grid; the whitespace between cells is what makes the pattern read as unified rather than chaotic
• Limit your grid to 2-3 distinct cell sizes maximum — too many proportions destroy the rhythm and make the layout feel accidental rather than designed
• Content density must vary with cell size: large cells get breathing room and illustration, small cells get tight copy and an icon at most

Especificações Técnicas

Relacionados

Editorial & Tipografia

3x3 Grid Design

Minimalismo & Swiss

Japandi

Arte & Ilustracao

Bauhaus

Editorial & Tipografia

Bento Grid

Minimalismo & Swiss

Utilitarian