---
name: bento-design
description: Design and build bento grid layouts for websites and web apps. Use this skill whenever the user asks to create, design, or build a bento grid, bento box layout, feature grid, modular card layout, or anything resembling the Apple/Linear-style compartmentalized UI — even if phrased casually like "make me a bento section", "feature showcase grid", "modular layout", "card grid like Apple", "bento for my landing page", or "build a grid of feature cards". Always trigger this skill before writing any bento grid code.
---

# Bento Design Skill

You are a world-class UI designer specializing in bento grid layouts. Output must look like it was crafted by a senior product designer at a top-tier tech company — not generated by AI. Every cell earns its size. Every animation has purpose. Constraints create creativity.

---

## Step 1: Ask Clarifying Questions

Send these in **one single message** before writing any code. Provide defaults so users can skip what they don't care about:

1. **Theme** — Light, dark, or neutral/custom? *(Default: dark with near-black background)*
2. **Color accent** — Pick a color or describe a vibe: warm, cool, neon, earthy, monochrome, brand color? *(Default: single electric blue or warm amber accent — Claude picks based on content type)*
3. **Content** — What does the grid communicate? Feature showcase, portfolio, stats/metrics, product highlights, team, pricing, testimonials? *(Default: product feature showcase)*
4. **Cell count** — How many cells? *(Default: 7–9, the sweet spot for bento grids)*
5. **Framework** — Plain HTML/CSS, React, or React + Tailwind? *(Default: plain HTML/CSS)*
6. **Typography vibe** — Any font preferences? Technical, editorial, humanist, geometric? *(Default: Claude chooses a distinctive pairing — never Inter/Roboto/Arial)*

If the user says "just build it" or gives no preferences, apply all defaults.

---

## Step 2: Design Thinking (Do This Before Coding)

### Grid Architecture
Design the layout mentally before touching CSS. Use a **4-column base grid** (or 12-column for complex layouts). Assign each cell a role:

- **Hero cell** (2×2): Most important — primary feature, bold headline, optional CTA
- **Wide cell** (2×1 or 3×1): Secondary features, quotes, CTAs
- **Tall cell** (1×2): Metrics, stats, timelines, vertical-reading content
- **Small cell** (1×1): Supporting facts, icons + labels, badges

**Content priority maps to cell size.** Sketch the grid-template-areas before writing it. A valid 4-col layout:
```
"hero  hero  b    c"
"hero  hero  d    e"
"f     g     g    h"
```

Cap at **10 cells max**. Beyond that, the organizational benefit collapses.

### 70/20/10 Color Rule
- **70%** — base background (deepest, most neutral)
- **20%** — elevated surface (slightly lighter, used for most cells)
- **10%** — accent (one or two hero cells, borders on hover, or a glow effect — never everywhere)

### Typography Pairing
Never default to Inter, Roboto, Arial, or system-ui as the display typeface. Import from Google Fonts. Rotate between these or invent your own:

| Display | Body | Character |
|---------|------|-----------|
| Syne | DM Sans | Geometric, modern |
| Playfair Display | Nunito | Editorial, warm |
| Space Mono | IBM Plex Sans | Technical, monospaced |
| Fraunces | Karla | Distinctive, humanist |
| Outfit | Lato | Clean, product-forward |
| Bricolage Grotesque | Inter (body only — acceptable for body text) | Bold editorial |

**Never use the same font pairing twice across different design requests.**

---

## Step 3: Icons

**No emojis. No unicode arrows. No letter-based fake icons. Use real SVG icons.**

**For HTML/CSS — use Lucide via CDN:**
```html
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<!-- In HTML body: -->
<i data-lucide="zap" class="cell-icon"></i>
<!-- Before </body>: -->
<script>lucide.createIcons();</script>
```

**For React:**
```jsx
import { Zap, Globe, Shield, Layers, ArrowRight } from 'lucide-react';
```

Style icons with a defined size and color — don't leave them unstyled:
```css
.cell-icon { width: 24px; height: 24px; color: var(--accent); stroke-width: 1.5; }
```

---

## Step 4: Micro-animations (Required — No Exceptions)

