UI Lingo
Shortlist 0

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.

“Bento tiles”Minimal & CleanEra: 2022 → todayTechyFriendlyBoldCalm
Open full screen ↗
bento-box-grid / landingEN
bento-box-grid / landingTH
Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Colours · Light

    Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

    This recipe redefines text-muted, success, danger in its own rules, so edits to those colours may show only in part.

    Design keywords

    Say these words to ask for this style.

    modular tilesmixed tile sizesasymmetric gridone tight even gaprounded boxesone idea per tiletinted tilescorner index labels

    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

    Bento Grids (Apple-style) →Apple-style bento is a polished keynote look — white tiles on #F5F5F7 grey, 28–32px radius, soft shadows and product imagery; Bento Box Grid is flatter and more graphic, with hairline borders, tinted lime/lilac/ink tiles and mono labels.Neubrutalism →Neubrutalism outlines every tile in thick black with hard offset shadows; Bento Box Grid uses 1px hairlines, no shadow and a calm, even gutter.Swiss Modernism 2.0 →Swiss Modernism 2.0 is driven by typography, rules and colour fields on a column grid; Bento Box Grid is driven by rounded, self-contained tiles of different sizes.

    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.

    Audit
    ✓ Passed
    Rounds
    2
    Builder
    unknown
    Auditor
    unknown
    Copied!
    ↑ ↓ to move · Enter to open · Esc to close