Design for AI

Bento grid: UI design prompt

Palette, type rules and a pasteable prompt for bento grid. Also called bento box layout, bento UI, Apple keynote grid, feature grid tiles. 2022 onward (Apple event slides, then every SaaS landing page in 2023).

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
: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.
For design.md, .cursorrules or AGENTS.md
## Design direction
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.

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

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.