Digital era · 2023–present
Bento Grid
A tight grid of rounded, unequal-sized panels — each a mini-poster for one feature — arranged like a Japanese bento box.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(13% 0.01 260) - --fg
oklch(96% 0 0) - --muted
oklch(62% 0.01 260) - --surface
oklch(20% 0.015 260) - --surface-2
oklch(26% 0.02 260) - --border
oklch(30% 0.015 260) - --accent
oklch(68% 0.2 255) - --accent-fg
oklch(10% 0 0) - --focus
oklch(68% 0.2 255)
| Token | Value |
|---|---|
| --font-body | -apple-system, 'SF Pro Text', system-ui, sans-serif |
| --font-display | -apple-system, 'SF Pro Display', system-ui, sans-serif |
| --font-mono | ui-monospace, 'SF Mono', monospace |
| --radius | 20px |
| --radius-sm | 12px |
| --shadow | 0 4px 20px oklch(0% 0 0 / 0.35) |
| --shadow-lg | 0 12px 48px oklch(0% 0 0 / 0.55) |
:root {
--bg: oklch(13% 0.01 260);
--fg: oklch(96% 0 0);
--muted: oklch(62% 0.01 260);
--surface: oklch(20% 0.015 260);
--surface-2: oklch(26% 0.02 260);
--border: oklch(30% 0.015 260);
--accent: oklch(68% 0.2 255);
--accent-fg: oklch(10% 0 0);
--focus: oklch(68% 0.2 255);
--font-body: -apple-system, 'SF Pro Text', system-ui, sans-serif;
--font-display: -apple-system, 'SF Pro Display', system-ui, sans-serif;
--font-mono: ui-monospace, 'SF Mono', monospace;
--radius: 20px;
--radius-sm: 12px;
--shadow: 0 4px 20px oklch(0% 0 0 / 0.35);
--shadow-lg: 0 12px 48px oklch(0% 0 0 / 0.55);
}Where it came from
Origin: Apple keynote feature slides, widely popularised in 2023
Apple's marketing team began using a dense grid of feature tiles in iPhone and iPad keynotes, with each tile showing one capability through illustration, demo screenshot or typographic statement. The pattern spread to landing pages and portfolios in 2023, driven by Framer and Webflow templates. The name references the Japanese bento box, where different foods sit in separated, snug compartments. The style rewards a content-first approach because each cell must be strong on its own.
How to spot it
- Asymmetric grid of rectangles that span different column and row counts
- Large, consistent corner radii across all cells
- Dark background; each cell its own distinct colour or illustration
- One main message per cell — icon, screenshot or bold type
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Communicates multiple features without a long scroll | Already strongly identified with Apple marketing and no-code tools |
| Each cell is independently shareable as a visual | Empty cells are painful — every cell must earn its space |
| Looks sophisticated without much animation | Mobile reflow of the asymmetric grid is almost always weaker |
In the wild
- Apple iPhone feature pages
- Vercel's features section
- Framer template gallery circa 2023
Use it when
Product landing pages with five or more distinct features that each deserve a visual moment.