Bento Grid vs Glassmorphism
ベントーグリッド / グラスモーフィズム
Bento Grid comes from Information Design and Glassmorphism from UI Expression. One is layout and the other style. They are reached for with different intent, which is the fastest way to tell them apart.
Bento Grid
Divides different kinds of information into independent boxes, giving the whole picture at a glance.
Glassmorphism
Shows depth and hierarchy through translucent layers, floating information lightly.
| Bento Grid | Glassmorphism | |
|---|---|---|
| Era | 2020s | 2020s |
| Family | Information Design | UI Expression |
| Kind | Layout | Style |
| Cues | Cards large and small / Aligned gutters / One-screen summary / Modules | Background blur / Translucency / Thin white borders / Color bleed |
| Best used for | Presenting many features as one story · Staying friendly while keeping density | Making layered information feel light · OS-grade refinement and depth |
| Type | A plain sans; oversize the numbers and short headings | A neutral sans-serif |
| Composition | Tile large and small cards on four to six columns | Stack cards with clear front-to-back order |
| Material | Vary each card's role; keep decoration inside the cards | Colored ground, translucent panes, fine edges |
| Caution | Not every card equal. Vary area and density by importance. | Legibility breaks with the wrong background. Give text surfaces real opacity. |