Bento grid: a design system built from modular tiles

A grid that acts like a dashboard

A bento grid is the modular layout where tiles of different sizes sit in aligned rows — a big hero tile here, four small status tiles there, a tall one beside a wide one — all held together by invisible column lines. It turns mixed content, stats and actions into a compact overview, which is why dashboards, launchers and settings screens love it.

Recognize it by modularity and rhythm: varied tile spans, strong shared alignment, compact summaries inside each tile, and a color system that keeps tiles differentiated without shouting. That color discipline is the part people miss — a bento grid with six hero colors is a jumble; a bento grid with two surfaces plus a few role colors is a system.

The name comes from the Japanese lunchbox, and the metaphor is exact: separate compartments, each with its own portion, all designed to be consumed at one sitting. That is precisely what a great dashboard is. The layout happens to be fashionable right now, but the discipline it asks for — stable alignment, quiet differentiation, no tile fighting its neighbor — is permanent.

How to recognize it

A bento layout is easy to spot; a bento system is defined by these four behaviors:

• Mixed spans, one ruler — tiles occupy one, two or three columns, but every tile obeys the same column grid
• Strong shared alignment — tile edges line up to the pixel and gaps are consistent across the whole board
• Compact summaries — each tile carries a tight headline and a small stat or figure, nothing sprawling
• Quiet differentiation — tiles differ by surface role, not by six competing colors

The bento grid preset

Bento thrives on a bright, modern trio: an indigo primary for the tiles that matter, a cyan for emphasis surfaces, and a rose accent for status and mixed data. Split-complementary keeps those relationships honest, round radius softens the tiles, and a grotesque pairing gives the compact summaries the slight technical edge they want.

The trio does a specific job in the grid: it hands you three believable tile speeds. The indigo tile is the one to read first, cyan tiles are the supporting surfaces, and rose marks anything live. Keep exactly those three roles and every tile in the bento has a ready answer for what it should be — which is the entire trick of making varied sizes feel like one system.

How the color roles land in this style

In a bento system the surface tokens carry most of the weight, because nearly every tile is a surface. Primary gets the featured tile and the main action inside it; secondary marks emphasis tiles; and accent is reserved for live status chips and small sparklines. The result is a small, legible vocabulary that scales to any grid, whatever the tile sizes:

:root {
  --background: #ffffff;
  --surface: #f4f5f7;
  --primary: #6366f1;
  --secondary: #22d3ee;
  --accent: #fb7185;
  --foreground: #18181b;
}

Adapt it

Treat the SaaS preview as the bento home and push your own brand hue into primary. Keep cyan and rose only if they earn their place; muted brands can drop to a single accent and use surface lightness instead. After the hue swap, check the smallest tile text — compact summaries are where contrast quietly fails.

Bento boards are also a density test. The previews render at ordinary spacing; a real grid often packs tiles tighter, and that is where the two-surfaces-plus-roles rule pays for itself. If a variant ever feels busy, the fix is almost never a new color — it's taking color off a tile and letting surface lightness carry it.