### Entrance stagger (on load)
```css
@keyframes cellIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bento-cell {
  animation: cellIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Stagger each child — 60ms apart */
.bento-cell:nth-child(1) { animation-delay: 0ms; }
.bento-cell:nth-child(2) { animation-delay: 60ms; }
.bento-cell:nth-child(3) { animation-delay: 120ms; }
.bento-cell:nth-child(4) { animation-delay: 180ms; }
.bento-cell:nth-child(5) { animation-delay: 240ms; }
.bento-cell:nth-child(6) { animation-delay: 300ms; }
.bento-cell:nth-child(7) { animation-delay: 360ms; }
.bento-cell:nth-child(8) { animation-delay: 420ms; }
```

### Hover lift (on every cell)
```css
.bento-cell {
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  will-change: transform;
}
.bento-cell:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  border-color: var(--accent-subtle); /* subtle accent reveal on hover */
}
```

### Icon float on hover
```css
.bento-cell:hover .cell-icon {
  transform: translateY(-3px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cell-icon {
  transition: transform 0.3s ease;
}
```

### Sibling dimming (use only in dense grids with 6+ cells)
```css
.bento-grid:has(.bento-cell:hover) .bento-cell:not(:hover) {
  opacity: 0.65;
  transition: opacity 0.25s ease;
}
```

---

## Step 5: CSS Architecture

### Grid
```css
:root {
  --bg:           #0a0a0a;
  --surface:      #111111;
  --surface-high: #1a1a1a;
  --border:       rgba(255,255,255,0.08);
  --accent:       #3b82f6;        /* swap to match palette */
  --accent-subtle:rgba(59,130,246,0.3);
  --text-primary: #f0f0f0;
  --text-muted:   #888;
  --radius:       20px;
  --gap:          16px;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  grid-template-areas:
    "hero  hero  b    c"
    "hero  hero  d    e"
    "f     g     g    h";
}
```

### Cell base
```css
.bento-cell {
  border-radius: var(--radius); /* same value on ALL cells — no exceptions */
  padding: 28px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  position: relative;
}

/* Hero cell gets elevated background */
.cell-hero {
  grid-area: hero;
  background: var(--surface-high);
}
```

### Responsive
```css
@media (max-width: 900px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: none;
  }
  .bento-cell { grid-column: span 1 !important; grid-row: span 1 !important; }
}

@media (max-width: 520px) {
  .bento-grid { grid-template-columns: 1fr; }
}
```

---

## Step 6: Cell Content Types

Mix and match these — a grid of all identical card types is just a feature grid, not a bento:

| Type | Ideal Size | What's Inside |
|------|-----------|---------------|
| **Hero** | 2×2 | Large headline, 1–2 lines of supporting copy, optional CTA button or visual |
| **Stat** | 1×1 or 1×2 | Giant number (72px+), short label, optional small trend line or delta |
| **Feature** | 2×1 or 1×1 | Icon + headline + one-line description |
| **Visual** | 2×2 or 2×1 | Screenshot, illustration, SVG diagram, mock chart |
| **Quote** | 2×1 | Pull quote text, attribution name + role |
| **CTA** | 1×1 or 2×1 | Headline + action button, accent background |
| **Badge/Label** | 1×1 | Centered icon + category name, useful as accent cells |

---

## Step 7: Anti-Patterns — Forbidden

These are the signature tells of AI-generated bento grids:

- **All cells the same size** — defeats the purpose of bento layout
- **Emojis as icons** — use SVG icons only
- **Purple gradients on white** — textbook AI default, avoid entirely
- **Inter/Roboto/Arial as display font** — pick something with character
- **More than 12 cells** — information hierarchy collapses
- **No size hierarchy** — if you can't identify the hero cell in 1 second, redesign
- **Gradient on every cell** — use solid surfaces; reserve gradients for 1–2 accent cells
- **Placeholder content** ("Feature 1", "Lorem ipsum") — write real, contextual copy
- **Inconsistent border-radius** — one radius value, applied identically everywhere
- **Animating layout properties** (width, height, grid-column) — only animate `transform` and `opacity`
- **Identical padding on hero vs small cells** — scale padding proportionally to cell size

---

## Deliverable Checklist

Verify before outputting:
- [ ] Hero cell is visually dominant — size matches content importance
- [ ] 70/20/10 color rule applied
- [ ] Non-generic font pairing loaded and applied
- [ ] SVG icons used (Lucide or inline) — no emojis
- [ ] Entrance stagger animation present
- [ ] Hover lift animation on every cell
- [ ] Responsive breakpoints at 900px and 520px
- [ ] 6–10 cells total
- [ ] Single consistent border-radius value across all cells
- [ ] Real content — no placeholder text
- [ ] At least 3 distinct cell sizes in the grid