UI Lingo
Shortlist 0

Bento Grids (Apple-style)

Also called: Apple bento, Keynote grid, Product bento

The Apple keynote slide as a web page: big 28–32px rounded white tiles on a #F5F5F7 grey canvas, huge tight headlines and studio-lit product renders.

“Keynote bento”Minimal & CleanEra: 2023 → todayLuxuryCalmTrustworthyTechy
Prompt builder
Open full screen ↗
bento-grids / landingEN
bento-grids / landingTH

Design keywords

Say these words to ask for this style.

Apple keynote bentolight grey #F5F5F7 canvasbig rounded white tilessoft studio shadowsSF-style tight headlinesproduct render tilesblack “Pro” tileblue pill links

Apple-style bento borrows the summary slide from product keynotes: a light grey #F5F5F7 canvas holding large white tiles with generous 28–32px corners, no borders and a barely-there shadow. Each tile is a mini poster — one oversized number or short headline in a tight SF-like grotesque, a line of grey copy and a studio-lit product shot (soft radial highlights on dark or white). Colour is almost absent: near-black #1D1D1F text, #6E6E73 secondary copy and Apple-blue #0071E3 for the one primary pill (#0066CC for text links), with black "Pro" tiles for contrast.

Best for

  • Hardware and consumer-tech product pages
  • Premium e-commerce feature summaries
  • Spec and “what’s new” overviews
  • App Store–style marketing pages

Avoid for

  • Brands without strong product photography
  • Dense data tools and admin back-offices
  • Playful, loud or illustrated brands

✓ Do

  • Use #F5F5F7 as the page and #FFFFFF tiles with 28–32px radius
  • Set headlines at 600 weight with −0.03em tracking and keep them to one or two short lines
  • Fill hero tiles with a lit product render: radial highlight on a dark or white field
  • Use Apple blue #0071E3 for the primary pill and #0066CC for text links; other colour lives only in icons, the orange eyebrow and gradient stat numerals

✕ Don't

  • No borders on tiles (hairlines only for the nav, FAQ rows and inputs), and no coloured tile fills beyond black/white/grey
  • Don’t use hard or dark drop shadows on tiles — keep them ≤ 8% opacity (token lg)
  • Don’t crowd a tile with more than one message
  • Don’t use playful or rounded display fonts

Not to be confused with

Bento Box Grid →Bento Box Grid is graphic and modular — hairline borders, flat lime/lilac tints, mono corner labels; Apple-style bento is polished and photographic — white tiles on grey, 28–32px radius, soft shadows and product renders.Minimalism & Swiss Style →Swiss minimalism uses square corners, hairline rules and a flush-left grid; Apple bento uses huge rounded tiles, centred headlines and soft depth.Spatial UI (visionOS) →visionOS spatial UI floats translucent glass panels over a 3D environment; Apple bento is opaque white tiles on a flat grey page.

On mobile

On iPhone the bento stacks to full-width tiles with 20–24px radius and 12px gaps; keep one big number or product shot per tile. Use an iOS-style translucent tab bar and large-title headers; drop the shadows and let the grey canvas separate tiles.

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

✓ Audited by agent review (2×)
Copied!