# Bento Feature-Grid Design

> 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.

- Period: 2020–present
- Where: North America, Global / networked
- Origin: 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.
- Branch: Digital native
- Also known as: Bento grid, Bento box UI, Bento feature cards
- Page: https://stylogeny.com/styles/bento-feature-grid/

## 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.

## Its design choices

Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

### Layout & composition
- [Cards & bento tiles](https://stylogeny.com/design-choices/cards-and-bento-tiles/) (defining)
- [Modular grid](https://stylogeny.com/design-choices/modular-grid/) (characteristic)
- [Framed panels](https://stylogeny.com/design-choices/framed-panels/) (characteristic)

### Space & hierarchy
- [Layered information](https://stylogeny.com/design-choices/layered-information/) (defining)
- [Extreme scale contrast](https://stylogeny.com/design-choices/extreme-scale-contrast/) (characteristic)
- [Repetition & rhythm](https://stylogeny.com/design-choices/repetition-and-rhythm/) (characteristic)

### Typography
- [Grotesque & neo-grotesque](https://stylogeny.com/design-choices/grotesque-and-neo-grotesque/) (characteristic)
- [Flush left, ragged right](https://stylogeny.com/design-choices/flush-left-ragged-right/) (occasional)

### Colour
- [Flat fields](https://stylogeny.com/design-choices/flat-fields/) (characteristic)
- [Light ground](https://stylogeny.com/design-choices/light-ground/) (characteristic)
- [Dark ground](https://stylogeny.com/design-choices/dark-ground/) (occasional)

### Form & shape
- [Rounded & pill](https://stylogeny.com/design-choices/rounded-and-pill/) (defining)

### Surface & texture
- [Flat](https://stylogeny.com/design-choices/flat/) (characteristic)

### Ornament
- [Ornament-free](https://stylogeny.com/design-choices/ornament-free/) (characteristic)

### Imagery
- [Straight photography](https://stylogeny.com/design-choices/straight-photography/) (characteristic)
- [Diagram & data](https://stylogeny.com/design-choices/diagram-and-data/) (characteristic)
- [Icons & pictograms](https://stylogeny.com/design-choices/icons-and-pictograms/) (characteristic)

### Medium & production
- [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (defining)
- [App & OS interface](https://stylogeny.com/design-choices/app-and-os-interface/) (characteristic)

### Tone & intent
- [Rational & objective](https://stylogeny.com/design-choices/rational-and-objective/) (characteristic)

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)

## Where it comes from, and what it’s close to

- Grew out of: [Material Design](https://stylogeny.com/styles/material-design.md) (2014–present)
- Alike in its design choices: [Flat Design](https://stylogeny.com/styles/flat-design.md) (2010–2016), 67% alike
- Alike in its design choices: [HfG Ulm Systematic Design](https://stylogeny.com/styles/ulm-school.md) (1953–1968), 61% alike
- Alike in its design choices: [Neo-Swiss Revival](https://stylogeny.com/styles/swiss-revival.md) (2005–present), 58% alike
- Alike in its design choices: [International Typographic Style](https://stylogeny.com/styles/swiss-international.md) (1950–1975), 58% alike
- Alike in its design choices: [Schematic Transit Diagram (Beck Tube Map Idiom)](https://stylogeny.com/styles/transit-diagram-map.md) (1931–present), 57% alike
- Alike in its design choices: [Newsroom Data Graphics & Scrollytelling](https://stylogeny.com/styles/newsroom-data-graphics.md) (2009–present), 56% alike

## 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)

---

From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Bento Feature-Grid Design”, https://stylogeny.com/styles/bento-feature-grid/