Style: Bento Grids. Type: General. Keywords: Apple-style, modular, cards, organized, clean, hierarchy, grid, rounded, soft. Primary Colors: Off-white #F5F5F7, Clean White #FFFFFF, Text #1D1D1F. Secondary Colors: Subtle accents, soft shadows, blurred backdrops. Effects & Animation: Hover scale (1.02), soft shadow expansion, smooth layout shifts, content reveal. Best For: Product features, dashboards, personal sites, marketing summaries, galleries. Do Not Use For: Long-form reading, data tables, complex forms. Light Mode: ✓ Full. Dark Mode: ✓ Full. Performance: ⚡ Excellent. Accessibility: ✓ WCAG AA. Mobile-Friendly: ✓ High. Conversion-Focused: ✓ High. Framework Compatibility: CSS Grid 10/10, Tailwind 10/10. Era/Origin: 2020s Apple/Linear. Complexity: Low. AI Prompt Keywords: Design a Bento Grid layout. Use: modular grid system, rounded corners (16-24px), different card sizes (1x1, 2x1, 2x2), card-based hierarchy, soft backgrounds (#F5F5F7), subtle borders, content-first, Apple-style aesthetic.. CSS/Technical: display: grid, grid-template-columns: repeat(auto-fit, minmax(...)), gap: 1rem, border-radius: 20px, background: #FFF, box-shadow: subtle. Implementation Checklist: ☐ Grid layout (CSS Grid), ☐ Rounded corners 16-24px, ☐ Varied card spans, ☐ Content fits card size, ☐ Responsive re-flow, ☐ Apple-like aesthetic. Design System Variables: --grid-gap: 20px, --card-radius: 24px, --card-bg: #FFFFFF, --page-bg: #F5F5F7, --shadow: soft.