Bento Box Grid
Also called: Bento UI, Bento layout, Modular tile grid
Everything is a tile: a modular, asymmetric grid of rounded boxes in mixed sizes and a few flat tints, held together by one tight, even gutter.
Design keywords
Say these words to ask for this style.
Bento Box Grid organises a page like a Japanese lunch box: content is split into self-contained rectangular tiles of different spans (2×2, 2×1, 1×1) packed into a 4-column grid with one consistent 14px gap. Tiles are flat — white with a 1px hairline, or filled with a small set of tints (ink, lime, lilac, peach, sky) — and each holds exactly one idea: a stat, a feature, a chart, a quote. A tiny mono index label in the corner and the zig-zag rhythm of wide and square tiles make the structure itself the decoration.
Best for
- SaaS feature overviews and changelogs
- Personal portfolios and link-in-bio pages
- Dashboards that mix KPIs, charts and lists
- Product launch pages with many small benefits
Avoid for
- Long-form reading and documentation
- Linear step-by-step flows (checkout, forms)
- Content that has one dominant message
✓ Do
- Use a 4-column grid with spans of 1, 2 and 2×2 and fill every row
- Keep one 14px gutter everywhere; tiles 22px radius, large container panels 28px
- Use ink plus four flat tints (lime, lilac, peach, sky) and at most 3 tinted tiles per section
- Give each tile one job: a number, a chart, a feature or a quote
✕ Don't
- Don’t leave holes in the grid — rebalance spans instead
- Don’t mix gap sizes, or radii between sibling tiles in the same grid
- Don’t add heavy shadows or gradients to tiles
- Don’t put long paragraphs inside small tiles
Not to be confused with
On mobile
Collapse the 4-column bento to 2 columns: the hero tile goes full width, small tiles pair up 1+1, and lists become 2-up tiles. Keep a 12px gap and the 22px tile radius on the phone; the floating ink tab bar is just another tile.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.