Bento Grid

---
name: bento-grid
description: Apply the Bento Grid visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Bento Grid, mentions bento box layout, bento UI, apple bento, or describes mosaic of unequal rounded tiles, one idea per tile, mixed tile sizes (1x1, 2x1, 2x2) — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Bento Grid Design System

Features arranged as a dense mosaic of unequal rounded tiles — like a bento box — each tile a self-contained mini-poster with one stat, visual, or claim. Popularized by Apple event slides and adopted across SaaS.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Bento Grid.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (bento box layout, bento UI, apple bento, feature grid), or describes its traits: mosaic of unequal rounded tiles; one idea per tile; mixed tile sizes (1x1, 2x1, 2x2); soft neutral canvas; per-tile accent moments.

## Design tokens

### Color palette

- Neutral canvas: `#fafafa` (--color-bg)
- Default tile fill: `#ffffff` (--color-surface)
- Contrast tiles (1–2 per grid): `#18181b` (--color-surface-dark)
- Primary text: `#18181b` (--color-text)
- Supporting text: `#71717a` (--color-text-muted)
- Accent for stats, icons, and one gradient tile: `#2563eb` (--color-accent)
- 1px tile borders: `#e4e4e7` (--color-border)

### Typography

- Display / headings: Plus Jakarta Sans (fallback: -apple-system, Segoe UI, sans-serif)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 800, line-height 1.1, letter-spacing -0.02em
- Body: line-height 1.55, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64, 96 — Uniform grid gap (16–24px) is sacred; inside tiles, padding 24–32px with content pushed to edges for poster-like composition.
- Border radius: md 16px, lg 24px, pill 999px — Every tile shares the same radius; consistency makes the mosaic.
- Border treatment: 1px solid #e4e4e7 — Hairline borders on light tiles; dark and gradient tiles go borderless.

### Shadows

- tile: `0 1px 3px rgba(0, 0, 0, 0.05)` — Resting tiles — barely present
- tile-hover: `0 8px 24px rgba(0, 0, 0, 0.08)` — Hovered interactive tiles

### Layout

- Max content width: 1200px
- CSS Grid with explicit spans: mix 1x1, 2x1, 1x2, 2x2 tiles in a 3–4 column track
- One dark tile and one accent/gradient tile per grid as focal points
- Grid collapses to single column on mobile, preserving tile order by importance

### Effects

- One tile may hold a subtle animated gradient or looping product clip
- Oversized stat numerals (72–120px) clipped by tile edges for drama

### Motion

- Easing: cubic-bezier(0.32, 0.72, 0, 1); durations 150ms / 250ms / 400ms
- Tiles fade-up with 50ms stagger following grid order
- Hover lifts tile 2px with deepened shadow
- In-tile visuals may loop; the grid itself never moves

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-surface-dark: #18181b;
  --color-text: #18181b;
  --color-text-muted: #71717a;
  --color-accent: #2563eb;
  --color-border: #e4e4e7;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-tile: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-tile-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
  --border-default: 1px solid #e4e4e7;
  --font-display: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --text-base: 16px;
  --leading-heading: 1.1;
  --leading-body: 1.55;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;800&family=Inter:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Clean 64px bar, wordmark left, pill CTA right, hairline bottom border
- **Hero:** Short centered headline block, then immediately the bento grid as the main event
- **Card:** The tile: white or dark fill, 16–24px radius, hairline border, one composed idea — stat, icon+claim, or cropped visual
- **Button (primary):** Dark (#18181b) fill, white text, pill, medium weight
- **Button (secondary):** White fill, hairline border, dark text, pill
- **Form fields:** White, hairline border, 12px radius; focus ring accent at 30%

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The grid itself: a gap-consistent mosaic of 16–24px-radius tiles in deliberately unequal sizes, where each tile is composed like a tiny poster with one oversized number, phrase, or visual. Spend boldness here; keep everything else quiet.

## Do

- Give every tile exactly one idea and compose it like a poster
- Vary tile sizes deliberately — uniform grids read as galleries, not bentos
- Keep one dark tile and one color moment per grid for rhythm
- Keep the gap identical everywhere; it is the grid's signature

## Don't

- Don't put paragraphs in tiles — a tile holds a stat, a phrase, or a visual
- Don't use more than two fill treatments beyond white (one dark, one accent)
- No mismatched radii or gaps between tiles
- Don't make every tile interactive; most are display-only

## Accessibility notes

- Text #18181b on white and white on #18181b both pass AAA; muted #71717a on white is ≈4.7:1 — AA for normal text, keep sizes ≥14px
- Tile reading order must match DOM order when the grid collapses on mobile
- Interactive tiles need whole-tile focus states, not just inner links

## Reference sites

- Apple Events: https://www.apple.com/apple-events
- Bento.me: https://bento.me
- CRED: https://cred.club

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip bento-grid.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/bento-grid.json

Settings → Capabilities → Skills → Upload skill → bento-grid.zip