Bento Grid
ベントーグリッド / 2020s / Layout / Information Design
Divides different kinds of information into independent boxes, giving the whole picture at a glance.
At a glance
Visual cues
- Cards large and small
- Aligned gutters
- One-screen summary
- Modules
Best used for
- Presenting many features as one story
- Staying friendly while keeping density
Use this style
Take the compact brief into a project or hand the structured version to an AI tool.
Detailed guidance and sourcesProduction rules, reference works, comparisons, research and citation formats
Dictionary entry
- Type
- A plain sans; oversize the numbers and short headings
- Composition
- Tile large and small cards on four to six columns
- Material
- Vary each card's role; keep decoration inside the cards
- Caution
- Not every card equal. Vary area and density by importance.
- Further study
- modular dashboard layouts / product storytelling grids
Related entries
- Swiss (スイス・スタイル)Shared effects: Trust.Compare Bento Grid and Swiss
- Glassmorphism (グラスモーフィズム)Editorially linked for a useful contrast.Compare Bento Grid and Glassmorphism
More from Information Design
Continue through styles in the same Information Design family, prioritised by shared effects.
- Isotype (アイソタイプ)Shared effects: Trust / Technique / Intimacy.
- Pictogram System (案内用ピクトグラム)Shared effects: Trust / Technique / Intimacy.
- Schematic Transit Diagram (スキーマティック路線図)Shared effects: Trust / Technique.
Browse all Information Design entries
Cite this entry
The dictionary is meant to be linked to. Take whichever form fits where you are writing.
- Link
- https://indexstyle.org/styles/bento-grid
- Markdown
- [Bento Grid — IndexStyle](https://indexstyle.org/styles/bento-grid)
- HTML
- <a href="https://indexstyle.org/styles/bento-grid">Bento Grid — IndexStyle</a>