Somewhere on almost every business website is a section that lists things: services, industries, capabilities, product families. And on most sites it is exactly that, a list. A flat run of bullets, or a grid of identical cards, every item the same size, nothing first.
We treat that as a failure state. On our builds, any grid of three or more peer items lands on a bento: a composed grid of unequal tiles where one featured tile is unmistakably first. The difference is not decoration. It is information.
The name comes from the Japanese lunch box: a container of unequal compartments composed into one clean rectangle. The compartments are different sizes because the contents matter differently. That is the entire idea.
Hierarchy is information
A visitor scanning a section is asking one question: what matters here? An equal-weight grid refuses to answer it. Twelve identical tiles say 'we could not decide,' and the visitor is left to do the sorting themselves, which mostly means they do not.
There is a reason restaurant menus, newspapers, and app stores all lead with a featured item. Attention is a budget. A layout that spends it evenly spends it badly, because even distribution guarantees the most important thing gets a twelfth of the attention it deserves.
An equal grid is usually not even a choice. It is the default the layout tool handed somebody, shipped unexamined: a decision nobody made. A bento encodes a real decision, this one first, these in support. And the hierarchy comes from size, not from color, badges, or ornament, because size is the one signal every eye reads instantly.
The featured tile earns its size
Featured is not a reward for being first in the array. The featured tile has to earn its position: it is the item most visitors came for, the one the business leads with, or the strongest example of the work. When a client points at one card and says that one is right, everything else gets matched to it.
And the featured tile gets real advantages, not a subtle nudge:
- It spans two columns and two rows while supporting tiles take one cell each
- Its heading runs noticeably larger than the supporting headings
- It carries the tallest photo, filling its frame edge to edge
- Supporting tiles stay compact, so the contrast in weight is obvious at a glance
The saga that taught us
We learned this the long way on Belzona Baton Rouge, an industrial coatings distributor with hundreds of application pages. The application-areas section went through version after version: plain lists, flat full-width rows, items grouped under area headings, a column per area, one band per row. Every version was rejected for the same underlying reason. No hierarchy. Nothing to look at first.
The version that finally worked was a three-column bento: a dominant tile spanning two columns and two rows, gradient background, taller photo, bigger heading, with compact white supporting tiles around it. It has been our default for grids of peers ever since.
The deeper lesson from that saga was about matching, not just layout. Once one section reaches the right shape, it becomes the exemplar, and the job shifts to raising every peer section to meet it. Consistency is what makes the pattern read as design instead of coincidence.
Complete the rectangle
A bento has one non-negotiable geometric rule: it must complete a clean rectangle. Three tiles across the top and one orphan hanging below reads as a mistake, because it is one. So we cap and curate the counts to fill the grid, and route the overflow to a 'browse all' page instead of cramming it in.
That is not hiding content. The bento is the front door; the list is the index. A complete grouped list can live at the bottom of the page or on its own route, where completeness helps search engines and deep researchers without wrecking the first impression.
There is an honest exception, too. With too few peers to fill a rectangle around a featured tile, forcing the pattern produces exactly the orphan problem it exists to prevent. In that case we drop to equal cards deliberately, the way we did on America Premier's homepage. The rule is hierarchy where hierarchy is true, not bento everywhere.
It has to survive the phone
Hierarchy also has to survive small screens, where every grid collapses. Ours step down from three columns to two to one, and the featured tile leads the single column at full width, so the thing that mattered most on desktop is still the first thing seen on a phone. Tap targets grow, photos stay full-bleed, and nothing depends on hover.
Bullets tell a visitor you had a list. A bento tells them what matters first, what supports it, and where to go deeper, all before they have read a word. That is the job of layout: to make the decision visible.
