Apple Bento Grid

Overview

Generate self-contained HTML files that render Apple-inspired bento card grids. Each output is a single HTML file with inline CSS — no dependencies except Google Fonts. Cards fill a tight CSS grid with zero visible row gaps, ready for Playwright screenshot export at 2x resolution.

Workflow

Read the design system: Read design-system.md completely before generating any bento grid. It contains all design tokens, card components, layout templates, and the critical zero-gap grid technique.
Gather the user's content — what stats, milestones, categories, and quotes to showcase
Choose a layout — pick from the 3 layout templates based on card count and orientation
Compose cards — select card types and fill with the user's content
Generate the HTML — produce a single self-contained HTML file
Screenshot (optional) — use the Playwright script to capture PNGs at 2x

Output Format

Always produce a single self-contained HTML file with:

<!DOCTYPE html> + <html lang="en">
Google Fonts <link> tags in <head>
All CSS in a single <style> block
All content in <body> — no JavaScript needed

Card Types Available

Card	Use For	Key Feature
Hero	Taglines, headlines	Gradient top-border, spans 2 rows
Stat	Numbers + labels	Color-coded accent per category
Category	Grouped items (phases, teams, quarters)	Color label + subtitle + pill tags
Bar Chart	Growth / comparison over time	Gradient bars, header badge
Badge	Tool attribution, featured callout	Icon pill + stat number
Quote	Mission statement, testimonial	Dark bg, white text, green `<em>`
Highlight	Hero number (3x, 10x, 100%)	Full-gradient background

Layout Templates

Template	Columns	Width	Aspect Ratio	Best For
A: Horizontal	4-col	1200px	52/25	12-16 cards, slides
B: Horizontal	3-col	1100px	52/22	8-10 cards, focused
C: Vertical	2-col	600px	none (content)	8-14 cards, social

Critical: Zero-Gap Grid Rules

These 5 rules are mandatory for Apple-like appearance. See design-system.md Section 2 for details.

NEVER set align-items: start — default stretch fills cells
Use aspect-ratio on horizontal layouts to lock container shape
Rows: 1fr for horizontal, auto for vertical
Gap: 6px (not 8px)
Every grid cell must be occupied — no empty cells

Screenshot Export

Use the Playwright script at scripts/screenshot.mjs to capture pixel-perfect PNGs.

cd scripts
npm install
npx playwright install chromium
node screenshot.mjs

Edit the pages array in screenshot.mjs to point to your HTML files. Each entry needs: file (HTML path), output (PNG path), viewportWidth (match grid width).

Customization Checklist

Gather content — stats, categories, milestones, quotes
Choose layout — 4-col, 3-col, or 2-col
Name grid areas — readable names matching content
Select card types — Hero, Stat, Category, Chart, Badge, Quote, Highlight
Assign accent colors — one per category, max 3-4 accents
Set dimensions — viewport width matches grid width
Lock aspect ratio — horizontal only; omit for vertical
Verify zero-gap — no align-items: start, all cells occupied, gap 6px
Scale for orientation — vertical gets smaller fonts, padding, radius
Screenshot — Playwright at 2x, viewport matches grid width

Reference Files

design-system.md — Complete design tokens, card CSS/HTML, layout templates, and skeleton
scripts/screenshot.mjs — Playwright screenshot capture script

apple-bento-grid