What Apple does
#d2d2d7
On the MacBook Air page, the section that lists what you get with the new model is a bento grid: a CSS grid with two equal columns and template areas bento-1 bento-3 / bento-1 bento-4 / bento-2 bento-4, so one tall tile sits beside a short and a tall one. Gaps are 20 px, tiles have a 28 px corner radius (18 px at another breakpoint) and 40 px padding (30 px smaller), with a #d2d2d7 tile background. Copy is centered, set at 40 px, 32 px or 19 px by breakpoint at weight 600 in SF Pro Display, one fact per tile (display, colors, AI performance, camera). On small screens the grid collapses to one column with an 18 px row gap.
Apple's system, as published
- Grid Template Areas
- "bento-1 bento-3" "bento-1 bento-4" "bento-2 bento-4"
- Columns
- repeat(2, minmax(0, 1fr))
- Gap Px
- 20
- Mobile Row Gap Px
- 18
- Tile Radius Px
- 28, 18
- Tile Padding Px
- 40, 30
- Tile Background
- #d2d2d7
- Copy Size Px
- 40, 32, 19
- Copy Weight
- 600
- Copy Font
- SF Pro Display
- Tile Min Height Px · Tile3
- 230, 190, 162
- Tile Min Height Px · Tile4
- 380, 340, 162
Why it works
Tiles of different heights break a flat list into a pattern the eye scans quickly, and one fact per tile keeps every claim short. Shared radius and gaps hold the uneven sizes together.
Best for
Product and feature summaries, upgrade or comparison sections, one-pagers and proposal pages that list four to eight benefits
What breaks it
- Two facts in one tile
- Equal-height tiles that turn the grid back into a list
- More than one dark feature tile per grid
Sources
- apple.com: Live page HTML and stylesheet: .bento-grid and .bento-item rules, tile content
Steal it for your brand
The same system, written in your colors, type and shapes. Nothing of Apple's look comes with it.
The recipe
- Write the section as four to six facts, one per tile, each a short display-face line with an optional visual.
- Lay a two-column grid with uneven spans: one tall tile on the left beside a short and a tall tile on the right, so no row lines up flat.
- Fill tiles with
palette.surface, round them to twicestyle.radius, and use the recipe's gap_px and tile_padding_px (tighter for denser brands). - Put the single strongest fact in a
palette.nighttile withpalette.on nighttext; keep the rest onpalette.surface. - Center copy in each tile and collapse to one column on phones, keeping the same order.
What you'll need
- Four to six distinct facts or features
- An image or icon for the tiles that need one (optional)
Recipe as JSON
{
"recipe": {
"columns": 2,
"areas": [
[
"a",
"c"
],
[
"a",
"d"
],
[
"b",
"d"
]
],
"gap_px": {
"by": "style.density",
"map": {
"airy": 24,
"balanced": 20,
"dense": 12
},
"default": 20
},
"tile_radius_px": "{style.radius} * 2",
"tile_padding_px": {
"by": "style.density",
"map": {
"airy": 48,
"balanced": 40,
"dense": 24
},
"default": 40
},
"tile_fill": "{palette.surface}",
"tile_fill_feature": "{palette.night}",
"tile_text_feature": "{palette.on_night}",
"tile_text": "{palette.ink}",
"copy_weight": "{typography.display.weight}",
"copy_align": "center",
"facts_per_tile": 1,
"mobile_columns": 1
},
"fallbacks": {
"palette.night": "{palette.ink}",
"palette.on_night": "{palette.paper}",
"palette.surface": "{palette.paper}",
"style.radius": 12
},
"steps": [
"Write the section as four to six facts, one per tile, each a short display-face line with an optional visual.",
"Lay a two-column grid with uneven spans: one tall tile on the left beside a short and a tall tile on the right, so no row lines up flat.",
"Fill tiles with {palette.surface}, round them to twice {style.radius}, and use the recipe's gap_px and tile_padding_px (tighter for denser brands).",
"Put the single strongest fact in a {palette.night} tile with {palette.on_night} text; keep the rest on {palette.surface}.",
"Center copy in each tile and collapse to one column on phones, keeping the same order."
]
}See it working
- Apple: The upgrade section's bento grid of rounded tiles, one fact each
The lesson
Give each feature its own tile and make tile heights uneven, so a spec list scans like a layout instead of a bullet list.
The move
Four rounded tiles fill two columns: a tall display tile with a screen image on the left over a short camera tile, and on the right a short chip tile over a tall color tile. Each holds a short centered caption, such as "Fly through demanding AI tasks up to 9.5x faster.", with an icon or product image.
Why it works
- Our readOne claim per tile keeps every caption short enough to read at a glance, and each tile stands on its own.
- Our readThe offset heights break the grid so it doesn't look like a table, while the even gaps and matching corner radius keep it orderly.
- Vendor claimThe page's stylesheet sets a two-column grid with 20 px gaps, 28 px corner radius and 40 px padding, collapsing to one column on small screens. (source)
What not to copy
Don't copy the product photography or Apple's type. Keep the pattern: four to eight tiles, one fact each, a shared radius and gap, and a tall-short stagger across the columns.
