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
Open full screen ↗
bento-grids / landingEN
bento-grids / landingTH
Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Colours · Light

    Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

    This recipe redefines bg, surface, text-muted, success in its own rules, so edits to those colours may show only in part.

    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.

    Audit
    ✓ Passed
    Rounds
    2
    Builder
    unknown
    Auditor
    unknown
    Copied!
    ↑ ↓ to move · Enter to open · Esc to close