Bento design (you'll also hear bento grid or bento box layout) is a web design style that arranges a page as one composed grid of rounded tiles, where every tile holds exactly one thing: a headline, a stat, a screenshot, a short quote. Tile sizes vary to show what matters most, but the gaps and corner radii never do, so a screen full of information still reads as calm and orderly. It feels like a well-packed lunchbox: dense, tidy, and satisfying to scan.
It exists because modern products have a lot to prove at once. Features, numbers, social proof, screenshots: stack those as full-width sections and the page becomes a scroll marathon. Bento compresses the whole pitch into one screen a visitor can take in at a glance, which is why product companies and dashboards adopted it so fast. The grid does the organizing so the visitor doesn't have to.
Where it came from
The name comes from the Japanese bento box, the single-portion lunchbox divided into compartments: one item per compartment, arranged with real care. The idea that a container can organize many different things into one tidy, pleasing whole is centuries old in Japan. The web just borrowed the word for its screen-sized version.
As a web style it took off in the early 2020s. Apple's keynote summary slides packed a product's features into one grid of rounded tiles, and the format spread quickly through dashboard interfaces and SaaS landing pages that had the same problem to solve: lots to show, one screen to show it in. Today it's one of the default looks for software and product companies, though the discipline that makes it work is older than the trend.
The six rules that make it work
One tile, one job
Every tile carries a single idea: one stat, one feature, one image. If a tile needs two headlines, it's two tiles.
Sizes vary, gaps don't
Hierarchy comes from how many columns a tile spans. The gutters between tiles stay identical everywhere, and that consistency keeps a busy grid calm.
One radius for the whole set
Pick a corner radius and use it on every tile. A mismatched corner reads as a bug, not a choice.
Neutral base, few accents
Most tiles stay quiet: white, soft gray, dark navy. Two or three tiles carry the color or gradient, and those are the ones doing the pointing.
Real content in every box
Stats, screenshots, quotes, live numbers. A tile with nothing to say is wasted space; cut it and let the grid tighten.
Motion is a gentle lift
A tile rises a few pixels on hover, nothing more. Movement stays inside the tile, so the grid never feels unstable.
When to pick it, when to skip it
Pick it if
- You're a SaaS, app, or service business with lots to show at once: features, metrics, screenshots, reviews.
- Your product is a dashboard. The marketing site can mirror the interface people are actually buying.
- You run e-commerce or a studio with mixed content that needs order: products, press, stats, photos.
- You want a site that grows gracefully. New offer, new integration, new award: each one is just a new tile.
Skip it if
- Your site is one long story or argument. That job belongs to Editorial Design.
- You only have two or three things to say. A sparse grid looks unfinished; Minimalism carries small content better.
- Your brand competes on noise and personality. Neobrutalism and Maximalism are built for that.
- One full-bleed photo or 3D scene should own the screen. That's 3D & Immersive territory, not a grid of boxes.
How we build it
Every bento site we ship is built from scratch, no templates and no page builders, because a bento grid lives or dies on what goes in the boxes. Prefab grids hand you a set of empty tiles and leave you to fill them. We work the other way around: we start from your actual content, decide what earns a tile, then size and place each one so the hierarchy matches what your business needs a visitor to see first.
The demo at the top of this page is exactly that: an original homepage we designed and coded ourselves so you can feel the style working instead of reading about it. If you want to see how it compares to calmer or louder directions, the full catalog puts your business name inside all 20 styles at once.
Questions we actually get
How is bento different from a regular card grid?
Card grids repeat one shape at one size, so every card carries equal weight. A bento grid is composed: tiles span different widths and heights, the important thing gets the big box, and the whole section reads as one picture instead of a list. That composition is the difference between a layout and a style.
What fonts and colors work for bento?
A clean geometric sans carries the style; the demo on this page uses Plus Jakarta Sans, and Inter or Manrope work just as well. Keep most tiles neutral, then let two or three tiles carry color, a gradient, or a photo. The restraint is what makes the colored tiles land.
Can bento work with our existing brand?
Yes, and more easily than most styles. Tiles are containers, so your existing colors, photography, and voice drop straight into them. We usually map the brand's primary color to the hero tile and one accent tile, and let the rest of the grid stay quiet around it.
How long does a bento build take?
Most of our custom builds go live in three to five weeks, and bento sits comfortably in that range. The real design time goes into deciding what earns a tile and how big each one should be, which we settle early so the build itself moves fast.