The keynote-famous bento layout: one dominant feature tile plus a mosaic of smaller supporting tiles. Irregular but never chaotic — every tile snaps to the same underlying grid, and generous gaps keep it breathable.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build an Apple-style bento grid section.
1. Grid: CSS grid, 4 columns on desktop, 16-20px gap. Tiles span 1x1, 2x1, 2x2 — the hero tile is always 2x2 and placed first.
2. Tiles: white (#FFF) cards on a #F5F5F7 page background, 24-28px border radius, no visible borders — separation comes from the background contrast alone.
3. Each tile holds ONE idea: a stat, a screenshot, a short claim. Headline 17-21px semibold, body 14px in #6E6E73.
4. Imagery bleeds to tile edges; text keeps 24px padding.
5. Responsive: 2 columns on tablet, 1 column stacked on mobile — the 2x2 hero becomes a full-width tile.
6. No hover transforms bigger than scale(1.01). Restraint is the aesthetic.The keynote-famous bento layout: one dominant feature tile plus a mosaic of smaller supporting tiles. Irregular but never chaotic — every tile snaps to the same underlying grid, and generous gaps keep it breathable.
Switch viewports to see the responsive behavior described in the exports.
Switch viewports to see the responsive behavior described in the exports.