Digital native · 2020–present · North America, Global / networked
Bento Feature-Grid Design
Also known as Bento grid, Bento box UI, Bento feature cards
A feature-presentation layout that tells one product story as a mosaic of unequal rounded compartments on a shared grid. Each tile carries a short headline plus a photograph, statistic, screenshot or diagram. Examples cluster around product slides and SaaS pages from about 2020-2021. Parented to material-design rather than flat-design because its unit is the spaced card, and tiles may carry photography, gradients and shadows. The palette is an Apple-slide example.
Make something in this style Get advice in this style Mix it with another style
01
How it works
- Divide the story into unequal rounded tiles that snap to one common grid and share fixed gutters.
- Give every tile one message, with its own short headline and one visual proof: object, number, screenshot or diagram.
- Size tiles by importance, so the hero feature takes the largest cell and minor facts the smallest.
- Keep gutters and inner margins small and constant so the mosaic reads as one object.
- Allow product photography, gradients and soft shadows inside tiles, but keep the tile boundaries clean and flat.
Product-presentation slides and web/brand design from about 2020-2021. BentoGrids lists an Apple iPad Air summary slide as an early example; that listing was not independently verified, and it is not a proven origin of the form.
02
Its design choices
From Stylogeny’s vocabulary of design choices: defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.
- Layout & composition
- Space & hierarchy
- Form & shape
- Surface & texture
- Ornament
- Imagery
- Medium & production
- Tone & intent
- Avoids
- Abundant decoration, Ornamented display, Collage & layering, Full bleed, Single focal point, Skeuomorphic material
Palette
-
#f5f5f7 -
#ffffff -
#1d1d1f -
#0071e3 -
#6e6e73 -
#0b0b0f
Typefaces
-
Inter
-
SF Pro
-
Helvetica Neue
-
Neo-grotesque UI sans-serifs
Known for
-
Apple, September 2020 iPad Air feature-summary slide
listed by BentoGrids; not independently verified
-
Linear, Linear 2021 Wrapped, by Julian Lehr (17 December 2021), whose header is described as a bento grid
a year-in-review piece, not a feature page
-
Tailwind UI / Tailwind Plus, Bento Grids marketing-section templates
a template, not a shipped product interface
03
Make something in this style
Say what you need, and Stylogeny’s image studio draws it from Bento Feature-Grid Design’s design choices and checks it against them. It takes about a minute, and you get a link to share.
04
Where it comes from, and what it’s close to
After it
The styles that grew out of it.
No later style in the atlas grew out of it yet.
Alike in its design choices
Styles that make many of the same choices, related or not, besides those above.
05
Often taken for
Bento Feature-Grid Design has no real works recorded yet, so these are its nearest styles by its choices alone, with the choices that tell them apart.
-
Material Design
Material Design is one of Bento Feature-Grid Design’s nearest styles by choices; no real work of either fits the other better.
Choices that tell Bento Feature-Grid Design and Material Design apart Choice Bento Feature-Grid Design Material Design Diagram & data characteristic — Illusion of depth — defining Framed panels characteristic — Full bleed avoids occasional Repetition & rhythm characteristic — Bento Feature-Grid Design descends from Material Design: a shared line, so the likeness is inherited.
-
Flat Design
Flat Design is one of Bento Feature-Grid Design’s nearest styles by choices; no real work of either fits the other better.
Choices that tell Bento Feature-Grid Design and Flat Design apart Choice Bento Feature-Grid Design Flat Design Layered information defining — Pictogram — defining Rounded & pill defining occasional Single focal point avoids occasional Diagram & data characteristic — Bento Feature-Grid Design descends from Flat Design: a shared line, so the likeness is inherited.
-
HfG Ulm Systematic Design
HfG Ulm Systematic Design is one of Bento Feature-Grid Design’s nearest styles by choices; no real work of either fits the other better.
Choices that tell Bento Feature-Grid Design and HfG Ulm Systematic Design apart Choice Bento Feature-Grid Design HfG Ulm Systematic Design Rounded & pill defining — Limited spot colours — defining Cards & bento tiles defining — Flush left, ragged right occasional defining Framed panels characteristic — Both descend from Bauhaus in the family tree.
-
Neo-Swiss Revival
Neo-Swiss Revival is one of Bento Feature-Grid Design’s nearest styles by choices; no real work of either fits the other better.
Choices that tell Bento Feature-Grid Design and Neo-Swiss Revival apart Choice Bento Feature-Grid Design Neo-Swiss Revival Rounded & pill defining — Generous white space — defining Cards & bento tiles defining — Type as image — defining Diagram & data characteristic — Both descend from International Typographic Style in the family tree.
— means the choice isn’t among the style’s recorded choices. Critics recorded each work’s choices with the styles’ descriptions in view, so this shows whether the descriptions hold together, not proof that they are right.
06
Combine it with
Styles Bento Feature-Grid Design pairs well with or plays against, from the research. Each is worked out as a combination: which style gives the type, the colours and the forms.
- Dark Tech Minimalism Pairs well · Set the tiles on a near-black ground with hairline borders to get the dark SaaS variant of the same mosaic.
- Corporate Memphis Contrasts · Replace diagram tiles with rubbery figure illustration to see how much the mosaic depends on evidence-led content.
- Skeuomorphic UI Contrasts · Place one richly rendered object in a single tile while the rest stay flat, to give the grid a focal point.
07
Sources
- https://linear.app/blog/linear-2021-wrapped (Julian Lehr, 17 December 2021)
- https://en.wikipedia.org/wiki/IPad_Air_(4th_generation) (confirms only the 15 September 2020 announcement date, not the slide)
- https://bentogrids.com/ (curated collection of examples; the Apple listing could not be verified from the page text; screenshots are not an open-licence claim)
- https://tailwindui.com/components/marketing/sections/bento-grids (redirects to Tailwind Plus; full template page requires login)
How Stylogeny researches and checks a style: where the facts come from.