# Bento grid

Also called: bento box layout, bento UI, Apple keynote grid, feature grid tiles  
Era: 2022 onward (Apple event slides, then every SaaS landing page in 2023)  
Page: https://designforai.dev/style/bento-grid

## Traits

- one rectangular grid of tiles in mixed sizes (1x1, 2x1, 2x2) with equal gutters
- every tile is a self-contained feature: one headline, one visual, one stat
- uniform radius (16-24px) and uniform gap (12-16px) hold the mess together
- tiles alternate between dark, light and a single accent fill
- content inside tiles is big and few: a number, an icon, a screenshot crop
- the grid is the hero; there is rarely a separate hero image
- hover lifts or slightly scales a tile; nothing else moves

Palette: #0b0b0f page (dark variant) or #f5f5f7 (light), #1c1c22 tile, #ffffff light tile, #3b82f6 accent tile, #a1a1aa muted text, #fafafa text

Type: Geist or Manrope; tile titles 600 at 20-24px, big stats 700 at 48-72px with -0.03em, captions 400 at 14px

## Do

- design the grid at 4 or 6 columns on desktop and collapse to 1-2 on mobile; keep tile order meaningful
- give each tile exactly one message; if it needs two, split it
- use the same radius, gap and padding on every tile without exception

## Don't

- do not put text-only tiles everywhere; at least a third need a visual
- do not vary gutters or radii between tiles
- do not stack two bento grids back to back; one per page section

Known for it: Apple product pages, Linear features page, Vercel, Arc browser

## CSS seed

```css
:root{--bg:#0b0b0f; --fg:#fafafa; --muted:#a1a1aa; --tile:#1c1c22; --accent:#3b82f6; --radius:20px; --gap:14px; --font:'Geist',sans-serif}
```

## Prompt

Build the home page as a bento grid. Page background #0b0b0f, text #fafafa, muted #a1a1aa. Grid: CSS grid with 6 columns and 14px gap at 1200px, tiles spanning 2x1, 2x2, 3x1 and 1x1 cells, collapsing to 2 columns at 768px and 1 column at 480px. Every tile: background #1c1c22, border 1px rgba(255,255,255,0.06), border-radius 20px, padding 28px. Make one tile #3b82f6 with white text and one tile pure white with #0b0b0f text for contrast. Tile content: a 20px 600 title, one line of 14px caption, and either a 64px 700 stat (-0.03em) or a cropped screenshot/illustration anchored bottom-right and clipped by the tile radius. Font Geist throughout. Hover: translateY(-2px) and border brightens to rgba(255,255,255,0.14), 180ms ease-out. No other section may reuse the grid; below it use plain text sections.