Bento Grid

Published on 2025-12-28 03:15:38

The "Bento Grid" style derives its name from the traditional Japanese lunchbox (Bento Box), where various dishes are neatly compartmentalized within a single container. In digital design, while it shares DNA with Microsoft's early Metro UI (Windows 8 Tiles), the modern Bento wave was largely propelled by Apple's promotional videos (feature summary slides), iOS Control Center, and Widget designs. Recently, popularized by tools like Bento.me and Linear, it has evolved into a standard paradigm for feature showcasing. It represents a philosophy of modularity, flat hierarchy, and content-first design. Visual Characteristics Modular Grid: The soul of this style. The page is divided into a strict grid system, with content encapsulated in cards (cells) of varying aspect ratios (e.g., 1x1, 2x1, 2x2). While card sizes differ, the gap between them remains mathematically consistent, creating a satisfying sense of order. Radius & Smoothing: The Bento style rejects sharp corners. All cards feature generous border radii (typically 20px-32px), often utilizing iOS-style "continuous curvature" (Squircle) to make the interface feel softer and more approachable. Density & Hierarchy: Each "Bento cell" is a self-contained microcosm of information. One cell might hold a single bold image, another a key metric, and another an interactive toggle. Importance is implied by size (the largest cell is the hero feature), allowing users to scan content like a display cabinet without cognitive overload.

Style System

**Role:** You are a Senior Frontend Architect and UI/UX Engineer with a specialization in Apple-inspired design systems and modular grid layouts. You have an obsession for "pixel-perfect" typography, smooth interactions, and performant CSS architectures. **Task:** Develop a complete, single-file landing page using the **Bento Grid (Apple Style)** aesthetic. **[CONFIGURATION]** - **[STYLE_NAME]:** Bento Grid / Apple Aesthetic - **[INDUSTRY]:** Next-Gen Productivity & Knowledge Base - **[PROJECT_NAME]:** GRID_OS - **[TECH_STACK]:** HTML5 + Modern CSS3 (CSS must be embedded within `<style>` tags. No external frameworks like Tailwind or Bootstrap). - **[PAGE_STRUCTURE]:** Header, Hero, Trust Bar, Feature Grid (The Core Bento Layout), Workflow, Metrics, Testimonials, Pricing, Multi-column Footer. **Technical Requirements:** 1. **Global Design Tokens (`:root`):** - **Palette:** Apple-style neutrals. `--bg-body: #F5F5F7;` (Off-white), `--bg-card: #FFFFFF;`, `--text-main: #1D1D1F;`, `--text-secondary: #86868B;`. - **Accent:** `--accent-color: #0071E3;` (Apple Blue) or a soft gradient `--accent-gradient: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%);`. - **Geometry:** `--radius-sm: 12px;`, `--radius-md: 24px;`, `--radius-lg: 32px;`. - **Depth:** `--shadow-sm: 0 2px 8px rgba(0,0,0,0.04);`, `--shadow-md: 0 12px 24px rgba(0,0,0,0.06);`. - **Typography:** `--font-main: 'SF Pro Display', 'Inter', -apple-system, sans-serif;`. 2. **Core Layout Logic (CSS Grid):** - The entire page layout should feel modular. - **The Bento Grid:** The "Feature Grid" section must use `display: grid` with `grid-template-columns: repeat(4, 1fr)`. - Use `grid-column: span x` and `grid-row: span y` to create the bento box effect where cards have different sizes (1x1, 2x1, 2x2, 4x2) but fit perfectly together. - Cards must have `overflow: hidden` to contain inner images/media perfectly. 3. **Advanced Visual Effects:** - **Frosted Glass:** The Header and floating UI elements must use `backdrop-filter: blur(20px)` and `background: rgba(255, 255, 255, 0.7)`. - **Squircle Smoothing:** If possible, simulate squircle corners using `clip-path` or standard border-radius with careful anti-aliasing. - **Micro-Interactions:** On `:hover`, Bento cards should slightly scale (`transform: scale(1.02)`) and shadows should deepen. Text content inside should shift slightly. - **Subtle Gradients:** Use ultra-subtle, barely-there mesh gradients inside specific cards to break the monotony of white. 4. **Scroll-Driven Animations:** - Use `animation-timeline: view()` with a simple reveal animation. - As the user scrolls, the Bento cards should stagger in (translate Y + opacity fade) for a premium feel. 5. **Custom Scrollbar (Minimalist):** - Target `::-webkit-scrollbar`. - Width: `8px`. - Track: Transparent. - Thumb: A rounded pill shape, colored `--text-secondary` with `opacity: 0.5`, mimicking the native macOS scrollbar behavior. 6. **Section Details:** - **Hero:** A split layout. Large text on the left, and a "Mini Bento" visual on the right representing the workspace interface. - **Metrics:** A horizontal scrollable bento row or a dense 4-column grid displaying big numbers. - **Pricing:** Three cards. The "Pro" card should have a soft, colorful border or shadow glow to stand out, maintaining the clean aesthetic.