05
Bento grid
The Bento layout system brings clarity and structure to complex information. Used across EMCD interfaces and communications, it organizes content into modular blocks that create rhythm, hierarchy, and a more intuitive visual flow
Principles
EMCD applies layout principles inspired by editorial and poster design across both digital and print materials, combining open space, modular composition, and typography-driven structure to create movement and balance within the layout
The Bento system is built on a rectangular grid framework. Every element is placed within a defined module and aligned consistently to maintain structure and cohesion
Block size communicates importance. Larger blocks highlight primary messages, medium blocks support secondary information, and smaller blocks provide additional context or utility content
Grid
The Bento layout uses a flexible rectangular grid system that allows blocks to span one or multiple cells, creating adaptable compositions across different formats and screen sizes
Important rules:
- All blocks should remain rectangular
- Block dimensions should follow the base grid unit
- Spacing between blocks must remain consistent
- All elements should align precisely to the grid
Content
Bento compositions at EMCD follow three core principles that help maintain clarity and visual consistency across layouts
Color values
Balance
Each composition should feel visually balanced, with content distributed naturally across the layout
Contrast
Use a variety of content types, scales, and visual weights to create emphasis and guide attention
Rhythm
Varying block sizes and spacing creates a stronger visual rhythm and improves content flow throughout the composition
Examples
The examples below demonstrate how the Bento system is applied across EMCD product and marketing materials
Variations in block size and content density help organize information, create hierarchy, and establish a clear visual structurea
