Bento Grid Design Skill

Use when building website sections, landing pages, feature showcases, or dashboards that need a modern, scannable grid layout. Bento grids are modular layouts inspired by Japanese bento boxes, popularized by Apple's product pages.

When to Use Bento

✅ Use for:

• Feature showcases (5-10 distinct features)
• Landing page hero sections
• Dashboard overviews with mixed content types
• Portfolio/case study pages
• Stats/metrics displays
• Product capability overviews

❌ Don't use for:

• Long-form content (blog posts, documentation)
• Simple lists or tables
• Single-focus hero sections (one message, one CTA)
• Content that needs to be read sequentially
• Pages with fewer than 3 items

Three Core Principles

1. Strict Compartmentalization

Each piece of content lives in its own clearly defined box. Creates "cognitive chunking" so users scan 10+ pieces of information without overload.

2. Size = Visual Hierarchy

The most important content gets the largest box. Not about position, about scale.

• 1x1: Supporting features, secondary info
• 2x1: Mid-tier features, horizontal emphasis
• 1x2: Vertical emphasis, tall content
• 2x2: Hero feature, primary value proposition
• 3x2 or full-width: Detailed demonstrations, key selling point

3. Uniform Spacing (Gutters)

Gaps between boxes must be identical throughout. This creates rhythm.

• Desktop: 16-24px (recommended: 16px or gap-4)
• Tablet: 12-16px
• Mobile: 12px (gap-3)

Grid System

Use a 12-column base grid with Tailwind CSS Grid:

{/* Base bento container */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* Cards go here */}
</div>

Card Size Classes

// 1x1 - Standard card
<div className="col-span-1 row-span-1">

// 2x1 - Wide card
<div className="col-span-1 md:col-span-2 row-span-1">

// 1x2 - Tall card
<div className="col-span-1 row-span-2">

// 2x2 - Hero card (largest emphasis)
<div className="col-span-1 md:col-span-2 row-span-2">

// Full width
<div className="col-span-1 md:col-span-2 lg:col-span-3 row-span-1">

Visual Design Rules

Card Styling

// Standard bento card
<div className="rounded-2xl bg-neutral-900 border border-neutral-800 p-6 overflow-hidden">

Rules:

• Border radius: rounded-2xl (16px) or rounded-3xl (24px). Stay consistent.
• Background: subtle contrast from page background. Dark mode: bg-neutral-900 on bg-neutral-950. Light mode: bg-white on bg-gray-50.
• Border: very subtle. border-neutral-800 dark, border-gray-200 light.
• Padding: p-6 minimum. Larger cards can use p-8.
• Overflow: always overflow-hidden to contain images/illustrations.

Content Within Cards

Each card should contain one idea with a maximum of:

• Icon or illustration (optional)
• Headline (required, short)
• Description (optional, 1-2 sentences max)
• Visual/screenshot (optional, bleeds to edges for impact)

Never: multiple CTAs per card, walls of text, unrelated content grouped together.

Visual Interest

• Mix content types: some cards text-only, some with images, some with icons, some with code snippets
• Let images/screenshots bleed to card edges (no padding on image sides)
• Use subtle gradients or glows on hero cards to draw attention
• Consistent icon style across all cards

Responsive Behavior

// The responsive stack pattern
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

Critical mobile rule: On mobile, ALL cards become 1-column. Never try to maintain the bento grid on small screens. The hierarchy shifts from spatial to sequential.

Card order on mobile: Most important cards first. Use order- classes if the DOM order doesn't match mobile priority:

<div className="order-1 lg:order-none">  {/* First on mobile */}

Common Layouts

Layout 1: Feature Showcase (6 features)

┌──────────┬─────┐
│  2x2     │ 1x1 │
│  Hero    ├─────┤
│  Feature │ 1x1 │
├─────┬────┴─────┤
│ 1x1 │   2x1    │
└─────┴──────────┘

Layout 2: Stats + Features (mixed)

┌─────┬─────┬─────┐
│ 1x1 │ 1x1 │ 1x1 │  ← Stats row
├─────┴─────┼─────┤
│   2x2     │ 1x2 │
│   Hero    │     │
├─────┬─────┤     │
│ 1x1 │ 1x1 │     │
└─────┴─────┴─────┘

Layout 3: Simple 3-column

┌─────┬──────────┐
│ 1x1 │   2x1    │
├─────┼─────┬────┤
│ 1x1 │ 1x1 │1x1 │
├─────┴─────┼────┤
│   2x1     │1x1 │
└───────────┴────┘

Complete Example Component

See references/bento-section.tsx for a copy-paste ready React component.

Inspiration Sources

• bentogrids.com (curated collection)
• Apple product pages (the OG)
• Linear.app features page
• Notion landing page
• Vercel homepage
• Diagram.com
• Customer.io features
• onepagelove.com/tag/bento

Anti-patterns

1. Too many cards - Max 8-10. More than that becomes a cluttered mess.
2. All same size - That's just a card grid, not bento. Mix sizes for hierarchy.
3. No visual hierarchy - If everything is the same size, nothing stands out.
4. Inconsistent gutters - All gaps must be identical.
5. Too much text - Bento is for scanning, not reading. Keep copy tight.
6. Forced bento - Not every page needs bento. Use it when you have multiple distinct things to showcase, not as a default layout.
7. No mobile consideration - Always design mobile-first, then expand to bento on desktop.